CODEWITHSUNDEEP
chartsgoogle-visualization
bafforosso
bafforosso

Reputation: 128

Google Charts: style specific labels

Example Fiddle: https://jsfiddle.net/bafforosso/p6p7dy3j/4/

Using Google Bar Chart, I've been able to highlight specific bars by using {role: 'style'} column to have some bars blue and some grey.

I'm trying to find a way to style the labels on the left, e.g.: having bold labels for the highlighted (blue) bars but I can't seem to find a way to do this. Is there some way to achieve what I'm trying to do or is it simply not possible?

var data = google.visualization.arrayToDataTable([
        ['Film', 'Quantity', {role: 'style'}],
        ['Avengers (series)',     23, 'color: blue'],
        ['Deadpool',      17, 'color: darkgray'],
        ['Captain America (series)',  14, 'color: blue'],
        ['Thor (series)', 14, 'color: blue'],
        ['Ant Man',    14, 'color: blue'],
        ['Suicide Squad', 12, 'color: darkgray'],
        ['Guardians of the Galaxy', 12, 'color: blue'],
        ['Fantastic Four (2015)', 11, 'color: darkgray'],
        ['Batman Vs Superman', 10, 'color: darkgray'],
        ['Iron Man (series)', 7, 'color: blue'],
        ['Batman: Dark Knight (series)', 6, 'color: darkgray'],
        ['X-Men (series)', 5, 'color: darkgray'],
        ['Man of Steel', 2, 'color: darkgray'],
        ['Amazing Spiderman (series)', 1, 'color: blue'],
        ['The Wolverine ', 1, 'color: darkgray']
    ]);

    var options = {
        hAxis: {
            textPosition: 'none',
            textStyle: {color: '#ffffff'}
        },
        vAxis: {
            title: '',
            titleTextStyle: {color: '#ffffff'}
        },
        legend: { position: 'none' },
        bars: 'horizontal',
        chartArea: {
            left: '40%',
            height: '100%'
        }       
    };
    var chart1 = new google.visualization.BarChart(document.getElementById('chart1'));
    chart1.draw(data, options);

Thanks in advance for any help, Fred

Upvotes: 3

Views: 2105

Answers (1)

WhiteHat
WhiteHat

Reputation: 61232

There isn't a standard, 'google' way to style specific labels.
But you can use the chart's 'ready' event to modify the labels, once the chart has been drawn.
See following example... 

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Film', 'Quantity', {
      role: 'style'
    }],
    ['Avengers (series)', 23, 'color: blue'],
    ['Deadpool', 17, 'color: darkgray'],
    ['Captain America (series)', 14, 'color: blue'],
    ['Thor (series)', 14, 'color: blue'],
    ['Ant Man', 14, 'color: blue'],
    ['Suicide Squad', 12, 'color: darkgray'],
    ['Guardians of the Galaxy', 12, 'color: blue'],
    ['Fantastic Four (2015)', 11, 'color: darkgray'],
    ['Batman Vs Superman', 10, 'color: darkgray'],
    ['Iron Man (series)', 7, 'color: blue'],
    ['Batman: Dark Knight (series)', 6, 'color: darkgray'],
    ['X-Men (series)', 5, 'color: darkgray'],
    ['Man of Steel', 2, 'color: darkgray'],
    ['Amazing Spiderman (series)', 1, 'color: blue'],
    ['The Wolverine ', 1, 'color: darkgray']
  ]);

  var options = {
    hAxis: {
      textPosition: 'none'
    },
    height: 600,
    legend: {
      position: 'none'
    },
    width: 800,
    chartArea: {
      left: '40%',
      height: '100%'
    }
  };

  var chartContainer = document.getElementById('chart1');
  var chart1 = new google.visualization.BarChart(chartContainer);

  // use the 'ready' event to modify the chart once it has been drawn
  google.visualization.events.addListener(chart1, 'ready', function () {
    var labels = chartContainer.getElementsByTagName('text');
    for (var i = 0; i < labels.length; i++) {
      // determine if label should be bold
      if (data.getValue(i, 2).indexOf('blue') > -1) {
        labels[i].setAttribute('font-weight', 'Bold');
      }
    }
  });

  chart1.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart1"></div>

Upvotes: 3

Related Questions