JSFiddle - React, Tailwind, and code Playground

by Sasha Morozov

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'bar',
      height: 10,
      spacing: 0,
      margin: 0,
    },
    title: {
      text: null
    },
    xAxis: {
      labels: {
        enabled: false,
      }
    },
    tooltip: {
      formatter: function() {
        return '<b>' + this.y + '</b>'
      }
    },
    yAxis: {
      min: 0,
      title: {
        text: null
      },
      labels: {
        enabled: false,
      }
    },
    legend: {
      enabled: false,
    },

    plotOptions: {
      series: {
        stacking: 'normal',
        pointPadding: 0,
        groupPadding: 0.1,
        borderWidth: 0,
        shadow: false
      },
    },
    series: [{
      name: 'pear',
      data: [15]
    }, {
      name: 'apple',
      data: [15]
    }],
    exporting: {
      enabled: false
    },
    credits: {
      enabled: false
    },
  });
});