dumptyd / vue-css-donut-chart Goto Github PK

when I update data(this is prop to donut-chart) I got the error like this:

//-------------------------------------------------- error here
app.js:55270 [Vue warn]: Invalid prop: custom validator check failed for prop "sections".

found in

---> at Donut.vue
at resources/assets/js/components/result/HospitalPieStatus.vue

//-------------------------------------------------- error here

this data is Array so I don't understand what's wrong
this(below) is my data and I use v-for statment this object and insert each array
to donut chart as prop

hospitalStatusNew2:Object
1:Array[3]
2:Array[3]
3:Array[3]
4:Array[3]

So I'm wondering if is this useful and right for dynamic data change and rendering

I recently stumbled upon this error. If I pass exactly this array to the chart receive this error
doesntWork =[{color: 'red', value:8.2}, {color: 'green', value:34.97}, {color: 'blue', value:30.6}, {color: 'yellow', value:26.23}]
But if I switch order of the array it works.
works = [{color: 'green', value:34.97}, {color: 'red', value:26.23}, {color: 'yellow', value:8.2}, {color: 'blue', value:30.6}, ]

Using In-browser resource

When unit is set to %, diagram breaks.

Had to revert to 1.0.2 version.

I would like to be able to handle clicks on sections.

I can't create pull request without instructions how to build/test poject.

When using the component, I expect the center circle of a donut to be transparent. So that, when the background property is set to transparent, it lets shine the background through. But becomes a simple pie in this version.

I try use with nuxt, but don't worked!

I'm importing inside of the component

index.vue

<template>
<vc-donut :sections="sections">Basic donut</vc-donut> 
< /template>

<script>
import Donut from "vue-css-donut-chart";
import "vue-css-donut-chart/dist/vcdonut.css";
Vue.use(Donut);

data() {
      return {
        sections: [{ value: 25 }, { value: 25 }]
      };
    }
</script>

Hello, nice chart!

What about showing the total count for each section in the legend? Or even in a tooltip while hovering each slice?

My service is returning an array of objects, each contains it's value... so let's say there are 3 sections, first with value = 3, second = 3, third = 6, with this formula I've converted these values into percentages:

series_data.map(s => ({ 
    "label": s.label, 
    "value": s.value / data.total * 100, 
    color: s.color 
}))

Total is the sum of all the values. Yeah I know...it's easy but I think that would be nice to have it implemented as an option, in order to avoid this conversion every time. :-)

I'm trying to set a chart, and the value of this chart is inside a variable, but i'm facing errors.
The variable is a float and is a valid value like "26.47".

Can please anyone can help me solve this issue?

Using Vue: 2.6.11, vue-css-donut-chart: 1.3.0 with vuetify 2.4.0;

I've stumbled upon this component but I was wondering if there was any intention to add any test coverage to the code base

Hey excellent css donut chart!

I think the only thing it is missing is an animation for when the chart loads. Most donut charting libraries will bring the donut chart in slowly around the radius of the chart.

Anyway you could implement this quickly? I'm strapped for time but if you are also strapped for time I can submit a PR.

Best regards.

People have shown interest in having the ability to disable font size recalculation. It would be good to have a prop that does that.

Im facing issue with this package is that it do not offers any way to create custom tooltip if there is any way can you assists me :) Btw its wonderful package to use donut chart having good options and easy to use too

Hi, first of - thank you for this amazingly looking, adequately simple component! Good job.

What I would like to do: I want to import and use the donut component similarly as I do with all of my own - just an import from a node_module, mentioning it as a component in the "components" field of Vue instance and then putting it into the template, passing props - similarly to the way it is done in this repo's demo page. I am using SFCs and TS.

What happened: Of course, an yarn add. If it should work out of the box as the above, then it did not on my end - I will gladly investigate the reasons further if that's the case. As I want the app to be self contained, I picked the ES6 method from the docs as the most adequate.

// main.ts

import Donut from 'vue-css-donut-chart';
import App from './App.vue';
import router from './router';
import store from './store/store';
import './registerServiceWorker';
import 'vue-css-donut-chart/dist/vcdonut.css';

Vue.use(Donut);

Vue.config.productionTip = false;

new Vue({
	router,
	store,
	render: (h) => h(App)
}).$mount('#app');

Imported the Donut and its styles inside my main.ts, did Vue.ues(Donut) before the new Vue is called and expected miracles, assuming it would be available from anywhere in my app. Of course it wasn't, referring to the Donut in the "components" vue instance field returns undefined without an explicit import into my SFC, which in turn seems contradictory to already importing it in the root instance. The way of importing the component into the SFC was not clear to me, too.

Vue docs suggest the way to enable access to the .vue file directly through the "browser" field in package.json, but it is not implemented it the package.

I thinks I am missing a piece in my Vue knowledge and I would very much appreciate someone enlightening me on the way to use this beautiful component in a vue-cli generated project.

Cheers 🍻

@dumptyd @frados @christikaes

my section data

output with the length of the array

I would like to be able to specify the starting angle from which the first section begins.

Would be great if the center of the donut had a transparent background. Haven't looked through the code for how it is currently implemented. Using this inside a striped table and want the table color to come through.

Chart sections from the example below consists of 12 items with value equal to 8.33 for each. 8.33 * 12 = 99.96 For some reason though this is breaking UI in the middle of the chart (180 deg).
See https://jsfiddle.net/0g54jzwv/12/

I tried using your package with vue 3, but it doesn't work properly
How do I set it up for vue 3

This is my code buh didn't work

import { createApp } from 'vue'
import App from './App.vue'
import Donut from 'vue-css-donut-chart';
import 'vue-css-donut-chart/dist/vcdonut.css';

const app = createApp(App)
app.use(Donut)
app.mount('#app')

Also props don't seem to function.
i.e https://jsfiddle.net/cqp7xdjm/

Any ideas?

Hi!

Very fine donut chart!

How hide this line?

I want to use this package after installing by directly importing into my component

I've ran but show this error:
Cannot read properties of undefined (reading '_c')

My code:

import Donut from 'vue-css-donut-chart';

const app = createApp();
app.use(Donut);

...

<template>
  <vc-donut total="35">
    Test donut
  </vc-donut>
</template>

Wouldn't it be better practice to have a field asking for enabling HTML and then enabling the use of v-html. than comparing the input format to be HTML and run a v-html to DonutHTML?

I would like to be able to handle hover on sections, just click the click event.

(using Chrome 83)

As you can see in the upper right hand corner an artifact appears in the green section.

locally, my fix is to not use the start-angle prop, and instead override the .cdc class using translateZ

example:
transform: translateZ(1px) rotate(200deg);