JSFiddle - React, Tailwind, and code Playground

by core972

HTML

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

<div id="container" style="min-width: 310px; height: 100%; max-width: 100%; margin: 0 auto"></div>

JavaScript

var yCategories = [
                'One',
                'Two',
                'Three',
                'Four',
                'Five',
                'Six',
                'Seven',
                'Eight',
                'Nine',
                'Ten'
            ];
Highcharts.chart('container', {

    chart: {
        type: 'scatter',
        zoomType: 'xy'
    },

    title: {
        text: 'Some title'
    },

    xAxis: {
        title: {
            enabled: true,
            text: 'Date'
        },

    type: 'datetime',
        labels:
        {
            formatter: function () {
                    return Highcharts.dateFormat("%b %Y", this.value);
                }
        }

    },

    yAxis: {
        title: {
            text: 'Rank goes to 10000'
        },

    categories: yCategories,
    type: 'category'
    },

    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: 0,
        y: 0,
        floating: false,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
        borderWidth: 1
    },

    plotOptions: {
        scatter: {
            marker: {
                radius: 6,
        fillOpacity:0.3,
                states: {
                    hover: {
                        enabled: true,
                        lineColor: 'rgb(100,100,100)'
                    }
                }
            },
            tooltip: { 
                //headerFormat: '<b>{series.name}</b><br>',
                //pointFormat: 'Rank: {point.y} <br>Date: {point.x:%b %e, %Y}',
                pointFormatter:function(){
                    var formatedDate = new Date(this.x).toLocaleDateString("en-US")
                    return 	'<b>'+this.series.name+'</b><br>' + 
                    				'Rank: '+ yCategories[this.y - 1] +'<br>Date: '+ formatedDate
                }
            }
        }
    },

    series: [{
        name: 'Beer',
        data: [
       ...