[Chartjs]-ChartJS Add dynamic labels to vertical lines on horizontal bar chart

1👍

Since you’re using an old version of chartjs-plugin-annotation, you need to consult the related documentation for Line Annotations here.

This will lead you to the following solution

annotation: {
  annotations: [
  {
    type: 'line',
    mode: 'vertical',
    scaleID: 'x-axis-0',
    value: per10,
    borderColor: '#db7093',
    borderWidth: 2, 
    label: {
      enabled: true,
      xAdjust: -22,
      content: '10%',
      backgroundColor: '#ffffff',
      fontSize: 14,          
      fontColor: '#db7093',
      position: 'top'
    }
  },
  ...

Please take a look at your amended JSFiddle and see how it works.

1👍

To define the label in line annotation, for version 0.55, you must use enabled and content, and not display and value.

annotation: {
  annotations: [
  {
    type: 'line',
    mode: 'vertical',
    scaleID: 'x-axis-0',
    value: per10,
    borderColor: 'red',
    borderWidth: 2, 
    label: {
      enabled: true, // <-- not display
      content: "10%", // <-- not value
      position: "top"
    }
  },
  {
    type: 'line',
    mode: 'vertical',
    scaleID: 'x-axis-0',
    value: per50,
    borderColor: '#98fb98',
    borderWidth: 2, 
    label: {
      enabled: true, // <-- not display
      content: "50%", // <-- not value
      position: "top"
    }
  },
  {
    type: 'line',
    mode: 'vertical',
    scaleID: 'x-axis-0',
    value: per90,
    borderColor: '#add8e6',
    borderWidth: 2, 
    label: {
      enabled: true, // <-- not display
      content: "90%", // <-- not value
      position: "top"
    }
  },
  ]
},

Leave a comment