无法在 React 中的 chartjs 中将图例符号更改为圆角正方形

Question

I am creating a DoughnutChart with the below code:-

<Doughnut
        data={this.props.chartdataSet}
        options={{
          title: {
            display: false,
            text: [this.props.title,'Eligible Amount : $180'],
            fontSize: 18,
            fontFamily:'Arial',
            lineHeight:1.5
          },
          tooltips:{
            enabled:false
          },
          legend: {
            display: true,
            position: "bottom",
            align:'start',
            reverse:true,
            labels :{
              padding:10,
              boxWidth:12,
              fontSize:13
            },
          },
        }}
        height={200}

      />

Now my chart is like:-

Now I want those square icons with the rounded square in corners, I was using usePointStyle but its making as a circle can I get help in making rounded icons

Answer 1

You can disable the standard legend and generate your own HTML legend instead.

componentDidMount() {
  this.generateLegend(document.getElementById("legend"), this.refs.chart.chartInstance);
}

generateLegend(div, chart) {
  let ul = document.createElement("ul");
  chart.data.labels.forEach((l, i) => {
    let ds = chart.data.datasets[0];
    let bgColor = ds.backgroundColor[i];
    let border = ds.borderWidth + "px solid " + ds.borderColor[i];

    let li = document.createElement("li");
    let symbolSpan = document.createElement("span");
    symbolSpan.style.cssText = "width: 6px; height: 14px; background-color:" + bgColor + "; border:" + border + ";";
    li.appendChild(symbolSpan);

    let labelSpan = document.createElement("span");
    labelSpan.innerHTML = l;

    symbolSpan.onclick = function() {
      let hidden = !chart.getDatasetMeta(0).data[i].hidden;
      chart.getDatasetMeta(0).data[i].hidden = hidden;
      labelSpan.style.textDecoration = hidden ? "line-through" : "";
      chart.update();
    };
    labelSpan.onclick = function() {
      let hidden = !chart.getDatasetMeta(0).data[i].hidden;
      chart.getDatasetMeta(0).data[i].hidden = hidden;
      labelSpan.style.textDecoration = hidden ? "line-through" : "";
      chart.update();
    };

    li.appendChild(labelSpan);
    ul.appendChild(li);
  });
  div.appendChild(ul);
}

Please take a look at this StackBlitz and see how it works.