Skip to content

amygrinn/vue-pie-chart

Repository files navigation

Vue Pie Chart

Build Status

A simple no-nonsense pie chart optimized for VueJS

demo

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