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 0 4,7..

Basic Spline Chart

Try Editing The Code

Spline 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

22 Comments

  1. Patrice says:

    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. Walter says:

    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. Vadim says:

    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. manish2015kumar says:

    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. may saghira says:

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

  6. Niks says:

    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

    • Naveen Venugopal says:

      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. Max says:

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

  9. Sam says:

    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?

  11. Sam says:

    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?

    • Vishwas says:

      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

  12. Deepankar Biswas says:

    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
    )

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