Search code examples
javascriptchartsgoogle-visualization

Google Charts: Hiding vertical bars on points

I have the following code:

<!DOCTYPE html>
<html>
  <head>
    <title>My Line Chart</title>
    <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([  
                ['Year', 'Sales', {role: 'annotation'}, 'Expenses', {role: 'annotation'}],
                ['2014',  1000, '',      400, ''],
                ['2015',  1170, '',      460, ''],
                ['2016',  660, '',       1120, ''],
                ['2017',  1030, '$1030', 540, '$540']
            ]);

            var options = {
                title: 'Company Performance',
                curveType: 'function',
                legend: { position: 'bottom' },
                pointSize:0,
                annotations: {
                alwaysOutside: false,
                textStyle: {
                    fontSize: 12,
                    color: '#000',
                    auraColor: 'none'
                }
                }
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

            chart.draw(data, options);
}

    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Which displays the following chart

enter image description here

Do you see those vertical gray lines on points? How can I hide them?

Solution

  • for the missing annotation values, use null instead of a blank string ''

    ['2014', 1000, null, 400, null],

    we can also control the color of the vertical line pointing to the annotation,
    otherwise known as the stem...

                  stem: {
                color: 'transparent'
              },

    add above option within the annotations option...

                    annotations: {
                  alwaysOutside: false,
                  stem: {
                    color: 'transparent'
                  },
                  textStyle: {
                    fontSize: 12,
                    color: '#000',
                    auraColor: 'none'
                  }
                }

    see following working snippet...

    google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(drawChart);

            function drawChart() {
            var data = google.visualization.arrayToDataTable([  
                ['Year', 'Sales', {role: 'annotation'}, 'Expenses', {role: 'annotation'}],
                ['2014',  1000, null,      400, null],
                ['2015',  1170, null,      460, null],
                ['2016',  660, null,       1120, null],
                ['2017',  1030, '$1030', 540, '$540']
            ]);

            var options = {
                title: 'Company Performance',
                curveType: 'function',
                legend: { position: 'bottom' },
                pointSize:0,
                annotations: {
                  alwaysOutside: false,
                  stem: {
                    color: 'transparent'
                  },
                  textStyle: {
                    fontSize: 12,
                    color: '#000',
                    auraColor: 'none'
                  }
                }
            };

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

            chart.draw(data, options);
}
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>