CODEWITHSUNDEEP
jquerycsslabeljqplot
Brian
Brian

Reputation: 2800

jqplot axis tick labels with ellipsis

I have an app that creates several charts using jqplot.

Here is an example of one of the charts I'm having trouble with:

Chart Screenshot

As you can see some of the tick labels are quite long and causing the chart to render incorrectly. I am using $.jqplot.CanvasAxisTickRenderer in order to rotate the tick labels as shown so I don't think I can style the tick label text using CSS. Is there a way I can shorten the tick label text using CSS or a formatter.

I'm looking for an effect that simply shortens the text and adds an ellipsis similar to the text-overflow : ellipsis CSS style.

Edit::

Here is a new screenshot after trying the css method.

Chart Screenshot2

As you can see, the absolutely positioned tick labels don't quite line up with the bars they represent and they go outside the parent container. The css method provided in the answer used a 90 degree rotation, but I would prefer the 60 degree rotation, which causes the labels to not line up with their respective bars.

Upvotes: 2

Views: 1437

Answers (2)

Babu
Babu

Reputation: 2598

Finally I was able to achieve this! Based on the @Gyandeep's answer, the exact JS and CSS I used are,

Javascript:

$('div.jqplot-xaxis-tick').each(function (i, obj) {
    $(this).prop('title', ($(this).text()));
    $(this).css('z-index', 999);  // this is important otherwise mouseover won't trigger.
});

CSS:

.jqplot-xaxis .jqplot-xaxis-tick {
    position: absolute;
    white-space: pre;
    max-width: 92px;  // Change it according to your need
    overflow: hidden;
    text-overflow: ellipsis;
}

The JavaScript part needs to be executed after every rendering of chart. It's better to put them right after plotting the chart and may in the AJAX success handler.

Upvotes: 1

Gyandeep
Gyandeep

Reputation: 13538

try this:

Remove the tickRenderer property from your code. for more info JsFiddle Link you can change the max-width according to your need.

.jqplot-xaxis .jqplot-xaxis-tick {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-transform: rotate(90deg);
    padding-left: 53px;
    padding-top: 31px;
}

Upvotes: 1

Related Questions