Chartjs-Align line annotation label and label annotation

by

0👍

The position of the label can be used to define where the label must be located, compared to the point defined by xValue and yValue option.

Probably the best way is to use line annotations, with the same config, apart for value.

const l2 = {
  type: 'line',
  label: {
    display: true,
    content: 'line',
    position: 'end',
  },
  borderWidth: 0, // no line
  scaleID: 'y',
  value: 0
};

Or in you label annotation, you could set xValue and xAdjust as following:

const l2 = {
  type: 'label',
  yValue: 0,
  xValue: (context) => context.chart.scales.x.max,
  position: 'end',
  content: 'label',
  color: 'white',
  xAdjust: (context) => -context.chart.options.plugins.annotation.annotations.l1.label.padding,
  backgroundColor: 'black'
}

Leave a comment