HTML5 & JS Spline Area Charts

Spline Area is much like area chart except that its envelope is a smooth curve.

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

Important Properties

Applies To Attribute Type Default Options/Examples
dataSeries/ dataPoint markerSize Number auto. 5,10..
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 markerBorderThickness Number 0 4,7..
dataSeries lineThickness Number 2 4,7..
dataSeries fillOpacity Number .7 .2,.4,1 etc

Basic Spline Area Chart

Try Editing The Code

Spline 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

  2. marissajmc says:

    Is it possible to remove the gaps either side of the chart – making the first and last datapoints sit flush with the Y axis?

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