CODEWITHSUNDEEP
csschartsgoogle-visualization
vy32
vy32

Reputation: 29655

change the font and weight of a specific label in Google Visualization Charts

I have a Google chart. For example (from the Google Documentation):

  <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

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

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

I want to change the font and weight of one of the legends, say Sales. I can't figure out how to do that. Is there an easy way?

Upvotes: 1

Views: 511

Answers (1)

WhiteHat
WhiteHat

Reputation: 61232

there are no options out of the box, to change a specific label.

for each type of label, there is a textStyle option.
but again, this will change all the labels of that type.
for instance, to change all the legend labels, use --> legend.textStyle 

legend: {
  textStyle: {
    bold: true,
    color: 'cyan',
    fontSize: 18
  }
}

however, we can manually make changes to the chart, once it has finished drawing,
during the 'ready' event.

see following working snippet, here, we find the labels used in the chart,
compare those with the column headings in the data table,
if found, we change the style, depending on the column index... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
  ]);

  var options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: {
      position: 'bottom',
      textStyle: {
        bold: true,
        color: 'cyan',
        fontSize: 18
      }
    }
  };

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

  // listen for ready event, must be assigned before calling draw
  google.visualization.events.addListener(chart, 'ready', function () {
    // get text elements from chart
    var labels = chart.getContainer().getElementsByTagName('text');

    // loop chart labels
    Array.prototype.forEach.call(labels, function(label) {
      // loop data table columns
      for (var i = 1; i < data.getNumberOfColumns(); i++) {
        // determine if label matches legend entry
        if (label.textContent === data.getColumnLabel(i)) {
          // determine column index
          switch (i) {
            // first series
            case 1:
              label.setAttribute('fill', 'magenta');
              label.setAttribute('font-size', '24');
              label.setAttribute('font-weight', 'normal');
              break;

            // second series
            case 2:
              label.setAttribute('fill', 'lime');
              label.setAttribute('font-size', '12');
              break;
          }
        }
      }
    });
  });

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

Upvotes: 1

Related Questions