JSFiddle - React, Tailwind, and code Playground

by Emmanuel Umozurike

HTML

<div id="container" class="chart-container"></div>

JavaScript

$(function () {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'container',
      type: 'column'
    },
    title: {
      useHTML: true,
      x: -10,
      y: 8,
      text: '<span class="chart-title"> Grouped categories <span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
    },
    series: [
      {
        name: 'Test 1',
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
      },
      {
        name: 'Test 2',
        data: [10, 11, 12, 13, 14, 15, 16, 17, 18]
      },
      {
        name: 'Test 3',
        data: [19, 20, 21, 22, 23, 24, 25, 26, 27]
      }

    ],
    xAxis: {
      categories: [{
        name: 'Fruit',
        categories: ['Apple', 'Banana', 'Orange']
      }, {
        name: 'Vegetable',
        categories: ['Carrot', 'Potato', 'Tomato']
      }, {
        name: 'Fish',
        categories: ['Cod', 'Salmon', 'Tuna']
      }]
    }
  })
})