JSFiddle - React, Tailwind, and code Playground

by thorst

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

JavaScript

var chart;

chart = new Highcharts.Chart({
    colors: ['#000'],
    chart: {
        renderTo: 'container',
        type: 'line'
    },
    title: {
        text: null
    },
    credits: {
        enabled: false
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                                                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        cursor: 'pointer',
        events: {
            click: function() {
                alert("Clicked on index:");
            }
        },
        labels: {
            style: {
                cursor: 'pointer'
            }
        }
    },
    yAxis: {
        title: {
            text: null
        }
    },
    tooltip: {
        formatter: function() {
            return '<b>' + this.x + '</b><br/>' + this.y;
        }
    },
    plotOptions: {
        series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        alert("Clicked on index:" + this.x);
                    }
                }
            }
        }
    },
    series: [{
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
        showInLegend: false}]
});

$('.highcharts-axis text').click(function() {
    alert($(this).index());
});