Google Charts is a powerful tool you can use to render interactive charts for browsers and mobile devices.
One of the charts available is a Gantt chart - 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.
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.
Call the chart script and create a div for your chart to load in.
Add your JS to initialize the chart, you can apply some chart styling here too.
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.
Here are a couple of examples styled using CSS - happy chart styling!
How to style Gantt charts with Google and CSS.
Using MatchHeight.js to dynamically set the height of selected page elements exactly.
A lot of gret styleguide methods are available, but I wanted to try something that was easy, fast and static!