[BUG] zeroLineIndex is undefined for yAxis, prevents setting of zeroLine attributes

[adamheald13]

Expected Behavior

I would expect zeroLine attributes (e.g. zeroLineWidth) to be set on the yAxis.

Current Behavior

Chart.js/src/core/core.scale.js

Line 721 in b4d6924

if (index === me.zeroLineIndex && options.offset === gridLines.offsetGridLines) {

me.zeroLineIndex results in undefined for the vertical gridLines.

Breakpoint after causing a re-render.

This behavior appears to have been introduced in 2.7.0. Reverting back to 2.6.0 fixes this particular issue (but introduces others) at least in the browser. In the CodePen below changing to 2.6.0 doesn't seem to fix it.

Context

I'm trying to create charts with matching styled x and y axes.

Environment

• Chart.js version: 2.7.1
• Browser name and version: Firefox (Version 57.0 (64-bit)) & Chrome (Version 62.0.3202.94 (Official Build) (64-bit))
• Link to your project: Working codepen

[jcopperfield]

@adamheald13 I am afraid that the category doesn't automatically set the zeroLineIndex. You could override the afterUpdate callback to set it explicitly.
The following at least will get you the desired result.

xAxes: [{
    afterUpdate: function(scale) {
        scale.zeroLineIndex = 0;
    },
    ticks: {...

[adamheald13]

@jcopperfield Thanks for the quick fix. What is the reason for not automatically setting zeroLineIndex?

Also, you lose all styling on the yAxis when the last element in the data.labels array has any non-numeric string. I've saved the CodePen with the bug.

[jcopperfield]

@adamheald13 I don't know the reason for not setting the zeroLineIndex automatically.

You could create a PR proposing a change. For instance the following code could be added to the file scales/scale.category.js

convertTicksToLabels: function() {
    var me = this;
    me.zeroLineIndex = 0;

    Chart.Scale.prototype.convertTicksToLabels.call(me);
}

Your second isn't caused by the last element being a non-numeric string, but by the fontSize: 30, which causes the following code to hide the line.

Chart.js/src/core/core.scale.js

Lines 755 to 758 in b4d6924

	var xLineValue = getLineValue(me, index, gridLines.offsetGridLines && ticks.length > 1);
	if (xLineValue < me.left) {
	lineColor = 'rgba(0,0,0,0)';
	}

Reducing the fontSize to 27, will make it work again.