I was wondering if there is an easy way to add multi-level/hierarchical/grouping of axis label in d3. For example, if I have a line chart with month name for x-axis spanning across multiple years, I would want to also have year as label below the month names so it looks something like this.

Oct   Nov   Dec   Jan   Feb   Mar   Apr
|_____________|   |___________________|
     2011                 2012

I understand that you can do anything in SVG to make it works, but I want to use d3 as much as possible so that it's much easier to update the chart dynamically.

Thanks, Jack

I was wondering if there is an easy way to add multi-level/hierarchical/grouping of axis label in d3. For example, if I have a line chart with month name for x-axis spanning across multiple years, I would want to also have year as label below the month names so it looks something like this.

Oct   Nov   Dec   Jan   Feb   Mar   Apr
|_____________|   |___________________|
     2011                 2012

I understand that you can do anything in SVG to make it works, but I want to use d3 as much as possible so that it's much easier to update the chart dynamically.

Thanks, Jack

• javascript
• graph
• charts
• svg
• d3.js

1 Answer 1

You can add and format several axes however you like. For instance - display one axis showing months, and another showing years. A basic example: http://jsfiddle.net/Ea4mT/1/

You might have to mess with it a little bit afterwards to get it in a more preferable format, but it seems like the core of what you are trying to accomplish.