Cut off arc link labels

[johannesKnoll]

Hi all,

I recently encountered the problem that my arc link labels are cut off, because some of the labels are longer than the width of the chart, therefore, the labels are not completely readable.

Is there any possibility to make a line break and show the label in two lines?
Many thanks,

Johannes

[wyze]

You could pass a arcLinkLabelComponent prop and split the text yourself with tspans.

[zwyMZ]

@wyze
Any Example on how to use arcLinkLabelsComponent?
I only found the example of using arcLabelsComponent in the storybook. I tried to follow the pattern but the arc links don't show in the graph. Only the label text could be shown in the graph.

[rbourdon]

I wrapped my long arc link labels text using this approach:

arcLinkLabelComponent={(d) => {
            return (
              <animated.g opacity={d.style.opacity}>
                <animated.path
                  fill="none"
                  stroke={d.style.linkColor}
                  strokeWidth={d.style.thickness}
                  d={d.style.path}
                />
                {d.label.split(" ")
                  .map((segment, i) => (
                    <animated.text
                      y={i * 12}
                      key={`arcLinkLabel_segment_${segment}`}
                      transform={d.style.textPosition}
                      textAnchor={d.style.textAnchor}
                      dominantBaseline="central"
                      style={{
                        ...nivoTheme.labels.text,
                        fill: d.style.textColor,
                      }}
                    >
                      {segment}
                    </animated.text>
                  ))}
              </animated.g>
            );
          }}

This is following the pattern of the default component

[BEEFF]

I like the solution, I have extended to only split lines every 2 words

				arcLinkLabelComponent={(d) => {
					return (
					  <animated.g opacity={d.style.opacity}>
						<animated.path
						  fill="none"
						  stroke={d.style.linkColor}
						  strokeWidth={d.style.thickness}
						  d={d.style.path}
						/>
						{d.label.split(/(\S+\s+\S+)/g)
						  .filter(Boolean)
						  .map((segment, i) => (
							<animated.text
							  y={i * 12}
							  key={`arcLinkLabel_segment_${segment}`}
							  transform={d.style.textPosition}
							  textAnchor={d.style.textAnchor}
							  dominantBaseline="central"
							  style={{
								fill: d.style.textColor,
							  }}
							>
							  {segment}
							</animated.text>
						  ))}
					  </animated.g>
					);
				  }}

[aphougat]

The suggested answer doesn't work as the split text comes in second line and overlaps another close label. The nivo charts should handle this basic thing as it has a lot of calculations based on visible area, text length, proximity to another label etc

[plouc]

The nivo charts should handle this basic thing

It's definitely not basic to properly position labels, considering others, boundaries, line-breaks, and most libs won't do it automatically, so I'm going to disagree here.

[BEEFF]

@plouc I agree, it would be great feature for Nivo though! I have trouble (setup custom labels) for Pie / Radar. Also setting custom components here "unlocks" fonts for me. Is there a way to globally set nivo fonts?