Highcharts Demo

author(s): Torstein Hønsi

by stitot

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/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<div id="container"></div>
<button id="add-point" class="highcharts-demo-button">Redraw</button>
<button id="reload" class="highcharts-demo-button">Reload</button>

CSS

#container {
    height: 400px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}

.highcharts-demo-button {
    background: #f2f2f2;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-size: 0.8rem;
    padding: 0.5rem 1.5rem;
    margin: 0.5rem -5px 0.5rem 10px;
    transition: background 250ms;
}

.highcharts-demo-button:hover {
    background: #e6e6e6;
}

JavaScript

function createLabel(chart, text, y, color) {
    const label = chart.renderer.label(text, 80, y)
        .attr({
            fill: color,
            padding: 10,
            r: 5,
            zIndex: 8
        })
        .css({
            color: '#ffffff'
        })
        .add();

    setTimeout(function () {
        label.animate({ opacity: 0 }, {
            duration: 500,
            complete: function () {
                label.destroy();
            }
        });
    }, 1500);
}

const colors = Highcharts.getOptions().colors;

const chart = Highcharts.chart('container', {
    chart: {
        events: {
            load() {
                createLabel(this, 'load event', 80, colors[0]);
            },
            redraw() {
                createLabel(this, 'redraw event', 120, colors[3]);
            },
            render() {
                createLabel(this, 'render event', 160, colors[1]);
            }
        }
    },
    data: {
        csvURL: 'https://demo-live-data.highcharts.com/vs-load.csv',
    },
});

const addPointButton = document.getElementById('add-point'),
    reloadButton = document.getElementById('reload');

addPointButton.addEventListener('click', () => {
    chart.redraw(false)
});

reloadButton.addEventListener('click', () => {
    window.location.reload();
});