chartjs/chartjs-plugin-annotation

Width for Label annotation doesn't work

dmbaranov opened this issue · 3 comments

I want label annotation to take the whole width of the axis, but for some reason, xMin and xMax values are ignored.
I also tried to use width parameter, but it doesn't have any effect either.

In the docs, there's a line saying that "To enable to use the box positioning, the radius must be set to 0 or NaN.", but could you specify what radius it refers to? I wasn't able to find anything for both this plugin or ChartJS itself.

In the example below I used 2 annotations - box that can take the whole width of the axis and label that doesn't work.

Thank you!

https://jsfiddle.net/ntyv2cdb/17/

In the docs, there's a line saying that "To enable to use the box positioning, the radius must be set to 0 or NaN.", but could you specify what radius it refers to? I wasn't able to find anything for both this plugin or ChartJS itself.

Thank you @dmbaranov, that's a bug in the doc. Sorry. I'll fix it.

You can not specify the height or the width of the label, because is automatically calculated based on the content to draw.
[x/y]Min and [x/y]Max will be used to calculate the point (middle of the rectangle) where positioning the label.
width option is used ONLY where the content of the label is an Image or a Canvas.
The solution is to use a box annotation, with a label, something like (using your sample):

{
  type: 'box',
  yMin: 9,
  yMax: 11,
  backgroundColor: 'rgba(255, 99, 132, 0.25)',
  label: {
    display: true, 
    content: 'hello'
  }
}

FYI, I have an issue to fix the doc: #829

Thank you so much @stockiNail! Your solution with the box seems to work really nicely for my case, I'll stick to it :)