I want to style x-axis label of a bar chart from google chart website, but i can't understand how to style the background color of labels because of these labels are put in text tag so i can change the color of fonts but can't background color.
Google Chart links: developers.google.com .
I want to style like this:
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["JAN", 285, "color: #000"],
["FEB", 250, "color: #000"],
["MAR", 280, "color: #000"],
["APR", 91.22, "color: #000"],
["MAY", 123.98, "color: #000"],
["JUN", 82.34, "color: #000"],
["JUL", '', "color: #000"],
["AUG", '', "color: #000"],
["SEP", '', "color: #000"],
["OCT", '', "color: #000"],
["NOV", '', "color: #000"],
["DEC", '', "color: #000"],
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "",
width: 1280,
height: 400,
bar: {groupWidth: "95%"},
hAxis: {
textStyle: {
fontSize : 16,
},
backgroundColor: {
fill: 'pink'
},
},
legend: { position: "none" },
vAxis: { gridlines: { count: 0 } }
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
You can change the style in the js file as below:
var options = {
xAxis: {
color: 'transparent',
fontName: 'Russo One',
bar: { groupWidth: "50%" },
legend: { position: "none" },
backgroundColor: { fill:'transparent' }
}
}
Hope it helps you!
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.