CODEWITHSUNDEEP
javascripthighcharts
Hanna
Hanna

Reputation: 10763

Truncating Y-Axis Title in Highcharts v4.1.5

I'm currently having an issue where charts that are smaller in height but have long y-axis titles just start clipping at the edges (top and bottom).

JSFiddle Demo

I've tried using the style option to try and enforce an ellipsis overflow.

yAxis : {
            title: {
                text:"Really really long title text that will go off the chart haha haha and so on and so on",
                style: {
                    textOverflow:'ellipsis',
                    overflow:'hidden'
                }
            }
        },

However, these sorts of things do not work without a maximum width of some sort, so I tried adding width: '100%' (see demo) but it stops short. I'm guessing this has something to do with the fact that it's rotated.

Is there a way to have the title dynamically adjust to the height of the chart and properly truncate itself rather than just slide off into oblivion?

I haven't found anything helpful in the documentation. Also my Google-jitsu hasn't been able to locate any helpful or relevant topics.

Upvotes: 4

Views: 328

Answers (1)

carla
carla

Reputation: 2117

You should try using an absolute width, not a percent:

width: $('#container')[0].clientHeight*0.85,

Or even just:

width: 180,

JSFiddle

Upvotes: 3

Related Questions