Если на гистограмме есть только один элемент, полоса не отцентрирована:
https://codepen.io/anon/pen/rKmrpX?editors=1010
HTML:
<canvas id="myChart" width="400" height="400"></canvas>
JS:
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
"labels": ["2018-06-01T04:00:00.000Z"],
"datasets": [{
"type": "bar",
"label": "Earnings",
"yAxisID": "left-y-axis",
"borderColor": "rgba(107, 165, 57, 1)",
"backgroundColor": "rgba(107, 165, 57, 0.4)",
"data": [25.77]
}, {
"type": "line",
"label": "Pageviews",
"yAxisID": "right-y-axis",
"backgroundColor": "rgba(70, 152, 203, 0.4)",
"borderColor": "rgba(70, 152, 203, 1)",
"pointBackgroundColor": "rgba(70, 152, 203, 1)",
"pointRadius": 0,
"data": [3426]
}]
},
options: {
"scales": {
"xAxes": [{
"maxBarThickness": 100,
"type": "time",
"offset": true,
"time": {
"unit": "day",
"tooltipFormat": "MMM-D",
"displayFormats": {
"day": "MMM-D",
"month": "MMM"
}
},
"ticks": {
"maxRotation": 0,
"maxTicksLimit": 7,
"autoSkip": true
},
"gridLines": {
"display": false,
"offsetGridLines": true
}
}],
"yAxes": [{
"id": "left-y-axis",
"type": "linear",
"position": "left",
"ticks": {
"beginAtZero": true
},
"scaleLabel": {
"display": true,
"labelString": "Earnings"
}
}, {
"id": "right-y-axis",
"type": "linear",
"position": "right",
"ticks": {
"beginAtZero": true
},
"gridLines": false,
"scaleLabel": {
"display": true,
"labelString": "Pageviews"
}
}]
},
"tooltips": {
"callbacks": {}
}
}
});
Есть ли исправление для этого?Возможно, мне не хватает опции, которую следует передать?
Здесь используется последняя версия Chart.js (2.7.2).