Pie chart

Parts of a whole. label-field names each slice, a single c2-chart-series supplies its value, and one row is one slice. inner-radius above 0 turns the pie into a donut, which is where the interesting typography usually goes.

A different engine. The pie is drawn by ECharts rather than uPlot — a pie has no axes to share with the cartesian charts, and ECharts’ label placement is worth the weight here. ECharts is an optional peer dependency reached through a dynamic import() on first paint, so a page that only shows lines and sparklines never downloads it.

Installation

npm install @c2n/chart echarts

Usage

import '@c2n/chart'

<style>
  .plot {
    width: 100%;
    --c2-chart--height: 280px;
  }
  .energy-linked,
  .energy-live {
    display: grid;
    width: 100%;
    gap: 10px;
  }
  .energy-live__controls {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--site-color-on-surface-muted);
  }
</style>

<div data-label="Default">
  <c2-pie-chart
    class="plot"
    label-field="source"
    inner-radius="0.58"
    legend="end"
    data='[{"source":"Nuclear","generation":380.45},{"source":"Hydro","generation":71.12},{"source":"Wind","generation":45.43},{"source":"Solar","generation":24.87},{"source":"Fossil","generation":28.66}]'
  >
    <c2-chart-series field="generation" label="Generation"></c2-chart-series>
  </c2-pie-chart>
</div>

<div data-label="Custom legend + tooltip" data-energy-custom data-energy-year="2023">
  <div class="energy-linked">
    <c2-pie-chart
      id="pie-energy-custom"
      class="plot"
      label-field="source"
      inner-radius="0.64"
      data='[{"source":"Nuclear","generation":338.2},{"source":"Hydro","generation":55.9},{"source":"Wind","generation":50.48},{"source":"Solar","generation":22.59},{"source":"Fossil","generation":41.06}]'
    >
      <c2-chart-series field="generation" label="Generation"></c2-chart-series>
    </c2-pie-chart>
    <c2-chart-legend for="pie-energy-custom"></c2-chart-legend>
    <c2-chart-tooltip for="pie-energy-custom"></c2-chart-tooltip>
  </div>
</div>

<div data-label="Realtime replay" data-energy-realtime>
  <div class="energy-live">
    <c2-pie-chart class="plot" label-field="source" inner-radius="0.58">
      <c2-chart-series field="generation" label="Generation"></c2-chart-series>
    </c2-pie-chart>
    <div class="energy-live__controls">
      <c2-button>Replay</c2-button>
      <span data-energy-status>Ready at 2015</span>
    </div>
  </div>
</div>

Each slice is derived from the France row in the public Our World in Data Energy dataset. The default shows the 2024 electricity mix in terawatt-hours; the realtime demo replays the annual rows from 2015 through 2024.

Shaping the ring

inner-radius and outer-radius are shares of the available box, from 0 to 1: 0 for a solid pie, 0.6 for a classic donut, 0.9 for a thin ring. start-angle is measured in degrees counter-clockwise from three o’clock, so 90 (the default) starts at the top and 180 starts at nine o’clock. sort orders the slices by value — desc is worth setting whenever the data order carries no meaning.

labels places annotations on the chart (inside or outside) and defaults to none, since a legend usually reads better in a dashboard. label-content chooses what those annotations show: name, value, percent, or name-percent. Adjacent slices are separated by a hairline in the surface colour, so a donut sitting on a dark card keeps its separation without any extra styling.

Data

One series, one value per row. Everything a pie needs comes from label-field plus that series’ field:

<c2-pie-chart label-field="channel" data='[{"channel":"Direct","revenue":4200}]'>
  <c2-chart-series field="revenue" label="Revenue"></c2-chart-series>
</c2-pie-chart>

A pie has one dimension, so keep it to one series: a second measure belongs in its own chart, or in a bar chart where the two can sit side by side.

Theming

Slices take the shared palette, --c2-chart__series-1--color through --c2-chart__series-8--color, wired by @c2n/theme to the --c2-theme--chart-series-* tokens — so a pie and a line chart on the same page agree on colour without any extra configuration. Because the plot is a canvas, these are read with getComputedStyle and handed to the engine, and cannot be reached with ::part().