npmpackage.info

Gathering detailed insights and metrics for vue-css-donut-chart

Other packages similar to vue-css-donut-chart

@0saw/vue-css-donut-chart

1.1.5

Lightweight Vue component for drawing pure CSS donut charts

vue-css-donut-chart-padcmoi_v1

1.0.2

Lightweight Vue component for drawing pure CSS donut charts. project resumed because it seems abandoned by its author dumptyd <dumptyd2.0@gmail.com>

vue3-css-donut-chart

1.3.0

Lightweight Vue component for drawing pure CSS donut charts, forked for vue3

Gathering detailed insights and metrics for vue-css-donut-chart

vue-css-donut-chart - 2.1.0 | npmpackage.info

vue-css-donut-chart

Lightweight Vue component for drawing pure CSS donut charts

2.1.0

129

MIT

TypeScript

193.52 kB

2.5

Installations

npm install vue-css-donut-chart

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

20.14.0

NPM Version

10.8.2 Pull Requests

Open

0

Total

40

Closed

27

Merged

13

Issues

Open

7

Total

28

Closed

21

Releases

Unable to fetch releases

Languages

TypeScript

Vue

CSS

HTML

JavaScript

TypeScript (53.53%)

Vue (36.44%)

CSS (7.63%)

HTML (1.54%)

JavaScript (0.86%)

Developer

dumptyd

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

129 Stars

107 Commits

19 Forks

2 Watchers

3 Branches

3 Contributors

Updated on Feb 12, 2025

Maintainers

View All 3 Contributors

Package Meta Information

Latest Version

2.1.0

Package Id

vue-css-donut-chart@2.1.0

Unpacked Size

193.52 kB

Size

96.31 kB

File Count

NPM Version

10.8.2

Node Version

20.14.0

Published on

Aug 31, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

vue-css-donut-chart

Lightweight Vue component for creating donut charts

Using Vue 2?
Check out the documentation for vue-css-donut-chart v1.
NPM - https://www.npmjs.com/package/vue-css-donut-chart/v/legacy

Preview

Live demo – https://dumptyd.github.io/vue-css-donut-chart/

Playground – https://jsfiddle.net/dumptyd/f4tmz0oy/

Installation

NPM

1yarn add vue-css-donut-chart
2# OR
3npm i vue-css-donut-chart
4# OR
5pnpm add vue-css-donut-chart

In-browser

1<!-- unpkg -->
2<link rel="stylesheet" href="https://unpkg.com/vue-css-donut-chart@2/dist/vcdonut.css">
3<script src="https://unpkg.com/vue-css-donut-chart@2"></script>
4
5<!-- OR -->
6
7<!-- jsDelivr -->
8<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-css-donut-chart@2/dist/vcdonut.css">
9<script src="https://cdn.jsdelivr.net/npm/vue-css-donut-chart@2/dist/vcdonut.umd.min.js"></script>
10
11<!-- registration -->
12<script>
13  const app = Vue.createApp({});
14  app.use(vcdonut.default); // component will be available as 'vc-donut'
15</script>

Usage

Basic usage

1<template>
2  <vc-donut :sections="sections">Basic donut</vc-donut>
3</template>
4<script setup>
5  import { VcDonut } from 'vue-css-donut-chart';
6  const sections = [{ value: 25 }, { value: 25 }];
7</script>

Usage with all available props and events

1<template>
2  <vc-donut
3    background="white"
4    foreground="grey"
5
6    :size="200"
7    unit="px"
8
9    :thickness="30"
10
11    has-legend
12    legend-placement="top"
13
14    :sections="sections"
15    :total="100"
16    :start-angle="0"
17
18    auto-adjust-text-size
19    :suppress-validation-warnings="false"
20
21    @section-click="handleSectionClick"
22    @section-mouseenter="handleSectionEvent"
23    @section-mouseleave="handleSectionEvent"
24    @section-mouseover="handleSectionEvent"
25    @section-mouseout="handleSectionEvent"
26    @section-mousemove="handleSectionEvent">
27    <h1>75%</h1>
28  </vc-donut>
29</template>
30<script setup>
31  import { VcDonut } from 'vue-css-donut-chart';
32  const sections = [
33    { label: 'Red section', value: 25, color: 'red' },
34    { label: 'Green section', value: 25, color: 'green' },
35    { label: 'Blue section', value: 25, color: 'blue' }
36  ];
37  const handleSectionEvent = (section, event) => {
38    console.log(`Section: ${section.label} | Event: ${event.type}.`);
39  };
40</script>

Using the component as a pie chart

Set thickness to 0 to make the component look like a pie chart.

1<template>
2  <vc-donut
3    :sections="[{ value: 35 }, { value: 15 }, { value: 15 }, { value: 35 }]"
4    :thickness="100">
5  </vc-donut>
6</template>
7<script setup>
8  import { VcDonut } from 'vue-css-donut-chart';
9</script>

Note: setting thickness to 100 will completely hide the chart's text or slot content. The content will still be present in the DOM, but it will not be visible.

API

Props

Prop	Type	Required	Default	Description
`size`	Number	No	`250`	Diameter of the donut. Can be any positive value.
`unit`	String	No	`'px'`	Unit to use for `size`. Can be any valid CSS unit. Use `%` to make the donut responsive.
`thickness`	Number	No	`20`	Percent thickness of the donut ring relative to `size`. Can be any positive value between 0-100 (inclusive).
`text`	String	No	–	Text to show in the middle of the donut. This can also be provided through the default slot.
`background`	String	No	`'#ffffff'`	Background color of the donut. In most cases, this should be the background color of the parent element.
`foreground`	String	No	`'#eeeeee'`	Foreground color of the donut. This is the color that is shown for empty region of the donut ring.
`start-angle`	Number	No	`0`	Angle measure in degrees where the first section should start.
`total`	Number	No	`100`	Total for calculating the percentage for each section.
`has-legend`	Boolean	No	`false`	Whether the donut should have a legend.
`legend-placement`	String	No	`'bottom'`	Where the legend should be placed. Valid values are `top`, `right`, `bottom` and `left`. Doesn't have an effect if `has-legend` is not true.
`auto-adjust-text-size`	Boolean	No	`true`	Whether the font-size of the donut content is calculated automatically to fit the available space proportionally.
`sections`	Array	No	`[]`	An array of objects. Each object in the array represents a section.
`section.value`	Number	Yes	–	Value 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`.
`section.color`	String	Read description	Read description	Color 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.label`	String	No	`'Section <section number>'`	Name of the section. This is used in the legend as well as the tooltip text of the section.
`section.ident`	String	No	–	Identifier for the section. This can be used to uniquely identify a section in the `section-*` events.
`suppress-validation-warnings`	Boolean	No	`false`	Whether to suppress warnings for invalid prop values.

Events

All the section-* listeners are called with the section object on which the event occurred and the native Event object as arguments respectively. Use the ident property to uniquely identify sections in the section-* events.

Event	Parameter	Description
`section-click`	`section`, `event`	Emitted when a section is clicked.
`section-mouseenter`	`section`, `event`	Emitted when the `mouseenter` event occurs on a section.
`section-mouseleave`	`section`, `event`	Emitted when the `mouseleave` event occurs on a section.
`section-mouseover`	`section`, `event`	Emitted when the `mouseover` event occurs on a section.
`section-mouseout`	`section`, `event`	Emitted when the `mouseout` event occurs on a section.
`section-mousemove`	`section`, `event`	Emitted when the `mousemove` event occurs on a section.

Slots

Slot	Description
default slot	If you want more control over the content of the chart, default slot can be used instead of the `text` prop.
`legend`	Slot for plugging in your own legend.

Typescript

This package is written in TypeScript and comes with its own type definitions out of the box. The types are exported from the main package, so you can import them directly in your project.

1<script setup lang="ts">
2import { ref } from 'vue';
3import { VcDonut } from 'vue-css-donut-chart';
4import type { DonutSection, DonutChartProps, DonutChartEmits } from 'vue-css-donut-chart';
5
6const sections = ref<DonutSection[]>([
7  { label: 'Red section', value: 25, color: 'red' },
8  { label: 'Green section', value: 25, color: 'green' },
9  { label: 'Blue section', value: 25, color: 'blue' }
10]);
11
12const otherProps: DonutChartProps = {
13  size: 200,
14  unit: 'px',
15  thickness: 30,
16  hasLegend: true,
17  // ...
18};
19</script>

Contributing

Issues – https://github.com/dumptyd/vue-css-donut-chart/issues

License

Code released under MIT license.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.5

/10

Last Scanned on 2025-07-14

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vue-css-donut-chart

Other packages similar to vue-css-donut-chart

vue-css-donut-chart

Installations

Developer Guide

Yes

CommonJS

20.14.0

10.8.2

Pull Requests

0

40

27

13

Issues

7

28

21

Releases

Unable to fetch releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

Dev Dependencies

vue-css-donut-chart

Preview

Installation

NPM

In-browser

Usage

Basic usage

Usage with all available props and events

Using the component as a pie chart

API

Props

Events

Slots

Typescript

Contributing

License

10

10

10

0

0

0

0

0

0

0

0

0

0

2.5

/10