search

chartjs / chartjs-plugin-annotation

Annotation plugin for Chart.js
MIT License
609 stars 329 forks source link

Annotations draw on top of chart scales #878

Closed scott-cornwell closed 1 year ago

scott-cornwell commented 1 year ago

I tried using drawTime but the available options don't help. If I have my chart scales drawn inside the chart, the annotation lines draw over the top of their labels. There also doesn't seem to be a way to control the drawTime of the chart scales themselves.

stockiNail commented 1 year ago

Using drawTime: 'beforeDraw', the annotation should be drawn before any other chart components, scales/ticks included (therefore without being drawn over other components).

Maybe do you want the annotation on top of datasets but on bottom of the scale?

stockiNail commented 1 year ago

Anyway have a look to codepen: https://codepen.io/stockinail/pen/yLRVGNq

Setting z option on the scale ticks config, the annotation is on top of dataset but on the bottom of the tick.

scott-cornwell commented 1 year ago

Yeah I tried that already, but beforeDraw causes the annotations not to be drawn at all. That is what I'm trying to achieve, annotation on top of dataset but behind the scale. Hmm I will try z but I'm on an old version and I can't upgrade so I'm not sure if it exists. Also it's not the actual ticks that are the problem but the scale labels themselves (they are drawn inside the graph area on my chart).

stockiNail commented 1 year ago

Hmm I will try z but I'm on an old version and I can't upgrade so I'm not sure if it exists.

AFAI remember, z option on ticks is available since version 3.

Also it's not the actual ticks that are the problem but the scale labels themselves (they are drawn inside the graph area on my chart).

Not clear to me what you meant, sorry. Can you provide a reproducible sample?

scott-cornwell commented 1 year ago

Ah, yeah z did not work for me, I'm on 2.9.4 though and I can't upgrade because the environment is not an actual browser, 3.0+ completely breaks. Ok actually I think it's technically the tick labels.

In any case I've found a workaround, I'm able to just render one chart on top of another and turn off all the elements except for the ticks on the top graph.