Pie Charts

Pie and donut chart variations built with @ramtt/charts primitives

ChartDonut (innerRadius=0)

Pie Chart

January - June 2024

Trending up by 5.2% this month
Showing total visitors by browser
ChartDonut (padAngle=0)

Pie Chart - Separator None

Segments with no gap between them

Trending up by 5.2% this month
January - June 2024
ChartDonut + pieLayout + leader lines

Pie Chart - Label

Value labels with leader lines

275200287173190
Trending up by 5.2% this month
January - June 2024
ChartDonut + pieLayout + far leader lines

Pie Chart - Custom Label

Labels with extended connector lines

275200287173190
Trending up by 5.2% this month
January - June 2024
ChartDonut + pieLayout + inside labels

Pie Chart - Label List

Value labels inside each segment

275200287173190
Trending up by 5.2% this month
January - June 2024
ChartDonut + Legend

Pie Chart - Legend

Pie with legend below

Chrome
Safari
Firefox
Edge
Other
Trending up by 5.2% this month
January - June 2024
ChartDonut (innerRadius=0.6)

Pie Chart - Donut

Standard donut with center hole

Trending up by 5.2% this month
January - June 2024
ChartDonut (activeIndex + onSegmentClick)

Pie Chart - Donut Active

Click a segment to highlight it

275Chrome
Chrome: 275 visitors
Click to change active segment
ChartDonut (centerContent) + Select

Pie Chart - Donut with Text

Total visitors by browser for selected month

1,125Visitors
Chrome
Safari
Firefox
Edge
Other