Chartjs-Change Chart.js Legend Text

by

0👍

I believe you will need to add a legendCallback in the options – see the HTML legends section here:

https://www.chartjs.org/docs/latest/configuration/legend.html

  • Upside: you can render pretty much whatever you want
  • Downside: you will need to generate the legend by calling generateLegend yourself

There’s a solution here you can try:
https://github.com/jerairrest/react-chartjs-2/issues/81

If you apply that your code you look something like this:

<>
   <Doughnut
      ref="chart"
      width={120}
      height={100} 
      data={tradeFileNames}
      options={{
        cutoutPercentage: 55,
        elements: {
          center: {
            text: `${numeral(total).format("0,0")} ${innerTopText} ${innerMiddleText} ${innerBottomText}`,
            fontColor: "#666666",
            fontFamily: "Allianz-Neo",
            fontStyle: "bold",
            minFontSize: 15,
            maxFontSize: 20
          }
        },
        plugins: {
          outlabels: {
            backgroundColor: "white", // Background color of Label
            borderColor: "none", // Border color of Label
            borderRadius: 0, // Border radius of Label
            borderWidth: 0, // Thickness of border
            color: "black", // Font color
            display: false,
            lineWidth: 1, // Thickness of line between chart arc and Label
            padding: 0,
            lineColor: "black",
            textAlign: "center",
            stretch: 45,
          },
          labels: false
        },
        legendCallback: (chart) => {
          // return whatever you need here based on chart.data 
        },
        legend: {
          display: true,
          position: "right",
          align: "center",
          fontFamily: "Allianz-Neo",
          textDirection: 'ltr',
            labels: {
              usePointStyle: true,
              fontColor: "#006192",
            }
        }
      }}
      />
      {this.refs.chart && this.refs.chart.chartInstance.generateLegend()}
</>

Leave a comment