JSFiddle - React, Tailwind, and code Playground

by Bharathi Prasannaa

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.setOptions({
  colors: ['#afe8ff', '#ffd68f']
});


Highcharts.chart('container', {
  chart: {
    type: 'column',
    margin: [80, 0, 60, 60]
  },


  title: {
    text: ''
  },
  xAxis: {

    tickWidth: 0,
    categories: ['Jan-17', 'Feb-17', 'Mar-17', 'Apr-17', 'May-17', 'Jun-17', 'Jul-17', 'Aug-17', 'Sep-17', 'Oct-17', 'Nov-17', 'Dec-17'],
    labels:{
     style: {
          "fontSize": "12px",
          "fontWeight": "normal",

          
         
        },
     rotation: -90,
      x: 0,
      y: 8
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total Bill / Invoice Amount',
     
    },
    stackLabels: {
      enabled: false,

    }
  },
  legend: {
    align: 'right',
    x: 0,
    verticalAlign: 'top',
    y: 0,
    floating: true,
    backgroundColor: 'white',
    borderWidth: 0,
    shadow: false
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    series: {
      dataLabels: {
        style: {
          "fontSize": "12px",
          "fontWeight": "normal",
          "textOutline": "0px contrast",
          "fontFamily":"Lato"
        },
        rotation: 270,
      },
      borderWidth: 0,
      pointPadding: 0
    },
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        color: '#222'
      }
    }
  },
  series: [{
    name: 'Own A/c',
    data: [5, 3, 4, 7, 2, 5, 3, 4, 7, 6, 4, 2]
  }, {
    name: 'Client A/c',
    data: [2, 2, 3, 2, 1, 2, 2, 3, 2, 1, 4, 5]
  }]
});