Google charts y-axis color
Asked Answered
P

3

7

I'm using google charts api (line chart) and I want to change y-axis color from black to grey.
(the same color as the grid lines)

enter image description here

my code:

google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        var baseLineColor = '#a3d06e';
        var lineColor = '#717171';

        function drawChart() {
            var dataTable = new google.visualization.DataTable();
            dataTable.addColumn('number', 'date'); 
            dataTable.addColumn('number', 'sale'); 
            dataTable.addRows([
            [1, 2],
            [2, 3],
            [3, 3],
            [4, 4],
            [5, 5]
        ]);

            var options = {
                enableInteractivity: false,
                tooltip: {trigger: 'none'},
                pointSize: 0,
                legend: 'none',
                chartArea:{width:'94%',height:'70%'},
                backgroundColor: '#6AB5D1',
                series: { 0: { color: lineColor, pointSize: 5, lineWidth: 4 }}, 
                hAxis: { textPosition: 'none', gridlines: {color:"#CCCCCC"} },
                vAxis: { textPosition: 'none', baseline: 3, baselineColor: baseLineColor, gridlines: {color:"#CCCCCC"}}

            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(dataTable, options); 

How can I do that?

Polymorphism answered 17/10, 2013 at 7:40 Comment(0)
G
21

Set the hAxis.baselineColor option:

hAxis: {
    textPosition: 'none',
    gridlines: {
        color: "#CCCCCC"
    },
    baselineColor: '#CCCCCC'
}
Gerundive answered 17/10, 2013 at 13:53 Comment(0)
F
3

you can change your x and y axis color in google api by setting the baselineColor and gridlineColor using these parameter.

vAxis:{
         baselineColor: '#ccc',
         gridlineColor: '#ccc',
       }
Fadden answered 4/6, 2014 at 12:35 Comment(0)
I
0

Just a note: Remember that the baseline is the line that intersects the axis you are working with. So if you want to style the y-axis, you need to change the baselineColor of the h-axis.

I totally miss it at first.

Incommunicative answered 5/7, 2021 at 10:56 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.