JSFiddle - React, Tailwind, and code Playground

by yasarui

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>


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

CSS

#container{
  height: 100px;
}

JavaScript

var data = [];
    for (var i = 0; i <= 12; i++) {
      data.push([new Date(2024, 1, 6, i).getTime(), 10]); // 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,
        }
      },
       plotOptions: {
        area: {
          fillColor: '#ffa502'
        },
        series: {
          showInLegend: false,
          lineWidth: 10,
          lineColor: '#70a1ff',
          marker: {
            enabled: false // Disable markers
          }
        }
      },
      series: [{
        name: '',
        data: data
      }],
      rangeSelector: true
    });