Label overlap

[jlindoso]

Hi friends, I had an Idea for label overlay but I couldnt find the list of annotation elements where i can use x, x2, y, y2.

Is There some way to get ALL elements ? So i can use the x/y coordenates to know If one element is overlapping another one.

Thanks for ur time

[stockiNail]

@jlindoso see the discussion: #750 (comment)

The "state" of the plugin is containing all annotation elements (both visible and not ones).

Nevertheless, can you share your idea? Maybe there could be another way to do it?

[jlindoso]

My idea is to get event "afterDraw" and the element x, x2, y, y2 and compare to all annotations edges, so I can adjust my element yValue to avoid overlap

[stockiNail]

Interesting! In this case have a look to #869
If Pr will be accepted and merged, new ‘elements’ field of the context will be available with all visibile elements.
This will solve the missing API and you could implement your logic for label overlapping.
What do you think?

[jlindoso]

@stockiNail thank you Man, It Will help, regards

[jlindoso]

I gonna refactory it futher but for now, works!

Thank u again
`

function afterDrawElement(context: any) {
  let actualElement = context?.element;
  let ann = annotationPlugin as any
  const elementList = ann?._getState(context.chart)?.elements.filter((i: any) => i?.options?.type == "label")
  let changed = false
  if (actualElement?.options?.display == true)
    elementList.map((e: any) => {
      if (actualElement?.options?.id == 0 || actualElement?.options?.id == 1)
        if (e?.y < Number(context.chart?.chartArea?.top)) {
          e.y = Number(context.chart?.chartArea?.top)
          changed = true
        }
   if (e?.x < Number(context.chart?.chartArea?.left)) {
        e.x = Number(context.chart?.chartArea?.left)
        changed = true
      }
 if (e?.x2 > Number(context.chart?.chartArea?.right)) {
        e.x2 = Number(context.chart?.chartArea?.right)
        changed = true
      }

      if (actualElement?.options?.id != e?.options.id) {
        if (Number(actualElement?.x2) >= Number(e?.x) && Number(actualElement?.x2) <= Number(e?.x2)) {
          if (Number(actualElement?.y2) >= Number(e?.y) && Number(actualElement?.y2) <= Number(e?.y2)) {
            if (Number(actualElement?.options?.id) % 2 == 0) {
              actualElement.y2 > 0 ?
                e.y = Number(actualElement.y2) + (Number(actualElement.y2 * 0.01)) :
                e.y = Number(actualElement.y2) - (Number(actualElement.y2 * 0.01))
              changed = true
            }
          }
        }
      }
      if (changed) {
        context.chart.draw();
      }
    })
}

`

[PaulSender]

For anyone dealing with this in react.... this solution works across the board. Probably also works in non react envs

Put it in your plugins.

<Bar data={data} options={options} plugins=[ ...object defined below ] />

{
                id: 'annotations_draw',
                afterUpdate: (chart) => {
                  let ann = annotationPlugin as any;
                  const elementList = ann
                    ?._getState(chart)
                    ?.elements.filter((i: any) => i?.options?.type == 'label');
                  const map = new Map();
                  let changed = false;

                  for (var i = 0; i < elementList.length; i++) {
                    const currentElement = elementList[i];

                    const currentElementWidth =
                      currentElement.x2 - currentElement.x;
                    if (currentElement.x <= chart?.chartArea?.left) {
                      currentElement.x = chart?.chartArea?.left;
                      currentElement.x2 =
                        currentElement.x + currentElementWidth;
                      elementList[i] = currentElement;
                    }
                    if (currentElement?.x2 > chart?.chartArea?.right) {
                      currentElement.x2 = chart?.chartArea?.right;
                      currentElement.x =
                        currentElement.x2 - currentElementWidth;
                      elementList[i] = currentElement;
                    }
                    for (var j = i + 1; j < elementList.length; j++) {
                      const nextElement = elementList[j];
                      if (
                        currentElement.x2 >= nextElement.x &&
                        currentElement.y === nextElement.y
                      ) {
                        const elementHeight = nextElement.y2 - nextElement.y;
                        if (map.has(currentElement.options.id)) {
                          const currentElementList = map.get(
                            currentElement.options.id
                          );
                          nextElement.y =
                            currentElementList[
                              currentElementList.length - 1
                            ].y2;
                          nextElement.y2 = nextElement.y + elementHeight;
                          elementList[j] = nextElement;
                          currentElementList.push(nextElement);
                          map.set(
                            currentElement.options.id,
                            currentElementList
                          );
                        } else {
                          nextElement.y = currentElement.y2;
                          nextElement.y2 = nextElement.y + elementHeight;
                          elementList[j] = nextElement;
                          map.set(currentElement.options.id, [nextElement]);
                        }
                        elementList[j] = nextElement;
                        changed = true;
                      }
                    }
                  }

                  if (changed && draw) {
                    chart.draw();
                  }
                },
              },

Checks all labels for overlap and updates x/y coordinates as needed. At the end, it draws the chart. The afterUpdate hook is SUPER important here. If you use after or before draw you will get stuck in a maximum stack error. afterLayout does not work.

I think this algo can be optimized so bear with it lol.

[PaulSender]

Small edit. With version 3.1.0 the _getState method has been removed in favor of getAnnotations

                    ?._getState(chart)

const annotations = annotationPlugin.getAnnotations(chart);