[Chartjs]-How to change background color of labels in line chart from chart.js?

You can extend the chart to do this

Preview

Script

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function(){
      // add some extra width the the y axis labels
      this.options.scaleLabel = "   " + this.options.scaleLabel;
      Chart.types.Line.prototype.initialize.apply(this, arguments);
    },
    draw: function(){
        Chart.types.Line.prototype.draw.apply(this, arguments);

        ctx.save();
        ctx.fillStyle = '#fcc';
        // the fill should be under the text
        ctx.globalCompositeOperation = "destination-over"

        // draw background under x axis labels
        Chart.helpers.each(this.scale.xLabels, function(label, index){
          var xPos = this.calculateX(index) + Chart.helpers.aliasPixel(this.lineWidth),
            isRotated = (this.xLabelRotation > 0);

          ctx.save();
          ctx.translate(xPos, (isRotated) ? this.endPoint + 12 : this.endPoint + 8);
          ctx.rotate(Chart.helpers.radians(this.xLabelRotation) * -1);
          var width = ctx.measureText(label).width;
          // add a 4px padding on each side
          // the height is set to 1.5 times the font size since there is no method to measure height easily
          ctx.fillRect(-width / 2 - 4, 0, width + 8, this.fontSize * 1.5);
          ctx.restore();
        }, this.scale)

        // draw background under y axis labels
        var yLabelGap = (this.scale.endPoint - this.scale.startPoint) / this.scale.steps,
            xStart = Math.round(this.scale.xScalePaddingLeft);
        Chart.helpers.each(this.scale.yLabels,function(labelString, index){
                    var yLabelCenter = this.endPoint - (yLabelGap * index);
          var width = ctx.measureText(labelString).width;
          // add some padding on the side - we don't need to increase the width because we use the width added by the extra space
          ctx.fillRect(xStart - width - 4, yLabelCenter - this.fontSize * 1.5 / 2, width, this.fontSize * 1.5);
        }, this.scale);

        ctx.restore();
    }
});

and then

...
new Chart(ctx).LineAlt(data);

Fiddle – http://jsfiddle.net/e894g5qn/

With chart.js 2.9.x this is possible with the plugins option:

    plugins: [{
        afterDraw: function (chart, options) {

            let controller = chart.controller;
            let axis = controller.scales['y-axis-0'];
            let ctx = chart.ctx;

            let labelToStyle = null;

            axis._labelItems.forEach(function (value, index) {

                var labelToStyle = value
                let textWidth = ctx.measureText(labelToStyle.label).width;
                let line_x_start = labelToStyle.x - textWidth;
                let line_y = labelToStyle.y + (labelToStyle.font.size / 2) + 3

                ctx.lineWidth = 3;
                ctx.strokeStyle = 'orange';
                ctx.beginPath();
                ctx.moveTo(line_x_start, line_y);
                ctx.lineTo(labelToStyle.x, line_y);
                ctx.stroke();
            });

        }
    }]

I think this is a more comfortable approach compared to Scale extension.

Here goes a FIDDLE where the y tick labels are underlined.