0
265
VistasHow to break the line in tooltip using google chart?
I'm trying to break a line in the code below, but I can't.
this is the complete code
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Range', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', {role: 'tooltip', p:{html:true}}],
['2010<br>September', 1, 2, 3, 4, 5, 6, 7, 8, 9, 50, 'start<br>end'],
]);
var view = new google.visualization.DataView(data);
//view.setColumns([ 1, 2, 3, 4, 5, 6, 7, 8, 9,10]);
var options = {
width: 900,
height: 500,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '100%' },
isStacked: 'percent',
tooltip: {isHtml:true},
series: {
0: { color: 'red' },
1: { color: 'green' },
2: { color: 'red' },
3: { color: 'green' },
4: { color: 'red' },
5: { color: 'green' },
6: { color: 'red' },
7: { color: 'green' },
8: { color: 'red' },
9: { color: '#03254c' }
}
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="barchart_values" style="width: 900px; height: 500px;"></div>
</body>
</html>
Note that I put a br to break the line, but it doesn't work
'2010<br>September'
If I take the Range at the beginning of the array it will give an error. This makes it not have the tooltip with the html enabled.
[EDIT] I tested putting 
 and it didn't work
How do I break the line?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Use white-space: pre-wrap; in the css and in the code use \n
google.charts.load("current", {
packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
[
['Range', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', {
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
}],
[
'2010\nSeptember',
1, 2, 3, 4, 5, 6, 7, 8, 9, 50,
'start\nend'
],
]
);
var view = new google.visualization.DataView(data);
var options = {
width: 900,
height: 500,
legend: {
position: 'top',
maxLines: 3
},
bar: {
groupWidth: '100%'
},
isStacked: 'percent',
tooltip: {
isHtml: true
},
series: {
0: {
color: 'red'
},
1: {
color: 'green'
},
2: {
color: 'red'
},
3: {
color: 'green'
},
4: {
color: 'red'
},
5: {
color: 'green'
},
6: {
color: 'red'
},
7: {
color: 'green'
},
8: {
color: 'red'
},
9: {
color: '#03254c'
}
}
};
var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
chart.draw(view, options);
}.google-visualization-tooltip {
border: solid 1px #bdbdbd;
border-radius: 2px;
background-color: white;
position: absolute;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
font-size: 11px;
-moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.6);
font-family: arial;
white-space: pre-wrap;
}
.google-visualization-tooltip div {
padding:5px;
}<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="barchart_values" style="width: 900px; height: 500px;"></div>
</body>
</html>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta