Frappe Charts in VueJS

chart-base.vue

<template>
	<div ref="chart" />
</template>

<script>
import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'
import 'frappe-charts/dist/frappe-charts.min.css'

export default {
	props: {
		chart: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {
			frappeChart: undefined,
		};
	},
	watch: {
		chart(chart) {
			this.frappeChart.update({
				labels: chart.labels || [],
				datasets: chart.data || [],
			});
		},
	},
	mounted() {
		this.frappeChart = new Chart(this.$refs.chart, {
			data: {
				labels: this.chart.labels || [],
				datasets: this.chart.data || [],
			},
			type: this.chart.type || 'axis-mixed',
			height: 250,
			colors: [`green`, `light-green`, `yellow`, `orange`],
			axisOptions: { xIsSeries: true },
			tooltipOptions: {
				formatTooltipY: (y) => {
					if (y) {
						if (/\d+\.\d+/.exec(y)) {
							y = y.toFixed(2);
						}
						return `${y} ${this.chart.units || `units`}`;

					} else {
						return 'N/A';
					}
				},
			},
			barOptions: { stacked: true },
		})
	},
	destroy() {
		this.frappeChart = null;
	}
};
</script>

<style>
</style>

chart.vue

<template>
  <chart-base
    v-if="chart"
    :key="chart.id"
    :chart="chart"
  />
</template>
<script>
import ChartBase from "./chart-base.vue";

export default {
  components: {
    ChartBase,
  },
  data() {
    return {
      chart: {
        id: "chart-1",
        name: "title",
        type: "axis-mixed",
        data: [{
          name: "Sales",
          type: "line",
          values: [ 10, 50, 30, 60, 50 ],
        }],
        labels: [
          "Mon",
          "Tue",
          "Wed",
          "Thu",
          "Fri",
        ],
        units: "sales",
    }
  }
}
</script>