Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

CSS

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

JavaScript

(function() {
    function showMoreDetails() {
        console.log('showMoreDetails')
    }

    Highcharts.chart('container', {
        series: [{
            data: [1, 2, 3]
        }],
        tooltip: {
            useHTML: true,
            backgroundColor: '#000000',
            borderRadius: 6,
            borderColor: '#000000',
            valueDecimals: 2,
            animation: true,
            style: {
                color: 'white',
                opacity: 0.75,
                shadow: '0px 3px 6px #000000',
                pointerEvents: 'auto'
            },
            hideDelay: 1000,
            formatter() {
                const {
                    point
                } = this;
                return `<span>
        <span>Rating = ${point.y}</span>
        <button type="button" onclick="showMoreDetails()">More Details</button>
       </span>`
            }
        }
    });
})()