Adding range selector to the highcharts area chart

Question

I am using highcharts area to represent the time series of a day, i want to add range selector to this chart, i tried with rangeSelector property, but it is not working as expected. not sure what i am missing in this

var data = [];
    for (var i = 0; i <= 12; i++) {
      data.push([new Date(2024, 1, 6, i).getTime(), 10]);  
    }

    // 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
      }],
    });

fiddle link enter link description here

Answer 1

It's a part of HighStock charts, so it's a premium feature, so setting the property won't work.

For range selector:

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

For navigator

... 
navigator: {
    enabled: true,
},
...

But this works only for Highstocks charting (premium) and not HighCharts (free):

Highstock Chart

---

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
  },
});

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

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