Overlapping labels in x-axis

Skip to first unread message

Nemanja Djorovic

Oct 11, 2018, 11:09:58 AM10/11/18
to jqplot-users
I have this problem https://prnt.sc/l4wshs
Does someone have any idea how to abbreviate text if it's too long, for example with 3 dots at the end? 

Larry Martell

Oct 18, 2018, 3:44:15 PM10/18/18
to jqplot-users
On Thu, Oct 11, 2018 at 11:10 AM Nemanja Djorovic <ndjor...@gmail.com> wrote:
> I have this problem https://prnt.sc/l4wshs
> Does someone have any idea how to abbreviate text if it's too long, for example with 3 dots at the end?

Put the tick label in a variable and test the length and if it's too
long modify it as needed. And set the tick labels in your series with
something like this:

value:value, label:label, showLabel:true, showMark:true

Chetan Sharma

Oct 8, 2019, 1:03:18 AM10/8/19
to jqplot-users
You can mitigate this problem in two steps - 

1) Apply css to the jqplot-xaxis-tick class (returned by jqplot when it renders the chart) with max-width, overflow: hidden and text-overflow: ellipsis (Although, ellipsis might not look good when most of your labels are long)
2) As @Larry said, you can pick each label and check the length, if long (you can set a threshold), set 'title' prop with your label name, so on hover it will show full name. Ex - 

                    var ticks = chart.axes.xaxis._ticks;
                    Put ticks in loop and t = ticks[loop_index]

                    // assuming avg char width is 6 px
                    if (6 * t.label.length > avgTickWidth) {
                        t._elem.prop('title', t.label);
Reply all
Reply to author
0 new messages