Vue Pie Chart


DEMO

A simple no-nonsense pie chart optimized for VueJS

!demo

Installation

$3

``
yarn add -D @tygr/vue-pie-chart
`
`js
import PieChart from '@tygr/vue-pie-chart'

export default {
components: {
PieChart,
}
}
`

$3


`html



`

* Charset attribute required

Usage

`html

`
`js
export default {
data: () => ({
plot: [
{
value: 10,
color: 'blue',
label: 'Blue amount',
id: 1
},
{
value: 45,
color: 'green',
label: 'Green amount',
id: 2
},
{
value: 30,
color: 'purple',
label: 'Purple amount',
id: 3
}
]
})
}
``

Events

| event | payload | description |
| ----- | ------- | ------------------------------------ |
| click | any | Emits the id of a datum when clicked |

Props

| prop | type | default | description |
| ---------------- | ------ | ------- | --------------------- |
| plot | array | [] | The plot data to show |
| background-color | string | 'grey' | The background color |
| color | string | 'white' | Text and border color |

Datum properties

| prop | type | description |
| ----- | ------ | ----------------------------------------- |
| value | number | percentage out of 100 |
| color | string | background color for the circle segment |
| label | string | label for the segment |
| id | any | Identifier to be used for the click event |