Chart

A beautiful, completely custom charting engine built from the ground up for modern React applications.

This ChartBlock completely drops heavy dependencies (No recharts, No chart.js, No gsap). It leverages the power of Responsive CSS Flexbox for the Bar charts to ensure they anchor perfectly to the axis without squashing, uses Smooth Bezier Curves for the Line/Area SVG paths, and utilizes pure SVG Stroke-Dasharray Math for perfect Pie and Donut charts that never stretch into ovals.

One data array of { label, value } drives every chart type — the engine handles scaling, height distribution and polar math. Hover any bar, point or slice for its tooltip. Two further types, donut-legend and stacked-bar, show shares of a whole with a legend, each share in its own colour — the charts on the Book Appointment page.

Bar chart

Bars are pure HTML/CSS flexbox, so they always sit flat on the axis regardless of container size.

Passdata: as { label, value }[].
type"bar": is the default.
valuePrefix"$": is prepended to every rendered number, axis labels and tooltip alike.
height{300}: fixes the pixel height to stop layout shift — width is always 100% responsive.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Chart

npx shadcn@latest add @algorize-ui/chart

components/custom/blocks/ChartBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs these for you. Run them yourself only if you are adding Chart to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

popover and toggle-group are components, not packages — the shadcn CLI installs them as source files.

npx shadcn@latest add @algorize-ui/popover @algorize-ui/toggle-group

Examples

Line chart

Settype"line": to draw a custom spline — smooth bezier curves instead of hard angles.
showArea{false}: leaves the stroke bare, with nothing under it.

Pie chart

Settype"pie": to render in a 1:1 container — so it never stretches into an oval — with each slice shaded from your color.

Donut chart

Settype"donut": for the same geometry with the centre cut out.

Donut with legend

Settype"donut-legend": for categorical shares: every segment gets its own colour from colors (the theme accent first), with a legend beside it. Hover a segment or its row and the other shares fade.
centerLabel: captions the centre at rest, where the largest share reads; hoverLabel replaces it while a share is hovered.

Stacked bar

Settype"stacked-bar": for one horizontal bar split by share, legend below. Both legend types size to their content, so height is only needed if you want a fixed box.
Give a point its owncolor: to pin one share — an "Other" bucket to grey, say — while the rest follow the palette.

Traffic sources gauge

Settype"traffic-sources": for a semicircular tick-gauge breakdown of visitor channels with total counts and share percentages.
signUps{412}: calculates and renders the visit-to-sign-up conversion rate meter.

Visitors by country

Settype"visitors-by-country": for an interactive barcode breakdown with ISO country code badges and ranked shares.
showCodes{true}: renders the 2-letter ISO country badges in the breakdown list.

Metrics overview tabs

Settype"metrics-overview": for an interactive multi-tab dashboard chart featuring pill track columns, animated active tab spring, total & average statistics, and a toggle between columns and smooth trend spline.

Features

Explore the Chart component's data visualization capabilities, featuring responsive resizing, interactive tooltips, and smooth rendering.

Customizable

Easily adapt the component's styling and behavior to fit your application's unique design system.

Accessible

Built with accessibility in mind, ensuring all users can interact with your application effectively.

Responsive

Fully responsive design that looks and works great across desktop, tablet, and mobile devices.

Performant

Optimized for maximum performance with minimal re-renders and efficient state management.

Best Practices & Guidelines

Usage Guidelines

Follow standard design principles when implementing this component. Ensure proper contrast, spacing, and context within your layout.

Props Reference

Prop	Type	Default	Description
`data`	`{ label: string, value: number, color?: string, code?: string }[]`	Required	An array of objects mapping string labels to numerical values. `color` pins one share's colour; `code` provides 2-letter ISO country codes.
`type`	`"bar" \| "line" \| "pie" \| "donut" \| "donut-legend" \| "stacked-bar" \| "traffic-sources" \| "visitors-by-country" \| "metrics-overview"`	`"bar"`	Determines the core visualization architecture to render.
`color`	`"indigo" \| "rose" \| "emerald" \| "amber" \| "blue" \| "zinc" \| string`	`"var(--primary)"`	Applies the active color theme to the bars, strokes, gradients, pie slices, and tooltips. Accepts hex codes.
`height`	`number`	`300`	Forces a fixed pixel height for the chart container to prevent layout shifting. Width is always 100% responsive. The legend charts size to their content unless it is set.
`colors`	`string[]`	accent, teal, amber, rose, grey	Legend charts only: one colour per share, in order, wrapping if there are more shares than colours. The first entry is `var(--primary)`, so the lead share follows your theme.
`centerLabel`	`string`	`"largest"`	Donut with legend only: caption under the centre value at rest, where the largest share is shown.
`hoverLabel`	`string`	`"share"`	Donut with legend only: caption while a share is hovered.
`showGrid`	`boolean`	`true`	If true, renders dotted horizontal gridlines mapping 0% to 100% of the Y-Axis maximum. (Ignored on Pie/Donut).
`showArea`	`boolean`	`true`	Line Chart Only: Toggles the gradient fill rendered beneath the bezier curve.
`valuePrefix`	`string`	`""`	Prepends a string (like `"$"`) to the tooltip and Y-Axis values.
`signUps`	`number`	`undefined`	Traffic sources only: total sign-ups in the period, used to calculate and render the visit-to-sign-up conversion rate bar.
`showCodes`	`boolean`	`true`	Visitors by country only: whether to render the 2-letter ISO country code badges in the breakdown list.
`title`	`string`	`undefined`	Header title for card-based breakdown charts (e.g. "Traffic sources", "Visitors by country").
`caption`	`string`	`undefined`	Subheading or period caption under the title (e.g. "Today", "This week").
`metrics`	`MetricTabItem[]`	Default 4 tabs (Users, Posts, Messages, Revenue)	Metrics overview only: custom array of metric tabs with data series, labels, icons, currency codes, and delta change percentages.