JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/sonification.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <button id="btn">Play</button>
    <div id="container"></div>
    <p class="highcharts-description">Test</p>
</figure>

CSS

#btn {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    background-color: #fff;
    border: 1px solid #25386f;
    color: #25386f;
    font-size: 0.9rem;
    min-height: 30px;
    font-weight: 500;
    border-radius: 4px;
    padding: 0.375rem 0;
    width: 7rem;
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
    text-align: center;
    cursor: pointer;
}

#btn:hover {
    background-color: #25386f;
    color: #fff;
}

.highcharts-figure {
    min-width: 360px;
    max-width: 850px;
    margin: 0 auto;
    position: relative;
}

JavaScript

Highcharts.chart('container', {

    title: {
        text: 'Global temperature change'
    },

    subtitle: {
        text: 'Data input from CSV'
    },

    data: {
        csvURL: 'https://gist.github.com/marvin19/a24d5a95c89067db888e965845f0406c',
        itemDelimiter: '\t',
        firstRowAsNames: false
    },

    plotOptions: {
        series: {
            marker: {
                enabled: false
            }
        }
    },

    series: []
});