HTML5 & JS Spline Charts

Spline Charts are much like line charts except that the dataPoints are connected using smooth curves.

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




Important Properties

Applies To Attribute Type Default Options/Examples
dataSeries lineThickness String 2 4,6..
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..

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 22

  1. Spline is nice but leads to unwanted bumps in some case. For instance on the second graph above, there is a bump after june when july is actuall bellow june. One would expect to have the graph maxed at june and get down smoothly to july. I guess this is due to spline standard algoritm but is there a way to parametrize this so it lookks more like september everywhere…

  2. My boss made me the same comment. I guess i’ll have to work with the line chart instead to avoid questions. It’s not so visually attractive though. A parameter, if possible, would be great.

  3. Sometimes line create loops or horizontal ‘S’. This make chart not understandable.
    Usually this happens when chart has many points at the beginning, nothing a center and many points at the end.
    Try following data for chart on this page:
    data: [
    {
    type: “spline”,
    indexLabelFontColor: “orangered”,
    dataPoints: [
    { x: new Date(2012, 00, 1, 12, 01), y: 1352 },
    { x: new Date(2012, 01, 1, 12, 02), y: 1514, indexLabel: “Exams” },
    { x: new Date(2012, 01, 1, 12, 03), y: 1321 },
    { x: new Date(2012, 01, 1, 12, 04), y: 1163 },
    { x: new Date(2012, 01, 1, 12, 05), y: 950 , indexLabel: “Holiday Season”},
    { x: new Date(2012, 01, 1, 12, 06), y: 1201 },
    { x: new Date(2012, 06, 1), y: 1186 },
    { x: new Date(2012, 07, 1), y: 1281, indexLabel: “New Session” },
    { x: new Date(2012, 08, 1), y: 1438 },
    { x: new Date(2012, 09, 1), y: 1305 },
    { x: new Date(2012, 10, 1), y: 1480, indexLabel: “Terms” },
    { x: new Date(2012, 11, 1), y: 1391 }
    ]
    }

  4. Is this possible that if i don’t have any data for a month i can skip that month name from x axis.Like if i don’t have data for Feb and Mar i don’t want to show feb and Mar on x axis.

  5. Hi,
    is that possible to have the type of line : dash line ?
    i really need to have it.
    thanks.

  6. Hi,
    Everything works fine except curve of chart at some points. For example below points

    window.onload = function () {
    var chart = new CanvasJS.Chart(“chartContainer”,
    {
    title: {
    text: “Sample iMu Chart Canvas JS”
    },
    creditHref : “”,
    theme :’theme1′,
    axisX:{
    title: “iMu Match %”,
    titleFontSize : 14,
    labelFontFamily :”Open Sans”,
    gridThickness:0,
    interval: 25,
    maximum: 100,
    minimum: 0,
    includeZero: true,
    suffix:”%”,
    labelFontSize : 15,
    labelAngle: -30
    },
    axisY:
    {
    lineThickness:0,
    tickThickness:0,
    valueFormatString: “”,
    labelFontSize : 0,
    labelFontColor :”white”,
    title: “”,
    titleFontSize : 0,
    gridThickness:0,
    labelFontFamily :”Open Sans”,
    maximum: 12,
    minimum: 0,
    includeZero: true,
    suffix:”%”
    },

    data: [
    {
    type: “splineArea”,
    color :’#ccffff’,
    markerSize : 0,
    mouseout: function(e){
    onMouseOut(e);
    },
    dataPoints: [{“x”:0,”y”:9,”tooltipContent”:”Matching 0% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:1,”y”:1,”tooltipContent”:”Matching 1% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:37,”y”:1,”tooltipContent”:”Matching 37% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:38,”y”:1,”tooltipContent”:”Matching 38% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:39,”y”:3,”tooltipContent”:”Matching 39% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:40,”y”:2,”tooltipContent”:”Matching 40% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:42,”y”:3,”tooltipContent”:”Matching 42% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:43,”y”:1,”tooltipContent”:”Matching 43% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:45,”y”:1,”tooltipContent”:”Matching 45% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:46,”y”:2,”tooltipContent”:”Matching 46% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:47,”y”:1,”tooltipContent”:”Matching 47% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:48,”y”:2,”tooltipContent”:”Matching 48% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:49,”y”:1,”tooltipContent”:”Matching 49% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:50,”y”:2,”tooltipContent”:”Matching 50% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:51,”y”:1,”tooltipContent”:”Matching 51% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:52,”y”:1,”tooltipContent”:”Matching 52% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:57,”y”:3,”tooltipContent”:”Matching 57% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:60,”y”:1,”tooltipContent”:”Matching 60% : Member 2.63157894737%”,”cursor”:”pointer”},{“x”:61,”y”:1,”tooltipContent”:”Matching 61% : Member 2.63157894737%”,”cursor”:”pointer”}],
    click: function(e){
    },
    }
    ]
    });

    chart.render();
    }

    for above it shows start point out of the x-axis and moved to left side.

    any idea how to solve this?

    Thanks

    • First datapoint is not out of the x-axis, it is at (0,9) but the interpolated datapoints is on negative x-axis, so the curve connecting first two points is on negative x-axis. If you change chart type to line you can see the difference. Since you are setting interval as 25, you can set minimum in AxisX to negative say -2 or -1. Which make 0% to shift to right and also negative label is not shown.

  7. Hello! Tell me please) Is there function that splin is disappeare by clicking on it? Thanx!
    P.S.Sorry for my English)

  8. Hi,

    I have a question, sometimes the spline line goes out of the graph, this occurs when the datapoints are inside the chart, but the spline connecting line loops radically.

    An example is here:

    data: [
    {
    type: “spline”,

    dataPoints: [
    { x: new Date(2012, 00, 1), y: 0 },
    { x: new Date(2012, 01, 1), y: 1999 },
    { x: new Date(2012, 02, 1), y: 1999 },
    { x: new Date(2012, 03, 1), y: 1163 },
    { x: new Date(2012, 04, 1), y: 950 },
    { x: new Date(2012, 05, 1), y: 1201 },
    { x: new Date(2012, 06, 1), y: 1186 },
    { x: new Date(2012, 07, 1), y: 1281 },
    { x: new Date(2012, 08, 1), y: 1438 },
    { x: new Date(2012, 09, 1), y: 1305 },
    { x: new Date(2012, 10, 1), y: 1480 },
    { x: new Date(2012, 11, 1), y: 1291 }
    ]
    }

    ]

    So with that you can see it loops out the bottom.

    This problem happens with us a lot on this example also:

    data: [
    {
    type: “spline”,

    dataPoints: [
    { x: new Date(2012, 00, 1), y: 10 },
    { x: new Date(2012, 01, 1), y: 10 },
    { x: new Date(2012, 02, 1), y: 10 },
    { x: new Date(2012, 03, 1), y: 10 },
    { x: new Date(2012, 04, 1), y: 500 },
    { x: new Date(2012, 05, 1), y: 98 }
    ]
    }

    ]

    Anyone have any idea on this?

  9. Hi, I asked a question about the spline bar going out of the graph in some instances, no-one has responded so far, I asked on the 18th of December.

    Just wondering if anyone could have a look?

    Also, can I add padding to the graph, so if I have a spline, add some padding so the graph draws smaller, so I can insure it won’t loop out as a quick fix?

    • Sam,

      Thanks for reporting the bug. We are aware of this and our team is working on it. For now you can work-around this problem by setting maximum as shown in example

  10. A simple thing.. was working and doesnt work now…

    Here is the data format I encode and send.. the chart container draws up.. but the spline doesnt come.. the values also get plotted on y axis

    [interactions] => Array
    (
    [0] => Array
    (
    [label] => Jun 19
    [y] => 132
    )

    [1] => Array
    (
    [label] => Jun 20
    [y] => 193
    )

    [2] => Array
    (
    [label] => Jun 21
    [y] => 176
    )

    [3] => Array
    (
    [label] => Jun 22
    [y] => 161
    )

    [4] => Array
    (
    [label] => Jun 23
    [y] => 153
    )

    [5] => Array
    (
    [label] => Jun 24
    [y] => 148
    )

    [6] => Array
    (
    [label] => Jun 25
    [y] => 111
    )

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.