How to create custom legend?

How would one use the legendCallback method with this wrapper? The Chart.js docs show the function returning an HTML string, which is of course not the React way.

Thank you for your assistance!

[mattdell]

I’ve managed it by using the ref to the chart and the generateLegend function. Here’s my code if it helps anyone else…

import React, { Component } from 'react';
import { Line as LineChart, defaults } from 'react-chartjs-2';
import { Parser as HtmlToReactParser } from 'html-to-react';

const htmlToReactParser = new HtmlToReactParser();

defaults.global.animation = false;

const options = {
  legend: {
    display: false,
  },
};

class LineChartComponent extends Component {
  componentDidMount() {
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <LineChart data={this.props.data} options={options} ref="chart" />
        {this.refs.chart && htmlToReactParser.parse(this.refs.chart.chart_instance.generateLegend())}
      </div>
    );
  }
}

LineChartComponent.propTypes = {
  data: React.PropTypes.object,
};

export default LineChartComponent;

[qweluke]

Here is my approach without generateLegend method. Thanks to this, I also do not need to use React’s dangerouslySetInnerHTML so I have full control on my legend.

I’ve used this approach to achieve onClick events on legend because with dangerouslySetInnerHTML.

const SalesChart = (props: ChartProps) => {
  const inputEl: any = useRef(null);
  const [legendRendered, setLegendRendered] = useState(false);
  const [, forceUpdate] = useState();
  const classes = useStyles();

  const handleLegendClick = (datasetIndex: number) => {
    const chart = inputEl.current.chartInstance;
    chart.getDatasetMeta(datasetIndex).hidden =
      chart.getDatasetMeta(datasetIndex).hidden === null ? true : !chart.getDatasetMeta(datasetIndex).hidden;
    chart.update(); // re-draw chart to hide dataset
    forceUpdate({}); // re-draw component to update legend styles
  };

 ( ...... )

  const plugins = [
    {
      afterDatasetsDraw() {
        // hack to force re-render component in order to show legend
        if (!legendRendered) {
          setLegendRendered(true);
        }
      },
    },
  ];

    <React.Fragment>
      <div>
        <Line ref={inputEl} plugins={plugins} options={options} height={300} data={chart} />
      </div>

      {legendRendered && (
        <div
          style={{
            paddingLeft: `${inputEl.current.chartInstance.boxes[3].maxWidth}px`,
            paddingRight: `${inputEl.current.chartInstance.boxes[4].maxWidth}px`,
          }}
        >
          <ul className={classes.legendWrapper}>
            {inputEl.current.chartInstance.legend.legendItems.map((tick: ChartLegendLabelItem) => {
              const chart = inputEl.current.chartInstance;
              const isHidden = chart.getDatasetMeta(tick.datasetIndex).hidden;

              const bgColor: string =
                typeof tick.fillStyle === 'string'
                  ? tick.fillStyle // lines
                  : 'linear-gradient(to bottom, #13B080, rgba(23,172,126,0.4))'; // canvas gradient

              return (
                <li
                  className={`${classes.legendItem}`}
                  key={tick.datasetIndex}
                  onClick={() => handleLegendClick(tick.datasetIndex)}
                >
                  <div
                    className={`${isHidden ? classes.legendItemHidden : ''} ${classes.legendIcon}`}
                    style={{ background: bgColor }}
                  />
                  <Typography
                    variant="body1"
                    className={`${isHidden ? classes.legendItemHidden : ''} ${classes.legendItemText}`}
                  >
                    {tick.text}
                  </Typography>
                </li>
              );
            })}
          </ul>
        </div>
      )}
    </React.Fragment>