Bars on time axes are poorly positioned and sized

[AndyStewart]

Edit (@etimberg April 19, 2017)
This issue tracks the positioning and sizing of bars on time axes. In general, it seems very unclear how bars on a time scale should behave.

Unlike an axis that is built from string labels, a time axis is a continuous range of values. The user may supply bars spaced at 12:00AM each day, or we could have a bar at 12:00AM and 12:01AM and the chart would need to ensure that they do not overlap but are also both visible to the user and tooltips.

A fix for this needs to be a comprehensive solution rather than a quick fix that only works for certain cases. Any fix should also work for a bar chart that has a logarithmic X axis, ie. it should not be tied to the time axis only. Tackling this properly may also require solving #3107 since it does also pertain to bar charts and continuous x axes.

Original report below

Hi

We've had some issue's with the position of the bar charts when drawing time chart with both line and bars on using version 2.0.2.

Everything is fine until we have data that spreads over multiple years, at which point the line charts appear in the correct location but the bar charts are too far left.

If I change the below function :

calculateBarX: function (index, datasetIndex) {

                    var yScale = this.getScaleForId(this.getDataset().yAxisID);
                    var xScale = this.getScaleForId(this.getDataset().xAxisID);
                    var barIndex = this.getBarIndex(datasetIndex);

                    var ruler = this.getRuler();
                    var leftTick = xScale.getPixelForValue(null, index, datasetIndex, this.chart.isCombo);
                    leftTick -= this.chart.isCombo ? (ruler.tickWidth / 2) : 0;

                    if (xScale.options.stacked) {
                        return leftTick + (ruler.categoryWidth / 2) + ruler.categorySpacing;
                    }

                    return leftTick +
                        (ruler.barWidth / 2) +
                        ruler.categorySpacing +
                        (ruler.barWidth * barIndex) +
                        (ruler.barSpacing / 2) +
                        (ruler.barSpacing * barIndex);
                },

to

calculateBarX: function (index, datasetIndex) {

                    var yScale = this.getScaleForId(this.getDataset().yAxisID);
                    var xScale = this.getScaleForId(this.getDataset().xAxisID);
                    var barIndex = this.getBarIndex(datasetIndex);

                    var ruler = this.getRuler();
                    var leftTick = xScale.getPixelForValue(null, index, datasetIndex, this.chart.isCombo);
                    return leftTick;

It fixes all the issues, however I'm not sure what it breaks as I don't understand the lines of code I've removed.

Any help would be appreciated.

Andy