Function main

examples/scatter/main.ts:62–138

()

};

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

  const xMin = 0;
  const xMax = 100;
  const yMin = 0;
  const yMax = 100;

  // Total points: ~10k (split across series).
  const fixed = createPoints(4500, 1, { xMin, xMax, yMin, yMax });
  const perPointSize = createPoints(4500, 2, {
    xMin,
    xMax,
    yMin,
    yMax,
    includeSize: true,
    sizeMin: 1.25,
    sizeMax: 7.5,
  });
  const functionSize = createPoints(1000, 3, { xMin, xMax, yMin, yMax });

  const options: ChartGPUOptions = {
    grid: { left: 70, right: 24, top: 24, bottom: 56 },
    xAxis: { type: 'value', min: xMin, max: xMax, name: 'X' },
    yAxis: { type: 'value', min: yMin, max: yMax, name: 'Y' },
    palette: ['#4a9eff', '#ff4ab0', '#40d17c'],
    animation: { duration: 900, easing: 'cubicOut', delay: 0 },
    series: [
      {
        type: 'scatter',
        name: 'fixed symbolSize (3)',
        data: fixed,
        symbolSize: 3,
        color: '#4a9eff',
      },
      {
        type: 'scatter',
        name: 'per-point size ([x,y,size])',
        data: perPointSize,
        // This is a fallback; per-point `size` takes precedence when present.
        symbolSize: 2,
        color: '#ff4ab0',
      },
      {
        type: 'scatter',
        name: 'symbolSize function',
        data: functionSize,
        symbolSize: ([x]) => 1.5 + 4 * Math.abs(Math.sin(x * 0.12)),
        color: '#40d17c',
      },
    ],
  };

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