[Chartjs]-Chart.js sublabels

by

2👍

✅

Apparently ticks.align has no effect when ticks are rotated. You could use ticks.labelOffset instead. For further information, consult Common tick options to all cartesian axes from the Chart.js documentation.

Please take a look at your amended and runnable code below and see how it works.

new Chart('myChart', {
  type: "bar",
  data: {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [{
        label: 'Min',
        data: [7.16, 1, 2.8, 1, 16]
      },
      {
        label: 'Max',
        data: [85.86, 29.55, 181.78, 70.54, 89]
      },
      {
        label: 'Average',
        data: [29.03, 13.17, 39.13, 40.61, 51.50]
      }
    ]
  },
  options: {
    indexAxis: 'y',
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'bottom'
      }
    },
    scales: {
      y: {
        reverse: true
      },      
      customGroups: {        
        axis: 'y',
        labels: ['Group 1', '', 'Group 2', '', 'Group 3'],
        reverse: true,
        grid: {
          drawOnChartArea: false,
          lineWidth: [1, 1, 0, 0, 1, 1]
        },
        ticks: {                  
          maxRotation: 90,
          minRotation: 90,
          labelOffset: -22
        }
      }
    }
  }
});
div {
  height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@^4"></script>
<div>
  <canvas id="myChart"></canvas>
</div>

Leave a comment