JSFiddle - React, Tailwind, and code Playground

by pepperdigital

HTML

<script src="https://code.highcharts.com/highcharts.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

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Tab 1 - sub tab 3'
        },
      
        xAxis: {
            categories: ['BIPS','CB','E&R','FSI','LSHC','Mfg','Real Estate','TMT'],
            title: {
                text: null
            }
        },
        yAxis: [
        {
            min: -90,
            max: 90,
            title: {
                text: 'Deal Value ($Bn)',
                align: 'high'
            },
                       
        labels: {
            formatter: function() {
                return Math.abs(this.value);
            }
        },
 
        
           tickPositions: [-90,-60,-30,0,30,60,90],


        }, {
            min: -300,
            max: 300,
            title: {
                text: 'Deal Volume',
                align: 'high'
            },
            tickPositions: [-300,-200,-100,0,100,200,300],
						labels: {
            formatter: function() {
                return Math.abs(this.value);
           					 }
        						},
            opposite: true
        }
                    

        ],
     tooltip: {
     formatter: function () {
                var s = '<b>' + this.x + '</b>';

                $.each(this.points, function () {
                    s += '<br/>' + this.series.name + ': ' +
                        Math.abs(this.y);
                });

                return s;
            },
        shared: true,
        },
      
        plotOptions: {
            bar: {
            		grouping: false,
                dataLabels: {
                    enabled: false
                }
            }
        },
        series: [
        {
          name: 'US Outbound Volume',
        	yAxis: 1,
        	data: [104,69,24,75,55,87,28,242]
        },
        {
        	type:'spline',
          name: 'US Outbound Value',
          yAxis: 0,
          data: [6,5,0,29,7,4,2,35],
        /*  tooltip: {
             ...