@tygr/vue-pie-chart

Vue Pie Chart

DEMO

A simple no-nonsense pie chart optimized for VueJS

Installation

Yarn

yarn add -D @tygr/vue-pie-chart

import PieChart from '@tygr/vue-pie-chart'

export default {
  components: {
    PieChart,
  }
}

Browser

<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

Usage

<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
      }
    ]
  })
}

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