Usage with react-redux

[denl95]

When I am trying to map state from store using connect from react-redux like this:

import React from 'react';
import { Bar } from 'react-chartjs';

function random(length, max) {
  let arr = [];
  for(let i = 0; i < length; i++)
    arr.push((Math.random() * max))
  return arr;
}

const BarChart = (props) => {
  const chartData = {
    labels: random(6, 10000),
    datasets: [
      {
        label: 'User time by day',
        data: random(6, 10),
        fillColor: 'rgba(255,150,132,0.2)',
        strokeColor: 'rgba(255,99,131,0.8)',
        highlightFill: 'rgba(255,99,132,0.4)',
        highlightStroke: 'rgba(255,99,132,1)'
      }
    ]
  };

  const chartOptions = {
    responsive: true,
    barStrokeWidth: 1,
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  };
  return (
    <Bar data={chartData} options={chartOptions} width="860" height="550" redraw/>
  )
};
export default connect(() => ({}), () => ({}))(BarChart);

It is rendered like on image below. Also when I move mouse over some bar then It returns to normal like on image without connect.

And when I remove connect:

[wwalser]

While this isn't an issue with react-chartjs specifically, with Redux being popular it might be good to document the behavior and steps to avoid it. By default connect does a shallow check of the properties returned by it's select function. Since you always return an empty object connect assumes nothing has changed.

This should fix your problem:

export default connect(() => ({}), undefined, undefined, {pure: false})(BarChart);

See Redux's documentation for details on the pure flag.

Alternatively, I suspect disabling the animation will fix the problem:

const chartOptions = {
  ...,
  animate: false
};

[exit99]

animate: false does not work for me on v1.2.0. The correct key is animation: false