YouTipChartjs Line
Line charts can be plotted from data arranged in columns or rows in a worksheet.
Line charts can display continuous data that changes over time (set according to common scales), making them ideal for showing trends in data at equal time intervals.
The line chart **type** property is set to 'line', where type describes the chart type.
const config = { type: 'line', data: data,};
Next, let's create a simple line chart:
## Example
const ctx = document.getElementById('myChart');
const labels =['January','February','March','April','May','June','July'];// Set the corresponding labels on the X axis
const data ={
labels: labels,
datasets:[{
label:'My First Line Chart',
data:[65,59,80,81,56,55,40],
fill:false,
borderColor:'rgb(75, 192, 192)',// Set the line color
tension:0.1
}]
};
const config ={
type:'line',// Set the chart type
data: data,
};
const myChart =new Chart(ctx, config);
[Try it »](#)
The output of the above example is:
Next, let's enrich the line chart by adding options, as follows:
## Example
const ctx = document.getElementById('myChart');
const labels =['January','February','March','April','May','June','July'];// Set the corresponding labels on the X axis
const data ={
labels: labels,
datasets:[{
label:'My First Line Chart',
data:[65,59,80,81,56,55,40],
fill:false,
borderColor:'rgb(75, 192, 192)',// Set the line color
backgroundColor:['rgba(179, 0, 33, 0.5)'],// Set the fill color for points
pointStyle:'circle',// Set point type to circle
pointRadius:6,// Set circle radius
pointHoverRadius:10,// Set circle radius when mouse moves over
tension:0.1
}]
};
const config ={
type:'line',// Set the chart type
data: data,
options:{
responsive:true,// Set the chart to be responsive
interaction:{// Set interaction for each point
intersect:false,
},
scales:{// Set X axis and Y axis
x:{
display:true,
title:{
display:true,
text:'Date'
}
},
y:{
display:true,
title:{
display:true,
text:'Votes'
}
}
}
}
};
const myChart =new Chart(ctx, config);
[Try it »](#)
The output of the above example is:
### Vertical Line Chart
The vertical line chart is a variant of the horizontal line chart.
To create a vertical line chart, you need to set the indexAxis property to 'y' in the options object. The default value of indexAxis is **x**.
## Example
const ctx = document.getElementById('myChart');
const labels =['January','February','March','April','May','June','July'];// Set the corresponding labels on the X axis
const data ={
labels: labels,
datasets:[{
label:'My First Line Chart',
data:[65,59,80,81,56,55,40],
fill:false,
borderColor:'rgb(75, 192, 192)',// Set the line color
backgroundColor:['rgba(179, 0, 33, 0.5)'],// Set the fill color for points
pointStyle:'circle',// Set point type to circle
pointRadius:6,// Set circle radius
pointHoverRadius:10,// Set circle radius when mouse moves over
tension:0.1
}]
};
const config ={
type:'line',// Set the chart type
data: data,
options:{
indexAxis:'y',// Set vertical line chart
responsive:true,// Set the chart to be responsive
interaction:{// Set interaction for each point
intersect:false,
},
scales:{// Set X axis and Y axis
x:{
beginAtZero:true,// Set X axis to start from 0
display:true,
title:{
display:true,
text:'Date'
}
},
y:{
display:true,
title:{
display:true,
text:'Votes'
}
}
}
}
};
const myChart =new Chart(ctx, config);
[Try it »](#)
The output of the above example is: