Pie Chart

Visão geral

PieChart é um gráfico recharts construído sobre o primitive chart do shadcn (ChartContainer) para partes de um todo. Passe data tabular, o nameKey (o campo de label da fatia) e o dataKey (o campo de valor numérico). As cores das fatias vêm do fill de cada linha (ex. fill: "var(--chart-1)"), e um config opcional fornece os labels mostrados no tooltip. Passe donut para uma variante de donut com furo centralizado.

Use PieChart quando proporções importam e você tem duas a seis categorias que somam um total significativo - share de tráfego por browser, receita por tier, alocações por time. Para sete ou mais categorias, um BarChart lê mais rápido; para proporções em série temporal, um AreaChart empilhado carrega mais informação.

A edição React (@gremorie/rx-data) renderiza com recharts dentro do primitive chart do shadcn; a edição Angular (@gremorie/ng-data) renderiza geometria d3 headless dentro de um SVG estilizado. O motor de renderização difere; a superfície pública é idêntica input-por-input.

Anatomia

<pie-chart>
└─ figure (role="img")                  card surface, aspect-square
   ├─ svg
   │  ├─ slices, one per row (donut hole when donut)
   │  │  └─ row fill colored (palette / per-row fill)
   │  └─ slice labels (optional via showLabels)
   ├─ tooltip overlay (optional via tooltip)
   ├─ legend
   └─ sr-only data table

A edição React compõe esta superfície através do primitive chart do shadcn:

PieChart                          recharts pie / donut on the shadcn chart primitive
└─ ChartContainer                 responsive square frame + tooltip label config
   └─ RechartsPieChart            recharts pie surface
      ├─ ChartTooltip             hover card
      │  └─ ChartTooltipContent   themed tooltip body
      └─ Pie                      one slice per row (nameKey + dataKey); innerRadius for donut
         └─ LabelList             optional slice labels (showLabels)

Preview

'use client';import { PieChart, type ChartConfig, type ChartDatum } from '@gremorie/rx-data';// Categorical (pie / radial): one chart token per row via `fill`.const browserData: ChartDatum[] = [  { browser: 'Chrome', visitors: 275, fill: 'var(--chart-1)' },  { browser: 'Safari', visitors: 200, fill: 'var(--chart-2)' },  { browser: 'Firefox', visitors: 187, fill: 'var(--chart-3)' },  { browser: 'Edge', visitors: 173, fill: 'var(--chart-4)' },  { browser: 'Other', visitors: 90, fill: 'var(--chart-5)' },];const browserConfig: ChartConfig = {  visitors: { label: 'Visitors' },  Chrome: { label: 'Chrome' },  Safari: { label: 'Safari' },  Firefox: { label: 'Firefox' },  Edge: { label: 'Edge' },  Other: { label: 'Other' },};export function PieChartPreview() {  return (    <PieChart      data={browserData}      config={browserConfig}      nameKey="browser"      dataKey="visitors"      donut    />  );}

Instalação

Uso

import { PieChart, type ChartConfig, type ChartDatum } from "@gremorie/rx-data";

const data: ChartDatum[] = [
{ browser: "Chrome", visitors: 275, fill: "var(--chart-1)" },
{ browser: "Safari", visitors: 200, fill: "var(--chart-2)" },
{ browser: "Firefox", visitors: 187, fill: "var(--chart-3)" },
{ browser: "Edge", visitors: 173, fill: "var(--chart-4)" },
{ browser: "Other", visitors: 90, fill: "var(--chart-5)" },
];

const config: ChartConfig = {
visitors: { label: "Visitors" },
Chrome: { label: "Chrome" },
Safari: { label: "Safari" },
Firefox: { label: "Firefox" },
Edge: { label: "Edge" },
Other: { label: "Other" },
};

export function BrowserShare() {
  return (
    <PieChart data={data} config={config} nameKey="browser" dataKey="visitors" />
  );
}

import { Component } from '@angular/core';
import { PieChart } from '@gremorie/ng-data';
import type { ChartConfig, ChartDatum } from '@gremorie/ng-data';

@Component({
selector: 'app-browser-share',
imports: [PieChart],
template: `     <pie-chart [data]="data" [config]="config" nameKey="browser" dataKey="visitors" />
  `,
})
export class BrowserShareComponent {
readonly data: ChartDatum[] = [
{ browser: 'Chrome', visitors: 275, fill: 'var(--chart-1)' },
{ browser: 'Safari', visitors: 200, fill: 'var(--chart-2)' },
{ browser: 'Firefox', visitors: 187, fill: 'var(--chart-3)' },
{ browser: 'Edge', visitors: 173, fill: 'var(--chart-4)' },
{ browser: 'Other', visitors: 90, fill: 'var(--chart-5)' },
];

readonly config: ChartConfig = {
visitors: { label: 'Visitors' },
Chrome: { label: 'Chrome' },
Safari: { label: 'Safari' },
Firefox: { label: 'Firefox' },
Edge: { label: 'Edge' },
Other: { label: 'Other' },
};
}

API

<PieChart>

Um pie/donut recharts composto dentro do primitive chart do shadcn (ChartContainer). As cores das fatias vêm do fill de cada linha; o config opcional fornece os labels mostrados no tooltip.

Primitives de chart para composição customizada

Para controle total, componha recharts cru dentro de ChartContainer usando os primitives de chart do shadcn, todos reexportados de @gremorie/rx-data. Isso espelha o bloco de pie oficial do shadcn (ui.shadcn.com/charts/pie).

Types

Composição

1. Escolha nameKey e dataKey - a coluna de label e a coluna numérica. Ambas devem existir em cada linha.
2. Defina um fill por linha - aponte cada linha para um token --chart-* (ex. fill: "var(--chart-1)"). É daqui que vêm as cores das fatias.
3. Adicione um config mapeando cada nome de fatia (e a chave de valor) para um { label } para que o tooltip leia limpo.
4. Ordene as linhas por magnitude antes de passá-las. A maior fatia deve ficar na âncora de 12 horas para que o olho a leia primeiro.
5. Alterne donut quando você quer embutir um total ou label no centro, ou quando o card ao redor é grande o suficiente para que uma pie sólida pareça pesada demais.

O chart se auto-dimensiona ao pai através do ChartContainer (ResponsiveContainer do recharts). O frame força aspect-square para que as fatias permaneçam circulares.

Variações

Pie sólida

'use client';import { PieChart, type ChartConfig, type ChartDatum } from '@gremorie/rx-data';// Categorical (pie / radial): one chart token per row via `fill`.const browserData: ChartDatum[] = [  { browser: 'Chrome', visitors: 275, fill: 'var(--chart-1)' },  { browser: 'Safari', visitors: 200, fill: 'var(--chart-2)' },  { browser: 'Firefox', visitors: 187, fill: 'var(--chart-3)' },  { browser: 'Edge', visitors: 173, fill: 'var(--chart-4)' },  { browser: 'Other', visitors: 90, fill: 'var(--chart-5)' },];const browserConfig: ChartConfig = {  visitors: { label: 'Visitors' },  Chrome: { label: 'Chrome' },  Safari: { label: 'Safari' },  Firefox: { label: 'Firefox' },  Edge: { label: 'Edge' },  Other: { label: 'Other' },};export function PieChartPreview() {  return (    <PieChart      data={browserData}      config={browserConfig}      nameKey="browser"      dataKey="visitors"      donut    />  );}

<pie-chart [data]="data" [config]="config" nameKey="browser" dataKey="visitors" />

O padrão. Use quando a superfície ao redor é pequena (card, painel lateral) ou quando nenhum label centralizado é necessário.

Variante donut

'use client';import { PieChart, type ChartConfig, type ChartDatum } from '@gremorie/rx-data';// Categorical (pie / radial): one chart token per row via `fill`.const browserData: ChartDatum[] = [  { browser: 'Chrome', visitors: 275, fill: 'var(--chart-1)' },  { browser: 'Safari', visitors: 200, fill: 'var(--chart-2)' },  { browser: 'Firefox', visitors: 187, fill: 'var(--chart-3)' },  { browser: 'Edge', visitors: 173, fill: 'var(--chart-4)' },  { browser: 'Other', visitors: 90, fill: 'var(--chart-5)' },];const browserConfig: ChartConfig = {  visitors: { label: 'Visitors' },  Chrome: { label: 'Chrome' },  Safari: { label: 'Safari' },  Firefox: { label: 'Firefox' },  Edge: { label: 'Edge' },  Other: { label: 'Other' },};export function PieChartDonutPreview() {  return (    <PieChart      data={browserData}      config={browserConfig}      nameKey="browser"      dataKey="visitors"      donut    />  );}

<pie-chart
  [data]="data"
  [config]="config"
  nameKey="browser"
  dataKey="visitors"
  [donut]="true"
/>

Use quando você quer embutir um total ou label no centro do gráfico, ou quando uma pie sólida parece pesada demais em uma superfície grande. O furo usa um innerRadius de 60.

Labels

Defina showLabels para desenhar o nome de cada fatia dentro da fatia, para que o gráfico leia sem uma legenda separada.

'use client';import { PieChart, type ChartConfig, type ChartDatum } from '@gremorie/rx-data';const browserData: ChartDatum[] = [  { browser: 'Chrome', visitors: 275, fill: 'var(--chart-1)' },  { browser: 'Safari', visitors: 200, fill: 'var(--chart-2)' },  { browser: 'Firefox', visitors: 187, fill: 'var(--chart-3)' },  { browser: 'Edge', visitors: 173, fill: 'var(--chart-4)' },  { browser: 'Other', visitors: 90, fill: 'var(--chart-5)' },];const browserConfig: ChartConfig = {  visitors: { label: 'Visitors' },  Chrome: { label: 'Chrome' },  Safari: { label: 'Safari' },  Firefox: { label: 'Firefox' },  Edge: { label: 'Edge' },  Other: { label: 'Other' },};export function PieChartLabelsPreview() {  return (    <PieChart      data={browserData}      config={browserConfig}      nameKey="browser"      dataKey="visitors"      showLabels    />  );}

<PieChart
  data={data}
  config={config}
  nameKey="browser"
  dataKey="visitors"
  showLabels
/>

<pie-chart
  [data]="data"
  [config]="config"
  nameKey="browser"
  dataKey="visitors"
  [showLabels]="true"
/>

Use labels quando a superfície é grande o suficiente para acomodá-los e você quer os nomes das fatias visíveis em repouso. Combine com donut para um donut com labels.

Composição customizada

Quando você precisa de cores por fatia explícitas, preenchimentos de gradiente, um label central ou uma legenda customizada, componha recharts cru dentro de ChartContainer. Isso espelha o bloco de pie oficial do shadcn.

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
  type ChartDatum,
} from '@gremorie/rx-data';
import { Cell, Pie, PieChart } from 'recharts';

export function ExplicitColorPie({
  data,
  config,
  nameKey,
  dataKey,
  colorByName,
}: {
  data: ChartDatum[];
  config: ChartConfig;
  nameKey: string;
  dataKey: string;
  colorByName: Record<string, string>;
}) {
  return (
    <ChartContainer
      config={config}
      className="mx-auto aspect-square max-h-[260px]"
    >
      <PieChart>
        <ChartTooltip
          cursor={false}
          content={<ChartTooltipContent nameKey={nameKey} hideLabel />}
        />
        <Pie
          data={data}
          dataKey={dataKey}
          nameKey={nameKey}
          stroke="var(--background)"
          strokeWidth={2}
        >
          {data.map((row) => (
            <Cell
              key={String(row[nameKey])}
              fill={colorByName[String(row[nameKey])]}
            />
          ))}
        </Pie>
      </PieChart>
    </ChartContainer>
  );
}

Você também pode pular o <Cell> inteiramente e definir fill diretamente em cada linha de data - o wrapper faz exatamente isso.

Acessibilidade

• Accessibility layer: o accessibilityLayer do recharts fornece navegação por teclado e anúncios de screen reader para os dados do gráfico.
• Contraste de token: os tokens --chart-1 até --chart-5 vêm com contraste WCAG AA contra o fundo do card em ambos os temas claro e escuro.
• Separação de fatias: trace as fatias com a cor do fundo (veja o exemplo de composição customizada) para que fatias adjacentes permaneçam distinguíveis para usuários com deficiências de visão de cores mesmo quando as cores são próximas.
• Limite a contagem de fatias: acima de seis fatias, uma pie fica difícil de ler. Use BarChart em vez disso.

Relacionados

• BarChart - use BarChart quando você tem mais de seis categorias ou quer comparação exata de valores.
• RadialChart - layout polar irmão quando as categorias devem ser mostradas como arcos concêntricos em vez de fatias.
• AreaChart - use um AreaChart empilhado quando as proporções também precisam variar ao longo do tempo.