Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

A pie chart with a label list for Ark UI

Each browser's name, from the chart config, is printed inside its slice in the background color so it stays readable on the fill.

Each browser's name is printed inside its slice, in the background color so it stays readable on every fill. The size of the slice is still the visitor count.

Use inside names when the category matters more than the number. Put the counts outside, or in a Table, if the slices get too small for a word. In React, Ark UI does not print those names. You pass the browser key and a formatter.

Preview

Preview width

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

Anatomy

Chart anatomy: container, grid, axis, bar, tooltip, legend

Usage

<div className="w-full max-w-xl rounded-md border bg-background p-4">
  <ChartContainer
    className="mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background"
    config={chartConfig}
  >
    <PieChart>
      <ChartTooltip content={renderTooltipContent} />
      <Pie data={chartData} dataKey="visitors">
        <LabelList
          className="fill-background"
          dataKey="browser"
          fontSize={12}
          formatter={formatBrowser}
          stroke="none"
        />
      </Pie>
    </PieChart>
  </ChartContainer>
</div>

FAQ

How do the slices show Chrome inside them?

Pie nests a LabelList with dataKey browser and formatter set to formatBrowser. That function returns chartConfig[value].label, so chrome prints as Chrome. fontSize is 12 and stroke is none.

How does the text stay readable on the slices?

LabelList sets className to fill-background. ChartContainer also sets [&_.recharts-text]:fill-background on mx-auto aspect-square max-h-[250px], so the SVG text uses the background color.

What sets the size of each slice?

Pie uses dataKey visitors. The counts are Chrome 275, Safari 200, Firefox 187, Edge 173, and Other 90. The text inside the slice is the browser name from formatBrowser.

How are the slices colored?

Each row sets fill to var(--color-chrome) or the matching browser variable. config maps those keys to --chart-1 through --chart-5 and to the labels the formatter prints.

What does the tooltip show?

ChartTooltipContent sets hideLabel and nameKey to visitors. config labels visitors as Visitors, so the tooltip row uses that name and the visitor count.

Why is visitors in config if the labels are browser names?

visitors has a label and no color, and the tooltip's nameKey points at it. The browser keys hold both the slice colors and the words formatBrowser prints inside the pie.

API Reference

Chart

Sets config={chartConfig} and content={renderTooltipContent}. The rest is on the Chart page.

All 70 chart examples