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/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/stock.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/modules/gantt.js"></script>
<script src="https://code.highcharts.com/dashboards/datagrid.js"></script>
<script src="https://code.highcharts.com/dashboards/dashboards.js"></script>
<script src="https://code.highcharts.com/dashboards/modules/layout.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/parallel-coordinates.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/annotations-advanced.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/draggable-points.js"></script>
<script src="https://code.highcharts.com/modules/static-scale.js"></script>
<script src="https://code.highcharts.com/modules/broken-axis.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/tilemap.js"></script>
<script src="https://code.highcharts.com/modules/timeline.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/treegraph.js"></script>
<script src="https://code.highcharts.com/modules/item-series.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script...

JavaScript

const chart = Highcharts.chart('container', {
    chart: {
        type: 'column',
        sonification: {
            globalTracks: [{
                type: 'speech',
                mapping: {
                    text: '{point.category}: {point.y}',
                    volume: 0.5
                }
            }]
        }
    },
    title: {
        text: 'Simple Column Sonification Chart'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges', 'Pears', 'Grapes']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'Jane',
        data: [1, 3, 2, 4, 5]
    }, {
        name: 'John',
        data: [2, 2, 3, 2, 1]
    }]
});

// Adding the play button functionality
document.getElementById('playSonification').onclick = function() {
    chart.sonify(chart);
};