Function main

examples/annotations/main.ts:144–310

()

};

async function main(): Promise<void> {
  const container = document.getElementById('chart');
  if (!(container instanceof HTMLElement)) {
    throw new Error('Chart container not found');
  }

  const header = document.querySelector('header');
  const modeToggle = createModeToggle();
  if (header) header.appendChild(modeToggle.host);

  const data = createTimeSeries(900);
  const { maxIndex, maxY, minIndex, minY } = findExtrema(data);

  const maxP = data[maxIndex]!;
  const maxX = isTuplePoint(maxP) ? maxP[0] : maxP.x;

  const minP = data[minIndex]!;
  const minX = isTuplePoint(minP) ? minP[0] : minP.x;

  const vLineIndex = Math.floor(data.length * 0.6);
  const vLinePoint = data[vLineIndex]!;
  const vLineX = isTuplePoint(vLinePoint) ? vLinePoint[0] : vLinePoint.x;

  const referenceY = Math.round((maxY * 0.35 + minY * 0.65) * 1000) / 1000;

  const options: ChartGPUOptions = {
    grid: { left: 70, right: 24, top: 24, bottom: 44 },
    xAxis: { type: 'time', name: 'Time (ms)' },
    yAxis: { type: 'value', name: 'Value' },
    tooltip: { trigger: 'axis' },
    dataZoom: [{ type: 'inside' }],
    palette: ['#4a9eff'],
    animation: false,
    series: [
      {
        type: 'line',
        name: 'synthetic',
        data,
        color: '#4a9eff',
        lineStyle: { width: 2, opacity: 1 },
      },
    ],
    annotations: [
      // Horizontal reference line (type: 'lineY') with dashed style + template label + decimals.
      {
        id: 'ref-y',
        type: 'lineY',
        y: referenceY,
        layer: 'belowSeries',
        style: { color: '#ffd166', lineWidth: 2, lineDash: [8, 6], opacity: 0.95 },
        label: {
          template: 'ref y={y}',
          decimals: 3,
          offset: [8, -8],
          anchor: 'start',
          background: { color: '#000000', opacity: 0.55, padding: [2, 6, 2, 6], borderRadius: 6 },
        },
      },