[Solved]-HighchartsReact does not render properly in custom Tabs-Highcharts

Please take a look at this example: https://codesandbox.io/s/18836vk8oj - React does not switch components from the same class, the first component is only updated. Creating a new class for the second component is one of the ways to solve the problem: https://codepen.io/anon/pen/xmqvmX?editors=0010

const tabContent = [
  <div>...</div>,
  <TheChart chartData={ chart1 } />,
  <TheChart2 chartData={ chart2 } />
];

Updating component with a chart fires chart.update(), so for example if you want to change xAxis.type you must change it in two configurations:

chart.update({
    series [...],
    xAxis: {
        type: 'datetime'
    }
});

chart.update({
    series [...],
    xAxis: {
        type: 'linear'
    }
});

Another issue here is that Highcharts for performance mutate series config object: https://github.com/highcharts/highcharts/issues/9732 - so you need create a deep copy of your options or change the structure of the project.

Live demo: https://codepen.io/anon/pen/YdZmMO?editors=0010