Ticks covered by bar when mirrored

[vuhrmeister]

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.

Or is there any possibility built in to achieve that?

[etimberg]

@vuhrmeister are you looking for labelled bars?

[vuhrmeister]

Well, if you call it like that – yes. It should look like what's shown in the screenshot but with the text being in front of the bars.

Alternatively the label could be placed above the bar. But I didn't manage to get a satisfying solution. Anyway, that's not topic of this issue.

[freewil]

I just ran into this issue when mirroring a line chart. I was expecting the labels to provide some padding and shift the x-axis to the right.

[steve2507]

Same issue here. I have a chart that gets new data every second, and the y axis is mirrored.

The same happens when I have the yAxis position right (where I actually want it).

[Stefanama]

@vuhrmeister did you eventually find a solution? I'm facing the same problem

[vuhrmeister]

@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.

[Stefanama]

@vuhrmeister great, it works!!!! you saved me a lot of headaches, thanks.
I am seeing that the tooltip gets put under the labels, I'll have a look into that later.

[vuhrmeister]

cool! I don't need the tooltips so I didn't run into that issue.