search

rakannimer / react-google-charts

A thin, typed, React wrapper over Google Charts Visualization and Charts API.
https://react-google-charts.com/
MIT License
1.61k stars 348 forks source link

Chart title / axis labels do not update #71

Closed eliath closed 8 years ago

eliath commented 8 years ago

I have a react component that contains a chart. I want the chart to render different data depending on the state of the component. The change in state represents a change in what should be rendered along the horizontal axis.

When I call setState(...), the ScatterPlot is re-rendered correctly. However, the chart's title and hAxis / vAxis labels do not change to reflect the change in state. I can see in React DevTools that the options prop has updated correctly, but the title and hAxis label are stuck as whatever string was initially rendered.

I'm guessing it is due to the optimization in Chart.js, l.109 - 132. Once wrapper is defined, it never gets re-created; perhaps this is why the title and axis are never re-rendered?

rakannimer commented 8 years ago

Yes you're right this is why, but we should update chart options on state change, that would make sense and is useful. Are you interested in submitting a PR for this ? If not I'll leave this issue open and add it to my to do for the next release :)

In the meantime I suggest creating a new ChartComponent when options have changed. You can add this in your code.

eliath commented 8 years ago

On further inspection, it looks like this issue has already been fixed.

The reason I was seeing this issue is because I was running an older version (0.1.9), which is the version installed by npm if no version is specified. Once I pulled the repo from github and tested it in my project, everything worked perfectly.

As a side note, when I run npm install react-google-charts@1.2.1, the install succeeds but npm lists the package as invalid. This is probably why 0.1.9 is installed by default.