DS | Adila.co
Componentes

Chart

Componente chart do design system adila.co.

Instalação

bun add @adila-sh/ui

Uso

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from '@adila-sh/ui';
import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';

const chartData = [
  { mes: 'Jan', vendas: 42 },
  { mes: 'Fev', vendas: 58 },
  { mes: 'Mar', vendas: 51 },
  { mes: 'Abr', vendas: 73 },
];

const chartConfig = {
  vendas: { label: 'Vendas', color: 'var(--primary)' },
};

export function Example() {
  return (
    <ChartContainer config={chartConfig} className="min-h-40 w-full">
      <BarChart data={chartData}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="mes" tickLine={false} axisLine={false} tickMargin={8} />
        <ChartTooltip content={<ChartTooltipContent />} />
        <Bar dataKey="vendas" fill="var(--color-vendas)" radius={4} />
      </BarChart>
    </ChartContainer>
  );
}

Dependências

  • recharts

Nesta página