Styling Google Gantt Charts with CSS

#javascript#tutorial

Google Charts is a powerful tool you can use to render interactive Gantt charts for browsers and mobile devices.

A Gantt chart is typically used to illustrate the breakdown of a time and task - which can be customized to show the start, end, and duration of tasks within a project, as well as any dependencies a task may have.

Google uses javascript to render the Gantt chart in the browser using SVG and like all Google charts, the Gantt displays tooltips when the user hovers over the data.

The script can be configured to style some of the chart elements but not all of them.

If you are looking for a way to customize your Gantt chart even further you can use some simple CSS to do that.

Initializing the Chart with Javascript

Call the chart script and create a div for your chart to load in.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width:100%;"></div>

Add your JS to initialize the chart, you can apply some chart styling here too.

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

function daysToMilliseconds(days) {
  return days * 24 * 60 * 60 * 1000;
}

function drawChart() {

  var otherData = new google.visualization.DataTable();
  otherData.addColumn('string', 'Task ID');
  otherData.addColumn('string', 'Task Name');
  otherData.addColumn('string', 'Resource');
  otherData.addColumn('date', 'Start');
  otherData.addColumn('date', 'End');
  otherData.addColumn('number', 'Duration');
  otherData.addColumn('number', 'Percent Complete');
  otherData.addColumn('string', 'Dependencies');

  otherData.addRows([
    ['app', 'Mobile App', 'null', null, null, daysToMilliseconds(20), 55, null],
    ['design', 'Design', 'designer', null, null, daysToMilliseconds(6), 100, null],
    ['dev', 'Development', 'developer', null, null, daysToMilliseconds(10), 50, 'design'],
    ['test', 'Testing', 'tester', null, null, daysToMilliseconds(2), 0, 'dev'],
    ['deploy', 'Deployment', 'developer', null, null, daysToMilliseconds(2), 0, 'test']
  ]);

  var options = {
    height: 400,
    gantt: {
      criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
      arrow: {
        angle: 50,
        width: 1,
        color: 'white',
        radius: 2
      },
      labelStyle: {
        fontName: 'Open Sans',
        fontSize: 14,
        color: 'white'
      },
      barCornerRadius: 2,
      backgroundColor: {
        fill: 'transparent',
      },
      innerGridHorizLine: {
        stroke: '#ddd',
        strokeWidth: 0,
      },
      innerGridTrack: {
        fill: 'transparent'
      },
      innerGridDarkTrack: {
        fill: 'transparent'
      },
      percentEnabled:	true, 
      shadowEnabled: true,	
      shadowColor: 'white',
      shadowOffset: 2,
    }
  };

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

  chart.draw(otherData, options);
}

Styling with CSS (Scss)

Now your chart is ready you can add the CSS to style some of the elements - here I am using SCSS.

By targeting the g elements of the SVG we can style each part of the chart.

The comments below indicate which parts of the chart the CSS with target.

#chart_div svg {

  // Background Color
  g:nth-child(2) { 
    rect {fill: transparent;} 
  }

  // Chart Settings
  g:nth-child(3) {
    rect:nth-child(odd) {fill: rgba(0,0,0,.1);} // Rows Odd
    rect:nth-child(even) {fill: transparent;} // Rows Even
    text { // Horizontal Labels
      fill: darkred;
      font-family: 'Open Sans' !important;
      font-weight: normal !important;
    } 
    line { // Row Lines
      stroke: transparent;
      stroke-width: 0;
    } 
  }

  // Arrows
  g:nth-child(4) {
    path {
      stroke-width: 1;
      stroke: black;
    }
  }

  // Shadow
  g:nth-child(6) {
    rect {
      fill: black;
    }
  }

  // Bars
  g:nth-child(7) {
    rect:nth-child(1) {fill: darkred;} // Target a specific Bar (First) 
    rect {fill: white;}
  }

  // Percent Complete
  g:nth-child(8) {
    path {fill: rgba(0,0,0,.2);}
  }

  // Side Labels
  g:nth-child(9) {
    text {fill: white;}
  }

  // Tooltips
  g:nth-child(10) {
    rect {
      stroke: white;
    }
    text {
      fill: rgba(0,0,0,.6);
      font-family: 'Open Sans' !important;
    }
    text:nth-child(2) { // Date
      fill: darkred;
    }
  }
}

Demos

Here are a couple of examples styled using CSS - happy chart styling!

See the Pen Google Gantt Chart (Dogerblue) by Matthew Elsom (@matthewelsom) on CodePen.

See the Pen Google Gantt Chart (Tomato) by Matthew Elsom (@matthewelsom) on CodePen.