HTML5 Range Area Charts

Range Area Charts are same as Area Charts with the only difference that y has two values (Low and High). It is plotted by coloring the area between upper and lower bounds of DataPoint’s y value.

Cannot be combined with: Doughnut, Pie, Bar, Stacked Bar charts.

Range Area Chart Specific Properties

Applies To Attribute Type Default Options/Examples
dataSeries fillOpacity Number .7 .2,.4,1 etc
dataSeries/ dataPoint markerType String “circle” “none”, “circle”, “square”, “cross”, “triangle”
dataSeries/ dataPoint markerColor String dataSeries Color “red”,”#1E90FF”..
dataSeries/ dataPoint markerBorderColor String dataSeries Color “red”,”#1E90FF”..
dataSeries/ dataPoint markerSize Number auto 5,10..
dataSeries/ dataPoint markerBorderThickness Number 0 4,7..
dataSeries lineThickness Number 2 4,7..

Basic Range Area Chart

Try Editing The Code

Range Area Chart With Additional Customization

Try Editing The Code

  Integrations:    

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

4 Comments

  1. Pingback: CanvasJS v1.5 with Stock Charts, Range Charts & Export as Image Feature

  2. Vlad says:

    Is it possible to set mouse events handlers for the whole area, not just dataPoints? Right now the events are fired for the range point only.

      • Vlad says:

        Hi Anjali,

        Thanks for your answer. May be there is some sort of workaround for this problem? For example, add a click listener for the entire chart, read the coordinates of the click event and find the topmost area in these coordinates? What do you think?

        Thanks,
        Vlad

If you have any questions, please feel free to ask in our forums. Ask Question