JSFiddle - React, Tailwind, and code Playground

by MarkMor

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

    <div id="container_line_highchart"></div>

CSS

@import "https://code.highcharts.com/css/highcharts.css";

/*
HIGHCHART CONTAINER STYLES
*/
.highcharts-tooltip-box {
  fill: #34383c;
  fill-opacity: 1;
  stroke-width: 0;
}

.highcharts-tooltip text {
  fill: #f0f2f5;
}

.highcharts-container {
  width: 100%;
  font-family: "proxima-nova", -apple-system, BlinkMacSystemFont, Arial, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.highcharts-color-0 {
  fill: #0097a8;
}

.highcharts-color-1 {
  fill: #6625C4;
}

.highcharts-color-2 {
  fill: #FF1A6C;
}

.highcharts-color-3 {
  fill: #FC9446;
}

.highcharts-color-4 {
  fill: #809afd;
}

.highcharts-color-5 {
  fill: #ffa3b5;
}

.highcharts-color-6 {
  fill: #f1c21b;
}

.highcharts-color-7 {
  fill: #444950;
}

JavaScript

Highcharts.chart('container_line_highchart', {
      chart: {
        type: 'line',
        styledMode: true,
        height: 400
      },
      title: {
        text: ''
      },
      xAxis: {
        categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
      },
      tooltip: {
        distance: 8,
        backgroundColor: "#FFFFFF",
        borderColor: "#f0f2f5",
        borderRadius: 16,
        style: {
          color: '#666f7a'
        }
      },
      credits: {
        enabled: false
      },
      yAxis: {
        title: {
          text: ''
        }
      },
      legend: {
        align: 'left'
      },
      series: [{
        name: 'Jane',
        data: [250, 140, 125, 123, 115, 90, 89, 45, 38]
      }, {
        name: 'John',
        data: [190, 168, 111, 100, 135, 95, 48, 35, 25]
      }]
    });