Chartjs-plugin-datalabels: Line Chart 'auto' Labels Overlap Issue

[danielwstrimpel]

I'm seeing some unexpected behaviors with labels overlapping on line charts. To prevent display labels that would be overlapping, I'm using the display: 'auto' setting to hide all but one of the overlapping labels.

The problem that I am seeing is that the logic to choose the visible label is in contrast with what I would expect to see. My expectation would be that labels would be rendered in the same order that the lines would, so that a line that is drawn on top of another line would also have its label drawn on top of the other label (and thus hide the other line's label). In the example below, you can see that the black line is drawn on top of the grey line, however the grey label is shown when the labels are overlapping.

Reading through the documentation on the site, the overlapping is working as described, however as stated earlier, it seems at odds with how the lines are rendered.

if both labels are display: 'auto', the one with the highest data index will be hidden. If labels are at the same data index, the one with the lowest dataset index will be hidden

The lines seem to use the opposite ordering when being rendered. Is there a way to get the labels and lines to be rendered in the same order so that if a line overlaps another line its label will behave the same way?

Details

• _Chart JS Version:_ 2.8.0
• _Datalabels Plugin Version:_ 0.6.0

Configuration

{
  plugins: [ChartDataLabels],
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'March'],
    datasets: [
      {
        data: [1, 3, 2],
        fill: false,
        backgroundColor: 'black',
        borderColor: 'black',
        pointBorderColor: 'black',
        pointBackgroundColor: 'black',
        datalabels: {
          align: 'top',
          color: 'white',
          backgroundColor: 'black',
          display: 'auto'
        }
      },
      {
        data: [3, 1, 2],
        fill: false,
        backgroundColor: 'grey',
        borderColor: 'grey',
        pointBorderColor: 'grey',
        pointBackgroundColor: 'grey',
        datalabels: {
          align: 'top',
          color: 'white',
          backgroundColor: 'grey',
          display: 'auto'
        }
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    layout: {
      padding: {
        top: 30
      }
    },
    legend: {
      display: false
    }
  }
}

[simonbrunel]

@danielwstrimpel sorry for the late reply. I'm not sure anymore why the actual logic gives priority to the dataset with the highest index, I was certainly expecting that the last dataset in the array would be drawn last as well, but that's the opposite.

I will fix that behavior in the next release since it definitely makes more sense to hide labels this way.

[simonbrunel]

Fixed in 994aa9788f4c7d67cbfb24067108272ad4bb1c1e, can you please try to build master and confirm that it fixes your issue?

[danielwstrimpel]

@simonbrunel I just saw your response. I was able to build master and use it in my app. The labels are working as I would have expected with this change. Thanks for looking into this.

[simonbrunel]

Released in version 0.7.0.