JSFiddle - React, Tailwind, and code Playground

by Korah Babu Varghese

HTML

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

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

JavaScript

$(function() {
  Highcharts.chart('container', {
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    colors: ['red', 'orange', 'green'],
    chart: {
      type: 'column',
      spacingBottom: 10,
      spacingTop: 30,
      spacingLeft: 0,
      spacingRight: 0,

      style: {
        fontFamily: 'MuseoSans-500',
        fontSize: '14px'
      }

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


      labels: {

        style: {
          fontSize: '13px',
          fontFamily: 'Verdana, sans-serif'
        }
      }
    },
    yAxis: {
      min: 0,
      lineWidth: 1,
      tickInterval: 50,
      dashStyle: 'Dash',
      title: {
        text: '(%lr)'
      },
      labels: {
        formatter: function() {
          return this.value + "%";
        },
      },

    },
    legend: {
      enabled: false
    },

    tooltip: {
      enabled: false
    },
    plotOptions: {
      series: {
        pointPadding: 0,
        groupPadding: 0,
      }
    },

    series: [{
      data: [{
        name: 'l1',
        y: 102,
        color: "orange",
        dataLabels: {}
        //stack: 'male'
      }, {
        name: 'l2',
        y: 110,
        color: "red",
        dataLabels: {}
      }, {
        name: 'l3',
        y: 72,
        color: "green",
        dataLabels: {}

      }],


      dataLabels: {
        enabled: true,
        align: 'center',
        color: '#FFFFFF',
        inside: true,

        format: '{point.y}%',
        style: {
          fontSize: '4em',
          textShadow: false,
          fontWeight: false

        }
      }
    }]
  });

  Highcharts.chart('container1', {
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    colors: ['red', 'orange', 'green'],
    chart: {
      type: 'column',
      spacingBottom: 10,
      spacingTop: 30,
      spacingLeft: 0,
      spacingRight: 0,

      style: {
        fontFamily:...