Doughnut Chart

<wa-doughnut-chart> Stable Since 3.3 Pro Included with Web Awesome Pro

Doughnut charts show proportional data as slices of a ring with a hollow center. They offer a cleaner look than pie charts and work well in dashboards where the center space can provide additional context.

Get Doughnut Chart with Web Awesome Pro! Subscribing to Web Awesome Pro gives you every Pro component, plus premium themes, color tools, team collaboration, and more.

Similar to pie charts but with an empty center.

<wa-doughnut-chart id="doughnut-hero" label="Project Time Allocation" description="A doughnut chart showing how project time is distributed across activities">
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-hero');

  chart.config = {
    data: {
      labels: ['Development', 'Design', 'Testing', 'Meetings', 'Planning'],
      datasets: [{
        label: 'Hours',
        data: [35, 20, 15, 18, 12]
      }]
    }
  };
</script>

For advanced configuration such as custom plugins and direct Chart.js access, see <wa-chart>.

Examples

Link to This Section

Providing Data with JavaScript

Link to This Section

For dynamic data, set the config property directly. The chart will re-render automatically.

<wa-doughnut-chart id="doughnut-js-example" label="Revenue by Region" description="A doughnut chart of revenue by region">
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-js-example');

  chart.config = {
    data: {
      labels: ['North America', 'Europe', 'Asia', 'Other'],
      datasets: [{
        label: 'Revenue',
        data: [42, 28, 22, 8]
      }]
    }
  };
</script>

Note that config is shallowly reactive. If you mutate the existing object in place, you must reassign it to trigger a re-render!

Providing Data with JSON

Link to This Section

Place a <script type="application/json"> tag inside the component with your chart data. Each value in the data array corresponds to a label.

<wa-doughnut-chart label="Revenue by Region" description="A doughnut chart showing revenue distribution across regions">
  <script type="application/json">
    {
      "data": {
        "labels": ["North America", "Europe", "Asia", "Other"],
        "datasets": [{
          "label": "Revenue",
          "data": [42, 28, 22, 8]
        }]
      }
    }
  </script>
</wa-doughnut-chart>

Custom Slice Colors

Link to This Section

Override the default color palette using the --fill-color-* and --border-color-* CSS custom properties to apply custom colors to each slice.

<wa-doughnut-chart
  id="doughnut-colors"
  label="Custom Colors"
  description="A doughnut chart with custom slice colors"
  style="
    --fill-color-1: color-mix(in srgb, var(--wa-color-purple-60) 70%, transparent);
    --border-color-1: var(--wa-color-purple-60);
    --fill-color-2: color-mix(in srgb, var(--wa-color-orange-60) 70%, transparent);
    --border-color-2: var(--wa-color-orange-60);
    --fill-color-3: color-mix(in srgb, var(--wa-color-cyan-60) 70%, transparent);
    --border-color-3: var(--wa-color-cyan-60);
  "
>
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-colors');

  chart.config = {
    data: {
      labels: ['Completed', 'In Progress', 'Pending'],
      datasets: [{
        label: 'Tasks',
        data: [45, 30, 25]
      }]
    }
  };
</script>

Cutout Size

Link to This Section

Control the size of the center hole through the Chart.js cutout option. The default is '50%'. Use a higher percentage for a thinner ring or a lower one for a thicker ring.

<wa-doughnut-chart id="doughnut-cutout-example" label="Thin Ring" description="A doughnut chart with a larger center cutout">
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-cutout-example');

  chart.config = {
    data: {
      labels: ['Used', 'Available'],
      datasets: [{
        label: 'Storage',
        data: [72, 28]
      }]
    },
    options: {
      cutout: '75%'
    }
  };
</script>

Legend

Link to This Section

Use the legend-position attribute to control where the legend appears. Add without-legend to hide it entirely.

<wa-doughnut-chart id="doughnut-legend" legend-position="bottom" label="Legend at Bottom" description="A doughnut chart with the legend at the bottom">
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-legend');

  chart.config = {
    data: {
      labels: ['Email', 'Social', 'Direct', 'Referral'],
      datasets: [{
        label: 'Traffic Source',
        data: [30, 25, 28, 17]
      }]
    }
  };
</script>

Disabling Tooltips

Link to This Section

Use the without-tooltip attribute to hide the tooltips that appear when hovering over slices.

<wa-doughnut-chart id="doughnut-tooltip" without-tooltip label="No Tooltips" description="A doughnut chart with tooltips disabled">
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-tooltip');

  chart.config = {
    data: {
      labels: ['A', 'B', 'C'],
      datasets: [{
        label: 'Values',
        data: [50, 30, 20]
      }]
    }
  };
</script>

Disabling Animations

Link to This Section

Use the without-animation attribute to disable chart transitions.

<wa-doughnut-chart id="doughnut-anim" without-animation label="No Animation" description="A doughnut chart with animation disabled">
</wa-doughnut-chart>
<script type="module">
  const chart = document.querySelector('#doughnut-anim');

  chart.config = {
    data: {
      labels: ['A', 'B', 'C'],
      datasets: [{
        label: 'Values',
        data: [50, 30, 20]
      }]
    }
  };
</script>

Importing

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN npm Self-Hosted React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/[email protected]/components/doughnut-chart/doughnut-chart.js';

After installing Web Awesome via npm, import this component:

import '@awesome.me/webawesome/dist/components/doughnut-chart/doughnut-chart.js';

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/doughnut-chart/doughnut-chart.js';

To import this component for React 18 or below, use the following code:

import WaDoughnutChart from '@awesome.me/webawesome/dist/react/doughnut-chart/index.js';

Slots

Link to This Section

Learn more about using slots.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

CSS custom properties

Link to This Section

Learn more about CSS custom properties.

Need a hand? Report a bug Ask for help
    No results
    Navigate Enter Select Esc Close