ChartJS coloca tags de eje y entre marcas

Tengo el siguiente gráfico: introduzca la descripción de la imagen aquí

Sin embargo, me gustaría cambiar las tags del eje y para que sean las siguientes: introduzca la descripción de la imagen aquí

¿Es posible mover las tags del eje y entre las marcas de verificación con ChartJS, como se muestra en la imagen de ejemplo de arriba?

La funcionalidad es similar a la opción options.scales.yAxes[].ticks.position , excepto que actualmente se define como in the x direction for the y axis , mientras que la necesito en la dirección y para el eje y. Y mejor aún, centrado automáticamente.

Desafortunadamente, no hay un método incorporado en ChartJS para esto, por el momento.

Prefieres tener que crear un plugin gráfico para lograrlo.

 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.restre(); }); } }] 

nota: esto ocultará el primer tick (que comienza en 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.restre(); }); } }] });