[Chartjs]-Labels (category type) on left and right of bar chart using chart.js?

by

3👍

✅

I suggest to use two yAxes, one to the left and the other one to the right side, used to show “min/max” category labels.

In addition datalabels plugin provides labelling over horizontal bars:

var chartData = {
  labels: ['Extraversion', 'Anxiety', 'Tough', 'Indipendence'],
  datasets: [{
    label: 'value',
    backgroundColor: 'rgba(219, 20, 0, 0.2)',
    borderColor: 'rgba(219, 20, 0, 0.8)',
    data: [60, 80, 55, 40],
		yAxisID: 'y0'
  }]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'horizontalBar',
  data: chartData,
  options: {
  	legend: { display: false },
    scales: {    
      yAxes: [{
        id: "y0",
        weight: 1,
        position: "left",
        type: 'category',
        display: false,
        gridLines: {
        	display: false
        },
        ticks: {
        	display: false,
          padding: 0
        }
      },{
        id: "y1",
        weight: 0,
        position: "left",
        type: 'category',
        labels: ['Intro', 'Low', 'Rec', 'Accom'],
        gridLines: {
        	display: false
        }
      },{
        id: "y2",
        position: "right",
        type: 'category',
        labels: ['Extra', 'High', 'Tough', 'Indipend'],
        gridLines: {
        	display: false
        }
      }],
      xAxes: [{
      	id: "x1",
        ticks: {
          beginAtZero: true
        }
      }],
    },
    plugins: {
      datalabels: {
        color: 'red',
        align: 'right',
        anchor: 'start',
        formatter: function(value, context) {
        		console.log(context)
          	return chartData.labels[context.dataIndex];
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

<canvas id="myChart" height="300" width="500"></canvas>

Update:

as alternative you can draw your own labels onComplete (no additional plugin needed). Here below is an example:

var chartData = {
  labels: ['Extraversion', 'Anxiety', 'Tough', 'Indipendence'],
  datasets: [{
    label: 'value',
    backgroundColor: 'rgba(219, 20, 0, 0.2)',
    borderColor: 'rgba(219, 20, 0, 0.8)',
    data: [60, 80, 55, 40],
    yAxisID: 'y0'
  }]
};
var y1Labels = ['Intro', 'Low', 'Rec', 'Accom'];
var y2Labels = ['Extra', 'High', 'Tough', 'Indipend'];

var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'horizontalBar',
  data: chartData,
  options: {
    legend: {
      display: false
    },
    layout: {
      padding: {
        left: 0,
        right: 50,
        top: 0,
        bottom: 0
      }
    },
    scales: {
      yAxes: [{
        id: "y0",
        weight: 1,
        position: "left",
        type: 'category',
        display: true,
        gridLines: {
          display: false
        },
        ticks: {
          display: true,
          fontStyle: 'bold',
          fontSize: 14
        }
      }, {
        id: "y1",
        position: "right",
        type: 'category',
        labels: ['Extra', 'High', 'Tough', 'Indipend'],
        ticks: {
          display: false,
          padding: 30
        },
        gridLines: {
          display: false
        }
      }],
      xAxes: [{
        id: "x1",
        ticks: {
          beginAtZero: true
        }
      }],
    },
    animation: {
      duration: 0,
      onComplete: function() {
        var chartInstance = this.chart;
        ctx.font = Chart.helpers.fontString(12, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
        ctx.fillStyle = 'red';
        ctx.textBaseline="bottom"; 

        this.data.datasets.forEach(function(dataset, i) {
          var meta = chartInstance.controller.getDatasetMeta(i);
          console.log(chartInstance, meta);

          var x0 = chartInstance.scales.y0.right;
          var x1 = chartInstance.scales.y1.left;

          meta.data.forEach(function(bar, index) {
            var label = y1Labels[index];
            var xOffset = x0 - 10 - ctx.measureText(label).width;
            var yOffset = bar._model.y - 15;
            ctx.fillText(label, xOffset, yOffset);

            var label = y2Labels[index];
            var xOffset = x1 + 10;
            var yOffset = bar._model.y - 15;
            ctx.fillText(label, xOffset, yOffset);
          });
        });
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart" height="300" width="500"></canvas>

Leave a comment