Vue Charts

doughnut.vue

<script>
import { Doughnut } from 'vue-chartjs'

export default {
  name: 'DoughnutChart',
  extends: Doughnut,
  props: {
    chartdata: {
      type: Object,
      default: null,
    },
  },
  computed: {
    chartData: function () {
      return this.chartdata
    },
  },
  data: function () {
    return {
      first_render: true,
    }
  },
  methods: {
    renderDoughnutChart: function () {
      var chart = this.renderChart(this.chartData, {
        elements: {
          arc: {
            borderWidth: 0,
          },
        },
        cutoutPercentage: 80,
        responsive: true,
        maintainAspectRatio: false,
        animation: {
          duration: this.first_render ? 1000 : 0,
        },
        legend: {
          display: false,
        },
        tooltips: {
          displayColors: false,
          enabled: true,
          callbacks: {
            label: (tooltipItems, dataIndex) => {
              let percentage = dataIndex.datasets[0].data[tooltipItems.index]
              let label = dataIndex.labels[tooltipItems.index]
              return `${label}: ${percentage}%`
            },
          },
        },
      })
      this.first_render = false
      var legend = this.$data._chart.generateLegend()
      this.$emit('legend_have_been_generated', legend)
    },
  },
  watch: {
    chartdata: function () {
      this.renderDoughnutChart()
    },
  },
  mounted() {
    this.renderDoughnutChart()
  },
}
</script>

Pie.vue

<script>
    import {Pie} from 'vue-chartjs'

    export default {
        extends: Pie,
        props: {
            chartdata: {
                type: Object,
                default: null
            },
        },
        computed: {
            chartData: function () {
                return this.chartdata;
            }
        },
        data: function () {
            return {
                first_render: true
            }
        },
        methods: {

            renderLineChart: function () {
                var chart = this.renderChart(
                    this.chartData,
                    {
                        elements: {
                            arc: {
                                borderWidth: 0
                            }
                        },
                        legendCallback: function (chart) {
                            var legendHtml = [];
                            var item = chart.data.datasets[0];
                            for (var i = 0; i < item.data.length; i++) {
                                legendHtml.push('<div class="chart-legend-item">');
                                legendHtml.push('<span></span><span class="chart-icon" style="background-color:' + item.backgroundColor[i] + '"></span>');
                                legendHtml.push('<span class="chart-text">' + chart.data.labels[i] + '</span>');
                                legendHtml.push('</div>');
                            }
                            return legendHtml.join("");
                        },
                        responsive: true,
                        maintainAspectRatio: false,
                        animation: {
                            duration: this.first_render ? 1000 : 0
                        },
                        legend: {
                            display: false
                        },
                        tooltips: {
                            displayColors: false,
                            callbacks: {
                                title: function (tooltipItem, data) {
                                    return data['labels'][tooltipItem[0]['index']]
                                },
                                label: function (tooltipItem, data) {
                                    let dataset = data.datasets[tooltipItem.datasetIndex]
                                    let total = dataset.data.reduce((partial_sum, a) => partial_sum + a)
                                    let currentValue = dataset.data[tooltipItem.index]
                                    let percentage = Math.round(currentValue / total * 100 * 100) / 100
                                    let roundedCurrentValue = Math.round(currentValue * 100) / 100
                                    let currency = (data.currencies && data.currencies.length > 0) ? data.currencies[tooltipItem.index] : ''
                                    return `${roundedCurrentValue} ${currency} (${percentage}%)`;
                                }
                            }
                        }
                    }
                );
                this.first_render = false;
                var legend = this.$data._chart.generateLegend()
                this.$emit('legend_have_been_generated', legend)
            }
        },
        watch: {
            chartdata: function () {
                this.renderLineChart();
            }
        },
        mounted() {
            this.renderLineChart();
        },
    }
</script>