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 | 0 | 4,7.. |
| dataSeries | lineThickness | Number | 2 | 4,7.. |
Basic Line Chart
Line Chart With Additional Customization
Integrations:
Comments 57
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix
how can i have a line chart with area under it coloured?
I believe you’re looking for an area chart?
Good library. Is there any way to include error bars?
Error Bars are not supported yet. But we’ll be implementing it in couple of months.
Is there anyway to make the line as dotted-line ? Thanks for this awesome library
Roy,
Dotted lines are not supported yet.
Update: Dotted Lines are now supported in v1.7. Please checkout lineDashType
if the all the y data is 0,how to make it do not show the negative numbers in x?
if the all the y data is 0,how to make it do not show the negative numbers in y?, sorry,have a mistake
Hi,
You can do so by setting minimum to zero in axisY.
thank you!
For second graph(above), jan should strat exactly from x & y axis corner(from yaxis line), how to make that… thanks in advance…
You can do so by setting the minimum property of x to the required value.
axisX:{
minimum: new Date(2012, 00, 1)
}
thanks
So i can not apply simple label => value in line chart ?? Date must be pass as label ?
vasimpadhiyar,
Can you please create a jsfiddle and post it in our forum so that we can have a look.
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();
}
ankit,
Please assign the time-stamp value to label instead of x in dataPoints. For formatting you can use libraries like moment.js. Here, is an example.
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”})
zadwhite,
You can’t set labels on y axis directly. But as a workaround you can use stripLines property of axisY for the same. Here is thisexample.
thank you very much for your helping. It’s very helpful for me.
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.
ankit,
Please use xinstead of label.
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.
ankit,
Please use interval property of axisX. Here, is an example.
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.
ankit,
Please let us know if this example works as expected.
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.
This is perfect – thank you!
how to draw 2 line From A Point to B Point everybody ?
let me clear my ideal. I need to have multiple line between 2 point A -> B , B -> C . Is there any way to do this with canvasjs
Are you looking for multi-series line charts?
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 }
]
}
Sunny,
Thanks for reporting the issue. We will fix it in the future version. For now you can workaround the same by using valueFormatString property of axisX whenever you have only one dataPoint with timestamp.
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
dan,
Please use secondary y-axis for the same. Here is an example.
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?
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.
how to invert the Y axis? I wanna place the 0 on the top and go downward if the amount is raised
Zumi,
Sorry, this feature is not available yet. But we will consider it for future versions.
[Update]
We have just released v1.8.5 Beta-1 which supports axis-reversal. Please refer to the release blog for more information.
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.
Hi,
how can I make a curvy line, not straight?
Oh, there is a spline chart type. Excellent!
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.
Hi. i have a chart with 2 lines. How can I set the number to not overlap? thank you
Frank,
If you can create a jsfiddle that reproduces the problem, it would be helpful.
hi. i want to show the time in the X-axis instead of date and years.
Is it possible?
Can we integrate 2 line charts in 1?
Are you are looking for Multi-series line chart? Here is an example.
how i can bind my json data which i converted in array to datapoints: to make a line chart dynamic
Rajshekhar,
Are you looking for this example?
thanks sir it is helpfull to me
{ 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