var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange, Black"],
datasets: [{
label: 'Dataset 1',
data: [10, 30, 50, 20, 25, 44, -10],
borderColor: 'red',
backgroundColor: 'red'
},
{
label: 'Dataset 2',
data: ['ON', 'ON', 'OFF', 'ON', 'OFF', 'OFF', 'ON'],
borderColor: 'blue',
backgroundColor: 'blue',
stepped: true,
yAxisID: 'y2',
}
]
},
options: {
scales: {
y: {
type: 'linear',
position: 'left',
stack: 'demo',
stackWeight: 2,
grid: {
borderColor: 'red'
}
},
y2: {
type: 'category',
labels: ['ON', 'OFF'],
offset: true,
position: 'left',
stack: 'demo',
stackWeight: 1,
grid: {
borderColor: 'blue'
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://www.chartjs.org/dist/master/chart.js"></script>
</body>
