Pie & donut

import { useMemo } from 'react';
import { createSpec, pipe, geom, scale, coord } from '@graphysdk/viz-engine';
import { GraphProvider, GraphRenderer } from '@graphysdk/react-renderer';

const data = {
  columns: [
    { key: 'department', label: 'Department' },
    { key: 'spend', label: 'Spend' },
  ],
  rows: [
    { department: 'Engineering', spend: 420 },
    { department: 'Marketing', spend: 180 },
    { department: 'Sales', spend: 150 },
    { department: 'Operations', spend: 95 },
    { department: 'HR', spend: 80 },
    { department: 'Legal', spend: 75 },
  ],
};

export function BudgetBreakdown() {
  const spec = useMemo(
    () =>
      pipe(
        createSpec({ x: '', y: 'spend', color: 'department' }),
        geom.bar({ position: 'fill' }),
        coord.polar({ theta: 'y' }),
        scale.x(),
        scale.y(),
        scale.color.palette(),
      ),
    [],
  );

  return (
    <GraphProvider input={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}

const data = {
  columns: [
    { key: 'browser', label: 'Browser' },
    { key: 'share', label: 'Share' },
  ],
  rows: [
    { browser: 'Chrome', share: 65 },
    { browser: 'Safari', share: 18 },
    { browser: 'Firefox', share: 7 },
    { browser: 'Edge', share: 5 },
    { browser: 'Other', share: 5 },
  ],
};

const spec = pipe(
  createSpec({ x: '', y: 'share', color: 'browser' }),
  geom.bar({ position: 'fill' }),
  coord.polar({ theta: 'y', innerRadius: 0.55 }),
  scale.x(),
  scale.y(),
  scale.color.palette(),
);

geom.bar({
  position: 'fill',
  dataLabels: {
    showDataLabels: true,
    format: 'percentage',     // 'absolute' for raw values
    showCategoryLabels: true, // "North · 35%"
  },
});

geom.bar({
  position: 'fill',
  params: { borderColor: '#ffffff', borderWidth: 2 },
});