Highcharts is truncating an x-axis label on a bullet chart. I want to prevent this happening and always show the full text without shortening.
I have tried
.highcharts-container { overflow: visible !important; }
.highcharts-axis-labels text
{
overflow: visible !important;
}
but it seems like the SVG is doing the truncation and ellipsis, not CSS as you can tell by seeing the rendered markup.
<text x="229.0625" style="color: rgb(96, 96, 96); cursor: default; font-size: 9px; padding: 0px; fill: rgb(96, 96, 96);" text-anchor="middle" transform="translate(0,0)" y="32" opacity="1">
<tspan>47…</tspan>
<title>47.5k</title>
</text>
I have tried adding the following property in the javascript:
labels: {
autoRotation: false,
style: {
width: '200px',
'min-width': '200px'
},
But it does not work. How can I prevent highcharts from truncating the label text?
Set proper styles for that labels, see API.
Example:
xAxis: {
labels: {
style: {
textOverflow: 'none'
}
}
}
This didn't work for me, and the reason seems to be that Highcharts renders using <svg> elements, so when an axis label is truncated with an ellipsis, the ellipsis is literally in the text, I assume based on some calculation HC made during its rendering process. Also, in CSS, settings
text-overflow
to "none" won't stop truncating the text, only remove the ellipsis. It'soverflow
that needs to be set to "visible".Here is some insight into the issue, though there is no simple solution: github.com/highcharts/highcharts/issues/3941