CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
shamveel_ahammed
shamveel_ahammed

Reputation: 81

How to rename y axes in Google Charts API?

I am trying to rename the labels on the axes to levels like low|medium| high instead of percentages in my bar chart. Could anyone suggest me a way of accomplishing it?

<script type="text/javascript">
    google.charts.load('current', {'packages':['bar']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Programming Languages', 'Expertise Level %'],
            ['Java', 100],
            ['C', 80],
            ['Python', 100],
            ['Web UX', 100],
            ['Matlab', 70]

        ]);

        var options = {
            bars: 'vertical' // Required for Material Bar Charts.
        };

      var chart = new google.charts.Bar(document.getElementById('barchart_material'));

Upvotes: 2

Views: 129

Answers (1)

WhiteHat
WhiteHat

Reputation: 61285

unfortunately, no option available for Material charts...

many options are not supported, see --> Tracking Issue for Material Chart Feature Parity

however, using a Classic chart, the vAxis.ticks option can be used to customize the axis labels...

use the formatted value of each tick to display --> Low, Medium, High

    vAxis: {
      ticks: [
        {v: 33.33, f: 'Low'},
        {v: 66.67, f: 'Medium'},
        {v: 100, f: 'High'}        
      ]
    }

see following working snippet,

which also uses option --> theme: 'material'

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Programming Languages', 'Expertise Level %'],
    ['Java', 100],
    ['C', 80],
    ['Python', 100],
    ['Web UX', 100],
    ['Matlab', 70]
  ]);

  var options = {
    theme: 'material',
    vAxis: {
      ticks: [
        {v: 33.33, f: 'Low'},
        {v: 66.67, f: 'Medium'},
        {v: 100, f: 'High'}        
      ]
    }
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('barchart'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart"></div>

note:

Material --> google.charts.Bar

Classic --> google.visualization.ColumnChart

Upvotes: 1

Related Questions