However, i'd like to shift the y axis labels to be the following:
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.
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>
I think you can use: yAxes: [{gridLines: { offsetGridLines: true }}]
to do this. The label value will be the avg between the thicks.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.