title: Chartjs 2: Multi level/hierarchical category axis in chartjs
body: <p>Is it possible to define a bar chart with a multi level/category axis?</p>
  
  <p>For instance I'd like to display the Region/Province categories like in this Excel chart: 
  <a href="https://i.stack.imgur.com/CYp8Y.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CYp8Y.jpg" alt="enter image description here"></a></p>
  
  <p>I found <a href="https://jsfiddle.net/hamalainen/6c0L1yva/3/" rel="nofollow noreferrer">this</a> example using multiple xAxes.</p>
  
  <pre><code>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 "";
            }
          }
        }
      }
    ]
  </code></pre>
  
  <p>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</p>
  
  <p>Is there a clean way to achieve this in chart.js?</p>
  
  <p><strong>Update:</strong>
  I ended up creating a <a href="https://github.com/chartjs/Chart.js/issues/4946" rel="nofollow noreferrer">feature request</a> on chartjs. </p>