<Chart.Pie />

import {Chart} from "attio/client"

Chart is a namespace, not a renderable component. Use Chart.Pie. A pie has no axes, so a slice has no x, y, or seriesId. It is a labeled part, the same shape a funnel step takes. format and currency render the slice values in the legend and in the tooltip. The legend is always drawn, and slices are ordered largest first regardless of the order they are sent in. Neither is configurable. See Using charts for height tokens, color tokens, format, and the empty and error states.

Example

TypeScript

import {Chart} from "attio/client"

export function MyDialog() {
  return (
    <Chart.Pie
      title="Deals by stage"
      data={[
        {label: "Won", value: 12, color: "green"},
        {label: "Lost", value: 3, color: "red"},
        {label: "In progress", value: 7},
      ]}
      format="number"
    />
  )
}

Props

Array<ChartPieSlice>

required

The slices to draw. Each slice is {label, value, color?}. label is the legend text and the only thing that identifies the slice. color defaults to that slice’s slot in the report palette. Palette slots follow the order the slices are sent, even though the pie then draws largest first.

How slice values are rendered. See Using charts.

string

An ISO 4217 code, for example "USD". Required when format is "currency", and rejected for every other format.

string

A caption above the chart.

'small' | 'medium' | 'large' | 'extraLarge'

The height of the whole chart, including title and legend.Defaults to "medium" (240px). See Using charts.

Introduction

Guides

Extensions

Pages

Workflow blocks

Notifications

Dialogs

Navigation

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

Example

Props

​Example

​Props

Example

Props