JSFiddle - React, Tailwind, and code Playground

by alexserden

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  
  <div id="bar" style="position: relative"/>

JavaScript

$(function () {

       
        let chart = Highcharts.chart('bar', {
      
            series: [
          
          {
								 type: 'column',
                data: [
                {name: 'march 2020', y: -1, firstName: 'A'},
                {name: 'march 2020', y: 1.32, firstName: 'S'},
                {name: 'march 2020', y: -1.42, firstName: 'D'},
                {name: 'march 2020', y: -2.2, firstName: 'F'}
                ],
                name: 'By RD',
                color: '#bdbdbd'            
                },
            
            {
            type: 'line',
                data: [{name: 'march 2020', y: -1.32, employeePhone: '+38095596659'},
                {name: 'march 2020', y: -1.32, employeePhone: '+380940605383'},
                {name: 'march 2020', y: -1.32, employeePhone: '+380912385090'},
                {name: 'march 2020', y: -1.32, employeePhone: '+380912685095'}
                ],
                name: 'AVG By Chain',
                color: '#5f6769'
                }
            ],
            chart: {
                height: 300,         
            },
            xAxis: {
                categories: {0:'b',1:'c',2:'d',3:'z',4:'x'},
                crosshair: {
                    enabled: true
                },
                labels: {
                    style: {
                        fontSize: '12px',
                        color: '#505050'
                    }
               
                },
                title: {
                    style: {
                        fontSize: '14px',
                        color: '#505050',
                        fontWeight: 'bold'
                    }
                }
            },
            yAxis: {
                labels: {
                    style: {
                        fontSize: '14px',
                        color: '#505050'
                    }
                },
                title: {
                    text: 'Name',
                    style: {
   ...