CODEWITHSUNDEEP
javascriptecharts
MasterOdin
MasterOdin

Reputation: 7896

Show slice names and values in separate labels on echarts pie chart

I'm trying out the ECharts library My goal is to get a chart like the following, where the slice labels are shown around the pie, and the values shown on top of each slice:

ideal pie chart

I had hoped that I could define a separate label on the series, and then a label on data and get different values, like:

const option = {
  "series": {
    "data": [
      {
        "label": {
          "formatter": (params) => params.value,
          "show": true,
          "position": "inside"
        },
        "value": 65.98750000000001,
        "name": "Asia"
      },
      {
          "label": {
            "formatter": (params) => params.value,
            "show": true,
            "position": "inside"
          },
          "value": 76.85333333333332,
          "name": "Europe"
      },
      {
          "label": {
            "formatter": (params) => params.value,
            "show": true,
            "position": "inside"
          },
          "value": 72.15909090909092,
          "name": "North America"
      },
      {
          "label": {
            "formatter": (params) => params.value,
            "show": true,
            "position": "inside"
          },
          "value": 51.4695652173913,
          "name": "Africa"
      },
      {
          "label": {
            "formatter": (params) => params.value,
            "show": true,
            "position": "inside"
          },
          "value": 71.91666666666667,
          "name": "Oceania"
      },
      {
          "label": {
            "formatter": (params) => params.value,
            "show": true,
            "position": "inside"
          },
          "value": 68.97142857142858,
          "name": "South America"
      }
    ],
    "label": {
      "show": true,
      "position": "outside"
    },
    "radius": [
      "30%",
      "80%"
    ],
    "type": "pie"
  },
  "tooltip": {}
};

But no dice, where it seems the option.data.label overrides whatever I set on option.label. I've tried a number of variations without luck, and the docs don't include an example of what I'm trying to do, so I'm increasingly not sure it's possible.

Upvotes: 5

Views: 1835

Answers (1)

Harsh Tukadiya
Harsh Tukadiya

Reputation: 183

You just need to add multiple series for your expected output

Here i give example:-

option = {

series: [
{
  type: 'pie',
   radius: ['50%', '80%'],
  data:[ 
    { value: 65, name: 'Asia' },
  { value: 76, name: 'Europe' },
  { value: 72, name: 'North America' },
  { value: 51, name: 'Africa' },
  { value: 71, name: 'Oceania' },
  { value: 68, name: 'South America' }]
},
{
  type: 'pie',
   radius: ['50%', '80%'],
  label: { position: 'inside', formatter: '{c}' },
  data:[65,76,72,51,71,68]
}
],
"radius": [
  "30%",
  "80%"
],  "type": "pie"

}

Upvotes: 2

Related Questions