Configuration

If you've been following the docs you'll notice all data and configurations are passed on to Frappe via attrs and props.

You can apply this pattern to any of the configurations found in the Frappe Charts Configuration docs here (opens new window).

Like the title attribute.

title="My Awesome Chart"

<v-frappe-chart
  title="My Awesome Chart"
  type="line"
  :labels="['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
  :data="[{ values: [18, 40, 30, 35, 8, 52, 17, -4] }]"
/>

Expand Copy Copy

A note on using the underlying API

You will find the full API docs here (opens new window).

You can utilize the $ref and chart attributes to call the underlying API. For example, let's call the export function:

<template>
  <v-frappe-chart
    type="bar"
    ref="mychart"
    :labels="['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
    :data="[{ values: [18, 40, 30, 35, 8, 52, 17, -4] }]"
  />
  <input type="button" @click="myExport" value="Export" />
</template>
<script>
export default {
  methods: {
    myExport() {
      this.$refs.mychart.chart.export()
    },
  },
}
</script>

Expand Copy Copy