Is there a way to color a specific column of a google stacked bar chart when clicking a button?

Question

I'm trying to set up a site that compares new students from my university from different years. So far we've set up a pie chart that displays the currently selected year. Now we also want to display a stacked bar chart right next to it, that shows the same numbers overall, but we want it to only highlight the stacked column of the corresponding year from the pie chart. Right now they are all the same color and only highlight one row of the column when hovering over it.

Is it possible to highlight for example the column from year 2017 in different colors when selected, while every other year stays greyscale?

google.charts.load('current', { packages: ['corechart'] });
google.charts.setOnLoadCallback(drawColumn);
 
function drawColumn(){
    
   var data = google.visualization.arrayToDataTable([
       ['Jahr', 'allg. HZB', 'FH-Reife', 'Berufl. Qualifizierte', 'ausl. /Studienkolleg', { role: 'annotation' }],
       ['2013', 35, 37, 0, 2, ''],
       ['2014', 40, 38, 0, 2, ''],
       ['2015', 40, 45, 0, 5, ''],
       ['2016', 46, 36, 0, 3, ''],
       ['2017', 35, 35, 8, 3, ''],
       ['2018', 34, 26, 3, 2, ''],
       ['2019', 43, 31, 2, 6, '']
    ]);

    var options_fullStacked = {
        fontName: "next_artbold",
        fontSize: "30px",
        isStacked: true,
        height: 700,
        width: 900,
        legend: { position: 'none'},
        hAxis: {
            textStyle: {color: 'white'},
            minValue: 0,
        },
        vAxis: {
            textStyle: { color: 'white' },
            minValue: 0,
        },
        backgroundColor: "transparent",
        series: {
            0:{color:'#4a86ff'},
            1:{color:'#0d5e98'},
            2:{color:'#0b4c7b'},
            3:{color:'#18365f'}
        }
    };

    var chart_fullStacked = new google.visualization.ColumnChart(
        document.getElementById('column'));
    chart_fullStacked.draw(data, options_fullStacked);
}

user_5090771 · Answer

You can use a style column role to color an individual bar.

Similar to annotation, you add the color to the data in the data table, following the value to be given the color.

A value of null will allow the series color from the options to be displayed.

 var data = google.visualization.arrayToDataTable([
   ['Jahr', 'allg. HZB', {role: 'style'}, 'FH-Reife', {role: 'style'}, 'Berufl. Qualifizierte', {role: 'style'}, 'ausl. /Studienkolleg', {role: 'style'}, {role: 'annotation'}],
   ['2013', 35, '#eeeeee', 37, '#e0e0e0', 0, '#bdbdbd', 2, '#9e9e9e', ''],
   ['2014', 40, '#eeeeee', 38, '#e0e0e0', 0, '#bdbdbd', 2, '#9e9e9e', ''],
   ['2015', 40, '#eeeeee', 45, '#e0e0e0', 0, '#bdbdbd', 5, '#9e9e9e', ''],
   ['2016', 46, '#eeeeee', 36, '#e0e0e0', 0, '#bdbdbd', 3, '#9e9e9e', ''],
   ['2017', 35, null, 35, null, 8, null, 3, null, ''],
   ['2018', 34, '#eeeeee', 26, '#e0e0e0', 3, '#bdbdbd', 2, '#9e9e9e', ''],
   ['2019', 43, '#eeeeee', 31, '#e0e0e0', 2, '#bdbdbd', 6, '#9e9e9e', '']
  ]);

See following working snippet.

google.charts.load('current', {
  packages: ['corechart']
}).then(function (){
 var data = google.visualization.arrayToDataTable([
   ['Jahr', 'allg. HZB', {role: 'style'}, 'FH-Reife', {role: 'style'}, 'Berufl. Qualifizierte', {role: 'style'}, 'ausl. /Studienkolleg', {role: 'style'}, {role: 'annotation'}],
   ['2013', 35, '#eeeeee', 37, '#e0e0e0', 0, '#bdbdbd', 2, '#9e9e9e', ''],
   ['2014', 40, '#eeeeee', 38, '#e0e0e0', 0, '#bdbdbd', 2, '#9e9e9e', ''],
   ['2015', 40, '#eeeeee', 45, '#e0e0e0', 0, '#bdbdbd', 5, '#9e9e9e', ''],
   ['2016', 46, '#eeeeee', 36, '#e0e0e0', 0, '#bdbdbd', 3, '#9e9e9e', ''],
   ['2017', 35, null, 35, null, 8, null, 3, null, ''],
   ['2018', 34, '#eeeeee', 26, '#e0e0e0', 3, '#bdbdbd', 2, '#9e9e9e', ''],
   ['2019', 43, '#eeeeee', 31, '#e0e0e0', 2, '#bdbdbd', 6, '#9e9e9e', '']
  ]);

  var options_fullStacked = {
    fontName: "next_artbold",
    fontSize: "30px",
    isStacked: true,
    height: 700,
    width: 900,
    legend: { position: 'none'},
    hAxis: {
      textStyle: {color: 'white'},
      minValue: 0,
    },
    vAxis: {
      textStyle: { color: 'white' },
      minValue: 0,
    },
    backgroundColor: "transparent",
    series: {
      0:{color:'#4a86ff'},
      1:{color:'#0d5e98'},
      2:{color:'#0b4c7b'},
      3:{color:'#18365f'}
    }
  };

  var chart_fullStacked = new google.visualization.ColumnChart(
    document.getElementById('column')
  );
  chart_fullStacked.draw(data, options_fullStacked);
});

Is there a way to color a specific column of a google stacked bar chart when clicking a button?

1 Answers