Line Bar Points not matching Bar Chart width

[GreggOD]

Expected Behavior

I expect the line graph points to match up between the bar charts bar.

Current Behavior

It seems the points on the line graph are mapped to the center of its labels which arent aligned with the bar charts labels causing the points of the line graph to not plot accurately from bar to bar in terms of x-axis placement.

Context

In this screen shot you can see the points are not in between each bar or at the start of each bar but seem to have an offset. *Update I enabled the line graph labels and grid to provide some visual help.

Environment

• Chart.js version: 2.6.0
• Browser name and version: Chrome

Any help would seriously be appreciated :)

Thanks,
G

[etimberg]

@GreggOD it looks like you have 2 x axes, is that correct?

[GreggOD]

@etimberg that is correct. If i use the same x axes then the line points are in the middle of the bars which is not what im looking for.

                labels: chart.labels,
                datasets: [{
                    label: 'target',
                    type: 'line',
                    borderColor: 'rgb(59,72,94)',
                    borderWidth: 1,
                    fill: false,
                    steppedLine: true,
                    data: [6000000,5000000,4000000,3000000,2000000,3000000,4000000,1000000,2000000,2000000,1000000,1000000],
                    xAxisID:'xAxis2',
                    spanGaps: true, 
                },{
                    label: 'buyAmount',
                    type: "bar",
                    backgroundColor: buyBarsColors,
                    data: forecast.buyAmounts,
                    xAxisID:'xAxis1',
                },{
                    label: 'remainingExposure',
                    type: "bar",
                    backgroundColor: foreBarsColors,
                    data: forecast.remainingExposures,
                    xAxisID:'xAxis1',
                }]

               scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true,
                            suggestedMax: max,
                            fontSize: 10,
                            stepSize: chart.stepSize
                        },
                        stacked: true,
                        scaleLabel: {
                            display: true,
                            labelString: labelperc
                        }
                    }],
                    xAxes: [{
                        id: 'xAxis1',
                        barPercentage: 1.2,
                        gridLines: {
                            display:false
                        },
                        stacked: true,
                        ticks:{
                            fontSize: 10,
                        }
                    }
                    ,{
                        id: 'xAxis2',
                        position: 'bottom',
                        gridLines: {
                            display:false
                        },
                        display: false,
                        stacked: true,
                        ticks:{
                            fontSize: 10,
                            weight: 0.1
                        }
                    }]
                },

[etimberg]

@GreggOD ok. if I understand correctly, you want the points on the line to be at the left edge of each bar?

[GreggOD]

@etimberg Yes. that would be great!

[etimberg]

Hmm, that's going to be tricky to align correctly. It may require some custom code because at the moment the line chart knows nothing about the bar width so it would somehow need to calculate that and then use that information to place the point appropriately.

At the moment the point is placed according to it's value on the axis only