JSFiddle - React, Tailwind, and code Playground

by anikettiwari

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

$(function() {
  var categories = ["Open", "Expire within 90 days", "In Progress", "Past"],
    colors = ["#1097ae", "#81cbd6", "#b4d66c", "#317fc2"],
    data = [9, 13, 7, 8];
  var chartData = [{
    y: 9,
    color: '#1097ae',
    name: 'Open'
  }, {
    y: 13,
    color: '#81cbd6',
    name: 'Expire within 90 days'
  }, {
    y: 7,
    color: '#b4d66c',
    name: 'In Progress'
  }, {
    y: 8,
    color: '#317fc2',
    name: 'Past'
  }];

  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'column',
   //   marginBottom: 100,
      align: 'top'
    },
    title: {
      text: 'My Custom Column Chart',
      align: 'center',
      style: {
        "font-size": '14px',
        "color": '#0000ff'
      }
    },
    colors: colors,
    legend: {
      labelFormatter: function() {
        return data[this.index] + ' ' + categories[this.index];
      },
     // layout: 'vertical',
    },
    credits: {
      enabled: true,
      text: 'Courtesy Dean Sharma',
      href: 'stackoverflow.com'
    },
    xAxis: {
      categories: categories,
      labels: {
        autoRotation: false,
        style: {
          color: '#777',
          fontFamily: 'Open Sans',
          fontSize: '10px'
        }
      },
      lineColor: '#f8f8f8',
      tickColor: '#f8f8f8'
    },
    yAxis: {
      title: {
        text: '',
        useHTML: true
      }
    },
    plotOptions: {
      series: {
        grouping: false
      }
    },
    series: data.map((point, i) => {
      return {
        data: [
          [i, point]
        ]
      }
    })
  });
});