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

// Generate random data for the scatter chart
const generateRandomData = (numPoints) => {
    const data = [];
    for (let i = 0; i < numPoints; i++) {
        data.push([Math.random() * 100, Math.random() * 100]);
    }
    return data;
};

const chart = Highcharts.chart('container', {
    chart: {
        type: 'scatter',
        zoomType: 'xy'
    },
    title: {
        text: 'Scatter Chart with 250 Points and Sonification'
    },
    xAxis: {
        title: {
            text: 'X Axis'
        }
    },
    yAxis: {
        title: {
            text: 'Y Axis'
        }
    },
    series: [{
        name: 'Random Data',
        data: generateRandomData(250),
        sonification: {
            duration: 4000,
            showPlayMarker: true
        }
    }]
});

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