Google Charts - Legend and tooltips label

Question

I have a question about Google Charts and label customization.

I'm working with a combo chart, and please note that I'm only able to edit its options, as the data is built by a part of code which is unreachable for me.

What I'm trying to do is to change a serie label in both the legend and the tooltip showed on hover, by just editing the chart options.

I've found out that series have a property called labelInLegend that allows me to edit the displayed label in the legend, but the label inside the tooltip isn't changed as well. Is there a way to achieve it by changing the options or somehow but after the chart has been drawn?

Check this Fiddle to see the problem (ORIGINAL_LABEL is the original serie name, that I want to change to MY_LABEL in both legend and tooltip)

//Series initialization: I CAN'T CHANGE THIS CODE!
google.visualization.arrayToDataTable([
     ['Month', 'ORIGINAL_LABEL']
]);

//Options initialization: I CAN MODIFY THIS CODE
var options = {
  series: {
    0:{ labelInLegend: "MY_LABEL"}
    }
};

Answer 1

one option would be to use a DataView to add a calculated column
and the setColumns method to change the label

see following working snippet...

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

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'ORIGINAL_LABEL'],
    ['2004/05',  165],
    ['2005/06',  135],
    ['2006/07',  157],
    ['2007/08',  139],
    ['2008/09',  136]
  ]);

  var options = {
    seriesType: 'bars'
  };

  var view = new google.visualization.DataView(data);
  view.setColumns([0, {
    calc: function (dt, r) {
      return dt.getValue(r, 1);
    },
    type: data.getColumnType(1),
    label: 'MY_LABEL'
  }]);

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(view, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

another option includes using HTML tooltips

    tooltip: {
      isHtml: true
    }

and using a MutationObserver to find the text and replace it

however, the size of the tooltip is thrown off due to the size of the label
further customization may be required

see following working snippet...

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

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'ORIGINAL_LABEL'],
    ['2004/05',  165],
    ['2005/06',  135],
    ['2006/07',  157],
    ['2007/08',  139],
    ['2008/09',  136]
  ]);

  var options = {
    seriesType: 'bars',
    tooltip: {
      isHtml: true
    }
  };

  var chartDiv = document.getElementById('chart_div');
  var chart = new google.visualization.ComboChart(chartDiv);

  var observer = new MutationObserver(function (mutations) {
    Array.prototype.forEach.call(chartDiv.getElementsByTagName('span'), function (span) {
      if (span.innerHTML.indexOf('ORIGINAL_LABEL') > -1) {
        span.innerHTML = span.innerHTML.replace('ORIGINAL_LABEL', 'MY_LABEL');
      }
    });
  });
  observer.observe(chartDiv, {
    childList: true,
    subtree: true
  });

  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Answer 2

If you have access to the variable "data" after google.visualization.arrayToDataTable, then you can just put this line after "data" is set but before the table is created:

data.bf[1].label = 'MY_LABEL';

I discovered this by looking at the data with console.log.