multi x-axis

demonstrates how to create multi x-axis

by AdvanTiSS

HTML

<body>
<canvas id="c" width="400" height="300"></canvas>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</body>

JavaScript

var ctx = $("#c");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [0,1,2,3,4,5,6,7],
    datasets: [{
      label: 'Group 1',
      xAxisID:'xAxis1',
      data: [ ,12, 19, 3, , , ]
    },
{
      label: 'Group 2',
      xAxisID:'xAxis2',
      data: [ , , , ,5, 7, 11,]
    }
   ]
  },
  options:{
    scales:{
      xAxes:[
        {                 
        beginAtZero:false,
          id:'xAxis1',
          type:'time',
          distribution: 'series',
           bounds: 'data',
          /*  display: false, */
          ticks:{
            min: 0,
            /* display: false, */
            /* source: 'data',
            callback:function(value, index, values){
               var userId = label.split(";")[0];
              var groupId = label.split(";")[1]; 
              
              return index;
            } */
          },
          afterBuildTicks: function(pckBarChart) {    
            /* console.log(pckBarChart.ticks) */
           //pckBarChart.ticks = [0,1,2,3,4,5,6]
          }
        },
        {                 
        beginAtZero:false,
          id:'xAxis2',
          type:'time',
          distribution: 'series',
           bounds: 'data',
          /*  display: false, */
          ticks:{
            min: 0,
            /* display: false, */
            /* source: 'data',
            callback:function(value, index, values){
               var userId = label.split(";")[0];
              var groupId = label.split(";")[1]; 
              
              return index;
            } */
          },
          afterBuildTicks: function(pckBarChart) {    
            /* console.log(pckBarChart.ticks) */
           //pckBarChart.ticks = [0,1,2,3,4,5,6]
          }
        }
        ],
      yAxes:[{
        ticks:{
          beginAtZero:false
        }
      }]
    }
  }
});