Search code examples
javascriptcanvasgraphchartschart.js

ChartJS place y-axis labels between ticks


I have the following graph: enter image description here

However, i'd like to shift the y axis labels to be the following:enter image description here

Is it possible to move the y axis labels in between the tick marks with ChartJS, like shown in the example image above?

Functionality is similar to the options.scales.yAxes[].ticks.position option, except currently it is defined as in the x direction for the y axis, where as I need it in the y direction for the y axis. And better yet, automatically centered.


Solution

  • Unfortunately, there is no built-in method in ChartJS for this, at the moment.

    You would rather need to create a chart plugin to achieve that.

    plugins: [{
       beforeDraw: function(chart) {
          var ctx = chart.ctx;
          var yAxis = chart.scales['y-axis-0'];
          var tickGap = yAxis.getPixelForTick(1) - yAxis.getPixelForTick(0);
          yAxis.options.ticks.fontColor = 'transparent'; // hide original tick
          // loop through ticks array
          Chart.helpers.each(yAxis.ticks, function(tick, index) {
             if (index === yAxis.ticks.length - 1) return;
             var xPos = yAxis.right;
             var yPos = yAxis.getPixelForTick(index);
             var xPadding = 10;
             // draw tick
             ctx.save();
             ctx.textBaseline = 'middle';
             ctx.textAlign = 'right';
             ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
             ctx.fillText(tick, xPos - xPadding, yPos + tickGap / 2);
             ctx.restore();
          });
       }
    }]
    

    note: this will hide the first tick (which begins at 0)

    ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

    var barChart = new Chart(ctx, {
       type: 'bar',
       data: {
          labels: ['Jan', 'Feb', 'Mar'],
          datasets: [{
             label: 'BAR',
             data: [10, 20, 30],
             backgroundColor: 'rgba(0, 119, 204, 0.5)'
          }]
       },
       options: {
          responsive: false,
          scales: {
             yAxes: [{
                ticks: {
                   beginAtZero: true
                }
             }]
          }
       },
       plugins: [{
          beforeDraw: function(chart) {
             var ctx = chart.ctx;
             var yAxis = chart.scales['y-axis-0'];
             var tickGap = yAxis.getPixelForTick(1) - yAxis.getPixelForTick(0);
             yAxis.options.ticks.fontColor = 'transparent'; // hide original tick
             // loop through ticks array
             Chart.helpers.each(yAxis.ticks, function(tick, index) {
                if (index === yAxis.ticks.length - 1) return;
                var xPos = yAxis.right;
                var yPos = yAxis.getPixelForTick(index);
                var xPadding = 10;
                // draw tick
                ctx.save();
                ctx.textBaseline = 'middle';
                ctx.textAlign = 'right';
                ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
                ctx.fillText(tick, xPos - xPadding, yPos + tickGap / 2);
                ctx.restore();
             });
          }
       }]
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
    <canvas id="ctx" height="200"></canvas>