Viz Style - Display Values as Percentage for Bar Charts

[ginandtobby]

Hi Community!

I have a viz request to display a stacked bar chart where:

• The total value is labeled
• Each sub-bar displays the percentage of the total

With the current JSON settings, I’m able to achieve this:

  "series": [{
      "dataLabels": {
        "enabled": true,
        "format": "{point.percentage:.0f}%"
      }
    },
    {
      "dataLabels": {
        "enabled": true,
        "format": "{point.percentage:.0f}%"
      }
    }
  ],

But now I have an issue:
The series field must be an array, but the number of series in my chart is dynamic — it depends on the applied filters. So, I would need a way to apply a general setting to all series, regardless of how many there are, so that each always displays its value as a percentage of the total. What is the best way to do it? 

Thanks!

[ruthc · Accepted solution]

Use the plotOptions.series.dataLabels object instead to define data labels at the global level. (But please note that you must first manually enable value labels in the chart setting for this to work: 'Values' tab > 'Value Labels'.)

  plotOptions: {
    series: { 
      dataLabels: {
        enabled: true,
        format: '{percentage:.0f}%',
      },
    },
  },

Use the series object if you want to independently define data labels for each series. This is useful if you want to hide data labels for one series, but display them for another series. Or if you want to format them independently. For example, lets say you have plotted sales by country on a bar chart, and want to include the rank (or the percentage of the total) as a data label, but do not to show the actual value for sales:

  // Series 1 = the first column in the data table
  series: [{ // series 1 e.g. 'sales' measure
    dataLabels: {
      enabled: false
    }
  }, { // series 2 e.g. 'rank' table calculation
    dataLabels: {
      enabled: true,
      align: 'left',
      x: -30, // offset the horizontal position of label
      y: 0, // offset the vertical position of label
      format: '#{point.y:,.0f}',
      style: {
        fontSize: '12px',
        color: '#666666',
      },
    }
  }],

Finally, if you have a pie chart, you must use plotOptions.pie.dataLabels:

  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
        format: '<b>{key}</b>- ${y:,.0f} ({percentage:.0f}%)',
        style: {
          fontWeight: 'normal',
        },
      },
    },
  },