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

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]

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';
    }
}

[Zilvinaskli]

is it possible to draw only scale numbers on top of the chart? it would be very useful in radar charts