HTML5 & JS Line Charts

A line chart is a type of chart which displays information as a series of dataPoints connected by straight line segments. Each dataPoint has x variable determining the position on the horizontal axis and y variable determining the position of the vertical axis.

Markers are automatically disabled when there are large number of dataPoints. You can override this behaviour by manually setting markerSize to a value greater than zero.

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




Line Chart Specific Properties

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

Basic Line Chart

Try it Yourself by Editing the Code below.


Line 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 57

  1. For second graph(above), jan should strat exactly from x & y axis corner(from yaxis line), how to make that… thanks in advance…

  2. Hello,
    I need to plot date on x axis. But only those dates which have some data in it. Currently all dates get populated in the x-axis. Please help. Below is the code:

    window.onload = function () {
    var chart_1= new CanvasJS.Chart(“chartContainer”, {
    title:{
    fontSize: 20,
    fontColor:’#0095da’,
    fontWeight:’normal’,
    text: ‘HW’
    },
    exportEnabled: true,
    exportFileName: ‘HW’,
    zoomEnabled:false,
    axisY:{
    interlacedColor: “#fbfbfb”,
    tickLength: 1,
    tickThickness: 1,
    //suffix: ‘m’,
    labelFontSize: 12,
    labelFontColor:’#0095da’

    },
    toolTip:{
    shared: true,
    content: function(e){
    var body = new String;
    var head ;
    for (var i = 0; i < e.entries.length; i++){
    var str = " ” + e.entries[i].dataSeries.name + “: “+ e.entries[i].dataPoint.y + “ ” ;
    body = body.concat(str);
    }
    head = “Date Time :“+ (parseDate(e.entries[0].dataPoint.x)) + ““;

    return (head.concat(body));
    }
    },
    axisX:{
    gridColor: “Silver”,
    tickColor: “silver”,
    valueFormatString: “DD-MM-YYYY hh:mm TT”,
    title:’Date Time’,
    titleFontSize: 17,
    //titleFontColor:’#0095da’,
    labelAngle: 97,
    labelFontSize: 12,
    labelFontColor:’#0095da’
    },
    data: [

    {
    type: “line”,
    lineThickness:3,
    showInLegend: true,
    name: ‘Height(m)’,
    color: “#00B74F”,
    dataPoints: [{ x : new Date(1415016180000) , y : 2.0 },{ x : new Date(1420093800000) , y : 2.0 },{ x : new Date(1420790940000) , y : 1.0 },{ x : new Date(1420877280000) , y : 2.0 },{ x : new Date(1421815440000) , y : 1.0 },{ x : new Date(1421818740000) , y : 2.0 }]

    },

    {
    type: “line”,
    lineThickness:3,
    showInLegend: true,
    name: ‘Weight(kg)’,
    color: “#0095C8”,
    dataPoints: [{ x : new Date(1415016180000) , y : 120.0 },{ x : new Date(1420093800000) , y : 142.0 },{ x : new Date(1420790940000) , y : 300.0 },{ x : new Date(1420877280000) , y : 100.0 },{ x : new Date(1421815440000) , y : 120.0 },{ x : new Date(1421818740000) , y : 142.0 }]

    }

    ]
    });
    chart_1.render();
    }

  3. is there any way to set label to Axis Y value. For example : i has a value y is 10, i want it to display in chart is “New York City”. Can i do that ({y : 10, LabelY : “New York City”}, {y : 20, LabelY : “Chicago”})

  4. window.onload = function () {
    var chart= new CanvasJS.Chart(“chartContainer”, {

    title:{
    text: “MultiSeries StepLine Chart”
    },

    axisX: {
    lineThickness: 2
    },

    data: [
    {
    type: “line”,

    dataPoints: [

    { label: 10, y: 14.00 },
    { label: 15, y: 14.50 },
    { label: 20, y: 14.75 },
    { label: 25, y: 16.30 }
    ]
    },
    {
    type: “line”,
    dataPoints: [

    { label: 20, y: 15.00 },
    {label: 25, y: 14.50 },

    ]
    }
    ]
    });
    chart.render();

    Can some one let me how how .js decides which points it going to render. Above graph is not getting rendered properly.

      • Hello Anjali Thanks For your reply It works. But if I use X instead of Label it plots point for which no data is available. My requirement is to plot only those points for which y coordinates are available.

          • Hello Anjali,
            Following is the actual grap which I m trying to render.

            var chart_1= new CanvasJS.Chart(“chartContainer_1”, {
            title:{
            fontSize: 20,
            fontColor:’#0095da’,
            fontWeight:’normal’,
            text: ‘graph one’
            },
            zoomEnabled:true,
            axisY:{
            interlacedColor: “#fbfbfb”,
            tickLength: 1,
            tickThickness: 1,
            labelFontSize: 12,
            labelFontColor:’#0095da’,
            minimum : 5.0

            },
            toolTip:{
            shared: true,
            content: function(e){
            var body = new String;
            var head ;
            for (var i = 0; i < e.entries.length; i++){
            var str = " ” + e.entries[i].dataSeries.name + “: “+ e.entries[i].dataPoint.y + “ ” ;
            body = body.concat(str);
            }
            head = “Date Time :“+ (e.entries[0].dataPoint.label) + ““;

            return (head.concat(body));
            }
            },
            axisX:{
            gridColor: “Silver”,
            tickColor: “silver”,
            //valueFormatString: “DD-MM-YYYY hh:mm TT”,
            title:’Date Time’,
            titleFontSize: 17,
            //titleFontColor:’#0095da’,
            labelAngle: 97,
            labelFontSize: 12,
            labelFontColor:’#0095da’
            },
            data: [

            {
            type: “line”,
            lineThickness:3,
            showInLegend: true,
            name: ‘Test Check For date wrapping(Number)’,
            color: “#FF6A13”,
            dataPoints: [{ label : ’20-02-2015 12:34 PM’ , y : 30.0 }]

            },

            {
            type: “line”,
            lineThickness:2,
            showInLegend: true,
            name: ‘another test wrapping date(Number)’,
            color: “#0095C8”,
            dataPoints: [{ label : ’20-02-2015 12:34 PM’ , y : 5000.0 }]

            }

            ]
            });
            chart_1.render();

            Now my requirement is plot only those dates for which reading are available. And it is possible that in a month user can inter 2 reading and in other he may enter 20 values.So I was using label. But now problem is that when I use label and for some dates if data is not available then it plots wrongly like previous example and if I use X then it plots some in between points . Hope U understand that I cannot use interval.

  5. Is there a way to assign multiple y axis points to 1 x axis? For example my x axis has temperatures (80 – 140 degrees) and my y axis has years (from 2002 – 2015). Some years have multiple temperatures recorded (7/21/2011, 11/17/2011 and 12/8/2011) whereas as years like 2010 have no data.

    I saw this example (http://jsfiddle.net/canvasjs/abaonktq/) but I would like the years (x axis) to be equidistant and the temperatures (y axis) to fit within – meaning some dots will be closer together, depending on how many readings were taken that year. Does this make sense?

    Thank you!!!

    • korgan,

      Here is an example that we have created. If this is not what you are looking for, please explain what you meant by “fit within”. Also let is know in which format you want to show x axis labels.

  6. CanvasJS is awesome and easy to use. Anyway, I have noticed if xValueType to be: “dateTime” (to use epoch timestamp), and if there is only ONE datapoint, the label on X axis will show 000ms instead of the actual time.
    The X axis labels will only show the proper time Only if you have more than one datapoint.

    Ie. X axis label will show 000ms, instead of ’10:40AM’.

    data: [
    {
    type: “line”,
    xValueType: “dateTime”,
    dataPoints: [
    { x: 1427845200000, y: 41.20 }
    ]
    }

  7. Hello,
    I want to have a double axis line. So, on the left has and axis and the right has a different axis line. I looked at the example above but it was a one axis graph. What I am trying to do is show kWh usage on one axis and the cost on the other axis.

    Thank you

  8. Hi. When I try to use canvasjs with 430 records/datapoints or less fetched from database, it works fine. However, when I am trying to use the line chart type for 1500+ record/datapoints. But it throws a internal server javascript error. Why is it so?

  9. How can i use range sliders with my canvas.js line graph? My task is to have five range sliders such that overall weight of the sliders is 100% and when user changes one slider, automatically others should also change such that their overall sum is 100% and this in turn should change the line graph automatically..Can anyone help me with this?

    • arhi,

      — “have five range sliders such that overall weight of the sliders is 100% and automatically others should also change such that their overall sum is 100% and this in turn should change the line graph automatically..”

      Requirement is totally not clear to us. Can you please explain a bit more. Any pictorial representation would also help.

  10. how to invert the Y axis? I wanna place the 0 on the top and go downward if the amount is raised

  11. i want to make diffrent colouring of specific area in line chart ,is it possible i want to immediate solutions

    • As of now it is not possible to have multiple colors for a single series. But you can try splitting a single series into multiple charts and assign colors as required.

  12. When trying to use a DateTime Y Axis, the time displayed in the axis is off by quite a few hours and doesn’t correspond to the data that is show. Using tooltips to show the true ‘Time’ value of a data point proves this.

  13. how i can bind my json data which i converted in array to datapoints: to make a line chart dynamic

  14. { type:line,dataPoints:[{ x:new Date(2000, 03, 1), y:32991 } ,{ x:new Date(2000, 04, 1), y:28933 } ,{ x:new Date(2000, 05, 1), y:27210 } ,{ x:new Date(2000, 06, 1), y:28821 } ,{ x:new Date(2000, 07, 1), y:48134 } ,{ x:new Date(2000, 08, 1), y:35039 } ,{ x:new Date(2000, 09, 1), y:30132 } ,{ x:new Date(2000, 10, 1), y:29398 } ,{ x:new Date(2000, 11, 1), y:2980 } ]},
    { type:line,dataPoints:[{ x:new Date(2000, 03, 1), y:22837 } ,{ x:new Date(2000, 04, 1), y:19430 } ,{ x:new Date(2000, 05, 1), y:28109 } ,{ x:new Date(2000, 06, 1), y:29204 } ,{ x:new Date(2000, 07, 1), y:21808 } ,{ x:new Date(2000, 08, 1), y:68404 } ,{ x:new Date(2000, 09, 1), y:59918 } ,{ x:new Date(2000, 10, 1), y:6660 } ,{ x:new Date(2000, 11, 1), y:28297 } ]},
    { type:line,dataPoints:[{ x:new Date(2000, 03, 1), y:15514 } ,{ x:new Date(2000, 04, 1), y:18113 } ,{ x:new Date(2000, 05, 1), y:18285 } ,{ x:new Date(2000, 06, 1), y:14293 } ,{ x:new Date(2000, 07, 1), y:11288 } ,{ x:new Date(2000, 08, 1), y:12648 } ,{ x:new Date(2000, 09, 1), y:3831 } ,{ x:new Date(2000, 10, 1), y:4721 } ,{ x:new Date(2000, 11, 1), y:182 } ]},
    { type:line,dataPoints:[{ x:new Date(2000, 03, 1), y:12971 } ,{ x:new Date(2000, 04, 1), y:40304 } ,{ x:new Date(2000, 05, 1), y:45114 } ,{ x:new Date(2000, 06, 1), y:30860 } ,{ x:new Date(2000, 07, 1), y:28598 } ,{ x:new Date(2000, 08, 1), y:29658 } ,{ x:new Date(2000, 09, 1), y:2929 } ,{ x:new Date(2000, 10, 1), y:1385 } ,{ x:new Date(2000, 11, 1), y:542 } ]},
    { type:line,dataPoints:[{ x:new Date(2000, 03, 1), y:72056 } ,{ x:new Date(2000, 04, 1), y:61408 } ,{ x:new Date(2000, 05, 1), y:57863 } ,{ x:new Date(2000, 06, 1), y:51980 } ,{ x:new Date(2000, 07, 1), y:57477 } ,{ x:new Date(2000, 08, 1), y:48925 } ,{ x:new Date(2000, 09, 1), y:25609 } ,{ x:new Date(2000, 10, 1), y:36581 } ,{ x:new Date(2000, 11, 1), y:3124 } ]}

    are my lines which can be vary i.e i want dynamic creation of line graph

    i save above output to string varible and assign to datapoint:
    also

    i save above output to Array and assign to datapoint:

    but chart had a problem to load

    but when i asssign above values directly to datapoint: then it shows line graph ,so what to do to generate dynamic c

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.