How to specify the number of labels to appear on the line of a line chart in react-chartjs-2

43 Views Asked by At

I have a line chart but I have no idea why a bunch of x,y corods are appearing on the line itself. Below is the code I believe needs to be modified:

datalabels: {
            display: true,
            clamp: true,
            overlap: false,
            font: { family: 'Plus Jakarta Sans', size: 10.5, weight: 500 },
            padding: 2,
            color: tickColor,
            labels: {
              title: {
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-ignore
                display: (context) => {
                  const total = getStackedTotal(context);
                  if (typeof total === 'undefined' || total.total === 0) return false;
                  else return true;
                },
                anchor: 'end',
                align: 'end',
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-ignore
                formatter: (value, context) => {
                  const total = getStackedTotal(context);
                  if (typeof total === 'undefined' || total.total === 0) return '';
                  return formatter({
                    format: context.dataset.format,
                    value: total.total,
                    decimalPlaces: context.dataset.decimalPlaces,
                    multiplier: context.dataset.multiplier,
                    minimumDecimalPlaces: 0,
                    displayZero: context.dataset.displayZero
                  });
                }
              },
              value: {
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-ignore
                anchor: (context) => {
                  try {
                    if (context.dataset.isStacked) return 'center';
                    const isBar = context.dataset.isBar;
                    if (isBar) {
                      const dataPoint = context.dataset.data[context.dataIndex] as { x: string; y: number };
                      if (dataPoint?.y >= 0) return 'end';
                      else return 'start';
                    } else {
                      return 'end';
                    }
                  } catch (e) {
                    return 'end';
                  }
                },
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-ignore
                align: (context) => {
                  try {
                    if (context.dataset.isStacked) return 'center';
                    const isBar = context.dataset.isBar;
                    if (isBar) {
                      const dataPoint = context.dataset.data[context.dataIndex];
                      if (dataPoint?.y >= 0) return 'end';
                      else return 'start';
                    } else {
                      return 'end';
                    }
                  } catch (e) {
                    return 'end';
                  }
                },
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-ignore
                formatter: (value, context) => {
                  if (typeof value?.y !== 'number') return '';
                  return formatter({
                    format: context.dataset.format,
                    value: value?.y,
                    decimalPlaces: context.dataset.decimalPlaces,
                    multiplier: context.dataset.multiplier,
                    minimumDecimalPlaces: 0,
                    displayZero: context.dataset.displayZero
                  });
                }
              }
            }
          }

I should mention

//setting this to true or false doesn't seem to do anything
datalabels: {
            display: true, 

// But if I modify the display within the labels to false the labels appear and if it's set to true the labels disappear.
labels: {
            display: (context) => {

But how do I modify it such that I can reduce the number of labels that are currently appearing on the line?

0

There are 0 best solutions below