multi x-axis

demonstrates how to create multi x-axis

by Kirubel Girma

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.0.0-beta2/Chart.min.js"></script>
</body>

JavaScript

var ctx = $("#c");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["January;2015", "Feburary;2015", "March;2015", "January;2016", "February;2016", "March;2016"],
    labels: [";A", "SWIM;00:00", "", "D", "E", "F"],
    datasets: [{
      label: '# of Votes',
      xAxisID: 'xAxis1',
      data: [12, 19, 3, 5, 2, 3]
    }],
    datasets: [{
      label: '# of Votes',
      xAxisID: 'xAxis2',
      data: [14, 20, 3, 5, 2, 3]
    }]
  },
  options: {
    scales: {
      xAxes: [{
          id: 'xAxis1',
          type: "category",
          ticks: {
            callback: function(label) {
              return label.split(';')[1];;
            }
          }
        },
        {
          id: 'xAxis2',
          position: 'top',
          type: "category",
          gridLines: {
            drawOnChartArea: false, // only want the grid lines for one axis to show up
          },
          ticks: {
            callback: function(label) {
              return label.split(';')[0];
            }
          }
        }
      ],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});