JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>


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

CSS

#container{
  height:500px;
}

JavaScript

var data = [];
for (var i = 0; i <= 12; i++) {
  data.push([new Date(2024, 1, 6, i).getTime(), Math.random() * 100]); // Change the random value generation with your actual data
}

// Initialize the Highcharts chart
Highcharts.chart('container', {
  chart: {
    type: 'area',
  },
  title: {
    text: null
  },
  xAxis: {
    minPadding: 0,
    maxPadding: 0,
    type: 'datetime',
    dateTimeLabelFormats: {
      hour: '%I %p' // Format hours like "12 AM", "1 AM", etc.
    },
    title: {
      text: ''
    }
  },
  yAxis: {
    visible: false,
    height: '100%',
    title: {
      text: null,
      height: 10,
    }
  },
  navigator: {
    enabled: true,
  },
  plotOptions: {
    area: {
      fillColor: '#ffa502'
    },
    series: {
      showInLegend: false,
      lineWidth: 10,
      lineColor: '#70a1ff',
      marker: {
        enabled: false // Disable markers
      },
      showInNavigator: true,
      dataGrouping: {
        enabled: false,
      },
    }
  },
  series: [{
    name: '',
    data: data
  }],

  rangeSelector: {
    allButtonsEnabled: true,
    enabled: true,
    inputEnabled: false, // it supports only days
    selected: 1, // all
  },
});