0

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.

SkyWalker
  • 13,729
  • 18
  • 91
  • 187

0 Answers0