LayoutUI
Theme Presets
Browse Components

Donut Chart

Show how categories contribute to a whole.

Basic

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

Traffic sources
View Data
Traffic sources — example data
SourceVisits
Direct420
Search350
Referral150
Social80
View Code
HTML
<figure class="chart" data-chart="donut">
  <figcaption>
    Traffic sources
  </figcaption>
  <details class="chart-data">
    <summary>
      View Data
    </summary>
    <div class="chart-data-scroll">
      <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>
  </details>
</figure>

Single category

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

Traffic sources
View Data
Traffic sources — example data
SourceVisits
Direct1000
View Code
HTML
<figure class="chart" data-chart="donut">
  <figcaption>
    Traffic sources
  </figcaption>
  <details class="chart-data">
    <summary>
      View Data
    </summary>
    <div class="chart-data-scroll">
      <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>
  </details>
</figure>

Zero values

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

Traffic sources
View Data
Traffic sources — example data
SourceVisits
Direct0
Search0
Referral0
Social0
View Code
HTML
<figure class="chart" data-chart="donut">
  <figcaption>
    Traffic sources
  </figcaption>
  <details class="chart-data">
    <summary>
      View Data
    </summary>
    <div class="chart-data-scroll">
      <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>
  </details>
</figure>

Right-to-left

Labels follow the reading direction; segment order remains clockwise.

Traffic sources
View Data
Traffic sources — example data
SourceVisits
Direct420
Search350
Referral150
Social80
View Code
HTML
<figure class="chart" data-chart="donut" dir="rtl">
  <figcaption>
    Traffic sources
  </figcaption>
  <details class="chart-data">
    <summary>
      View Data
    </summary>
    <div class="chart-data-scroll">
      <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>
  </details>
</figure>

Empty data

An empty ring preserves the chart space without inventing values.

Traffic sources
View Data
Traffic sources — example data
SourceVisits
View Code
HTML
<figure class="chart" data-chart="donut">
  <figcaption>
    Traffic sources
  </figcaption>
  <details class="chart-data">
    <summary>
      View Data
    </summary>
    <div class="chart-data-scroll">
      <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>
  </details>
</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.csschart-core.jsdonut-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">
<script defer src="/library/assets/chart-core.js"></script>
<script defer src="/library/assets/donut-chart.js"></script>

12,442 bytes CSS including base · 12,470 bytes runtime JavaScript

Usage

Show parts of a whole

Use one nonnegative series with up to six categories. Prefer a bar chart for precise comparisons or many small categories. Combine small categories into Other in your application.

Keep the context

The center shows the total and the legend lists category values. Hover, tap or use arrow keys to inspect values and percentages. The source table remains available without JavaScript; the enhanced chart keeps values in its legend and accessible segment labels. Zero values have no segment; empty data keeps the ring.

Share the foundation

Chart Core owns table parsing, number formatting, the legend, responsive sizing, keyboard navigation and lifecycle. Use layoutCharts.refresh(root) after data changes and destroy(root) before removal. Customize Total with data-chart-total-label.

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