search

chartjs / chartjs-plugin-annotation

Annotation plugin for Chart.js
MIT License
603 stars 325 forks source link

Width and font weight not working on label #930

Closed sapabg closed 3 months ago

sapabg commented 3 months ago

I can't figure out how to set the width of a label type annotation and font weght does nothing. I have 3 labels: { "High": { "drawTime": "afterDraw", "type": "label", "xValue": 1748944714581, "yValue": 215, "backgroundColor": "rgba(255,255,255)", "borderColor": "#047857", "color": "#047857", "borderWidth": 1, "borderRadius": 4, "width": 100, "position": { "x": "start", "y": "center" }, "content": [ "High", 215 ], "font": { "size": 14, "weight": "bold" }, "id": "High" }, "Average": { "drawTime": "afterDraw", "type": "label", "xValue": 1748944714581, "yValue": 152.5, "backgroundColor": "rgba(255,255,255)", "borderColor": "#374151", "color": "#374151", "borderWidth": 1, "borderRadius": 4, "width": 100, "position": { "x": "start", "y": "center" }, "content": [ "Average", 152.5 ], "font": { "size": 14, "weight": "bold" }, "id": "Average" }, "Low": { "drawTime": "afterDraw", "type": "label", "xValue": 1748944714581, "yValue": 90, "backgroundColor": "rgba(255,255,255)", "borderColor": "#DD2D2D", "color": "#DD2D2D", "borderWidth": 1, "borderRadius": 4, "width": 100, "position": { "x": "start", "y": "center" }, "content": [ "Low", 90 ], "font": { "size": 14, "weight": "bold" }, "id": "Low" } } Accourding to this https://www.chartjs.org/chartjs-plugin-annotation/master/guide/types/label.html there should be width and height options but they are not doing anything for me. Annotations show but they are all different sizes and I don't want that! I am using Angular and PrimeNG p-chart.

sapabg commented 3 months ago

I managed to change the width with this: common: { beforeDraw: (context: any) => { context.element.width = 70 } }, but can't make the font bold

stockiNail commented 3 months ago

@sapabg as reported in the doc, width and height can be used to set the size of an label with an image/canvas content.

See doc: https://www.chartjs.org/chartjs-plugin-annotation/master/guide/types/label.html#general

Instead, the width and height for an textual label is automatically calculated based mainly on the content and font.

About the weight which is ignored in your case, do you have a codepen to test it?

stockiNail commented 3 months ago

@sapabg here a codepen with your annotations config:https://codepen.io/stockinail/pen/GRamgdv

I remove weigth: "bold" to Low annotation to show you the difference.

canvas

sapabg commented 3 months ago

@stockiNail thanks for the quick response, it seem like the font that was default didn't look bold, I swithed it and it looks way different. Thanks a ton! I'll delete the issue.