CODEWITHSUNDEEP
chartsgoogle-visualization
user8555937
user8555937

Reputation: 2387

Google Charts hAxis: How to prepend text in information box?

I hope this is not a duplicate. When user clicks on a dot from chart, how can I prepend "Days: " in the information box?

enter image description here

Upvotes: 1

Views: 105

Answers (1)

WhiteHat
WhiteHat

Reputation: 61232

using object notation in the data table,
we can provide both the value (v:) and the formatted value (f:)
of each cell. 

{v: 12, f: 'Days: 12'}

and by default, the tooltip will display the formatted value.

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart_data = [
    ['x', 'Times'],
    [0, 0],
    [2, 0],
    [4, 0],
    [6, 0],
    [8, 0],
    [10, 0],
    [{v: 12, f: 'Days: 12'}, 22],
    [14, 0],
    [16, 0],
  ];

  var data = google.visualization.arrayToDataTable(chart_data);

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, {
    height: 400
  });
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

EDIT

There aren't any options to change the default tooltips.
But we can add our own custom tooltips.

first, we need to add another column to the data.
in this example. I use a data view. 

// create view with tooltip column
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {  // <-- add column indexes for original columns
  // build custom tooltip column
  calc: function (dt, row) {
    var tooltip = '<div class="ggl-tooltip">';
    tooltip += '<div>' + dt.getColumnLabel(0) + ':&nbsp;';
    tooltip += dt.getFormattedValue(row, 0) + '</div>';
    tooltip += '<div>' + dt.getColumnLabel(1) + ':&nbsp;';
    tooltip += dt.getFormattedValue(row, 1) + '</div>';
    tooltip += '</div>';
    return tooltip;
  },
  p: {html: true},
  role: 'tooltip',
  type: 'string'
}]);

a couple things we need,
first, on the tooltip column, we need to specify a property for... 

  p: {html: true},

in the options, we need to set... 

tooltip: {
  isHtml: true
}

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var chart_data = [
    ['Days', 'Times'],
    [0, 0],
    [2, 0],
    [4, 0],
    [6, 0],
    [8, 0],
    [10, 0],
    [12, 22],
    [14, 0],
    [16, 0],
  ];

  var data = google.visualization.arrayToDataTable(chart_data);

  // create view with tooltip column
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {  // <-- add column indexes for original columns
    // build custom tooltip column
    calc: function (dt, row) {
      var tooltip = '<div class="ggl-tooltip">';
      tooltip += '<div>' + dt.getColumnLabel(0) + ':&nbsp;';
      tooltip += dt.getFormattedValue(row, 0) + '</div>';
      tooltip += '<div>' + dt.getColumnLabel(1) + ':&nbsp;';
      tooltip += dt.getFormattedValue(row, 1) + '</div>';
      tooltip += '</div>';
      return tooltip;
    },
    p: {html: true},
    role: 'tooltip',
    type: 'string'
  }]);

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(view.toDataTable(), {
    height: 400,
    tooltip: {
      isHtml: true
    }
  });
});
.ggl-tooltip {
  border: 1px solid #E0E0E0;
  font-family: Arial, Helvetica;
  font-size: 10pt;
  padding: 8px 8px 8px 8px;
}

.ggl-tooltip div {
  padding: 4px 4px 4px 4px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Note: there is a bug when using data views with column properties.
the column properties do not come through to the chart when drawn.
so we must convert the view back to a data table, before drawing.
(see above snippet)

view.toDataTable()

Upvotes: 1

Related Questions