Chart.js: Mixed chart type bar/line : the dots are not centered in the bars

[Charles-BARDIN]

Hi,

Thanks a lot for your wonderful work with this library. I'm using it since a few weeks and love it !
However, I have an issue with mixed bar/line charts.

Expected Behavior

The bar chart and the dots of the line chart must be aligned : the dot on the line must be horizontally centered in the bar.

Current Behavior

The bars are on the right of the dot. It then feels like the abscissa is not the same.

Steps to Reproduce (for bugs)

Here is a JSFiddle reproducing the bug.

Context

I need a chart to display market trades. It should show the time of the trade on the x-axis, a line for the prices and bars to show the quantity traded.

Environment

• Chart.js version: 2.2.2
• Browser name and version: Chrome 53

[simonbrunel]

Hi Charles, you need stacked: true on the x-axis in order to get elements horizontally aligned.

[Charles-BARDIN]

@simonbrunel thanks a lot, it works perfectly !

[Charles-BARDIN]

Demo updated. In case someone needs it :)

[rainerholzapfel]

Seems to be broken since 2.7.0

[simonbrunel]

@rainerholzapfel what is broken? can you build a jsfiddle with 2.7.1?

[rainerholzapfel]

The dots are not centered in the bars since 2.7.0

I took the working demo from Charles-BARDIN and replaced the Chart.js version:

Working: Demo 2.3.0
Broken: Demo 2.7.1

[simonbrunel]

That's a different issue but you right, it's kind of broken in 2.7.1 and should be fixed by #4994