'Cannot rotate label in chart js annotations plugin

I am using chart js annotations plugin in Bar Chart. I am trying to rotate the label to align it vertically with the bar but it is not working. Can anyone please suggest how to use the rotation property?

annotation: {
  annotations: [{
    type: 'line',
    // drawTime: 'afterDatasetsDraw',
    mode: 'vertical',
    scaleID: 'x-axis-0',
    value: "0-25%",
    borderWidth: 1,
    label: {
      xAdjust: 6,
      enabled: true,
      content: 'Highly Mobile',
      rotation: 0
    }
  },
  {
    type: 'line',
    // drawTime: 'afterDatasetsDraw',
    mode: 'vertical',
    scaleID: 'x-axis-0',
    value: "26-50%",
    borderWidth: 1,
    label: {
      xAdjust: 6,
      enabled: true,
      content: 'Highly Mobile',
      rotation: 90
    }
  }]
chart.jsreact-chartjs


Solution 1:[1]

Latest update: We can put git link of the same in package.json.

I found the answer. The chartjs annotation plugin cdn has not included the rotation property. We need to download the zip of master branch and extract it to our project folder. Then npm install ./{folder-name}.

Solution 2:[2]

I had the same issue withe the 0.5.7 version i suggest you to move to newer version or add this rotation file https://github.com/chartjs/chartjs-plugin-annotation/files/4988167/chartjs-plugin-annotation-rotation.zip, all this if you don't want to use nodejs.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 marc_s

Related Questions