![Build Status](https://camo.githubusercontent.com/a2d84bcd66f70b434148a5a18df68d47baca59601ae649f25336251fc294cfc8/68747470733a2f2f7472617669732d63692e6f72672f74796c65726772696e6e2f7675652d7069652d63686172742e7376673f6272616e63683d6d6173746572)
A simple no-nonsense pie chart optimized for VueJS
![demo](/amygrinn/vue-pie-chart/raw/master/docs/pie-chart.gif)
yarn add -D @tygr/vue-pie-chart
import PieChart from '@tygr/vue-pie-chart'
export default {
components: {
PieChart,
}
}
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/@tygr/vue-pie-chart/dist/vue-pie-chart.min.js" charset="utf-8"></script>
<script>
Vue.use(PieChart)
</script>
- Charset attribute required
<pie-chart :plot="plot"></pie-chart>
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
}
]
})
}
event |
payload |
description |
click |
any |
Emits the id of a datum when clicked |
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 |
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 |