Chartjs 2: Multi level/hierarchical category axis in chartjs

Question

Is it possible to define a bar chart with a multi level/category axis?

For instance I'd like to display the Region/Province categories like in this Excel chart:

I found this example using multiple xAxes.

xAxes:[
    {
      id:'xAxis1',
      type:"category",
      ticks:{
        callback:function(label){
          var month = label.split(";")[0];
          var year = label.split(";")[1];
          return month;
        }
      }
    },
    {
      id:'xAxis2',
      type:"category",
      gridLines: {
        drawOnChartArea: false, // only want the grid lines for one axis to show up
      },
      ticks:{
        callback:function(label){
          var month = label.split(";")[0];
          var year = label.split(";")[1];
          if(month === "February"){
            return year;
          }else{
            return "";
          }
        }
      }
    }
  ]

The problem is it seems that the two axes are not really linked and the alignment of second axis is based on values instead of aligning in middle of lower level category. this case cause issues

Is there a clean way to achieve this in chart.js?

Update: I ended up creating a feature request on chartjs.

Answer 1

you can provide value separately for different axis via datesets and provide an object with different configuration option (borderColor, pointBackgroundColor, pointBorderColor) etc, i hope It'll help.

here is the link for the with an update (fiddle you shared) Updated Fiddle

data: {
labels: ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"],
datasets: [{
  label: '# of Votes',
  xAxisID:'xAxis1',
  data: [12, 19, 3, 5, 2, 3]
},

// here i added another data sets for xAxisID 2 and it works just fine
{
  label: '# of Potatoes',
  xAxisID:'xAxis2',
  data: [9, 17, 28, 26, 29, 9]
}]

}

I hope that solves your problem :)

Answer 2

Hope this helps,

I did a bit of research and couldn't find methods to implement your solution in chartjs. Chartjs has grouped bar charts but not subgrouped bar charts like in your case.

Example: http://jsfiddle.net/harshakj89/ax3zxtzw/

Here are some alternatives,

D3js (https://d3js.org/) can be used to create sub grouped bar charts.Data can be loaded from csv or json. D3 is highly configurable, but you may have to put some effort than chartsjs.

https://plnkr.co/edit/qGZ1YuyFZnVtp04bqZki?p=preview
https://stackoverflow.com/questions/37690018/d3-nested-grouped-bar-chart
https://stackoverflow.com/questions/15764698/loading-d3-js-data-from-a-simple-json-string

ZingChart is a commercial tool and can be used to implement bar charts with sub groupes.

https://www.zingchart.com/docs/chart-types/bar-charts/

But I prefer D3 over this library. because D3 comes under BSD License.

Answer 3

This should work as per your requirement http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/#8-grouped-bar-chart