JavaScript Step Area Chart

The Step Area chart provided by Shield UI’s as part of their HTML5 JavaScript library may be referred to as a functional and visual variation of the Step Line chart. We can see a typical look of the chart on the next image:

 As we can see, the area between the data points connector line and the X axis is filled- typically for an area chart type. And of course we retain the Step Line drawing mode. As with any other Shield UI’s chart we are not limited to the number of data series displayed on the Step Area chart as well.

On the next image we can see multiple series visualization:

The semi transparent fill of series B allows the lower values of series A to be visible so that users don’t have to care about ordering the series. Furthermore- the series remain visible also when the users zoom in for more detail as shown on the next image:

 In addition to these functionalities we also may display the axis marker both with or without zoom using code like the following one:

    tooltipSettings: {
      axisMarkers: {
        enabled: true,
        mode: 'xy',
        width: 3,
        zIndex: 3,
        color: 'red'
      }
    },

And the visual result will be like the one on the next image:

This Shield UI’s Step Area chart also supports local and remote data binding, exporting the chart’s image to a file and printing. As we have already seen multiple data series can be easily added and viewed by the users.

You can look and try the online live example for the Shield UI Step Area Chart here: Live Example

In addition you may look at the online documentation, tutorials and code samples for the Step Area Chart here: Documentation and examples