Wrong offset on bar chart with time xAxes #6024
Description
Same issue as #5784 (closed)
Also on Stackoverflow: https://stackoverflow.com/questions/54327783/wrong-offset-on-bar-chart-with-time-xaxes
Using Chart.js I have a bar chart with a wrong offset when the dataset has only a single t value.
Here's an example:
As can be seen, the bars are not centered.
First I suspected I did something wrong with the offset setting, but no. When having more than 1 time values the offset is right and the bars are centered.
To show that offset: true on the xAxes is working when there are multiple t values, I also added an example of a proper layout;
I've been reading the documentation thoroughly and it seems to me now that the issue is not caused by a wrong setting.
Current code:
const chartOptions = {
aspectRatio : 1,
maintainAspectRatio : false,
animation : {
// duration : 400,
easing : "easeOutQuad",
},
layout: {
padding: {
top : 30,
left : 10,
right : 10,
}
},
legend: {
position: "bottom"
},
scales: {
yAxes: [
{
id : "energy",
position : "left",
gridLines : {
tickMarkLength: 16,
display : false,
}
}, {
id : "duration",
position : "right",
gridLines : {
tickMarkLength: 16,
display : false,
}
}
],
xAxes: [ {
type: "time",
offset: true,
bounds: "data", // data, ticks
time: {
isoWeekday: true
},
gridLines : {
tickMarkLength: 12,
display : false
},
distribution : "linear", // linear, series
} ]
}
}
this.chart.data.datasets = [
{
"yAxisID": "energy",
"label": "Energy",
"data": [
{
"y": 86501343,
"t": 1546300800000
}
]
},
{
"yAxisID": "duration",
"label": "Duration",
"data": [
{
"y": 847072.147,
"t": 1546300800000
}
]
}
]
Then after changing the datasets I call this.chart.update()
Running latest version of Chart.js: 2.7.3