[Chartjs]-Remove strikethrough behavior in chart.js bar chart

by

0👍

✅

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

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

-1👍

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

Leave a comment