Google Charts: How to add a caption to the color axis
Question
Adding a Caption to the Bubble Chart Color Axis
In a project I am going to use the Google Chart API for diplaying a bubble chart with three variables. I know how I can change the caption of the axis, but how can I add a caption to the color bar at the top of the chart?
An Example
I modified the example from the documentation in order to include axis labels. Please not that the original does not have the green caption "How can I add a caption to this bar".
This is the original source code from the Google documentation where I added the title property for the axis. I tried to add a title property to the colorAxis, but it did not have any effect.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'X', 'Y', 'Temperature'],
['', 80, 167, 120],
['', 79, 136, 130],
['', 78, 184, 50],
['', 72, 278, 230],
['', 81, 200, 210],
['', 72, 170, 100],
['', 68, 477, 80]
]);
var options = {
colorAxis: {colors: ['yellow', 'red']},
hAxis: { title: "X AXIS" },
vAxis: { title: "Y AXIS" }
};
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
My Question
How can I add a caption similar to the image above?
1 answers
solution1
0 2015-07-15 08:32:50
You can add a title for the chart that will be placed just above the colorAxis :
var options = {
title: 'How can I add a caption to this bar?',
colorAxis: {colors: ['yellow', 'red']},
hAxis: { title: "X AXIS" },
vAxis: { title: "Y AXIS" }
};
It's not exactly the caption of the colorAxis , but it can have the same effect.
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.