I am prototyping a React App where I show two AnyChart components side by side. The user can use a combobox on top of each chart to select another pair of data sources to compare. However, the charts disappear as soon as a re-render is triggered, even if the re-render is triggered by areas of the DOM unrelated to the AnyChart component.
My AnyChart component code implementation is a React derivation of the code found here: https://www.anychart.com/products/anychart/gallery/Sunburst_Charts/The_Population_of_the_Europe.php.
import React from 'react';
import AnyChart from 'anychart-react';
import anychart from 'anychart';
class MyComponent extends React.Component {
constructor(props) {
super(props);
var dataTree = anychart.data.tree(props.data, 'as-table');
// create sunburst chart
var chart = anychart.sunburst(dataTree);
// set calculation mode
chart.calculationMode('parent-independent');
// set chart title
chart.title('Europe Population');
// set custom palette
chart.palette(['#0288d1', '#d4e157', '#ff6e40', '#f8bbd0']);
// format chart labels
chart
.labels()
.format('{%Name}\n{%Value}{scale:(1000000)(1)|( mln)}');
// format chart tooltip
chart
.tooltip()
.format('Population: {%Value}{scale:(1000000)(1)|( mln)}');
// the fill specified in the data has priority
// set point fill
chart.fill(function () {
return anychart.color.darken(this.parentColor, 0.15);
});
// set container id for the chart
chart.container('container');
this.state = {
chartInstance: chart
};
}
render() {
return (
<AnyChart instance={this.state.chartInstance} />
);
}
}
export default MyComponent;
What may be causing the disappearance of the AnyChart and how to fix it?
UPDATE
Using Chrome's developer tools I can see how the plot goes away from within the div container and the div container is left empty thereafter no matter if I make a Component method updateData
to update data and explicitly call chart.draw()
nothing will bring the chart back not until the full page is refreshed.