JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.11/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="graph"></canvas>
CSS
canvas {
width: 300px;
}
JavaScript
chart = new Chart(document.getElementById('graph').getContext('2d'), {
type: 'line',
data: {
datasets: [{
label: 'test',
data: [10, 40],
yAxisID: 'p',
}]
},
options: {
responsive: false,
scales: {
x: {
display: true,
labels: ["label1", "label2"],
},
p: {
axis: 'y',
labelString: 'p',
display: true,
ticks: {
callback: function(value, index, values) {
return value + 'kW';
},
},
},
k: {
axis: 'y',
labelString: 'k',
display: false,
ticks: {
callback: function(value, index, values) {
return value + 'km/h';
},
},
},
e: {
axis: 'y',
labelString: 'e',
display: false,
ticks: {
callback: function(value, index, values) {
return value + '%';
},
},
},
r: {
axis: 'y',
position: 'left',
labelString: 'r',
display: true,
ticks: {
callback: function(value, index, values) {
return value + 'km';
},
},
},
t: {
axis: 'y',
labelString: 't',
display: false,
ticks: {
callback: function(value, index, values) {
return value + 'min';
},
},
},
},
}
});