Removing some x axis labels

63 views
Skip to first unread message

eduardo martinez

unread,
Apr 17, 2020, 9:51:58 PM4/17/20
to Google Visualization API

example.png

I'm currently making this graph with a ton of labels on the x access which make it look crowded, can someone please point me to the right direction where i can change it where the x axis only shows 1990, 1995, 2000, 2005, 2010, and 2015. Thank you very much

   function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Moore',   'Edmond', 'Norman'],
          ['1990',  40332,      52380,   80435],
          ['1991',  40904,      53884,   81718],
          ['1992',  41554,      55477,   83300],
          ['1993',  42427,      57334,   85004],
          ['1994',  43151,      59470,   86932],
          ['1995',  43679,      61281,   88387],
          ['1996',  44241,      62892,   89562],
          ['1997',  44859,      64115,   91921],
          ['1998',  45233,      65145,   93073],
          ['1999',  45431,      66757,   94193],
          ['2000',  41477,      68607,   96882],
          ['2001',  42439,      69357,   98530],
          ['2002',  43909,      70644,   99222],
          ['2003',  45071,      71707,   100437],
          ['2004',  46595,      73254,   100983],
          ['2005',  48179,      75456,   102297],
          ['2006',  49966,      77172,   105622],
          ['2007',  51279,      78066,   106168],
          ['2008',  52852,      79890,   107636],
          ['2009',  54026,      81653,   109447],
          ['2010',  55396,      81466,   111380],
          ['2011',  56706,      82943,   113872],
          ['2012',  57840,      84936,   115629],
          ['2013',  58358,      86988,   118136],
          ['2014',  59018,      88656,   117693],
          ['2015',  60170,      90168,   119745],
          ['2016',  61081,      91469,   121512],
          ['2017',  61588,      91830,   122965],
          ['2018',  62103,      93127,   123471],
        ]);

        var options = {
          title: 'Population of Moore Oklahoma',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

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

        chart.draw(data, options);
      }
// ]]></script>
<div id="curve_chart" style="width: 100%; height: 500px;"></div>

SJW

unread,
Apr 20, 2020, 8:21:56 PM4/20/20
to Google Visualization API
You can use the hAxis setting "showTextEvery"

e.g.
hAxis: {showTextEvery: 1, slantedTextAngle: 60, slantedText: 1}


hAxis.showTextEvery

How many horizontal axis labels to show, where 1 means show every label, 2 means show every other label, and so on. Default is to try to show as many labels as possible without overlapping.

Type: number
Default: automatic

O0mI RulxX

unread,
Apr 26, 2021, 8:00:28 AM4/26/21
to Google Visualization API
hAxis: {showTextEvery: 1, slantedTextAngle: 60, slantedText: 1}
 above configuration is valid for hAxis but how can we hide the other labels which is between these headings i am attaching the snapshot for your reference.
error.jpg
Reply all
Reply to author
Forward
0 new messages