JSFiddle - React, Tailwind, and code Playground

by Hassen Charef

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>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

CSS

.highcharts-figure, .highcharts-data-table table {
    min-width: 310px; 
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

Highcharts.chart('container', {
  "chart": {
    "zoomType": "xy"
  },
  "plotOptions": {
    "series": {
      "borderWidth": 0,
      "dataLabels": {
        "enabled": 1,
        "format": "{y}"
      }
    }
  },
  "title": {
    "text": "Comptes crées"
  },
  "xAxis": [
    {
      "categories": [
        "2011_09",
        "2011_10",
        "2011_11",
        "2011_12",
        "2012_01",
        "2012_02",
        "2012_03",
        "2012_04",
        "2012_05",
        "2012_06",
        "2012_07",
        "2012_08",
        "2012_09",
        "2012_10",
        "2012_11",
        "2012_12",
        "2013_01",
        "2013_02",
        "2013_03",
        "2013_04",
        "2013_05",
        "2013_06",
        "2013_07",
        "2013_08",
        "2013_09",
        "2013_10",
        "2013_11",
        "2013_12",
        "2014_01",
        "2014_02",
        "2014_03",
        "2014_04",
        "2014_05",
        "2014_06",
        "2014_07",
        "2014_08",
        "2014_09",
        "2014_10",
        "2014_11",
        "2014_12",
        "2015_01",
        "2015_02",
        "2015_03",
        "2015_04",
        "2015_05",
        "2015_06",
        "2015_07",
        "2015_08",
        "2015_09",
        "2015_10",
        "2015_11",
        "2015_12",
        "2016_01",
        "2016_02",
        "2016_03",
        "2016_04",
        "2016_05",
        "2016_06",
        "2016_07",
        "2016_08",
        "2016_09",
        "2016_10",
        "2016_11",
        "2016_12",
        "2017_01",
        "2017_02",
        "2017_03",
        "2017_04",
        "2017_05",
        "2017_06",
        "2017_07",
        "2017_08",
        "2017_09",
        "2017_10",
        "2017_11",
        "2017_12",
        "2018_01",
        "2018_02",
        "2018_03",
        "2018_04",
        "2018_05",
        "2018_06",
        "2018_07",
        "2018_08",
        "2018_09",
        "2018_10",
        "2018_11",
        "2018_12",
        "2019_01",
  ...