Function main

examples/basic-line/main.ts:37–148

()

};

async function main() {
  const container = document.getElementById('chart');
  if (!container) {
    throw new Error('Chart container not found');
  }

  const dataA = createSineWave(300, { phase: 0, amplitude: 1 });
  const dataB = createSineWave(300, { phase: Math.PI / 3, amplitude: 1 });
  const dataC = createSineWave(300, { phase: (2 * Math.PI) / 3, amplitude: 1 });
  const xMax = Math.PI * 2;

  const options: ChartGPUOptions = {
    // Grid margins (CSS px): reserve space for axis labels and titles.
    // left=70 for Y-axis labels, bottom=56 for X-axis labels+title, top/right for padding.
    grid: { left: 70, right: 24, top: 24, bottom: 56 },

    // Explicit axis min/max ensures stable, consistent rendering across demos.
    // Axis titles (name) label what each dimension represents.
    xAxis: { type: 'value', min: 0, max: xMax, name: 'Angle (rad)' },
    yAxis: { type: 'value', min: -1.1, max: 1.1, name: 'Amplitude' },

    palette: ['#4a9eff', '#ff4ab0', '#40d17c'],

    // Animation smoothly transitions data updates. Set duration: 0 to disable.
    // Useful when appending live data where animation would be distracting.
    animation: { duration: 900, easing: 'cubicOut', delay: 0 },
    series: [
      {
        type: 'line',
        name: 'sin(x) (filled)',
        data: dataA,
        color: '#4a9eff',
        // Story 2.4 acceptance: `type: "line"` with `areaStyle` should render
        // the area fill behind the line stroke.
        // areaStyle creates a "filled line" by drawing the area under the curve.
        // Low opacity (0.2) keeps the fill subtle and prevents overlapping fills from obscuring each other.
        areaStyle: { opacity: 0.2 },
        lineStyle: { width: 2, opacity: 1 },
      },
      {
        type: 'line',
        name: 'sin(x + π/3)',
        data: dataB,
        lineStyle: { width: 2, opacity: 1 },
      },
      {
        type: 'line',
        name: 'sin(x + 2π/3)',
        data: dataC,
        lineStyle: { width: 2, opacity: 1 },
      },
    ],
  };

  const chart = await ChartGPU.create(container, options);

  // Story 3.11 acceptance: verify ChartGPUInstance.on/off event API
  // Simple event usage: chart.on('event', callback) for high-level interactions.