Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Width for Label annotation doesn't work #828

Closed
dmbaranov opened this issue Jan 5, 2023 · 3 comments · Fixed by #830
Closed

Width for Label annotation doesn't work #828

dmbaranov opened this issue Jan 5, 2023 · 3 comments · Fixed by #830

Comments

@dmbaranov
Copy link

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/

@stockiNail
Copy link
Collaborator

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'
  }
}

@stockiNail
Copy link
Collaborator

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

@dmbaranov
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants