Vue 3 Frappe Charts

This is a simple package to get using Frappe Charts within VueJS

How to use

First we need to import and initialize

import Chart from "@pathscale/@pathscale/vue3-charts";

export default {
    components: {
        Chart
    },
  },
};

Then in our Vue templates:

<template>
  <chart
    id="test"
    title="Monthly Distribution"
    type="pie"
    :height="300"
    :labels="['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
    :colors="['red']"
    :discrete-domains="false"
    :data-sets="data"
  />
</template>
<script>
  export default {
    name: "ChartShowcase",
    components: { Chart },
    setup() {
      const data = [{ values: [18, 40, 30, 35, 8, 52, 17, -4] }];
      return {
        data,
      };
    },
  };
</script>

There are more examples in the examples directory

Links

Frappe Charts

Vue JS