Awesome

Preview

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

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

Installation

NPM

yarn add vue-css-donut-chart
# OR
npm i vue-css-donut-chart
# OR
pnpm add vue-css-donut-chart

In-browser

<!-- unpkg -->
<link rel="stylesheet" href="https://unpkg.com/vue-css-donut-chart@2/dist/vcdonut.css">
<script src="https://unpkg.com/vue-css-donut-chart@2"></script>

<!-- OR -->

<!-- jsDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-css-donut-chart@2/dist/vcdonut.css">
<script src="https://cdn.jsdelivr.net/npm/vue-css-donut-chart@2/dist/vcdonut.umd.min.js"></script>

<!-- registration -->
<script>
  const app = Vue.createApp({});
  app.use(vcdonut.default); // component will be available as 'vc-donut'
</script>

Usage

Basic usage

<template>
  <vc-donut :sections="sections">Basic donut</vc-donut>
</template>
<script setup>
  // import the styles in a central place (eg: main.js, App.vue) to avoid repetition
  import 'vue-css-donut-chart/dist/vcdonut.css';

  import { VcDonut } from 'vue-css-donut-chart';
  const sections = [{ value: 25 }, { value: 25 }];
</script>

Usage with all available props and 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>
  import { VcDonut } from 'vue-css-donut-chart';
  const sections = [
    { label: 'Red section', value: 25, color: 'red' },
    { label: 'Green section', value: 25, color: 'green' },
    { label: 'Blue section', value: 25, color: 'blue' }
  ];
  const handleSectionEvent = (section, event) => {
    console.log(`Section: ${section.label} | Event: ${event.type}.`);
  };
</script>

Using the component as a pie chart

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

<template>
  <vc-donut
    :sections="[{ value: 35 }, { value: 15 }, { value: 15 }, { value: 35 }]"
    :thickness="100">
  </vc-donut>
</template>
<script setup>
  import { VcDonut } from 'vue-css-donut-chart';
</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

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.

Slots

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.

<script setup lang="ts">
import { ref } from 'vue';
import { VcDonut } from 'vue-css-donut-chart';
import type { DonutSection, DonutChartProps, DonutChartEmits } from 'vue-css-donut-chart';

const sections = ref<DonutSection[]>([
  { label: 'Red section', value: 25, color: 'red' },
  { label: 'Green section', value: 25, color: 'green' },
  { label: 'Blue section', value: 25, color: 'blue' }
]);

const otherProps: DonutChartProps = {
  size: 200,
  unit: 'px',
  thickness: 30,
  hasLegend: true,
  // ...
};
</script>

Types not working?

The types for this component are generated using a fairly recent version of Vue (as of writing this, it's Vue 3.4.21). If they are not working for you, make sure to update your Vue 3 version to the latest.

Contributing

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

License

Code released under MIT license.