CODEWITHSUNDEEP
chart.js
ADM-IT
ADM-IT

Reputation: 4182

Chartjs how to show scale label horizontally

Due to very poor documentation (https://www.chartjs.org/docs/latest/) I decided to ask Chart.js community this question.

How can I change the angle of the scale label?

This is my actual view

enter image description here

I would like to make those labels horizontal (see red labels how it should be). The config is:

yAxes: [{
  display: true,
  scaleLabel: {
    display: true,
    labelString: [this.label, this.valueUnit],
    fontSize: 14,
  },
  afterFit: function(scaleInstance) {
    scaleInstance.width = 120;
  }
}]

Upvotes: 0

Views: 1211

Answers (3)

uminder
uminder

Reputation: 26150

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>

Upvotes: 1

uminder
uminder

Reputation: 26150

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>

Upvotes: 1

LeeLenalee
LeeLenalee

Reputation: 31351

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

Upvotes: 0

Related Questions