How to create a chart with custom visible range selection?

I want to create a chart where date is an x-parameter, so that the user can choose from what date and to what date to view the chart, as is usually implemented on cryptocurrency-related sites (I will attach an example below). But I don’t know what this type of chart is called, so I couldn’t even find an example on the Internet. I’m using html/css/js and the chart.js library

Here is an example of the chart I want to create (pointed to the date range selector with an arrow)
Now I have this chart

Code:

import Chart from 'chart.js/auto'

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

const data = [
  { date: new Date('13 aug 2024'), price: 10 },
  { date: new Date('14 aug 2024'), price: 10.2 },
  { date: new Date('15 aug 2024'), price: 10.4 },
  { date: new Date('16 aug 2024'), price: 10.1 },
  { date: new Date('17 aug 2024'), price: 8 },
  { date: new Date('18 aug 2024'), price: 10 },
]

new Chart('chart', {
  type: 'line',
  options: {
    plugins: {
      legend: {
        display: false
      }
      ,
    },
    interaction: {
      mode: 'index',
      intersect: false
    }
  },
  data: {
    labels: data.map(row => `${row.date.getUTCDate()} ${months[row.date.getMonth()]}`),
    datasets: [
      {
        label: 'Price',
        data: data.map(row => row.price)
      }
    ]
  }
})