7👍
✅
need to define the overall chart type, at the top level,
then you change one of the types at the dataset level
new Chart(document.getElementById('myChart').getContext('2d'), {
type: 'bar', // <-- define overall chart type - top level
data: {
labels: x_time,
datasets: [{
type:'line', // <-- define dataset type
...
see following working snippet…
var x_time = ['00:00', '00:30', '01:00', '01:30', '02:00', '02:30'];
var y_data1 = ['99.83', '99.86', '99.81', '99.83', '99.72', '99.75'];
var y_data2 = ['56', '41', '53', '46', '70', '60'];
new Chart(document.getElementById('myChart').getContext('2d'), {
type: 'bar', // <-- define overall chart type
data: {
labels: x_time,
datasets: [{
type:'line',
label: 'Data1',
fill:false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: y_data1,
yAxisID: 'left-axis'
}, {
label: 'Data2',
fill: true,
backgroundColor: 'rgb(54, 162, 235)',
borderColor: 'rgb(54, 162, 235)',
data: y_data2,
yAxisID: 'right-axis'
}]
},
options: {
legend: {position:'bottom', usePointStyle:true},
maintainAspectRatio:false,
responsive: true,
title: {display: false},
tooltips: {mode: 'index', intersect: false},
hover: {mode: 'nearest', intersect: true},
scales: {
xAxes: [{display: true, stacked:true, scaleLabel: {display: false, labelString: 'time'}}],
yAxes: [{
type:'linear',
id:'left-axis',
display: true,
position: 'left',
scaleLabel: {display: true, labelString: '%'}
},{
type:'linear',
id:'right-axis',
display: true,
position: 'right',
stacked:false,
scaleLabel: {display: true, labelString: '#'},
gridLines: {drawOnChartArea:false}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>
Source:stackexchange.com