Chart

The React Chart component helps you build charts and data visualizations in your app. It works with the Recharts library and adds Tailwind CSS styling for a clean and consistent look.

You can use it to display data as line, bar, area, or pie charts. For example, you can show sales data, user growth, or performance metrics in a visual format.

Built with React and Recharts, it supports responsive charts, custom tooltips, legends, and flexible styling using Tailwind CSS.

Installation

Install the component using the Tailgrids CLI.

npx @tailgrids/cli add chart

Anatomy

Import the component and build your chart by combining Recharts components with our custom wrappers.

import {
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent
} from "@/registry/core/chart";
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";

export const ChartExample = () => {
  const data = [
    { name: "Jan", uv: 400 },
    { name: "Feb", uv: 300 }
  ];

  return (
    <ChartContainer initialDimension={{ width: 280, height: 160 }}>
      <AreaChart data={data}>
        <CartesianGrid vertical={false} />
        <XAxis dataKey="name" />
        <YAxis />
        <ChartTooltip content={<ChartTooltipContent indicator="square" />} />
        <ChartLegend content={<ChartLegendContent />} />
        <Area dataKey="uv" stroke="#3758F9" fill="#3758F9" />
      </AreaChart>
    </ChartContainer>
  );
};

Examples

Line Chart

A line chart showing multiple data series.

Zoomable Area Chart

An area chart that supports brushing to zoom into specific data ranges.

Bar Chart

A bar chart displaying grouped data comparisons.

Pie Chart

A pie chart rendering simple part-to-whole relationships.

API Reference

The Chart components are thin wrappers around Recharts. For complete API details on charts, axes, and shapes, please refer to the Recharts API Guide.

ChartContainer

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The Recharts chart components (e.g., `AreaChart`, `BarChart`) to render inside.
`className`	`string`	-	Additional CSS classes applied to the underlying `ResponsiveContainer`.
`initialDimension`	`{ width: number, height: number }`	-	Initial dimensions before hydration or when responsive width is not yet calculated.

Note: initialDimension is required for the chart to render properly. If you don't provide it, you might get warning at the console.

ChartTooltipContent

Extends Recharts TooltipContentProps.

Prop	Type	Default	Description
`indicator`	`'dot' \| 'line' \| 'square'`	`'dot'`	The shape of the indicator next to legend/tooltip items.
`hideLabel`	`boolean`	`false`	Whether to hide the top label (usually the X-axis value) in the tooltip.
`hideIndicator`	`boolean`	`false`	Whether to hide the color indicator shape completely.
`labelClassName`	`string`	-	Additional CSS classes for the tooltip label.
`formatter`	`(value, name, item, index) => {}`	-	Custom formatter for the tooltip values.
`labelFormatter`	`(label, payload) => {}`	-	Custom formatter for the tooltip label.
`className`	`string`	-	Additional CSS classes for the tooltip container.

ChartLegendContent

Extends Recharts DefaultLegendContentProps.

Prop	Type	Default	Description
`hideIndicator`	`boolean`	`false`	Whether to hide the color indicator shape next to legend items.
`className`	`string`	-	Additional CSS classes for the legend container.

The Chart components are designed with accessibility in mind, ensuring that data visualizations are perceivable and navigable.

Accessibility

Focus management: The chart can receive focus and shows clear visual indicators when it is active.
Screen reader support: Tooltips and legends help screen readers describe data values.
Data clarity: Use clear labels, legends, and axis titles so users can easily understand the data.
Visual distinction: Different colors and indicator styles (dot, line, square) help users distinguish between data series.
ARIA support: The chart uses accessible SVG elements and roles provided by Recharts.

Chart

CLI

Manual

On this page