JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JavaScript

$(function() {

	var labels = {
  	1: 'Apples',
    4: 'Bananas'
  };

  Highcharts.chart('container', {
      chart: {
        type: 'polygon'
      },
      xAxis: [{
          min: -0.5,
          max: 6,
          tickPositions: [0, 2, 3, 5],
          labels: {
            enabled: false
          }
        }, {
        	offset: 0,
        	linkedTo: 0,
          tickPositions: [1, 4],
          tickLength: 0,
          labels: {
          	formatter: function () {
            	return labels[this.value];
            }
          }
        }],
    yAxis: {
      min: 0,
      max: 100
    },

    series: [{
      name: 'series 1',
      id: 's1',
      colorIndex: 0,
      data: [
        [0, 0],
        [0, 25],
        [2, 20],
        [2, 0]
      ]
    }, {
      name: 'series 1',
      linkedTo: 's1',
      colorIndex: 0,
      data: [
        [3, 0],
        [3, 68],
        [5, 63],
        [5, 0]
      ]
    }, {
      colorIndex: 1,
      id: 's2',
      name: 'series 2',
      data: [
        [0, 25],
        [0, 50],
        [2, 45],
        [2, 20]
      ]
    }, {
      name: 'series 2',
      colorIndex: 1,
      linkedTo: 's2',
      data: [
        [3, 68],
        [3, 78],
        [5, 73],
        [5, 63]
      ]
    }]
  });
});