JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
CSS
#container {
min-width: 300px;
max-width: 800px;
height: 300px;
margin: 1em auto;
}
JavaScript
// Options without data
const options = {
series: [{
data: [],
type: 'column'
}]
}
// Redner chart
const chart = Highcharts.chart('container', options)
// Simulate fetch request timeout, get data after some delay
setTimeout(() => {
const data = [1,2,3]
chart.hideLoading()
chart.series[0].setData(data)
}, 2000)
// Show loading screen
chart.showLoading()