0

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?

Jean-François Corbett
  • 37,420
  • 30
  • 139
  • 188
k102
  • 7,861
  • 7
  • 49
  • 69

1 Answers1

1

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

Community
  • 1
  • 1
sdespont
  • 13,915
  • 9
  • 56
  • 97
  • thanks for the feedback, your solution gave me an idea on how to solve this. I've just made a div a bit wider without replotting by `$("#" + el).width($("#" + el).width() + 5);` – k102 Oct 26 '12 at 08:16