JSFiddle - React, Tailwind, and code Playground

by Kesav Telaprolu

HTML

<script src="https://code.highcharts.com/6.1.1/highcharts.js"></script>
<script src="https://code.highcharts.com/6.1.1/modules/annotations.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'scatter'
    },
    
    xAxis: {
        categories: ['Green', 'Pink']
    },
    plotOptions: {
       scatter: {
          marker: {
             radius: 12,
             states: {
                hover: {
                   enabled: true,
                   lineColor: 'rgb(100,100,100)'
                }
             }
          },
          states: {
             hover: {
                marker: {
                   enabled: false
                }
             }
          }
       }
    },
    series: [{
        data: [{
            name: 'Point 1',
            x: 1,
            y: 2
        }, {
            name: 'Point 2',
            x: 2,
            y: 5
        }]
    }],
     annotations: [{
            labels: [{
              //point:'point 1',
              x:1,
              y:2,
              shape:'connector',
              format:'{y:1}',
              y:-23
            }]
        }]
});