A Lightweight Vue Component For Drawing Pure CSS Donut Charts

CSS Donut Chart is a lightweight vue component for drawing donut charts on applications using CSS. Compatible with both Vue 3 and Vue.2.

css donut chart js, vue css donut chart, donut pie chart css animation, svg donut chart, donut chart html css javascript, svg donut chart

Angular Library For Creating Beautiful Data Charts | NgxBeautifulCharts

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-css-donut-chart
$ npm install vue-css-donut-chart --save

1. Import and register the component.

import Donut from 'vue-css-donut-chart';
import 'vue-css-donut-chart/dist/vcdonut.css';

2. The example shows how to create a basic pie chart.

  <vc-donut :sections="sections">Basic donut</vc-donut>
export default {
  data() {
    return {
      sections: [
        { label: 'Red section', value: 25, color: 'red' },
        { label: 'Green section', value: 25, color: 'green' },
        { label: 'Blue section', value: 25, color: 'blue' }
  methods: {
    handleSectionClick(section, event) {
      console.log(`${section.label} clicked.`);

3. Component props available.

// diameter of the donut
size: { type: Number, default: 250, validator: v => v > 0 },
// unit to use for `size`
unit: { type: String, default: 'px' },
// percentage of donut ring's thickness
thickness: {
  type: Number,
  default: 20,
  validator: v => v >= 0 && v <= 100
// text in the middle of the donut, this can also be passed using the default slot
text: { type: String, default: null },
autoAdjustTextSize: { type: Boolean, default: true },
// color to use for the middle of the donut
// set this to `transparent` or `thickness` to 100 to make a pie chart instead
background: { type: String, default: '#ffffff' },
// color to use for the empty ring areas
foreground: { type: String, default: '#eeeeee' },
// sections of the donut, must have a `value` property
// other valid properties are `label` and `color` (default is `dodgerblue`)
sections: {
  type: Array,
  default: () => [],
  validator(sections) {
    for (let i = 0; i < sections.length; ++i) {
      /* istanbul ignore if - already covered by unit tests for sectionValidator */
      if (!sectionValidator(sections[i])) return false;
    return true;
total: { type: Number, default: 100, validator: v => v > 0 },
hasLegend: { type: Boolean, default: false },
legendPlacement: {
  type: String,
  default: placement.BOTTOM,
  validator: val => !!placement[val.toUpperCase()]
// degree angle at which the first section begins
startAngle: { type: Number, default: 0 }



sizeNumberNo250Diameter of the donut. Can be any positive value.
unitStringNo'px'Unit to use for size. Can be any valid CSS unit. Use % to make the donut responsive.
thicknessNumberNo20Percent thickness of the donut ring relative to size. Can be any positive value between 0-100 (inclusive). Set this to 0 to draw a pie chart instead.
textStringNoText to show in the middle of the donut. This can also be provided through the default slot.
backgroundStringNo'#ffffff'Background color of the donut. In most cases, this should be the background color of the parent element.
foregroundStringNo'#eeeeee'Foreground color of the donut. This is the color that is shown for empty region of the donut ring.
start-angleNumberNo0Angle measure in degrees where the first section should start.
totalNumberNo100Total for calculating the percentage for each section.
has-legendBooleanNofalseWhether the donut should have a legend.
legend-placementStringNo'bottom'Where the legend should be placed. Valid values are toprightbottom and left. Doesn’t have an effect if has-legend is not true.
auto-adjust-text-sizeBooleanNotrueWhether the font-size of the donut content is calculated automatically to fit the available space.


No[]An array of objects. Each object in the array represents a section.
section.valueNumberYesValue of the section. The component determines what percent of the donut should be taken by a section based on this value and the total prop. Sum of all the sections’ value should not exceed total, an error is thrown otherwise.
section.colorStringRead descriptionRead descriptionColor of the section. The component comes with 24 predefined colors, so this property is optional if you have <= 24 sections without the color property.
section.labelStringNo'Section <section number>'Name of the section. This is used in the legend as well as the tooltip text of the section.

Pure CSS Donut Charts Plugin/Github

See Demo And Download

Official Website(dumptyd): Click Here

This superior jQuery/javascript plugin is developed by dumptyd. For extra Advanced usage, please go to the official website.

Related Posts


[Offcanvas] Simple and Modern Multi-Level Sidebar Menu on Bootstrap 4

The multi-level sidebar menu is simple and fast on Bootstrap. So you must be aware of how to use Bootstrap itself. This plugin is fast, responsive, multi-level,…


Flip Sliding Carousel Gallery Made Of CSS And Vanilla JS

Vanilla JS Carousel is a JavaScript Slider plugin for navigating objects in a 3D space just like Cover Flow. Getting started Clone or download the repo. Open…


Dark & Light Switch Mode Toggle for Bootstrap 5

Switching to dark mode is done by toggling HTML tags that include -dark or -light as a category. It is made by manipulating the DOM with JavaScript. The text color also changes depending…


Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…


Insert HTML Into Your Browser Alert & Confirm Dialog | alert4html.js

alert4html.js is a JavaScript library that enables you to insert HTML directly into your browser alerts while simulating Chrome alerts as well. alert4html.js is an alternative to…


Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…