[FEATURE]: Draw scales on top (in front) of chart

[jakezatecky]

Expected Behavior

Be able to arrange grid lines in front of charts, instead of behind them.

Current Behavior

Scales/grid lines are always drawn before a dataset, and are thus always behind it.

Possible Solution

Add an option either on a scale level or a more global level to be a to render the scale(s) after datasets. Something like scalesInFront on a global basis.

Context

For some visualizations, particularly stacked area charts, it would be particularly useful to be able to see the grid lines more clearly. Obviously, you can make a background have some alpha transparency, but that limits us to what the background of these visualizations can be.

Other charting libraries already provide this option (e.g. Highcharts).

...

Forgive me if this is a duplicate, but I did not find any other issue describing this. I am willing to take a stab at this if I could be pointed in the right direction, but I do not know how many assumptions are based on grid lines always being drawn behind charts.

[adripanico]

I've found a walkaround by adding the next line once the scales are drawn (in my case -radar char- in the draw method of LinearRadialScale):

if (opts.display) {
   // ...
   ctx.globalCompositeOperation = 'destination-over';
}

This causes that the next elements drawn into the canvas will be placed behind the already drawn ones.

You will probably need to rearrange the datasets after this.

More info about Canvas' composite operation here.

@adripanico It sounds like you have a valuable solution, but I'm not sure how to try your workaround. Could you share a pen/fiddle/etc ?

[adripanico]

I am trying to find a better way to express what I said in the previous comment, but honestly I can't. What is your doubt?

@adripanico as I understand you, you hook in to a lifecycle event to call the method before the entire graph is drawn? Or when would you call it?

[adripanico]

No hooks. I just modified the library itself, so the first step was to remove it from the package.json file and manually adding the library to my project.

Then, I modified the Chart.bundle.js file (Chart.js version 2.5.0), and included the given line at the end of the draw method for LinearRadialScale.

The modified draw method looks like this:

draw: function() {
    var me = this;
    var opts = me.options;
    var gridLineOpts = opts.gridLines;
    var tickOpts = opts.ticks;
    var getValueOrDefault = helpers.getValueOrDefault;

    if (opts.display) {
        var ctx = me.ctx;

        // Tick Font
        var tickFontSize = getValueOrDefault(tickOpts.fontSize, globalDefaults.defaultFontSize);
        var tickFontStyle = getValueOrDefault(tickOpts.fontStyle, globalDefaults.defaultFontStyle);
        var tickFontFamily = getValueOrDefault(tickOpts.fontFamily, globalDefaults.defaultFontFamily);
        var tickLabelFont = helpers.fontString(tickFontSize, tickFontStyle, tickFontFamily);

        helpers.each(me.ticks, function(label, index) {
            // Don't draw a centre value (if it is minimum)
            if (index > 0 || opts.reverse) {
                var yCenterOffset = me.getDistanceFromCenterForValue(me.ticksAsNumbers[index]);
                var yHeight = me.yCenter - yCenterOffset;

                // Draw circular lines around the scale
                if (gridLineOpts.display && index !== 0) {
                    drawRadiusLine(me, gridLineOpts, yCenterOffset, index);
                }

                if (tickOpts.display) {
                    var tickFontColor = getValueOrDefault(tickOpts.fontColor, globalDefaults.defaultFontColor);
                    ctx.font = tickLabelFont;

                    if (tickOpts.showLabelBackdrop) {
                        var labelWidth = ctx.measureText(label).width;
                        ctx.fillStyle = tickOpts.backdropColor;
                        ctx.fillRect(
                            me.xCenter - labelWidth / 2 - tickOpts.backdropPaddingX,
                            yHeight - tickFontSize / 2 - tickOpts.backdropPaddingY,
                            labelWidth + tickOpts.backdropPaddingX * 2,
                            tickFontSize + tickOpts.backdropPaddingY * 2
                        );
                    }

                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    ctx.fillStyle = tickFontColor;
                    ctx.fillText(label, me.xCenter, yHeight);
                }
            }
        });

        if (!opts.lineArc) {
            drawPointLabels(me);
        }

        ctx.globalCompositeOperation = 'destination-over';
    }
}