A lightweight Vue component for drawing pure CSS donut charts with no external dependencies.
vue-css-donut-chart is a Vue 3 component that renders donut and pie charts using pure CSS conic gradients. It provides a lightweight, dependency-free solution for visualizing proportional data in Vue applications, solving the need for simple, performant charting without heavy libraries.
Vue 3 developers who need lightweight, interactive donut or pie charts for dashboards, data reports, or UI components without adding large charting libraries.
Developers choose this for its zero-dependency approach, pure CSS rendering for better performance, seamless Vue integration, and full customization—offering a simple yet powerful alternative to heavier charting solutions.
Lightweight Vue component for drawing pure CSS donut charts
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Uses CSS conic gradients for rendering, eliminating SVG or canvas overhead and keeping bundle sizes minimal, as highlighted by the small bundle size badges.
Has no external dependencies, making it lightweight and easy to integrate without bloating project bundles, which is emphasized in the README's feature list.
Supports click and hover events on individual sections via events like @section-click, enabling rich user interactions without extra libraries.
Offers adjustable size, thickness, colors, start angle, and legend placement, allowing precise design matching through a comprehensive set of props.
Only supports donut and pie charts; lacks other common types like bar or line charts, which may require additional libraries for broader data visualization needs.
Depends on CSS conic gradients, which are not supported in older browsers such as Internet Explorer, potentially necessitating fallbacks or polyfills not included by default.
Comes with only 24 predefined colors; for charts with more sections, each must have a custom color specified, adding setup complexity and potential for inconsistency.