Chartjs to use Multi level/hierarchical category axis in chartjs - Javascript Chart.js

Javascript examples for Chart.js:Axis

  1. HOME
  2. Javascript
  3. Chart.js
  4. Axis

Description

Chartjs to use Multi level/hierarchical category axis in chartjs

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript">
    window.onload=function(){// ww w .ja  v a 2s .  c  o m
var ctx = $("#c");
var myChart = new Chart(ctx, {
  type: 'line',
  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]
    },
    {
      label: '# of Potatoes',
      xAxisID:'xAxis2',
      data: [9, 17, 28, 26, 29, 9],
      borderColor: '#0674ec'
    }]
  },
  options:{
    scales:{
      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,
          },
          ticks:{
            callback:function(label){
              var month = label.split(";")[0];
              var year = label.split(";")[1];
              if(month === "February"){
                return year;
              }else{
                return "";
              }
            }
          }
        }],
      yAxes:[{
        ticks:{
          beginAtZero:true
        }
      }]
    }
  }
});
    }

      </script> 
   </head> 
   <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>
</html>

Related Tutorials