Chartjs-Chartjs how to show scale label horizontally

by

1👍

✅

You can define a second y-axis that is responsible for drawing the scale label horizontally.

The single yAxis.ticks label can be left aligned by defining mirror: true together with some padding.

ticks: {
  mirror: true,
  padding: 60,
  ...

To make the tick label visible on the chart area, the same padding needs to be defined left of the chart layout.

layout: {
  padding: {
    left: 60
  }
},

Please take a look on the runnable code below and see hot it works.

new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      data: [10, 12, 8, 6],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgb(255, 99, 132)',
      borderWidth: 1,
      fill: false
    }]
  },
  options: {
    layout: {
      padding: {
        left: 60
      }
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        },
        {
          ticks: {
            stepSize: 0.5,
            mirror: true,
            padding: 60,
            fontColor: 'red',
            callback: v => v == 0.5 ? ['Horizontal', 'Label'] : undefined
          },
          gridLines: {
            display: false
          }
        }
      ]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="50"></canvas>

1👍

The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterDraw hook to draw the scale label yourself directly on the canvas using CanvasRenderingContext2D.fillText().

afterDraw: chart => {
  var ctx = chart.chart.ctx;
  ctx.save();
  let yAxis = chart.scales['y-axis-0'];
  let y = yAxis.bottom / 2;
  ctx.textAlign = 'left';
  ctx.font = "14px Arial";
  ctx.fillStyle = "gray";
  ctx.fillText('Horizontal', 0, y - 8);
  ctx.fillText('Label', 0, y + 8);
  ctx.restore();
}

You’ll also have to define some extra padding at the left of the chart to make sure, the scale label does not overlap the chart area.

options: {
  layout: {
    padding: {
      left: 70
    }
  },

Please take a look at the following runnable code and see how it works.

new Chart(document.getElementById('myChart'), {
  type: 'line',
  plugins: [{
    afterDraw: chart => {
      var ctx = chart.chart.ctx;
      ctx.save();
      let yAxis = chart.scales['y-axis-0'];
      let y = yAxis.bottom / 2;
      ctx.textAlign = 'left';
      ctx.font = "14px Arial";
      ctx.fillStyle = "gray";
      ctx.fillText('Horizontal', 0, y - 8);
      ctx.fillText('Label', 0, y + 8);
      ctx.restore();
    }
  }],
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      data: [10, 12, 8, 6],
      backgroundColor: 'rgba(255, 99, 132, 0.2)',
      borderColor: 'rgb(255, 99, 132)',
      borderWidth: 1,
      fill: false
    }]
  },
  options: {
    layout: {
      padding: {
        left: 70
      }
    },
    legend: {
      display: false
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="50"></canvas>

0👍

There is no build in way to do this. If you want to achieve this behaviour you will have to draw it on the canvas yourself with an custom plugin

Leave a comment