0👍
Yes this is possible if you use the declare your datapoints as objects so you can tell which X and which Y it has to use
var options = {
type: 'line',
data: {
labels: ["Sales", "Revenue", "Profit", "Loss"],
datasets: [{
label: '# of Votes',
data: [{
x: 'Sales',
y: 20
}, {
x: 'Revenue',
y: 10
}, {
x: 'Revenue',
y: 5
}, {
x: 'Revenue',
y: 50
}, {
x: 'Profit',
y: 20
}, {
x: 'Loss',
y: 10
}, {
x: 'Loss',
y: 20
}],
borderWidth: 1,
backgroundColor: 'red',
fill: false,
borderColor: 'red',
lineTension: 0
}]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
canvas {
background-color: #eee;
}
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
</body>
- Chartjs-How to set subscript text in Chart.js axis title
- Chartjs-In which stage of the program do I remove my legend labels in charts.js?
Source:stackexchange.com