With a horizontal bar chart, how can I adjust the position of a line annotation's label?

1

As you can see in the image below, the two labels are overlapping each other.

image

I’ve been searching the documentation, both for QuickChart and the chartJS plugins, but can’t find anything that actually moves the label up or down the line - they always sit in the middle.

Is there a way to move these annotation labels in a chart like this?

Thanks so much! Small moonwalker

Here's the code driving this chart: 
{
  type: "horizontalBar",
  data: {
    labels: ["Towels"],
    datasets: [
      {
        label: "Low?",
        backgroundColor: "red",
        stack: "Stack 1",
        data: [],
      },
      {
        label: "Medium?",
        backgroundColor: "Orange",
        stack: "Stack 1",
        data: [0],
      },
      {
        label: "High?",
        backgroundColor: "yellow",
        stack: "Stack 1",
        data: [0],
      },
      {
        label: "Full?",
        backgroundColor: "Green",
        stack: "Stack 1",
        data: [22]
      },
	]
  },
  options: {
    title: {
      display: true,
      text: "[Suite 12] Inventory",
    },
    annotation: {
      annotations: [
      {
        type: "line",
        mode: "vertical",
        scaleID: "x-axis-0",
        value: 12,
        borderColor: "black",
        borderWidth: 4,
        label: {
          enabled: true,
          content: "Current Stock [12]"
        }
      },
     	{
        type: "line",
        position: '24%',
        mode: "vertical",
        scaleID: "x-axis-0",
        value: 14,
        borderColor: "Pink",
        borderWidth: 4,
        label: {
          enabled: true,
          content: "On Order [+2]"
        }
      }
      ]
    },
    scales: {
      xAxes: [
        {
          stacked: true,
          ticks: {
          	max: 22
          }
        }
      ]
    }
  }
}
  • It’s the second annotation I’m wanting to modify, the “pink” line
    • I tried using ‘position’, but it did nothing. :frowning:
2

Hello,

The way to do this with Chart.js v2 is by setting your annotation’s label.xAdjust and label.yAdjust properties. For example:

  options: {
    annotation: {
      annotations: [
      {
        type: "line",
        mode: "vertical",
        scaleID: "x-axis-0",
        value: 12,
        borderColor: "black",
        borderWidth: 4,
        label: {
          enabled: true,
          content: "Current Stock [12]",
          xAdjust: -25,
          yAdjust: -10,
        }
      },
     	{
        type: "line",
        position: '24%',
        mode: "vertical",
        scaleID: "x-axis-0",
        value: 14,
        borderColor: "Pink",
        borderWidth: 4,
        label: {
          enabled: true,
          content: "On Order [+2]",
          xAdjust: 10,
          yAdjust: 25,
        }
      }
      ]
    },

image
image1000×600 22.1 KB

Link to sandbox

Currently the Chart.js v2 endpoint defaults to chartjs-plugin-annotations 0.5.7. The documentation is bare bones but is available available here.

The Chart.js v3 endpoint runs chartjs-plugin-annotations 1.3.0. Note that xAdjust and yAdjust properties have moved onto the annotation object itself. Docs here.

Hope this helps!

1 Like
3

Extremely helpful!!! Thank you so much!

Another question if I may:

  • is it possible to have two labels on the same line?

I’d like to have two labels on the pink line:

  • One (already there) shows how many more are on order
  • I’d like another (shown below) that shows what the stock will be when that’s added in

I imagine I could just add another line, but then the top label (on order) would have a link drawn over it; I’m hoping there’s a way to populate two - or maybe a floating label not attached to the line, somehow placed over the line… lol

4

The easiest way to do this is to have 2 separate line annotations, but set the borderColor of your line to “transparent”.

Example configuration

image
image1000×600 24.2 KB

2 Likes
5

OOooo that’s clever shufflepartyparrot

6

Here’s the final result

  • It looks really good

https://p215.p3.n0.cdn.getcloudapp.com/items/xQuzwEwK/19088685-f945-4984-9fab-a8debad3878b.gif?v=925719495eb41984f04f52d4da15bbce(image larger than 4 MB)

7

Nice work! Very cool :grin:

1 Like
8

Dude… this service you’ve built is A-MAZ-ING!!!

  • Brining my apps to the next level!

2 Likes