Registry / serialization / vue-css-donut-chart

vue-css-donut-chart

library2.1.0jsnpmunverified

vue-css-donut-chart is a lightweight Vue component designed for creating highly customizable donut charts using pure CSS. Targeting Vue 3 environments (current stable version 2.1.0), it provides a flexible solution for visualizing data slices without relying on external SVG or Canvas libraries. The package maintains an active development status, with a clear separation for Vue 2 support (version 1.x), ensuring compatibility across major Vue ecosystems. Key differentiators include its minimal bundle size, pure CSS rendering for performance and ease of styling, and an extensive API for controlling chart appearance, including thickness, colors, legend placement, and responsiveness. It also supports conversion to a pie chart by adjusting the `thickness` prop and offers various interaction events for individual sections.

serialization data

npm install vue-css-donut-chart

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-CSS-DONUT-CHAR

vue-css-donut-chart

serializationjavascriptv2.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VcDonut

✓ import { VcDonut } from 'vue-css-donut-chart';

✗ import VcDonut from 'vue-css-donut-chart'; // OR const VcDonut = require('vue-css-donut-chart');

For Vue 3 projects using `<script setup>` or standard component registration, `VcDonut` is a named export. The package ships as ESM, so CommonJS `require` is generally incorrect in modern Vue CLI/Vite projects.

vcdonut (UMD Global)

✓ app.use(vcdonut.default);

✗ app.use(vcdonut);

When including the component via `<script>` tags in a browser environment (UMD build), the component constructor is available under `vcdonut.default`.

DonutSection (Type)

✓ import type { DonutSection } from 'vue-css-donut-chart';

The package ships TypeScript types. `DonutSection` is an example of a type that can be imported to strong-type the `sections` prop, improving type safety when defining chart data programmatically.

This quickstart demonstrates how to use the `VcDonut` component with a comprehensive set of props, including custom colors, sizes, legend, and event handling. It sets up three colored sections and logs interaction events.

<template> <vc-donut background="white" foreground="grey" :size="200" unit="px" :thickness="30" has-legend legend-placement="top" :sections="sections" :total="100" :start-angle="0" auto-adjust-text-size :suppress-validation-warnings="false" @section-click="handleSectionClick" @section-mouseenter="handleSectionEvent" @section-mouseleave="handleSectionEvent" @section-mouseover="handleSectionEvent" @section-mouseout="handleSectionEvent" @section-mousemove="handleSectionEvent"> <h1>75%</h1> </vc-donut> </template> <script setup lang="ts"> import { VcDonut } from 'vue-css-donut-chart'; import type { DonutSection } from 'vue-css-donut-chart'; const sections: DonutSection[] = [ { label: 'Red section', value: 25, color: 'red' }, { label: 'Green section', value: 25, color: 'green' }, { label: 'Blue section', value: 25, color: 'blue' } ]; const handleSectionClick = (section: DonutSection, event: MouseEvent) => { console.log(`Section clicked: ${section.label}`); }; const handleSectionEvent = (section: DonutSection, event: MouseEvent) => { console.log(`Section: ${section.label} | Event: ${event.type}.`); }; </script>

Debug

Known issues

breakingVersion 2.0.0 and above of `vue-css-donut-chart` are exclusively for Vue 3. Using it with a Vue 2 project will result in runtime errors due to API incompatibilities.

fix

For Vue 2 projects, install version 1.x: `npm install vue-css-donut-chart@^1` or `yarn add vue-css-donut-chart@^1`.

affects: >=2.0.0

gotchaSetting the `thickness` prop to `100` (which effectively makes it a pie chart) will visually hide any content placed in the component's default slot (e.g., text or HTML elements inside the donut hole). The content will still be present in the DOM but obscured.

fix

If inner content is crucial, avoid `thickness: 100`. Instead, use a value slightly less than 100 or position the content outside the donut component itself if a perfect pie chart look is desired with visible inner content.

affects: >=1.0.0

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: vc-donut

The `vc-donut` component was not correctly imported or registered in your Vue application.

fix

Ensure you are using `import { VcDonut } from 'vue-css-donut-chart';` in your component's script section or `app.use(vcdonut.default)` if using the UMD build in a browser.

TypeError: Cannot read properties of undefined (reading 'install')

This typically occurs when trying to use `vue-css-donut-chart@^2.0.0` (Vue 3 compatible) in a Vue 2 project, or vice-versa, or incorrectly importing the UMD global.

fix

Verify your Vue version and install the corresponding `vue-css-donut-chart` version (v1.x for Vue 2, v2.x for Vue 3). If using UMD, ensure you call `app.use(vcdonut.default)`.

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency required for the Vue component to function.

Agent activity

30 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/dumptyd/vue-css-donut-chart ↗

packagehttps://www.npmjs.com/package/vue-css-donut-chart ↗

homepagehttps://vue-css-donut-chart.netlify.app ↗