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 Chart

Try it Yourself by Editing the Code below.


Spline Chart With Additional Customization

Try it Yourself by Editing the Code below.





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

Comments 4

  1. 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