JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<!-- Load the Highcharts scripts. Please note that
Highcharts GPT loads all scripts because we do not know what is being used
in the configuration previews. In production, unused scripts should be removed. -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>


<div id="container"></div>
<button id="sonify">
Play
</button>

JavaScript

const chart = Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Column Chart with Sonification'
    },
    sonification: {
        duration: 5000
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges', 'Pears', 'Grapes']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4, 2, 5]
    }, {
        name: 'John',
        data: [5, 7, 3, 8, 2]
    }]
});

// Add a button to play the sonification
document.getElementById('sonify').onclick = () => chart.toggleSonify();