Skip to content
codingtube

codingtube

Coding and Programming tutorials

  • javascript
  • React
  • ES6
  • React js
  • coding
  • ffmpeg
  • java
  • programming
  • information
  • coding
  • Privacy Policy
  • Twitter trends
  • Age Calculatore
  • Codingtube Community
  • YouTube Tags Generator
  • About
  • Toggle search form

Donut chart using Vue CSS

Posted on December 4, 2021December 4, 2021 By christo No Comments on Donut chart using Vue CSS

Complete implementation of Lightweight Vue component for drawing pure CSS donut charts

Donut chart using Vue CSS
vue-css-donut-chart

Table of Contents

  • Features
  • Installation
      • Install via yarn or npm
      • Registering vue-css-donut-chart
      • ◾ In-browser using CDNs
        • Using unpkg
        • Using jsDelivr
  • Usage
      • Basic usage
      • Usage with all the available props
      • Using the component as a pie chart
  • API
      • Props
      • Events
      • Slots

Features

◾ No external dependencies.

◾ Vue 2 and Vue 3 support.

◾ Small size footprint.

◾ High test coverage.

◾ Performs automatic font size recalculation as the size of the donut changes.

◾ Supports responsive donut and pie charts.

Installation

Install via yarn or npm

yarn add vue-css-donut-chart

OR

npm install vue-css-donut-chart

Registering vue-css-donut-chart

◾ ES6

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

Vue.use(Donut);

◾ In-browser using CDNs

Using unpkg
<link rel="stylesheet" href="https://unpkg.com/vue-css-donut-chart@1/dist/vcdonut.css">
<script src="https://unpkg.com/vue-css-donut-chart@1"></script>
<script>
  Vue.use(vcdonut.default);
</script>
Using jsDelivr
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-css-donut-chart@1/dist/vcdonut.css">
<script src="https://cdn.jsdelivr.net/npm/vue-css-donut-chart@1/dist/vcdonut.umd.min.js"></script>
<script>
  Vue.use(vcdonut.default);
</script>

Usage

Basic usage

With sane defaults in place, basic usage is as simple as passing a sections array with objects containing a value property. This will create a donut with 2 sections that take up 25% each.

<template>
  <vc-donut :sections="sections">Basic donut</vc-donut>
</template>
<script>
  export default {
    data() {
      return {
        sections: [{ value: 25 }, { value: 25 }]
      };
    }
  };
</script>

Usage with all the available props

<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="true"
    @section-click="handleSectionClick">
    <h1>75%</h1>
  </vc-donut>
</template>
<script>
  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.`);
      }
    }
  };
</script>

For brevity, only the section-click event is demonstrated in the above example. You can use all the other section-* events the same way.

Using the component as a pie chart

Making the component look like a pie chart is as simple as setting the thickness to 100.

<template>
  <vc-donut
    :sections="[{ value: 35 }, { value: 15 }, { value: 15 }, { value: 35 }]"
    :thickness="100">
  </vc-donut>
</template>

Note: setting thickness to 100 will completely hide the diagram’s text or slot content. The content will still be present in the DOM, however it won’t be visible for obvious reasons.

API

Props

PropTypeRequiredDefaultDescription
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.
textStringNo–Text 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 top, right, bottom 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.
sectionsArrayNo[]An array of objects. Each object in the array represents a section.
section.valueNumberYes–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, 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.

Events

All the section-* listeners are called with the section object on which the event occurred and the native Event object as arguments respectively. Consider adding a custom property (eg: name) to the section objects to uniquely identify them.

EventParameterDescription
section-clicksection, eventEmitted when a section is clicked.
section-mouseentersection, eventEmitted when the mouseenter event occurs on a section.
section-mouseleavesection, eventEmitted when the mouseleave event occurs on a section.
section-mouseoversection, eventEmitted when the mouseover event occurs on a section.
section-mouseoutsection, eventEmitted when the mouseout event occurs on a section.
section-mousemovesection, eventEmitted when the mousemove event occurs on a section.

Slots

SlotDescription
default slotIf you want more control over the content of the chart, default slot can be used instead of the text prop.
legendSlot for plugging in your own legend.
vue.js

Post navigation

Previous Post: Vue component that display loader during image loading
Next Post: A Vue UI component for showing notifications

Related Posts

Vue web storage vue.js
Vue component that display loader during image loading vue.js
A simple and flexible implementation of toast style notifications using Vue.js vue.js
Vue.js directive for a simple tooltip vue.js
A Vue.js slideshow component working with Three.js and GSAP vue.js
Crypto Dashboard using vue.js vue.js

Leave a Reply Cancel reply

You must be logged in to post a comment.

Recent Posts

  • Affiliate Marketing Principles
  • The Basics You Need to Know About Affiliate Marketing
  • Affiliate Marketing Options
  • All About Affiliate Marketing
  • Classification of Database Management Systems
  • Three-Tier and n-Tier Architectures
    for Web Applications
  • Two-Tier Client/Server Architectures for DBMSs
  • Basic Client/Server Architectures in DBMS
  • Centralized DBMSs Architecture in DBMS
  • Tools, Application Environments, and Communications Facilities in DBMS

Categories

  • Affiliate marketing (5)
  • Algorithm (43)
  • amp (3)
  • android (223)
  • Android App (8)
  • Android app review (4)
  • android tutorial (60)
  • Artificial intelligence (61)
  • AWS (3)
  • bitcoin (8)
  • blockchain (1)
  • c (5)
  • c language (105)
  • cloud computing (4)
  • coding (4)
  • coding app (4)
  • complex number (1)
  • Computer Graphics (66)
  • data compression (65)
  • data structure (188)
  • DBMS (44)
  • digital marketing (9)
  • distributed systems (11)
  • ffmpeg (26)
  • game (3)
  • html (6)
  • image processing (35)
  • Inequalities (1)
  • information (4)
  • java (212)
  • java network (1)
  • javascript (9)
  • kotlin (4)
  • leetcode (1)
  • math (21)
  • maven (1)
  • mysql (1)
  • Node.js (8)
  • operating system (109)
  • php (310)
  • Principle Of Mathematical Induction (1)
  • programming (6)
  • Python (4)
  • Python data structure (9)
  • React native (1)
  • React.js (22)
  • Redux (1)
  • seo (4)
  • set (12)
  • trigonometry (6)
  • vue.js (35)
  • XML (3)

sitemap

sitemap of videos

sitemap of webstories

sitemap of website

  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy
  • Affiliate marketing
  • Algorithm
  • amp
  • android
  • Android App
  • Android app review
  • android tutorial
  • Artificial intelligence
  • AWS
  • bitcoin
  • blockchain
  • c
  • c language
  • cloud computing
  • coding
  • coding app
  • complex number
  • Computer Graphics
  • data compression
  • data structure
  • DBMS
  • digital marketing
  • distributed systems
  • ffmpeg
  • game
  • html
  • image processing
  • Inequalities
  • information
  • java
  • java network
  • javascript
  • kotlin
  • leetcode
  • math
  • maven
  • mysql
  • Node.js
  • operating system
  • php
  • Principle Of Mathematical Induction
  • programming
  • Python
  • Python data structure
  • React native
  • React.js
  • Redux
  • seo
  • set
  • trigonometry
  • vue.js
  • XML
  • Blog
  • Data compression tutorial - codingpoint
  • How to change mbstring in php 5.6
  • How to diagnose out of memory killed PHP-FPM
  • Introduction to jQuery
  • Privacy

© codingtube.tech