5

I got this chart in line chart of google api.

enter image description here

Here i'm trying to display the point value in above the point. so i'm using annotation. Here how to remove annotation tick mark in between the points(23 & 2008, 145 & 2009...) in google api chart. 

<script type="text/javascript">
        google.load("visualization", "1", {packages: ["corechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Year');                
            data.addColumn({type: 'number', role: 'annotation'}); 
            data.addColumn('number', 'Sales');

            data.addRows([
                ['2008', 23, 54],
                ['2009', 145, 55],
                ['2010', 245, 56],
                ['2011', 350, 57]
            ]);               
            var options = {
                width: 400,
                height: 200,
                pointSize: 4,
                legend: {position: 'none'},
                chartArea: {
                    left: 0,
                    top: 60,                        
                    width: 400,
                    height: 50},
                vAxis: {
                    baselineColor: '#fff',
                    gridlines: {color: 'transparent'},                        
                        maxValue:'58',
                        minValue:'52'                                  
                },                    
                tooltip: {trigger: 'none'},
                annotation: {
                    1: {
                        style: 'default'

                    }                                             
                }
            };

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

        }
    </script>
Arunprasath
  • 561
  • 2
  • 9
  • 25

2 Answers2

29

You can remove the annotation tick marks or 'stems' by setting the stemColor parameter to none:

annotations: {
   stemColor : 'none'
}
badhaircut
  • 355
  • 4
  • 8
0

It seems it's not possible to do that using API.

Those 4 ticks are presented as SVG elements:

<g>
    <rect x="50.375" y="105" width="1" height="5" stroke="none" stroke-width="0" fill="#999999"></rect>
    <rect x="150.125" y="105" width="1" height="5" stroke="none" stroke-width="0" fill="#999999"></rect>
    <rect x="249.875" y="105" width="1" height="5" stroke="none" stroke-width="0" fill="#999999"></rect>
    <rect x="349.625" y="105" width="1" height="5" stroke="none" stroke-width="0" fill="#999999"></rect>
</g>

and there is nothing special to hook on to change it. Using for example CSS rule display: none

You can do something like this:

var rectTags = document.getElementsByTagName("rect");

function drawChart() {
   ...

    chart.draw(data, options);

    for (var i = 0; i < rectTags.length; i++) {
        if (rectTags[i].hasAttribute("width")) {
            var width = rectTags[i].getAttribute("width");
            if (parseInt(width) == 1) {
                rectTags[i].setAttribute("width", 0);
            }
        }
    }
    ...

chart without ticks

But you can use this solution only in case you have no other rect elements with width 1. So, you can do additional check if rectTags is the same as number of data raws.

See example at jsBin

This example uses SVG and it won't work with IE7/IE8. See Can't display SVG charts in Internet Explorer 8

Community
  • 1
  • 1
Anto Jurković
  • 11,188
  • 2
  • 29
  • 42
  • @Hariprasath I added example at jsBin. `for` loop should be put immediately after `chart.draw(data, options);` – Anto Jurković Nov 28 '13 at 09:44
  • but for me the rectTags length is 0 for the same code. but im using pie chart and bar chart in the same page – Hariprasath Nov 28 '13 at 09:51
  • Your code is different and most probably also resulting svg markup. Could you post your code somewhere to see it. – Anto Jurković Nov 28 '13 at 09:57
  • @Hariprasath: I don't know. Anyway this solution is a hack and I wouldn't use it if I was not sure that I would spoil something. Because of that I wrote _But you can use this solution only in case you have no other rect elements with width 1_. If I have "limited" example, I will use it but not in some complex chart where I could hide other elements. – Anto Jurković Nov 28 '13 at 10:06