Is it possible to format the legend in Google Charts?

Question

I have a predefined legend using data row values. The data row values cannot be changed, so I have to format the legend values. For example, I need to turn the legend [A, S, T, V] to [AT&T, Sprint, T-Mobile, Verizon] is there a way to do this? I know we can reformat ticks, but is there a way to reformat the legend?

Here's a sample of my data:

[ID, Carrier A, Carrier B, Carrier, Amount],

[1, S, V, A, 36],

[2, V, A, S, 15],

[3, A, V, T, 22],

[4, S, A, V, 48]

The data is in Bubble Chart format.

Possible duplicate of [How to write your own custom legends for google line chart/ Google line chart legend manipulation](https://stackoverflow.com/questions/35987014/how-to-write-your-own-custom-legends-for-google-line-chart-google-line-chart-le) — juvian, Jul 31 '17 at 15:38

WhiteHat · Accepted Answer · 2017-07-31T17:31:23.703

you can use a DataView with calculated columns,
to translate the values to the respective names

use DataView method setColumns,

see following working snippet...

google.charts.load('current', {
  callback: drawChart,
  packages:['table']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['ID', 'Carrier A', 'Carrier B', 'Carrier C', 'Amount'],
    [1, 'S', 'V', 'A', 36],
    [2, 'V', 'A', 'S', 15],
    [3, 'A', 'V', 'T', 22],
    [4, 'S', 'A', 'V', 48]
  ]);

  var dataView = new google.visualization.DataView(data);
  dataView.setColumns([0, {
    calc: function (dt, row) {
      return getCarrierName(dt.getValue(row, 1));
    },
    type: 'string',
    label: data.getColumnLabel(1)
  }, {
    calc: function (dt, row) {
      return getCarrierName(dt.getValue(row, 2));
    },
    type: 'string',
    label: data.getColumnLabel(2)
  }, {
    calc: function (dt, row) {
      return getCarrierName(dt.getValue(row, 3));
    },
    type: 'string',
    label: data.getColumnLabel(3)
  }, 4]);

  function getCarrierName(abbr) {
    var name;

    switch (abbr) {
      case 'A':
        name = 'AT&T';
        break;

      case 'S':
        name = 'Sprint';
        break;

      case 'T':
        name = 'T-Mobile';
        break;

      case 'V':
        name = 'Verizon';
        break;

      default:
        name = '';
    }

    return name;
  }

  var chart = new google.visualization.Table(document.getElementById('chart_div'));
  chart.draw(dataView);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

This answer is very good, but the format of my data is like this: [ID, Carrier A, Carrier B, Carrier, Amount], [1, S, V, V, 36], [2, V, A, A]...etc. I'm trying to format a bubble chart — user2896120, Jul 31 '17 at 16:09

Is it possible to format the legend in Google Charts?

1 Answers1