Highcharts test tool

For some charts (like polar and variwide, but not spline), if a reflow is issued during initial animation, the animation is restarted.

by piet23

HTML

<script src="https://code.highcharts.com/10.0/highcharts.js"></script>
<script src="https://code.highcharts.com/10.0/highcharts-more.js"></script>
<script src="https://code.highcharts.com/10.0/modules/variwide.js"></script>
<script src="https://code.highcharts.com/10.0/modules/exporting.js"></script>
<script src="https://code.highcharts.com/10.0/modules/accessibility.js"></script>

<div id="containerSpline" class='my-chart'></div>
<div id="containerPolar" class='my-chart'></div>
<div id="containerVariwide" class='my-chart'></div>

CSS

#containerSpline, #containerPolar, #containerVariwide {
    max-width: 3000px;
    height: 200px;
}

#extra-content {
  font-size: 200px;
  display: none;
}

JavaScript

Highcharts.chart('containerSpline', {
  plotOptions: {
    series: {
      animation: {
        duration: 1500,
      },
    },
  },
  series: [{
    type: 'spline',
    data: [{
        x: 1,
        y: 1,
      },
      {
        x: 2,
        y: 4,
      },
      {
        x: 3,
        y: 3,
      },
      {
        x: 4,
        y: 6,
      },
    ],
  }, ],
});

Highcharts.chart('containerPolar', {
  chart: {
    polar: true,
  },
  plotOptions: {
    series: {
      animation: {
        duration: 1500,
      },
    },
  },
  series: [{
    type: 'spline',
    data: [{
        x: 1,
        y: 1,
      },
      {
        x: 2,
        y: 4,
      },
      {
        x: 3,
        y: 3,
      },
      {
        x: 4,
        y: 6,
      },
    ],
  }, ],
});

Highcharts.chart('containerVariwide', {
  plotOptions: {
    series: {
      animation: {
        duration: 1500,
      },
    },
  },
  series: [{
    type: 'variwide',
    data: [{
        x: 1,
        y: 1,
        z: 0.75,
      },
      {
        x: 2,
        y: 1,
        z: 0.5,
      },
    ],
  }, ],
});

function showExtraContent() {
  document.getElementById('containerSpline').style.width = '600px';
  document.getElementById('containerPolar').style.width = '600px';
  document.getElementById('containerVariwide').style.width = '600px';
}

window.setTimeout(
  showExtraContent,
  500
);