I want to display pie legend in template vue 3 so that legend label value in percentages.

I am able to display series data.

My code:

<template>
<el-card >
    <div >
        <div >Type of ID</div>
        <div  @click="exportChart">
            <i ></i>
            Export
        </div>
    </div>
    <div  v-loading="isLoadingTypeOfId">
        <highcharts :options="options" ref="chart"></highcharts>
        <div >
            <div  v-for="item in options.series[0].data">
                <div >
                        <span :style="{color: item.color}"
                        >
                        {{ options.series[0].marker.symbol }}
                    </span>
                </div>
                <div>
                    <div >
                        {{ item.name }}
                    </div>
                    <div >
                        {{ item.y }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</el-card>

data() {
    return {
        isLoadingTypeOfId: false,
        options: {
            chart: {
                type: 'pie',
                spacingLeft: 0,
                height: 236,
                width: 240
            },
            credits: {
                enabled: false
            },
            title: {
                text: ''
            },
            legend: {
                enabled: false
            },
            tooltip: {
              formatter() {
                  return `${this.point.name}: ${Math.round(this.y)}`
              }
            },
            plotOptions: {
                pie: {
                    dataLabels: {
                        enabled: false
                    },
                    point: {
                        events: {
                            legendItemClick() {
                                return false
                            }
                        }
                    }
                }
            },
            navigation: {
                buttonOptions: {
                    enabled: false
                }
            },
            series: [
                {
                    innerSize: '75%',
                    data: [

{ name: 'AA', y: 1, color: '#8DCEEB' }, { name: 'AA', y: 2, color: '#5A86EB' }, { name: 'AA', y: 3, color: '#9241F1' }, { name: 'AA', y: 4, color: '#515D6C' }, { name: 'AA', y: 5, color: '#FEC0CA' }, { name: 'AA', y: 6, color: '#F8B14D' }], marker: { symbol: '\u25CF' } } ] } } }

Result: enter image description here

Should be enter image description here

CodePudding user response：

You can calculate percentage values based on your data sum or get them from a created chart.

For example:

<template>
  <div id="app">
    <highcharts
        :options="options"
        ref="chartRef"
    ></highcharts>
    <div>
      <div
        :key="item.id"
        v-for="item in chart?.series[0].points"
      >
        <div >
          <span :style="{ color: item.color }">
            {{ options.series[0].marker.symbol }}
          </span>
        </div>
        <div>
          <div>
            {{ item.name }}
          </div>
          <div>
            {{ Math.round(item.percentage) }}%
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  ...,
  mounted(){
    this.chart = this.$refs.chartRef.chart;
  },
  data() {
    return {
      chart: null,
      options: {...}
    };
  }
};
</script>

Live demo: https://stackblitz.com/edit/vue-qdsgo1?file=src/App.vue

API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#percentage