Charts > Donut Chart ​

A donut chart presents information in the form of a ring, with the central area often left blank, conveying data through the proportionate arc lengths of different segments.

The Chart ​

Randomize dataSample datasetUpload data

Download example CSV

Copy HTML

Playground ​

Data

Animation

Style

Component API ​

The donut chart is built using SVG and d3. You can make it a pie chart by setting innerRadius to 0.

The arcs are animated using d3 transition with a custom interpolator using attrTween.

Usage Example (with tooltip) ​

<template>
  <DonutChart :data="data" @hover="setTooltip" />
  <OTTooltip :info="tooltip">
    <p>
      <span class="font-semibold">{{ tooltip.name }}</span> {{ tooltip.value }}%
    </p>
  </OTTooltip>
</template>

<script setup>
import useTooltip from "@/functions/useTooltip.js";

const [tooltip, setTooltip] = useTooltip();
</script>

Data ​

[
  {
    id: "data-1",
    name: "Data 1",
    values: {
      val1: {
        id: "val-1",
        name: "Val 1",
        value: 75,
        count: 3,
        color: "#eee",
      },
      val2: {
        id: "val-2",
        name: "Val 2",
        value: 25,
        count: 1,
        color: "#ccc",
      },
    },
  },
];

Props ​

Events ​

Dependencies ​

• d3

Featured in ​

• Dibarómetro
• Spott
• Fecyt
• Odismet ONCE