chartjs question: annotation label position problem

Question

question about Chartjs 3.x and chartjs-plugin-annotation

I have created this graph (except the green text) using chartjs and chartjs-plugin-annotation, but I cannot get the green text "100%" placed on the very right side of the horizontal line.

I have tried changing annotations.label.xValue and annotations.label.xAdjust, but label was cut off, because it's placed outside the canvas like this.

this is part of my code ↓

 annotation: {
                annotations: {
                    line1: {
                        type: "line" as const,
                        yMin: 20,
                        yMax: 20,
                        borderColor: "rgba(0, 186, 52, 1)",
                        borderWidth: 2,
                    },
                    label1: {
                        type: "label",
                        content: ["100%"],
                        color: "rgba(0, 186, 52, 1)",
                        yValue: 20,
                        xValue:'4/7',
                        xAdjust: 10
                    },
                },
            },

Does anyone know how to do this?

Answer 1

You should disable the clip on chart area, as following (using your code):

 annotation: {
   clip: false, // <-- must be added
   annotations: {
     line1: {
       type: "line" as const,
       yMin: 20,
       yMax: 20,
       borderColor: "rgba(0, 186, 52, 1)",
       borderWidth: 2,
     },
     label1: {
       type: "label",
       content: ["100%"],
       color: "rgba(0, 186, 52, 1)",
       yValue: 20,
       xValue:'4/7',
       xAdjust: 10
     },
  },
},

If I may add a couple of hints:

1. add space on the right of chart are where the label must be drawn (by options.layout.padding)
2. you can use only the line annotation with the inner label (instead of 2 annotation)

See a codepen here: https://codepen.io/stockinail/pen/zYmOaLz