I did a google chart showing 4 intervals. My problem is that the tooltip (on "focus category") appears only if the mouse is outside of the intervals. If the mouse is in an interval, the tooltip doesn't appear.
See an example here : Link to CodePen
HTML:
<div ng-app="myApp" ng-controller="myController">
<div google-chart chart="myChart"></div>
</div>
JS:
angular.module('myApp', ['googlechart'])
.controller('myController', function($scope) {
$scope.myChart = {
"type":"ComboChart",
"options":{
"chartArea":{
"left":"15%",
"width":"85%",
"height":"85%"
},
"focusTarget":"category",
"tooltip":{
"isHtml":true
},
"legend":{
"position":"none"
},
"intervals":{
"style":"area",
"color":"series-color"
},
"interval":{
"IC95Ahaut":{
"color":"#f9cb9c",
"fillOpacity":0.3
},
"IC95Abas":{
"color":"#f9cb9c",
"fillOpacity":0.3
},
"IC80Ahaut":{
"color":"#f9cb9c",
"fillOpacity":0.7
},
"IC80Abas":{
"color":"#f9cb9c",
"fillOpacity":0.7
},
"IC95Bhaut":{
"color":"#4eced7",
"fillOpacity":0.3
},
"IC95Bbas":{
"color":"#4eced7",
"fillOpacity":0.3
},
"IC80Bhaut":{
"color":"#4eced7",
"fillOpacity":0.7
},
"IC80Bbas":{
"color":"#4eced7",
"fillOpacity":0.7
}
},
"series":{
"0":{
"color":"#f9cb9c",
"targetAxisIndex":0,
"type":"line",
"lineWidth":0,
"pointSize":0,
"labelInLegend":"IC95A"
},
"1":{
"color":"#f9cb9c",
"targetAxisIndex":0,
"type":"line",
"lineWidth":0,
"pointSize":0,
"labelInLegend":"IC80A"
},
"2":{
"color":"#4eced7",
"targetAxisIndex":0,
"type":"line",
"lineWidth":0,
"pointSize":0,
"labelInLegend":"IC95B"
},
"3":{
"color":"#4eced7",
"targetAxisIndex":0,
"type":"line",
"lineWidth":0,
"pointSize":0,
"labelInLegend":"IC80B"
}
},
"vAxes":{
"0":{
"format":"###.##%",
"title":"Performance",
"viewWindowMode":"maximized"
}
}
},
"data":{
"cols":[
{
"id":"date",
"label":"Date",
"type":"date"
},
{
"id":"ht",
"type":"string",
"role":"tooltip",
"p":{
"html":true
}
},
{
"id":"IC95A",
"label":"IC95A",
"type":"number"
},
{
"id":"IC95Abas",
"type":"number",
"role":"interval"
},
{
"id":"IC95Ahaut",
"type":"number",
"role":"interval"
},
{
"id":"IC80A",
"label":"IC80A",
"type":"number"
},
{
"id":"IC80Abas",
"type":"number",
"role":"interval"
},
{
"id":"IC80Ahaut",
"type":"number",
"role":"interval"
},
{
"id":"IC95B",
"label":"IC95B",
"type":"number"
},
{
"id":"IC95Bbas",
"type":"number",
"role":"interval"
},
{
"id":"IC95Bhaut",
"type":"number",
"role":"interval"
},
{
"id":"IC80B",
"label":"IC80B",
"type":"number"
},
{
"id":"IC80Bbas",
"type":"number",
"role":"interval"
},
{
"id":"IC80Bhaut",
"type":"number",
"role":"interval"
}
],
"rows":[
{
"c":[
{
"v":new Date('2017-05-23T22:00:00.000Z')
},
{
"v":"<table class=\"tooltipChart\"><tr><td colspan=\"3\"><strong>Performance - 24 mai 2017</strong></td></tr><tr><td> </td><td><div style=\"width:100%; text-align:center;\">IC 80%</div></td><td><div style=\"width:100%; text-align:center;\">IC 95%</div></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #4eced7\"></i> Sans</td><td style=\"padding: 0px 20px;\"><strong>1,32% - 1,66%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,24% - 1,76%</strong></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #f9cb9c\"></i> Avec</td><td style=\"padding: 0px 20px;\"><strong>1,19% - 1,52%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,11% - 1,61%</strong></td></tr>"
},
{
"v":0.013600000000000001
},
{
"v":0.0111
},
{
"v":0.0161
},
{
"v":0.01355
},
{
"v":0.0119
},
{
"v":0.0152
},
{
"v":0.015
},
{
"v":0.0124
},
{
"v":0.0176
},
{
"v":0.0149
},
{
"v":0.0132
},
{
"v":0.0166
}
]
},
{
"c":[
{
"v":new Date("2017-05-24T22:00:00.000Z")
},
{
"v":"<table class=\"tooltipChart\"><tr><td colspan=\"3\"><strong>Performance - 25 mai 2017</strong></td></tr><tr><td> </td><td><div style=\"width:100%; text-align:center;\">IC 80%</div></td><td><div style=\"width:100%; text-align:center;\">IC 95%</div></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #4eced7\"></i> Sans</td><td style=\"padding: 0px 20px;\"><strong>1,35% - 1,57%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,30% - 1,63%</strong></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #f9cb9c\"></i> Avec</td><td style=\"padding: 0px 20px;\"><strong>1,07% - 1,27%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,02% - 1,32%</strong></td></tr>"
},
{
"v":0.0117
},
{
"v":0.0102
},
{
"v":0.0132
},
{
"v":0.011699999999999999
},
{
"v":0.0107
},
{
"v":0.0127
},
{
"v":0.01465
},
{
"v":0.013
},
{
"v":0.0163
},
{
"v":0.014599999999999998
},
{
"v":0.0135
},
{
"v":0.0157
}
]
},
{
"c":[
{
"v":new Date("2017-05-25T22:00:00.000Z")
},
{
"v":"<table class=\"tooltipChart\"><tr><td colspan=\"3\"><strong>Performance - 26 mai 2017</strong></td></tr><tr><td> </td><td><div style=\"width:100%; text-align:center;\">IC 80%</div></td><td><div style=\"width:100%; text-align:center;\">IC 95%</div></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #4eced7\"></i> Sans</td><td style=\"padding: 0px 20px;\"><strong>1,59% - 1,77%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,54% - 1,82%</strong></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #f9cb9c\"></i> Avec</td><td style=\"padding: 0px 20px;\"><strong>1,16% - 1,32%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,12% - 1,37%</strong></td></tr>"
},
{
"v":0.01245
},
{
"v":0.0112
},
{
"v":0.0137
},
{
"v":0.0124
},
{
"v":0.0116
},
{
"v":0.0132
},
{
"v":0.016800000000000002
},
{
"v":0.0154
},
{
"v":0.0182
},
{
"v":0.016800000000000002
},
{
"v":0.0159
},
{
"v":0.0177
}
]
},
{
"c":[
{
"v":new Date("2017-05-26T22:00:00.000Z")
},
{
"v":"<table class=\"tooltipChart\"><tr><td colspan=\"3\"><strong>Performance - 27 mai 2017</strong></td></tr><tr><td> </td><td><div style=\"width:100%; text-align:center;\">IC 80%</div></td><td><div style=\"width:100%; text-align:center;\">IC 95%</div></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #4eced7\"></i> Sans</td><td style=\"padding: 0px 20px;\"><strong>1,59% - 1,75%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,55% - 1,79%</strong></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #f9cb9c\"></i> Avec</td><td style=\"padding: 0px 20px;\"><strong>1,25% - 1,39%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,21% - 1,43%</strong></td></tr>"
},
{
"v":0.0132
},
{
"v":0.0121
},
{
"v":0.0143
},
{
"v":0.0132
},
{
"v":0.0125
},
{
"v":0.0139
},
{
"v":0.0167
},
{
"v":0.0155
},
{
"v":0.0179
},
{
"v":0.0167
},
{
"v":0.0159
},
{
"v":0.0175
}
]
},
{
"c":[
{
"v":new Date("2017-05-27T22:00:00.000Z")
},
{
"v":"<table class=\"tooltipChart\"><tr><td colspan=\"3\"><strong>Performance - 28 mai 2017</strong></td></tr><tr><td> </td><td><div style=\"width:100%; text-align:center;\">IC 80%</div></td><td><div style=\"width:100%; text-align:center;\">IC 95%</div></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #4eced7\"></i> Sans</td><td style=\"padding: 0px 20px;\"><strong>1,59% - 1,73%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,55% - 1,77%</strong></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #f9cb9c\"></i> Avec</td><td style=\"padding: 0px 20px;\"><strong>1,27% - 1,40%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,24% - 1,43%</strong></td></tr>"
},
{
"v":0.01335
},
{
"v":0.0124
},
{
"v":0.0143
},
{
"v":0.01335
},
{
"v":0.0127
},
{
"v":0.014
},
{
"v":0.0166
},
{
"v":0.0155
},
{
"v":0.0177
},
{
"v":0.0166
},
{
"v":0.0159
},
{
"v":0.0173
}
]
},
{
"c":[
{
"v":new Date("2017-05-28T22:00:00.000Z")
},
{
"v":"<table class=\"tooltipChart\"><tr><td colspan=\"3\"><strong>Performance - 29 mai 2017</strong></td></tr><tr><td> </td><td><div style=\"width:100%; text-align:center;\">IC 80%</div></td><td><div style=\"width:100%; text-align:center;\">IC 95%</div></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #4eced7\"></i> Sans</td><td style=\"padding: 0px 20px;\"><strong>1,56% - 1,68%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,53% - 1,72%</strong></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #f9cb9c\"></i> Avec</td><td style=\"padding: 0px 20px;\"><strong>1,26% - 1,37%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,23% - 1,40%</strong></td></tr>"
},
{
"v":0.01315
},
{
"v":0.0123
},
{
"v":0.014
},
{
"v":0.01315
},
{
"v":0.0126
},
{
"v":0.0137
},
{
"v":0.01625
},
{
"v":0.0153
},
{
"v":0.0172
},
{
"v":0.0162
},
{
"v":0.0156
},
{
"v":0.0168
}
]
},
{
"c":[
{
"v":new Date("2017-05-29T22:00:00.000Z")
},
{
"v":"<table class=\"tooltipChart\"><tr><td colspan=\"3\"><strong>Performance - 30 mai 2017</strong></td></tr><tr><td> </td><td><div style=\"width:100%; text-align:center;\">IC 80%</div></td><td><div style=\"width:100%; text-align:center;\">IC 95%</div></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #4eced7\"></i> Sans</td><td style=\"padding: 0px 20px;\"><strong>1,56% - 1,68%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,52% - 1,71%</strong></td></tr><tr><td><i class=\"fa fa-circle\" style=\"color: #f9cb9c\"></i> Avec</td><td style=\"padding: 0px 20px;\"><strong>1,25% - 1,36%</strong></td><td style=\"padding: 0px 20px;\"><strong>1,22% - 1,39%</strong></td></tr>"
},
{
"v":0.013049999999999999
},
{
"v":0.0122
},
{
"v":0.0139
},
{
"v":0.013049999999999999
},
{
"v":0.0125
},
{
"v":0.0136
},
{
"v":0.01615
},
{
"v":0.0152
},
{
"v":0.0171
},
{
"v":0.0162
},
{
"v":0.0156
},
{
"v":0.0168
}
]
}
]
}
};
});
The intervals are built around 4 values (series IC80A, IC95A, IC80B, IC95B) that I don't want to show (so lineWidth and pointSize are at 0).
Is this a normal behavior? Is there any possibility to make the tooltip apparent when the mouse hover an interval?