Ticks covered by bar when mirrored

I want the tick to be placed on the bar. This seemed to work until I changed the background color of the bar having no transparency.

The thing is that the bar is covering the tick. Imho the tick should be always placed higher than the bar.

Example Bar Chart

Or is there any possibility built in to achieve that?

Author: Fantashit

2 thoughts on “Ticks covered by bar when mirrored

  1. @Stefanama somehow …

    I think I found the solution on Stackoverflow, but don’t remember exactly. But here’s the code I have implemented. It’s quite a while since I worked on it so I’m not totally sure if that’s all.

      animation: {
        onProgress () {
          const chartInstance = this.chart;
          const ctx = chartInstance.ctx;
          const dataset = this.data.datasets[0];
          const meta = chartInstance.controller.getDatasetMeta(0);
          Chart.helpers.each(meta.data.forEach((bar, index) => {
            const label = this.data.labels[index];
            const labelPositionX = 20;
            const labelWidth = ctx.measureText(label).width + labelPositionX;
            ctx.textBaseline = 'middle';
            ctx.textAlign = 'left';
            ctx.fillStyle = '#333';
            ctx.fillText(label, labelPositionX, bar._model.y);

    Put this code into your chart options.

  2. @etimberg;
    I doubt that closing this issue is the correct action. I cannot imagine that the intention of mirroring y-axis tick marks is to draw them behind any chart area (bars, area, line, radar, whatever).

    From what I read, issue #327 that you are referring to exists specifically to add a label with the value of a specific bar to a bar chart.
    Issue #2808 however concerns the y-axis ticks which are drawn behind the chart area. Also see my non-bar example in #2808 (comment).

    To summarize what we need here in CSS terms; The z-index of mirrored axis ticks needs to be higher than the chart area. I do not see that covered in #327.

Comments are closed.