[英]How to prevent text truncation in Nivo ticks' axis text (Bar Chart)
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...我的 Y 轴键(或刻度)很长,并且它们被截断但这不是由于图形本身缺乏足够的宽度,使用检查工具,我可以看到为它分配了足够的空间,但是分配给整个图形的框架是不够的......那应该是 ResponsiveBar......
changing the "transform" value for the X-Axis makes the text appear in full (almost), but then the legends are being truncated:更改 X 轴的“转换”值会使文本完整显示(几乎),但随后图例被截断:
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这是一个重现问题的沙箱: 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很想知道是否有办法包装文本,或者通过添加 hover 效果来截断以显示全文
You can set the left
property in margin
of ResponsiveBar
.您可以在ResponsiveBar
的margin
中设置left
属性。 In the following example set to 240px:在以下示例中设置为 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:您还需要更新容器样式以扩展图表,将边距设置为 0,例如:
style={{
.....
margin: "0"
}}
If you don't want to increase the margin, you can override the format
function in axisLeft
props and:如果您不想增加边距,您可以在axisLeft
道具中覆盖format
function 和:
New York, Manhatta...
像New York, Manhatta...
<title>
tag to display a tooltip:添加<title>
标签以显示工具提示: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
}}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.