JavaScript Spline Area Chart

The Spline Area is another chart of the rich Shield UI HTML5 JavaScript charting library. Data values on this type of chart are visualized by means of colored areas with smoothed boundaries. A typical view of the chart is shown on the image below:

 

The Shield UI Spline Area Chart allows user to display one or more data series, containing both positive and negative values. For enhanced user experience we may display each of the data point values by enabling the dataPointText property as shown below:

seriesSettings: {
 spline: {                       
         dataPointText: {
                 enabled: true
  }
 }
},

The result of enabling the dataPointText property can be seen on the next image:

Similar to the Bar Chart type, the Spline Area Chart can also be reversed and the values displayed along the X instead of the Y axis. To do so we need to enable the isInverted property:

isInverted: true,

Having reversed the chart we will have a result similar to the image below:

Since our sample chart contains negative values, when in reversed mode, they will be displayed left from the 0 instead of below it when in normal mode. Users can add one or more additional Y axis with independent labels and styling so that data representation is even more enhanced and comprehensive.
 The code provided below shows us how to add additional Y axes:

    axisY: [{
      min: -100,
      max: 100,
      title: {
        text: "Additional Y Axis",
        style: {
          color: "#4DB0F5"
        }
      },
      axisTickText: {
        style: {
          color: "#4DB0F5"
        }
      }
    }, {
      min: 0,
      max: 100,
      title: {
        text: "Additional Y Axis 2",
        style: {
          color: "#FFC500"
        }
      },
      swapLocation: true,
      axisTickText: {
        style: {
          color: "#FFC500"
        }
      }
    }, {
      min: -25,
      max: 25,
      title: {
        text: "Additional Y Axis 3",
        style: {
          color: "#FF1800"
        }
      },
      swapLocation: true,
      axisTickText: {
        style: {
          color: "#FF1800"
        }
      }
    }],

The visual result is shown on the image below:

We can see, that the different Y axes have different ticks. This is because we have set explicit min and max values. We may use this approach in order to fine tune each of the Y axes.

Besides these more specific features, the Spline Area Chart offers the typical for the Shield UI charting library functionalities. Amongst these as usual are zooming, panning, binding to local and remote data, export and printing.

A live editable example with remarks for the Shield UI Spline Area Chart can be found here: Live Example

Additional resources and code samples for the Inversed Bar Chart can be found here: Documentation and examples