CODEWITHSUNDEEP
javascripthtmlcssjqplot
k102
k102

Reputation: 8079

x-axis exceeds div width

I'm drawing bar charts using jqplot. If the maximum value of x-axis is not too big everything seems to be fine, like this: enter image description here

but if it's large I'm getting this: enter image description here

x-axis seems to be wider than the div I'm using to draw chart in.

This div has the following style:

.barChart {
    min-width: 735px;
    margin-left: 15px;
    height: 200px;
    color: #333;
    background: white;
    overflow: auto;
    border-top: 2px solid #369;
    border-bottom: 2px solid #369;
    line-height: 14px;
    font-size: 12px;
}

So, how can I make x-axis be not wider than the div with a chart?

Upvotes: 0

Views: 629

Answers (1)

sdespont
sdespont

Reputation: 14025

You could apply a specific chart size. I opened a question on this topic here : JqPlot : Set a fix height value for the graph area not including y axe labels

The solution was to replot with exact chart size like this :

var w = parseInt($(".jqplot-yaxis").width(), 10) + parseInt($("#chart").width(), 10);
var h = parseInt($(".jqplot-title").height(), 10) + parseInt($(".jqplot-xaxis").height(), 10) + parseInt($("#chart").height(), 10);
$("#chart").width(w).height(h);
plot.replot();

Hope it is help

Upvotes: 1

Related Questions