LayoutUI
Theme Presets
Browse Components

Pie

Compare categories as portions of a whole.

Basic

Compare the parts of a total. Hover, tap or focus a segment to inspect its value and share.

Traffic sources
Traffic sources — example data
SourceVisits
Direct420
Search350
Referral150
Social80
View Code
HTML
<figure class="chart" data-chart="pie">
  <figcaption>
    Traffic sources
  </figcaption>
  <div class="chart-data">
    <table>
      <caption>
        Traffic sources — example data
      </caption>
      <thead>
        <tr>
          <th scope="col">
            Source
          </th>
          <th scope="col">
            Visits
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            Direct
          </th>
          <td>
            420
          </td>
        </tr>
        <tr>
          <th scope="row">
            Search
          </th>
          <td>
            350
          </td>
        </tr>
        <tr>
          <th scope="row">
            Referral
          </th>
          <td>
            150
          </td>
        </tr>
        <tr>
          <th scope="row">
            Social
          </th>
          <td>
            80
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</figure>

Single category

One category fills the disk without a seam or an artificial gap.

Traffic sources
Traffic sources — example data
SourceVisits
Direct1000
View Code
HTML
<figure class="chart" data-chart="pie">
  <figcaption>
    Traffic sources
  </figcaption>
  <div class="chart-data">
    <table>
      <caption>
        Traffic sources — example data
      </caption>
      <thead>
        <tr>
          <th scope="col">
            Source
          </th>
          <th scope="col">
            Visits
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            Direct
          </th>
          <td>
            1000
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</figure>

Zero values

Known categories with zero values retain their legend and reserved disk.

Traffic sources
Traffic sources — example data
SourceVisits
Direct0
Search0
Referral0
Social0
View Code
HTML
<figure class="chart" data-chart="pie">
  <figcaption>
    Traffic sources
  </figcaption>
  <div class="chart-data">
    <table>
      <caption>
        Traffic sources — example data
      </caption>
      <thead>
        <tr>
          <th scope="col">
            Source
          </th>
          <th scope="col">
            Visits
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            Direct
          </th>
          <td>
            0
          </td>
        </tr>
        <tr>
          <th scope="row">
            Search
          </th>
          <td>
            0
          </td>
        </tr>
        <tr>
          <th scope="row">
            Referral
          </th>
          <td>
            0
          </td>
        </tr>
        <tr>
          <th scope="row">
            Social
          </th>
          <td>
            0
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</figure>

Right-to-left

Labels follow the reading direction; segment order remains clockwise.

Traffic sources
Traffic sources — example data
SourceVisits
Direct420
Search350
Referral150
Social80
View Code
HTML
<figure class="chart" data-chart="pie" dir="rtl">
  <figcaption>
    Traffic sources
  </figcaption>
  <div class="chart-data">
    <table>
      <caption>
        Traffic sources — example data
      </caption>
      <thead>
        <tr>
          <th scope="col">
            Source
          </th>
          <th scope="col">
            Visits
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">
            Direct
          </th>
          <td>
            420
          </td>
        </tr>
        <tr>
          <th scope="row">
            Search
          </th>
          <td>
            350
          </td>
        </tr>
        <tr>
          <th scope="row">
            Referral
          </th>
          <td>
            150
          </td>
        </tr>
        <tr>
          <th scope="row">
            Social
          </th>
          <td>
            80
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</figure>

Empty data

An empty disk preserves the chart space without inventing values.

Traffic sources
Traffic sources — example data
SourceVisits
View Code
HTML
<figure class="chart" data-chart="pie">
  <figcaption>
    Traffic sources
  </figcaption>
  <div class="chart-data">
    <table>
      <caption>
        Traffic sources — example data
      </caption>
      <thead>
        <tr>
          <th scope="col">
            Source
          </th>
          <th scope="col">
            Visits
          </th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</figure>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.csschart-core.cssdonut-chart.csspie-chart.csschart-core.jsdonut-chart.jspie-chart.js
Add to your page
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/chart-core.css">
<link rel="stylesheet" href="/library/assets/donut-chart.css">
<link rel="stylesheet" href="/library/assets/pie-chart.css">
<script defer src="/library/assets/chart-core.js"></script>
<script defer src="/library/assets/donut-chart.js"></script>
<script defer src="/library/assets/pie-chart.js"></script>

12,315 bytes CSS including base · 13,182 bytes runtime JavaScript

Usage

Compare parts of a whole

Use one nonnegative series with up to six categories. Combine small categories into Other before rendering. Use a bar chart when precise comparisons matter more than the share of a total.

Keep values accessible

The legend lists category values. Hover, tap or use arrow keys to inspect values and percentages. The source table is the no-JavaScript fallback. Empty or all-zero data keeps a neutral disk without inventing slices.

Reuse radial charts

Pie and Donut Chart share radial geometry, validation, theme colors, legend and smooth tooltip movement. Chart Core supplies parsing, resizing, keyboard navigation and lifecycle. Call layoutCharts.refresh(root) after changing data and destroy(root) before removal.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.