Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Charts

Free

Area Chart with Icons

Stacked areas whose legend shows a lucide icon beside each series instead of a color square, set once in the chart's config. For React.

Framework
Charting library

Preview

Preview width

About

Icons help when the series are things people recognize at a glance (devices, channels, teams) or when the legend has to work without telling colors apart. If a color key is enough, the Area Chart with Legend is lighter.

The bands are the stacked area's, mobile under desktop. The legend under the plot shows a trending-up icon for mobile and a trending-down one for desktop, and the tooltip uses the same icons in place of its color marks.

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Usage

import { ChartAreaIcons } from "@/components/charts/chart-area-icons";
<ChartAreaIcons />

Customize

  • chartConfig gives desktop the TrendingDown icon and mobile the TrendingUp icon, from lucide-react.
  • <ChartLegend content={<ChartLegendContent />} /> draws each icon in place of the color square.
  • ChartTooltipContent reads the same icons, so they replace the line indicator in the tooltip.
  • hideIcon on ChartLegendContent keeps the squares even when the config has icons.

FAQ

How do I give a series an icon?

Import the icon from your framework's lucide package and set it as icon on the series' chartConfig entry, next to its label and color. The legend and the tooltip pick it up; nothing else changes.

Why does the tooltip show the icons too?

Both read icon from the same chartConfig, and ChartTooltipContent has no prop to skip it. Remove icon to go back to color marks, or pass ChartLegend a content of your own that draws the icons.

Can the icons take the series color?

The legend draws them in muted-foreground at size-3, so the label carries the meaning. To color one, set icon to a small component of your own that renders the lucide icon with its color set to var(--color-mobile).

Can the legend show only icons?

Not with a prop: ChartLegendContent always prints the label. Pass ChartLegend your own content that renders only the icons, each with an accessible name.

How do I go back to color squares in the legend?

Set hideIcon on ChartLegendContent and the legend goes back to color squares while the tooltip keeps the icons.

API Reference

ChartContainer

PropType
configChartConfig

Each series by its data key: its label, an icon, and a color (or a * theme color per light and dark), read by the tooltip and legend and set * as --color-<key>.

initialDimension?{ height: number; width: number; }

The size it renders at before it's measured, so the first paint isn't * empty.

Type
{ height: number; width: number; }
Default
INITIAL_DIMENSION
className?string

Merged with the part's classes.

ChartLegend

ChartLegendContent

<div>

PropType
hideIcon?boolean

Hides each series' icon (from config), leaving its color swatch.

Default
false
nameKey?string

The key in each legend item's data to look its label up by in config. * Defaults to the item's dataKey.

className?string

Merged with the part's classes.

ChartStyle

<style>

PropType
configChartConfig

The chart config whose colors it writes as --color-<key> variables.

idstring

The element's id.

ChartTooltip

ChartTooltipContent

<div>

PropType
hideIndicator?boolean

Hides each item's color indicator.

Default
false
hideLabel?boolean

Hides the tooltip's label, the hovered point's.

Default
false
indicator?"dashed" | "dot" | "line"

The color indicator's shape: a dot, a line or dashed.

Type
"dashed" | "dot" | "line"
Default
"dot"
labelFormatter?(label: any, payload: TooltipPayload) → React.ReactNode

Formats the tooltip's label; its value is untyped, as in recharts 3.8.

Type
(label: any, payload: TooltipPayload) → React.ReactNode
Parameters

label – any

payload – TooltipPayload

Returns
React.ReactNode
labelKey?string

The key in the data to read the label from, looked up in config.

nameKey?string

The key in each item's data to look its name up by in config.

className?string

Merged with the part's classes.

All 70 charts