In a Google Bar Chart, can I style one axis label differently?

Question

Consider the bar chart in this JSFiddle.

Is there a way to change the style of only one of the vertical axis labels? For example, can I change "Houston, TX" to be bold without affecting the other city names?

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

function drawMultSeries() {
      var data = google.visualization.arrayToDataTable([
        ['City', '2010 Population', '2000 Population'],
        ['New York City, NY', 8175000, 8008000],
        ['Los Angeles, CA', 3792000, 3694000],
        ['Chicago, IL', 2695000, 2896000],
        ['Houston, TX', 2099000, 1953000],
        ['Philadelphia, PA', 1526000, 1517000]
      ]);

      var options = {
        title: 'Population of Largest U.S. Cities',
        chartArea: {width: '50%'},
        hAxis: {
          title: 'Total Population',
          minValue: 0
        },
        vAxis: {
          title: 'City'
        }
      };

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

score 0 · Answer 1 · answered Feb 04 '17 at 00:04

one way would be to wait on the chart's 'ready' event,

then change the <text> element attribute for 'font-weight'

see following working snippet...

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

function drawMultSeries() {
  var data = google.visualization.arrayToDataTable([
    ['City', '2010 Population', '2000 Population'],
    ['New York City, NY', 8175000, 8008000],
    ['Los Angeles, CA', 3792000, 3694000],
    ['Chicago, IL', 2695000, 2896000],
    ['Houston, TX', 2099000, 1953000],
    ['Philadelphia, PA', 1526000, 1517000]
  ]);

  var options = {
    title: 'Population of Largest U.S. Cities',
    chartArea: {width: '50%'},
    hAxis: {
      title: 'Total Population',
      minValue: 0
    },
    vAxis: {
      title: 'City'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.BarChart(container);
  google.visualization.events.addListener(chart, 'ready', function () {
    Array.prototype.forEach.call(container.getElementsByTagName('text'), function (label) {
      if (label.innerHTML === 'Houston, TX') {
        label.setAttribute('font-weight', 'bold');
      }
    });
  });
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

In a Google Bar Chart, can I style one axis label differently?

1 Answers1