Chartjs-Can I make a horizontal bar chart with two category axes?

by

0👍

✅

Yes. You can. I modified your code to obtain the output shown below.

enter image description here

Here is the complete code with demo.

You have to add a configuration call back in the scales to update the parameters of x axis.

This is the code.

*Note : Please also focus on min, max and step size.

//Labels for your x-axis
var xLabels = {
  20: 'No Complexity',
  40: 'Below Average',
  60: 'Average',
  80: 'Above Average',
  100: 'Highly Focused',
  120: 'Extraordinarily Focused'
}

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  // The type of chart you want to create
  type: 'horizontalBar',

  // The data for your dataset
  data: {
    labels: ["Individual Thinking", "Individual Feeling", "Individual Doing",
      "Partner Thinking", "Partner Feeling", "Partner Doing",
      "Team Thinking", "Team Feeling", "Team Doing",
      "Cultural Thinking", "Cultural Feeling", "Cultural Doing"
    ],
    datasets: [{
      label: 'Dataset',
      backgroundColor: 'rgb(255, 99, 132)',
      borderColor: 'rgb(255, 99, 132)',
      data: [27, 25, 50, 45, 110, 62, 30, 100, 56, 28, 87, 30, 71, 23]
    }]
  },

  // Configuration options go here
  options: {
    scales: {
      xAxes: [{
        ticks: {
          callback: function(value, index, values) {
            return xLabels[value];
          },
          beginAtZero: true,
          min: 20, //The minimum value in the data range
          max: 120, //The maximum value in the data range
          stepSize: 20, //The gap between each x-axis index
        }
      }]
    }
  }
});
<canvas id="myChart"></canvas>

0👍

I dont know reason but use ticks work

var GX=["","No Complexity","Below Average","Average","Above Average","Highly Focused","","","","" ,"Extraordinarily Focused"];
var GY=["Individual Thinking", "Individual Feeling", "Individual Doing",
    "Partner Thinking", "Partner Feeling", "Partner Doing",
    "Team Thinking", "Team Feeling", "Team Doing",
    "Cultural Thinking", "Cultural Feeling", "Cultural Doing"];
    
var DataWant=["No Complexity","No Complexity","No Complexity","No Complexity",
        "No Complexity","No Complexity","No Complexity","No Complexity",
        "No Complexity","No Complexity","No Complexity","No Complexity"]; 
var Map={};
for(var i =0;i<GX.length;i++){
  Map[GX[i]]=i;
}
var RealInput=[];
for(var i =0;i<DataWant.length;i++){
  RealInput.push(Map[DataWant[i]]);
}

    var DrawData = {
    labels:GY,
        datasets: [
            {
                label: "0.0",
                data: RealInput,
                backgroundColor: ["#669911", "#119966","#669911", "#119966","#669911", "#119966","#669911", "#119966","#669911", "#119966","#669911", "#119966","#669911", "#119966","#669911", "#119966" ],
            }]
    };

var ctx = document.getElementById('ChartDraw').getContext('2d');
var DrawChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: DrawData,
    options: {
    
        scales: {
          
             xAxes: [{
                 scaleLabel: {
                display: true,
                labelString: 'Complexity'
            },
            ticks: {
              callback: function(value, index, values) {
                        return GX[index];
              },min: 0,max:10,
            }
            }],
            
            
            
            
            
              yAxes: [{type: 'category',
                display: true,
                stacked: true,
                ticks: {
              callback: function(value, index, values) {
                        return GY[index];
              },min: 0,max:12
            }
                
            }]
            
            
            
            
            
        }

    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" integrity="sha256-Uv9BNBucvCPipKQ2NS9wYpJmi8DTOEfTA/nH2aoJALw=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" integrity="sha256-aa0xaJgmK/X74WM224KMQeNQC2xYKwlAt08oZqjeF0E=" crossorigin="anonymous" />


<canvas id="ChartDraw"></canvas>

Leave a comment