JSFiddle - React, Tailwind, and code Playground

by prakhar230792

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: 300px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  "type": "svg",
  "title": {
    "text": null
  },
  "chart": {
    "type": "column"
  },
  "plotOptions": {
    "series": {
      "showInLegend": false
    }
  },
  "legend": {
    "enabled": false
  },
  "tooltip": {
    "backgroundColor": "#5F5F5F",
    "borderColor": "#5F5F5F",
    "shadow": false,
    "style": {
      "color": "#FAFAFA",
      "opacity": 0.95
    }
  },
  "colors": [
    "#8CC350",
    "#5A6EAA",
    "#D755A5",
    "#1EBED7",
    "#F0A01E",
    "#9B8CE6",
    "#3CB5A0",
    "#3287D2",
    "#F0557D",
    "#C3D250",
    "#EB782D",
    "#78B4F5",
    "#5FAF69",
    "#AA5FA5",
    "#FA5A50",
    "#F5C841"
  ],
  "xAxis": {
    "type": "linear",
    "title": {
      "text": "Id"
    }
  },
  "yAxis": {
    "type": "linear",
    "title": {
      "text": "Amount"
    }
  },
  "series": [{
    "data": [
      [
        6,
        91
      ],
      [
        33,
        26
      ],
      [
        33,
        16
      ],
      [
        105,
        25
      ],
    ]
  }],
  "credits": {
    "enabled": false
  }
});