JSFiddle - React, Tailwind, and code Playground

by KSK Kushwah

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'column',
        zoomType: 'x',
    },
    title: {
        text: 'Orders by Priority tooltip change'
      },
      subtitle: {
        text: document.ontouchstart === undefined ?
          'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
      },
      xAxis: {
        categories: ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'],
        title: {
          text : 'Priority'
        },
        min : 0,
        max : 5,
        scrollbar:{
          enabled : true
        }
      },
      yAxis: {
        title: {
          text: 'Number of orders'
        }
      },
      plotOptions: {
        column: {
          dataLabels: {
            enabled: true
          }
        },
        series: { pointWidth: 40}
      },
      legend: {
        enabled: false
      },
			tooltip: {
        headerFormat: '{series.xAxis.userOptions.title.text}: <b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
      },

      series: [{
      name: 'Number of orders',
        data: [
          [ 5],
          [12],
          [5],
          [20],
          [115],
          [25],
          [20],
          [115],
          [25]
        ]
      }]
});