Function createCartesianOptions

examples/data-update-animation/main.ts:93–122

(data: Readonly<{ bars: ReadonlyArray<DataPoint>; line: ReadonlyArray<DataPoint> }>, animation: ChartGPUOptions['animation'])

};

const createCartesianOptions = (data: Readonly<{ bars: ReadonlyArray<DataPoint>; line: ReadonlyArray<DataPoint> }>, animation: ChartGPUOptions['animation']): ChartGPUOptions => {
  const n = data.line.length;
  return {
    grid: { left: 70, right: 120, top: 24, bottom: 56 },
    xAxis: { type: 'value', min: 0, max: Math.max(1, n - 1), name: 'Index (match-by-index)' },
    // Intentionally omit y min/max so y-domain changes (from new extents) are visible.
    yAxis: { type: 'value', name: 'Value (auto domain)' },
    theme,
    tooltip: { show: true, trigger: 'axis' },
    animation,
    series: [
      {
        type: 'bar',
        name: 'Bars',
        data: data.bars,
        color: '#4a9eff',
        barWidth: '72%',
        barGap: 0.2,
        barCategoryGap: 0.25,
      },
      {
        type: 'line',
        name: 'Line',
        data: data.line,
        color: '#ff4ab0',
        lineStyle: { width: 2, opacity: 1 },
      },
    ],
  };
};

const createPieOptions = (slices: ReadonlyArray<PieDataItem>, animation: ChartGPUOptions['animation']): ChartGPUOptions => {
  return {