angularechartsngx-echarts

How i can display values on PIE chart in angular ? i am using ngx-echarts


This is my options for my echarts, i don't know where to add an options to display value of my data on the pie chart . or any indicators to display values without hover event.

 this.options = {
  backgroundColor: this.eTheme.bg,
  tooltip: {
    trigger: 'item',
    formatter: '{b} : {c}',
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: [],
  },
  series: [
    {
      name: 'Users',
      type: 'pie',
      radius: '50%',
      center: ['50%', '70%'],
      data: [],
    },
  ],
};

my pie chart


Solution

  • There's no option to directly display the value on the chart, you'll have to use the label formatter to do this.

    For example:

     this.options = {
      backgroundColor: this.eTheme.bg,
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}',
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: [],
      },
      series: [
        {
          name: 'Users',
          type: 'pie',
          label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}:}{c}  {per|{d}%}  '
          },
          radius: '50%',
          center: ['50%', '70%'],
          data: [],
        },
      ],
    };
    

    You can adapt your formatter as you see fit.