Wrong offset on bar chart with time xAxes

[pimvanderheijden]

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

[benmccann]

I haven't looked closely at this issue yet, but wonder if it's the same as #5609 which was fixed in master, but not released yet

[nagix]

This was fixed in #5933. Please try master build.

[pimvanderheijden]

Just to be sure I replaced the contents of both /dist/Chart.bundle.min.js and /dist/Chart.min.js in /node_modules with the contents of https://www.chartjs.org/dist/master/Chart.bundle.min.js and https://www.chartjs.org/dist/master/Chart.min.js respectively. However, the problem still persists.

Please let me know if you need more information

[nagix]

Can you share a jsfiddle or codepen?

[benmccann]

@MidNightP I don't think that alone will do anything. After you replace those files, you need to update the main in package.json to point to one of them

[pimvanderheijden]

Ah great! It works with dist/Chart.bundle.min.js

Any idea when this will be released?

[benmccann]

Ok, I'm going to close this as fixed then. I'm afraid I don't have an ETA on the release. It's been awhile since our last one and there's been lots of good improvements, so it'll happen at some point