remove strikethrough behavior in chart.js bar chart

Question

i am trying to change the look of the legends by removing the strikethrough effect , wihtout using legendCallback function in chart.js. The reason why i do not want to use the legendCallback function because i have my own custmizations in chart.options.legend.onClick. hence if i use legendCallback i won't be able to use the chart.options.legend.onClick.

after carefully looking at the source of Chart.js i come to know that inside a draw function of Chart.Legend they are applying the strikethrough effect.

Here is the link to plugin.legend.js

and here is the piece of code that applies the styling

    var fillText = function(x, y, legendItem, textWidth) {
            var halfFontSize = fontSize / 2;
            var xLeft = boxWidth + halfFontSize + x;
            var yMiddle = y + halfFontSize;

            ctx.fillText(legendItem.text, xLeft, yMiddle);

            if (legendItem.hidden) {
                // Strikethrough the text if hidden
                ctx.beginPath();
                ctx.lineWidth = 2;
                ctx.moveTo(xLeft, yMiddle);
                ctx.lineTo(xLeft + textWidth, yMiddle);
                ctx.stroke();
            }
        };

i want to know how shall we able to alter the behavior of the strikethrough just apply the fade effect when the legend is not active or hidden.

while searching for solution i came across this codepen where in some has tried to override the functionality but unfortunately it is now working properly with the chart.js version 2.7.3

Link to my fiddle

Answer 1

I know this post is old (I don't think there are rules against posting on older posts) but in case anyone comes across this you can simply set onClick to null like this: (as well as change the legend's text color and size)

        options: {
          plugins: {
            legend: {
              onClick: null,
              labels: {
                color: "white",
                font: {
                  size: 18
                }
              }
            }
          }
        }
      }

Answer 2

For now i have downloaded the indented version of chart.js and made following changes

var fillText = function(x, y, legendItem, textWidth) {
            var halfFontSize = fontSize / 2;
            var xLeft = boxWidth + halfFontSize + x;
            var yMiddle = y + halfFontSize;




        if (legendItem.hidden) {
            // Strikethrough the text if hidden , comment out the strikethrough code
            /*ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.moveTo(xLeft, yMiddle);
            ctx.lineTo(xLeft + textWidth, yMiddle);
            ctx.stroke();*/


           ctx.fillStyle = Chart.helpers.color(fontColor).lighten(0.75).rgbString();

        }
            ctx.fillText(legendItem.text, xLeft, yMiddle);
            ctx.fillStyle = fontColor;

    };

and in order to change the legend box color alter the drawLegendBox function as follow

if(legendItem.hidden){

    ctx.fillStyle = "#D6D6D6";
    ctx.strokeStyle = "#D6D6D6";

}else{

     ctx.fillStyle = valueOrDefault$d(legendItem.fillStyle, defaultColor);
     ctx.strokeStyle = valueOrDefault$d(legendItem.strokeStyle, defaultColor);

}

i do understand this is not the right way to do. However, i really don't know how would i extend the Legend and override just the required part.

Updated fiddle

Answer 3

I found a better way doing that:

add onClick to legends and put this :

  const index = legendItem.datasetIndex;
  const ci = legend.chart;
  const isVisible = ci.isDatasetVisible(index);
  ci.setDatasetVisibility(index, !isVisible);


  // this is where the stroke remove happens
  const ci = legend.chart;

  const fillTextValue = ci.ctx.fillText;
  ci.ctx.fillText = function fillText(x, v, b) {
    fillTextValue.bind(ci.ctx, x, v, b)();
    this.fillStyle = "rgba(0,0,0,0)"; // transparent color to set it invisible
  };