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?
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.