CODEWITHSUNDEEP
chart.jsreact-chartjs
Vedant Nare
Vedant Nare

Reputation: 183

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
    }
  }]

Upvotes: 1

Views: 856

Answers (2)

user18703302
user18703302

Reputation: 1

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.

Upvotes: 0

Vedant Nare
Vedant Nare

Reputation: 183

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}.

Upvotes: 2

Related Questions