'Chart.js data won't work corresponding number in y-axis ! In the screenshots i indicate the part which i want to set from [0, 200, 400, 600, 800, 100]
$(function () {
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['H14', 'H15', 'H16', 'H17', 'H18', 'H19', 'H20', 'H21', 'H22', 'H23', 'H24', 'H25', 'H26', 'H27', 'H28', 'H29', 'H30', 'R1', 'R2'],
datasets: [{
label: 'true',
data: [218.43, 193.72, 260.02, 251.62, 901.7, 1292.25, 996.27, 873.68, 932.3, 1030.04, 1104.2, 2356.66, 2688.95, 2352.42, 3003.72, 3869.95, 6153.28, 7069.44, 12012.23, 14000, 12000, 9000, 8000, 6000, 4000, 2000, 0],
backgroundColor: [
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178'
],
barThickness: 20, // number (pixels) or 'flex'
maxBarThickness: 20 // number (pixels)
}]
},
options: {
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}
});
const ctx_2 = document.getElementById('myChart_sub');
const myChart_sub = new Chart(ctx_2, {
type: 'bar',
data: {
labels: ['H25', 'H26', 'H27', 'H28', 'H29', 'H30', 'R1', 'R2',],
datasets: [{
label: '',
data: [92.18, 124.15, 69.21, 176.03, 227.12, 102.7, 228.71, 806.47],
backgroundColor: [
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178',
'#003178'
],
barThickness: 20, // number (pixels) or 'flex'
maxBarThickness: 20 // number (pixels)
}]
},
options: {
scales: {
y: {
max: 1000,
min: 0,
ticks: {
stepSize: 200,
},
},
x: {
max: 1000,
min: 0,
ticks: {
stepSize: 200,
},
afterBuildTicks: function(humdaysChart) {
humdaysChart.ticks.shift();
}
},
},
legend: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
console.log(tooltipItem)
return tooltipItem.yLabel;
}
}
}
}
});
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
