HighChart : How to enable data label as per the group by options in a pie chart

Question & Answer
,
1

image
image1171×505 47.6 KB

Pie charts by default shows SLICE as the labels, i would want to see actual group by values being passed to be shown as data labels.

2

Hi @BhavyaBangera -

Many, many ways to do this. Here is a simple example for you. Hope it helps.

image
image996×795 35.1 KB

{
  "chart": {
    "type": "pie"
  },
  "title": {
    "text": "Sales by Product"
  },
  "tooltip": {
    "headerFormat": "",
    "pointFormat": "<span style=\"color:{point.color}\">●</span> <b>{point.name}</b><br/>Sales: <b>{point.y:,.2f}</b>"
  },
  "plotOptions": {
    "pie": {
      "dataLabels": {
        "enabled": true,
        "format": "{point.name}: {point.y:,.2f}" // Show Product Name and Sales
      },
      "showInLegend": true // Enable legend
    }
  },
  "series": [
    {
      "name": "Products",
      "data": [
        "map",
        ["getColumn", 0, 1], // Product, Sales
        {
          "name": ["get", ["item"], 0], // Product
          "y": ["get", ["item"], 1]     // Sales
        }
      ]
    }
  ]
}

highchart-how-to-enable-data-label-as-per-the-group-by-options-in-a-pie-chart

1 Like
3

Thanks, this helps.

Is there any document which I can refer for all the attributes available and their syntax for each type of chart?

4

@BhavyaBangera