How to prevent text truncation in Nivo ticks' axis text (Bar Chart)

Question

My Y-Axis keys (or ticks) are pretty long, and they're being truncated But it's not due to lack of sufficient width for the graph itself, using the inspect tool, I can see there's enough space allocated for it, but the frame that is allocated to the whole graph is not sufficient... and that's supposed to be the ResponsiveBar...

changing the "transform" value for the X-Axis makes the text appear in full (almost), but then the legends are being truncated:

How can I make them appear in full? Couldn't find my answer in the docs.

Here's a sandbox to reproduce the problem: https://codesandbox.io/s/missing-legends-text-pns6v

IMPORTANT: 'width' is not the problem, it is somehow covered with a sort of a white line... also, I tried many 'width' sizes

The problem I'm referring to is this:

Would love to hear if there's a way to wrap the text, or truncating with adding on hover effect to show the full text

Answer 1

solution 1 : increase margin

You can set the left property in margin of ResponsiveBar. In the following example set to 240px:

<ResponsiveBar
  ........
  margin={{ top: 50, right: 150, bottom: 50, left: 240 }}
  ........
/>

You will also need to update the container style to expand the chart setting the margin to 0 for example :

style={{
    .....
    margin: "0"
}}

Result:

Sandbox

solution 2: tooltip

If you don't want to increase the margin, you can override the format function in axisLeft props and :

• cut the string like New York, Manhatta...
• add a <title> tag to display a tooltip :

axisLeft={{
    format: (v) => {
        return v.length > 10 ? (
            <tspan>
            {v.substring(0, 10) + "..."}
            <title>{v}</title>
            </tspan>
        ) : (
            v
        );
    },
    tickSize: 5,
    tickPadding: 5,
    tickRotation: 0,
    legend: "",
    legendPosition: "middle",
    legendOffset: -40
}}

checkout this post

Sandbox