JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.highcharts.com/highcharts.js"></script>
<div id="container" />

CSS

#container {
  padding: 20px;
  background-color: white;
}

JavaScript

var themeColors = {
  primaryColor: '#067bc2', //dark blue
  secondaryColor: '#6a61a7', //dark purple
  tertiaryColor: '#5ccadc', //turquoise
  darkGray: '#37383e', //dark gray
  mediumGray: '#919aa2', //medium gray
  mediumLightGray: '#c9d3dc', //medium blue gray
  lightGray: '#eaf1f8', //light blue gray (hover color)
  primaryRed: '#e54443',
  secondaryRed: '#e54443',
  primaryGreen: '#2bbb2d',
  secondaryGreen: '#2bbb2d',
  primaryOrange: '#ffa883', //peach
  primaryBackground: '#fafcfe', //light blue
  secondaryBackground: '#ffffff',
  primaryText: '#37383e', //dark gray
  secondaryText: '#919aa2', //medium gray
  selectedColor: '#f5fafd' //light blue, slightly darker than background
};

var colors = [
  themeColors.secondaryColor,
  themeColors.tertiaryColor,
  themeColors.primaryOrange
];

(function renderChart(series) {
  var options = {
    chart: {
      height: 400,
      spacing: [0, 0, 0, 0],
      type: 'areaspline',
   /*   events: {
        load: function () {
          const min = Math.min.apply(null, this.series[0].xData)
          const max = Math.max.apply(null, this.series[0].xData)
          
          this.xAxis[0].update({
            min: min + 0.5,
            max: max - 0.5
          })
        }
      } */
    },
    colors: colors,
    credits: {
      enabled: false
    },
    legend: {
      align: 'left',
      itemStyle: {
        color: themeColors.secondaryText,
        fontSize: '12px',
        fontWeight: 'normal',
      },
      margin: 30,
      symbolHeight: 14,
      symbolRadius: 0,
      symbolWidth: 14,
    },
    plotOptions: {
      areaspline: {
        marker: {
          fillColor: themeColors.secondaryBackground,
          lineColor: null,
          lineWidth: 2,
          radius: 3,
          symbol: 'circle',
        }
      }
    },
    title: {
      text: null
    },
    xAxis: {
      categories: ['first', 'second', 'third'],
      min: 0.5,
      max: 1.5,
      crosshair: {
        color:...