Long labels in jqplot

Question

I am dynamically generating some charts using jqplot.

Some of my labels are very long text strings that don't display very nicely - I have printed them at a 30 degree angle along the x axis but the long labels run off to the right of the page.

Is there a way of setting a maximum width for the label (ideally same as it's bar on the chart) and making the text of the label wrap?

score 2 · Answer 1 · answered Jan 07 '13 at 13:37

2

I think you can do it using CSS. Ticks from xaxis are customizable thanks to .jqplot-xaxis-tick{ width: xxx px;} (respectively jqplot-yaxis-tick, jqplot-y2axis-tick...)

answered Jan 07 '13 at 13:37

AnthonyLeGovic

2,335
1
13
22

Yes i've had a play around with that but Ideally I'd like to be able to make the text wrap within the canvas that's created for the ticks. At present the label is just one long line of text. – matt Jan 07 '13 at 16:31

score 0 · Answer 2 · edited May 23 '17 at 11:50

0

I had the same problem some months ago. Here is the question with a nice solution from @boro :

JqPlot : Set a fix height value for the graph area not including y axe labels

edited May 23 '17 at 11:50

Community

1
1

answered Jan 08 '13 at 09:25

sdespont

13,915
9
56
97

score 0 · Answer 3 · edited Feb 13 '16 at 16:24

I resolved with a javascript. You need to execute the script on window.onload, otherwise you can't get DOM elements of the charts.

window.onload = function() {
    var xAxisLabel = document.getElementsByClassName("jqplot-xaxis-tick");
    var i;
    for (i = 0; i < xAxisLabel.length; i++) {
        if(i%2 == 0)
        xAxisLabel[i].style.top = "32px";
    }
};

Basically I change the vertical position of the elements in 2%0 position. Than you need to adjust some css property

.jqplot-xaxis{margin-top:10px; height: 50px !important;}

.jqplot-xaxis is the class of the xaxis label bar.

Long labels in jqplot

3 Answers3