I'm currently working on customizing tooltips in angularjs google charts. My goal is to display multiple series data along with some text within the tooltip, similar to the demo showcased here. Specifically, I aim to include the legend and title of the value beside the displayed value in the tooltip, like demonstrated in this example.
While the initial plunker works as expected without any customization to the tooltip, when I tried implementing changes to display specific text as shown in the first plunker link (replacing 'First Series' with 'Jan - July ...'), the tooltip didn't behave as expected. Any suggestions?
Here's a snippet of the JavaScript code:
'use strict';
angular.module('google-chart-example', ['googlechart']).controller("MainCtrl", function ($scope) {
var createChart = function (rows, label) {
return {
"type": "ColumnChart",
"data": {
"cols": [
{"id": label, "label": label, "type": "string"},
toolTipVar,
{"id": "count", "label": "count", "type": "number"},
{"id": "pizza", "label": "Pizza", "type": "number"},
{"id": "softdrink", "label": "Softdrink", "type": "number"}
],
"rows": rows
},
"options": {
"title": label,
"isStacked": "true",
focusTarget: 'category',
"tooltip": {'text' : 'value' },
}
}
};
var toolTipVar = {
role: "tooltip",
type: "string",
p: {
'html': true
}
};
var data = [
{"c":[{"v":"First Series"},{"v":"Jan - July" + "\n" + "63" + "\n" + "30" + "\n" + "33"},{"v":63},{"v":"30"},{"v":"33"}]},
{"c":[{"v":"Second series"},{"v":"Aug - Sept" + "\n" + "70" + "\n" + "35" + "\n" + "35"},{"v":70},{"v":"35"},{"v":"35"}]},
{"c":[{"v":"Third series"},{"v":"Oct - Dec" + "\n" + "80" + "\n" + "40" + "\n" + "40"},{"v":80},{"v":"40"},{"v":"40"}]}
];
$scope.myChart = createChart(data, "Data Series");
});