Chartjs-Chartjs question: annotation label position problem

by

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

Leave a comment