For my question I have prepared a simple JSFiddle:
In a Combo Chart with stepped area and a dashed line I am trying to display a tooltip with custom text, because the default text ("652 Win: 85" in the above screenshot) is difficult to understand.
My JavaScript code is below (the data is actually coming from a PHP-script + database but for simplicity I have just put it into the jsonData variable):
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawComboChart);
function drawComboChart() {
var jsonData = {
"cols": [{
"label": "Game",
"type": "string"
},
{
"label": "Win",
"type": "number"
},
{
"label": "Defeat",
"type": "number"
},
{
"label": "Draw",
"type": "number"
},
{
"label": "Opponent score",
"type": "number"
},
{
"role": "tooltip",
"type": "string"
}
],
"rows": [{
"c": [{
"v": 646
},
{
"v": 0
},
{
"v": 0
},
{
"v": 0
},
{
"v": 10
},
{
"v": "Game 646 0:10 lost"
}
]
},
{
"c": [{
"v": 647
},
{
"v": 0
},
{
"v": 0
},
{
"v": 0
},
{
"v": 13
},
{
"v": "Game 647 0:13 won"
}
]
},
{
"c": [{
"v": 648
},
{
"v": 22
},
{
"v": 0
},
{
"v": 0
},
{
"v": 23
},
{
"v": "Game 648 22:23 won"
}
]
},
{
"c": [{
"v": 651
},
{
"v": 13
},
{
"v": 0
},
{
"v": 0
},
{
"v": 31
},
{
"v": "Game 651 13:31 won"
}
]
},
{
"c": [{
"v": 652
},
{
"v": 85
},
{
"v": 0
},
{
"v": 0
},
{
"v": 75
},
{
"v": "Game 652 85:75 won"
}
]
},
{
"c": [{
"v": 653
},
{
"v": 0
},
{
"v": 0
},
{
"v": 0
},
{
"v": 10
},
{
"v": "Game 653 0:10 lost"
}
]
},
{
"c": [{
"v": 654
},
{
"v": 18
},
{
"v": 0
},
{
"v": 0
},
{
"v": 12
},
{
"v": "Game 654 18:12 won"
}
]
},
{
"c": [{
"v": 655
},
{
"v": 0
},
{
"v": 10
},
{
"v": 0
},
{
"v": 22
},
{
"v": "Game 655 10:22 lost"
}
]
},
{
"c": [{
"v": 661
},
{
"v": 0
},
{
"v": 33
},
{
"v": 0
},
{
"v": 44
},
{
"v": "Game 661 33:44 lost"
}
]
},
{
"c": [{
"v": 666
},
{
"v": 0
},
{
"v": 5
},
{
"v": 0
},
{
"v": 18
},
{
"v": "Game 666 5:18 lost"
}
]
},
{
"c": [{
"v": 682
},
{
"v": 0
},
{
"v": 95
},
{
"v": 0
},
{
"v": 107
},
{
"v": "Game 682 95:107 lost"
}
]
},
{
"c": [{
"v": 686
},
{
"v": 0
},
{
"v": 0
},
{
"v": 0
},
{
"v": 10
},
{
"v": "Game 686 0:10 lost"
}
]
},
{
"c": [{
"v": 733
},
{
"v": 389
},
{
"v": 0
},
{
"v": 0
},
{
"v": 387
},
{
"v": "Game 733 389:387 won"
}
]
},
{
"c": [{
"v": 737
},
{
"v": 29
},
{
"v": 0
},
{
"v": 0
},
{
"v": 12
},
{
"v": "Game 737 29:12 won"
}
]
},
{
"c": [{
"v": 979
},
{
"v": 152
},
{
"v": 0
},
{
"v": 0
},
{
"v": 70
},
{
"v": "Game 979 152:70 won"
}
]
}
]
};
var dt = new google.visualization.DataTable(jsonData);
//dt.addColumn({type: 'string', role: 'tooltip'});
var options = {
width: 480,
height: 360,
legend: {
position: 'top',
alignment: 'center',
maxLines: 2
},
seriesType: 'steppedArea',
series: {
3: {
type: 'line',
lineWidth: 1,
color: '000000',
lineDashStyle: [4, 2]
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(dt, options);
}
As you see in the above code, I have added a column:
{
"role": "tooltip",
"type": "string"
}
And try to fill it with following values:
{
"v": "Game 737 29:12 won"
}
But still, when hovering over stepped area, the default tooltip is shown.
Only when hovering over the dashed line is the new custom tooltip to see.
How to enable the custom tooltip everywhere please?
