Chart.js - displaying multiple line charts using multiple labels
17,406
Use scatter
type chart and showLine: true
instead of line
type with labels:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'scatter',
data: {
datasets: [
{
label: 'Chart 1',
data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
showLine: true,
fill: false,
borderColor: 'rgba(0, 200, 0, 1)'
},
{
label: 'Chart 2',
data: [{x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9}],
showLine: true,
fill: false,
borderColor: 'rgba(200, 0, 0, 1)'
}
]
},
options: {
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>
Related videos on Youtube
Author by
Mike Nathas
Updated on September 16, 2022Comments
-
Mike Nathas over 1 year
I need to draw a chart with 2 lines using Chart.js.
Each of this line has a different label set.
i.e. Chart 1:1 -> 2 2 -> 4 3 -> 8 4 -> 16
Chart 2:
1 -> 3 3 -> 4 4 -> 6 6 -> 9
This following sample obviously does not work as it uses the labels from chart1. But is it possible to realize this with Chart.js?
var config = { type: 'line', data: { labels: [1,2,3,4,5], datasets: [{ label: 'Chart 1', data: [2,4,8,16], }, { label: 'Chart 2', data: [3,4,6,9], }] },
Other charting libs offers a (label/data) set as parameter so I could simply give a tupel as parameter
(ie. [(1->2),(2->4),(3->8)...]
for each chart and the lib will match everything.Thanks
Edit: Detailed sample as requested:
var config = { type: 'line', data: { labels: [1, 2, 3, 4, 5], datasets: [{ label: 'Chart 1', data: [2, 4, 8, 16], }, { label: 'Chart 2', data: [3, 4, 6, 9], }] }, options: { spanGaps: true, responsive: true, title: { display: true, text: 'Chart.js Line Chart' }, tooltips: { mode: 'index', intersect: false, }, hover: { mode: 'nearest', intersect: true }, scales: { xAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Labels' } }], yAxes: [{ display: true, scaleLabel: { display: true, labelString: 'Values' }, ticks: { min: 1, max: 10, } }] } } }; window.onload = function() { var ctx = document.getElementById('canvas').getContext('2d'); window.myLine = new Chart(ctx, config); };
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> <div style="width:90%;" class="container"> <canvas id="canvas"></canvas><br> </div>