HTML5 & JS Spline 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 1 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.



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

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?

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.