Change The Bar Color In Gantt Chat Based On Value

I would like to change the color of the bar in the gantt chart based in the value I am passing. When Percent done equals of higher than 100 the bar should be red. Is it possible? h

Solution 1:

there aren't any standard options to change bar color by value

but you can change the chart elements manually

recommend using a MutationObserver as the chart will try to change the bar color back to the default, on any interactivity such as hover or select

the order of the bars should follow the rows in the data

see following working snippet...

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

functiondrawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent done');
  data.addColumn('string', 'Dependencies');

  data.addRows([

  ['C10', 'C10', 'Xa', newDate(2015, 3, 20), newDate(2016, 8, 30), null, 109, null],
  ['C15', 'C15', 'Xa', newDate(2016, 5, 2), newDate(2016, 9, 31), null, 111, null],
  ['C20', 'C20', 'Xa', newDate(2016, 8, 15), newDate(2016, 10, 25), null, 88, null],
  ['C21', 'C21', 'Xa', newDate(2016, 8, 1), newDate(2016, 10, 25), null, 90, null]
  ]);

  var options = {
    width: '100%',
    hAxis: {
      textStyle: {
        fontName: ['Roboto Condensed']
      }
    },
    gantt: {
      labelStyle: {
        fontSize: 12,
        color: '#757575'
      }
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Gantt(container);

  // monitor activity, change bar colorvar observer = newMutationObserver(function (mutations) {
    Array.prototype.forEach.call(container.getElementsByTagName('path'), function(bar, index) {
      if (data.getValue(index, 6) > 100) {
        bar.setAttribute('fill', '#a52714');
      }
    });
  });
  observer.observe(container, {
    childList: true,
    subtree: true
  });

  chart.draw(data, options);
}

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

EDIT

it appears when there is partial completion, the "bar" is split with two colors the lighter shade being represented by a 'rect' element you could change this to a lighter shade of red use the Y coordinate of the 'path' to find the correct 'rect'

also, need to sort the data in the same order as displayed in the chart...

see following working snippet...

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

functiondrawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Task ID');
  data.addColumn('string', 'Task Name');
  data.addColumn('string', 'Resource');
  data.addColumn('date', 'Start Date');
  data.addColumn('date', 'End Date');
  data.addColumn('number', 'Duration');
  data.addColumn('number', 'Percent done');
  data.addColumn('string', 'Dependencies');

  data.addRows([
    ['C10', 'C10', 'Xa', newDate(2016, 2, 23), newDate(2016, 10, 30), null, 94.84, null],
    ['C15', 'C15', 'Xa', newDate(2016, 4, 1), newDate(2016, 11, 29), null, 82.64, null],
    ['C20', 'C20', 'Xa', newDate(2016, 7, 1), newDate(2016, 10, 25), null, 93.1, null],
    ['C25', 'C25', 'Xa', newDate(2016, 3, 11), newDate(2016, 10, 25), null, 96.49, null],
    ['C30', 'C30', 'Xa', newDate(2016, 9, 3), newDate(2017, 1, 28), null, 30.41, null],
    ['C35', 'C35', 'Xa', newDate(2016, 3, 8), newDate(2016, 5, 24), null, 113.78, null]
  ]);
  data.sort([{column: 3}]);

  var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    xWidth = w.innerWidth || e.clientWidth || g.clientWidth,
    yHeight = w.innerHeight|| e.clientHeight|| g.clientHeight;

  var options = {
    height: 600,
    width: "100%",
    hAxis: {
      textStyle: {
        fontName: ["Roboto Condensed"]
      }
    },
    gantt: {
      labelStyle: {
      fontName: ["Roboto Condensed"],
      fontSize: 12,
      color: '#757575'
      }
    }
  };
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.Gantt(container);

  // monitor activity, change bar colorvar observer = newMutationObserver(function (mutations) {
    Array.prototype.forEach.call(container.getElementsByTagName('path'), function(bar, index) {
      var barY;
      if (data.getValue(index, 6) > 100) {
        bar.setAttribute('fill', '#b71c1c');
        barY = bar.getAttribute('d').split(' ')[2];
        Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(bar) {
          if (bar.getAttribute('y') === barY) {
            bar.setAttribute('fill', '#f44336');
          }
        });
      }
    });
  });
  observer.observe(container, {
    childList: true,
    subtree: true
  });

  chart.draw(data, options);
}

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