JSFiddle - React, Tailwind, and code Playground

by Serghei Cebotari

HTML

<link rel="stylesheet" href="https://code.highcharts.com/11.4.8/css/highcharts.css" />
<script src="https://code.highcharts.com/11.4.8/highcharts.js"></script>
<script src="https://code.highcharts.com/11.4.8/modules/exporting.js"></script>

<div id="container"></div>

CSS

#container {
  height: 400px;
  width: 600px;
  margin: 0 auto;
}

JavaScript

Highcharts.chart("container", {
  title: {
    text: "Title",
  },

  xAxis: {
    categories: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ],
  },

  series: [
    {
      data: [
        29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1,
        95.6, 54.4,
      ],
      type: "column",
    },
  ],

  exporting: {
    buttons: {
      diamondButton: {
        symbol: "diamond",
      },
    },
  },
});