@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

Props

Datum properties