Login Register
Home » Support » Forums » DojoX (dojox.*) » DojoX Support » space around chart

space around chart

Submitted by qx on Thu, 05/15/2008 - 20:45.

The chart I created has quite some empty space around it. Is there a way to reduce it? Also the chart works only by defining pixel values. It showed up very weird if the width is defined in "%". Even though both chart has the same width defined, one is wider than the other one. Any thoughts? thanks!

Here's what I have on the page:

<table>
    <tr>
        <td>
            <div id="chart1" style="width: 400px; height: 300px;" ></div>
        </td>
        <td>
            <div id="chart2" style="width: 400px; height: 300px;" ></div>
        </td>
    </tr>
    <tr>
        <td>
        <div id="grid"></div>
        </td>
    </tr>
</table>
‹ How to use dojox.gfx.Moveable FileInputAuto bug? ›

Two things.

Submitted by ttrenka on Fri, 05/16/2008 - 16:46.

1. The space is probably due to default padding added to table cells. Add the following definition to your CSS:
table td { padding: 0; }

2. Charts do not support using relative values for dimensions; you have to specify the width and height in pixels (as you've observed).

I can add that there is an

Submitted by eugene on Sat, 05/17/2008 - 00:01.

I can add that there is an optional "margins" parameter of the chart. By default it is {l: 10, t: 10, r: 10, b: 10}. This is how you can set it:

var chart1 = new dojox.charting.Chart2D("test1", {
    margins: {l: 40, t: 20, r: 40, b: 20}
});

Or with a widget declaration:

<div dojoType="dojox.charting.widget.Chart2D" style="width: 300px; height: 300px;"
        margins="{l: 40, t: 20, r: 40, b: 20}">
    ...
</div>

Chart takes into account the size of labels on all sides before calculating the plot area. If they are too different you may have visually different plot areas.