React-chartjs-2: Legend display configuration is ignored in v2.5.1

[alejo90]

I believe that due to #158, legend display configuration is ignored in charts. I am working on a single page application and after navigating from the route where I have a line chart set to not display the legend to another route and then back, the legend is rendered. This behavior was not present in v2.4.1. In addition, the global defaults.legend.display setting is completely ignored.

[jerairrest]

What do you options look like?

[alejo90]

<Line
  width={100}
  height={40}
  data={this.dataFactory}
  options={{legend: {display: false}, scales: {yAxes: [{ticks: {beginAtZero: true}}]}}}
/>

And dataFactory is a function that looks something like this:

private dataFactory(canvas: HTMLCanvasElement): object {
  const context = canvas.getContext('2d') as CanvasRenderingContext2D;
  const backgroundColor = context.createLinearGradient(0, 0, 0, 500);
  backgroundColor.addColorStop(0, 'rgba(247, 107, 28, 0.37)');
  backgroundColor.addColorStop(1, 'rgba(250, 217, 97, 0.75)');

  const datasets = this.props.data.map(({data, label}, i) => {
    const item = {
      borderColor: 'rgba(151, 151, 151, 0.28)',
      borderWidth: 2,
      data,
      fill: true,
      label,
      lineTension: 0.1,
      pointRadius: 0,
    };

    if (i === this.props.selectedIndex) {
      return {
        ...item,
        backgroundColor,
        borderCapStyle: 'round',
        borderColor: 'rgb(247, 107, 28)',
        borderWidth: 5,
      };
    }

    return {...item, fill: false};
  });

  return {
    datasets,
    labels: this.props.labels,
  };
}

[jerairrest]

yea... sorry about that. Move legend as a prop to the chart component. See https://github.com/jerairrest/react-chartjs-2/issues/165

[alejo90]

Oh, sorry, I didn't know someone already had reported this. Should I leave this issue open so that other people will know?

[jerairrest]

Sounds good! I'm trying to decide if I should revert or not currently. The default props for the chart base component show the legend as a separate object so we combine them to use chart.js

[jerairrest]

Any thoughts?

[alejo90]

I believe having it as a prop in the component (current behavior) is the best solution on the long term, since it makes it more react-like. I also believe the old behavior should be kept, at least for now, to avoid confusion because of how subtle the problem is.

[jerairrest]

Agreed! I'll work toward reimplementing that soon!

[madcoda]

I was just about to bang my head to the wall, luckily I found this post.
As a quick fix, just pass the legend as prop again like this legend={chartOptions.legend}, then you can still write all your options in one place.

<Line 
  data={chartData} 
  options={chartOptions} 
  legend={chartOptions.legend}
  width={300} 
  height={200} />

If ultimately need to favour the props way, one suggestion is that, you can add a little console output to remind people to use the "legend" prop. Like how React handle moving "PropTypes" to separate npm package.

[jerairrest]

Hey all I just release 2.5.3 which adds the ability to either use legend configurations through options or the legend prop. Your choice!

https://github.com/jerairrest/react-chartjs-2/releases/tag/2.5.3

[alejo90]

Thanks! I just tested it and can confirm that it works as before.

[jerairrest]

nice. Closing this since it's no longer as issue.