Vue-Apexcharts pie chart total not showing

user_11042283 0
Viewed 4113

I'm trying to display the total number of some elements in the center of my pie-chart but so far I haven't been able to find this option in the settings. How can I do that:

My current code: 

checksChart: {
  options: {
    colors: ['#E60B13', '#1F1E1E', '#6D6D6D', '#CECECE', 'rgba(255,87,93,.77)'],
    legend: {
      fontSize: '14px',
      fontFamily: 'Helvetica, Arial',
      fontWeight: 400,
      itemMargin: {
        vertical: 10
      },
      formatter: function(seriesName, opts) {
        return '<div class="legend-info">' + '<span>' + seriesName + '</span>' + '<span>' + opts.w.globals.series[opts.seriesIndex] + '</span>' + '</div>'
      }
    },
    dataLabels: {
      enabled: false,
    },
    labels: ['data', 'data', 'data', 'data', 'data'],

  },
  series: [400, 400, 400, 400, 400]
},
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<vue-apex-charts type="donut" :options="checksChart.options" :series="checksChart.series"></vue-apex-charts>

This is what I have so far: enter image description here

vue.js charts javascript
1 Answers

Based on the Apex Chart Documentation, you need to use plotOptions to display the total of data inside donut chart.

So you need to use like,

chartOptions: function() {
return {
    colors: ['#E60B13', '#1F1E1E', '#6D6D6D', '#CECECE', 'rgba(255,87,93,.77)'],
    legend: {
      fontSize: '14px',
      fontFamily: 'Helvetica, Arial',
      fontWeight: 400,
      itemMargin: {
        vertical: 10
      },
      formatter: function(seriesName, opts) {
        return '<div class="legend-info">' + '<span>' + seriesName + '</span>' + '<span>' + opts.w.globals.series[opts.seriesIndex] + '</span>' + '</div>'
      }
    },
    dataLabels: {
      enabled: false,
    },
    labels: ['data', 'data', 'data', 'data', 'data'],

     plotOptions: {
          pie: {
            donut: {
              labels: {
                show: true,
                name: {
                  show: true,
                  fontSize: '22px',
                  fontFamily: 'Rubik',
                  color: '#dfsda',
                  offsetY: -10
                },
                value: {
                  show: true,
                  fontSize: '16px',
                  fontFamily: 'Helvetica, Arial, sans-serif',
                  color: undefined,
                  offsetY: 16,
                  formatter: function (val) {
                    return val
                  }
                },
                total: {
                  show: true,
                  label: 'Total',
                  color: '#373d3f',
                  formatter: function (w) {
                    return w.globals.seriesTotals.reduce((a, b) => {
                      return a + b
                    }, 0)
                  }
                }
              }
            }
          }
        },
          series: [400, 400, 400, 400, 400]
      }
    },

In the above code, the sum of series is achieved by using, seriesTotals.reduce like,

   total: {
     show: true,
     label: 'Total',
     color: '#373d3f',
     formatter: function (w) {
       return w.globals.seriesTotals.reduce((a, b) => {
           return a + b
       }, 0)
      }
    }

Working Vue Apex donut codepen

user_77853370
Related