JSFiddle - React, Tailwind, and code Playground

by AbhishekRohan

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.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: 'column'
    },

    title: {
      text: 'Data input as column arrays'
    },

    data: {
      columns: [
        [null, 'Apples', 'Pears', 'Oranges'], // categories
        ['Blue', 1, 4, 3], // first series
        ['Black', 5, 4, 2] // second series
      ]
    },
    xAxis: {
      categories: [
        'First Category',
        'Second Category',
        'Third Category',
      ],
      labels: {
        y: 30
      },

      offset: 10,
    },
    yAxis: {
      min: 0,
      title: {
        style: {
          fontFamily: 'openSans',
          fontWeight: 'semilbold',
          color: '#000000',
          fontSize: '16px',
        },
        text: 'Y-Axis'
      },
      labels: {
        style: {
          fontFamily: 'openSans',
          fontSize: '14px',
          color: '#000000'
        }
      }
    },
  });
});