CODEWITHSUNDEEP
chartsgoogle-visualization
johnode
johnode

Reputation: 740

Google Line Charts. Remove extra gridlines or change their color

I've created google line chart with the following settings:

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
    var options = {
        backgroundColor:{fill:'transparent'},
        legend:'none',
        series:{0:{color:'#aa8e57'}},
        lineWidth:4,
        pointSize:7,
        chartArea:{width: '86%'},    
        hAxis:{
            textStyle:{color:'#ffffff',fontSize:12},
            gridlines:{color:'#2a261d'},
            baselineColor:'#b19c72' 
        },
        vAxis:{
            textStyle:{color:'#ffffff',fontSize:12},
            gridlines:{color:'#2a261d'},
            baselineColor:'#b19c72'
        },
    };

    var dataMembers = new google.visualization.DataTable();
    dataMembers.addColumn('string', 'Date');
    dataMembers.addColumn('number', 'Users');
    dataMembers.addRows([
        ['13.11.2018',5], ['14.11.2018',7], ['15.11.2018',10]
    ]);    
    var membersChart = new google.visualization.LineChart(document.getElementById('membersChart'));
    membersChart.draw(dataMembers, options);
}

I read all docs and cant find out how to customize those white extra lines: enter image description here

I've done a lot of experiments, but i can't find out how they appears and how to remove them from the chart. Or at least, change their color to match rest of gridlines.

Upvotes: 1

Views: 2446

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

those are --> minorGridlines

for the same color... 

minorGridlines:{color:'#2a261d'},

to remove... 

minorGridlines:{count:0},

see following working snippet... 

google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCharts);
function drawCharts() {
    var options = {
        backgroundColor:{fill:'transparent'},
        legend:'none',
        series:{0:{color:'#aa8e57'}},
        lineWidth:4,
        pointSize:7,
        chartArea:{width: '86%'},    
        hAxis:{
            textStyle:{color:'#ffffff',fontSize:12},
            gridlines:{color:'#2a261d'},
            minorGridlines:{color:'#2a261d'},
            baselineColor:'#b19c72' 
        },
        vAxis:{
            textStyle:{color:'#ffffff',fontSize:12},
            gridlines:{color:'#2a261d'},
            minorGridlines:{color:'#2a261d'},
            baselineColor:'#b19c72'
        },
    };

    var dataMembers = new google.visualization.DataTable();
    dataMembers.addColumn('string', 'Date');
    dataMembers.addColumn('number', 'Users');
    dataMembers.addRows([
        ['13.11.2018',5], ['14.11.2018',7], ['15.11.2018',10]
    ]);    
    var membersChart = new google.visualization.LineChart(document.getElementById('membersChart'));
    membersChart.draw(dataMembers, options);
}
body {
  background-color: #000000;
}

#membersChart {
  height: 600px;
  width: 800px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="membersChart"></div>

Upvotes: 6

Related Questions