JSFiddle - React, Tailwind, and code Playground

by Alagar Kamuthurai

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: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
  const percentage = [10, 60, 20, 40, 50];

  const escalatedData = [
    { name: 'Jan', y: 70, escalatedValue: 10, nonescalatedValue: 60 },
    { name: 'Feb', y: 20, escalatedValue: 10, nonescalatedValue: 10 },
    { name: 'Mar', y: 30, escalatedValue: 20, nonescalatedValue: 10 },
    { name: 'Apr', y: 50, escalatedValue: 30, nonescalatedValue: 20 },
    { name: 'May', y: 15, escalatedValue: 10, nonescalatedValue: 5 }];


  $('#container').highcharts({
    chart: {
      zoomType: 'xy'
    },
    title: {
      text: 'Escalated/Non-Escalated data'
    },
    xAxis: [{
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May']
    }],
    yAxis: [{ // Primary yAxis
      labels: {
        format: '{value}',
      },
      title: {
        text: 'Values'
      }
    }, { // Secondary yAxis
      title: {
        text: 'Percentage'
      },
      labels: {
        format: '{value} %'
      },
      opposite: true
    }],
    plotOptions: {
      column: {
        stacking: 'normal'
      }
    },
    legend: { enabled: false },
    series: [{
      name: 'Escalated data',
      type: 'column',
      yAxis: 1,
      data: escalatedData,
      tooltip: {
        valuePrefix: '$',
        pointFormatter: function () {
          return '<b>Total :' + Highcharts.numberFormat(this.y, 0) + '<br/>' +
          'Escalated value: ' + this.escalatedValue + '<br/>'
            + 'Non-Escalated value: ' + this.nonescalatedValue + '<br/></b>';
        }
      }

    }, {
      name: 'Percentage',
      type: 'spline',
      data: percentage,
      tooltip: null
    }]
  });
});