Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Prevent value labels overlapping between series

See original GitHub issue

Description

When I show value labels for two series, they might overlap. Can they be separated better?

Implementation

We can avoid overlap IN series by using this config in echarts:

      labelLayout: function (params) {
        return {
          x: params.rect.x,
          moveOverlap: 'shiftY'
        };
      },

^ not actually sure why x: is needed in there it seems like a bug.

Before Screenshot 2022-07-08 at 15 47 25

After Screenshot 2022-07-08 at 15 48 18

Issue Analytics

State:
Created a year ago
Comments:12 (7 by maintainers)

Top GitHub Comments

1reaction

ZeRegocommented, Aug 4, 2022

Wondering what might be happening here 🤔

@TuringLovesDeathMetal iirc echarts only avoids overlap of labels from the same series. It doesn’t calculate overlap between series like in that screenshot 😢

1reaction

rephuscommented, Jul 15, 2022

I’m assuming that more labels would appear if I stretched or shrunk my chart, right?

Yep Peek 2022-07-15 09-34

Top Results From Across the Web

Prevent Overlapping Data Labels in Excel Charts - Peltier Tech

To avoid horizontal overlapping, you need to compare each label's left plus width to the next label's left to determine whether an overlap...

Manage Overlapping Data Labels | FlexChart | ComponentOne

FlexChart provides an option to show or hide the overlapped data labels by setting the Overlapping property of DataLabel class. This property accepts...

How can I prevent the labels of my line chart from overlapping?

To prevent overlapping labels in your series or to display labels of one series above the line, you can proceed as follows. You...

How to: Avoid Overlapping of Series Labels | WinForms Controls

XtraCharts can help to avoid this, by applying an overlap resolving algorithm to series labels. Then, label overlap is auto-detected, ...

How to prevent text labels from overlapping in R with ggplot2 ...

A challenge of adding labels to a plot is how to prevent the labels from overlapping with each other. Thankfully, the ggrepel R...