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

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.

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/