Brush Chart in JavaScript

// Deterministic daily data: a random walk with weekly seasonality for order
// counts, and correlated revenue so brushing either series stays meaningful.
function mulberry32(seed) {
  return function () {
    seed |= 0
    seed = (seed + 0x6d2b79f5) | 0
    var t = Math.imul(seed ^ (seed >>> 15), 1 | seed)
    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296
  }
}

// Mean-reverting random walk: wanders organically around ~300 with occasional
// jumps, so the line looks like real order data rather than a smooth wave.
var rand = mulberry32(42)
var data1 = []
var data2 = []
var ts = new Date('01 Oct 2024').getTime()
var level = 300

for (var i = 0; i < 180; i++) {
  level += (rand() - 0.5) * 55
  level += (300 - level) * 0.03
  if (rand() > 0.94) level += (rand() - 0.5) * 90
  if (level < 120) level = 120
  var orders = Math.round(level)
  data1.push([ts, orders])
  data2.push([ts, Math.round(orders * (0.32 + rand() * 0.12) * 10) / 10])
  ts += 86400000
}

var options = {
  series: [
    {
      name: 'Orders',
      data: data1,
    },
    {
      name: 'Revenue',
      data: data2,
    },
  ],
  chart: {
    id: 'chart2',
    type: 'line',
    height: 230,
    toolbar: {
      autoSelected: 'pan',
      show: false,
    },
  },
  title: {
    text: 'Daily Orders & Revenue',
    align: 'left',
  },
  colors: ['#008FFB', '#00E396'],
  dataLabels: {
    enabled: false,
  },
  stroke: {
    width: [2, 4],
    curve: ['straight', 'monotoneCubic'],
  },
  fill: {
    opacity: [1, 0.75],
  },
  markers: {
    size: 0,
  },
  yaxis: [
    {
      seriesName: 'Orders',
      axisTicks: {
        show: true,
        color: '#008FFB',
      },
      axisBorder: {
        show: true,
        color: '#008FFB',
      },
      labels: {
        style: {
          colors: '#008FFB',
        },
      },
      title: {
        text: 'Orders',
        style: {
          color: '#008FFB',
        },
      },
    },
    {
      seriesName: 'Revenue',
      opposite: true,
      axisTicks: {
        show: true,
        color: '#00E396',
      },
      axisBorder: {
        show: true,
        color: '#00E396',
      },
      labels: {
        style: {
          colors: '#00E396',
        },
      },
      title: {
        text: 'Revenue ($k)',
        style: {
          color: '#00E396',
        },
      },
    },
  ],
  xaxis: {
    type: 'datetime',
  },
}

var chart = new ApexCharts(document.querySelector('#chart-line2'), options)
chart.render()

var optionsLine = {
  series: [
    {
      name: 'Orders',
      data: data1,
    },
    {
      name: 'Revenue',
      data: data2,
    },
  ],
  chart: {
    id: 'chart1',
    height: 130,
    type: 'area',
    brush: {
      target: 'chart2',
      enabled: true,
    },
    selection: {
      enabled: true,
      xaxis: {
        min: new Date('05 Jan 2025').getTime(),
        max: new Date('10 Feb 2025').getTime(),
      },
    },
  },
  colors: ['#008FFB', '#00E396'],
  stroke: {
    width: [1, 3],
    curve: ['straight', 'monotoneCubic'],
  },
  fill: {
    type: 'gradient',
    gradient: {
      opacityFrom: 0.91,
      opacityTo: 0.1,
    },
  },
  xaxis: {
    type: 'datetime',
    tooltip: {
      enabled: false,
    },
  },
  yaxis: {
    tickAmount: 2,
  },
}

var chartLine = new ApexCharts(
  document.querySelector('#chart-line'),
  optionsLine,
)
chartLine.render()