CODEWITHSUNDEEP
javascriptchartsdimple.js
davidm
davidm

Reputation: 223

Decrease padding between dimple.js chart and axes

I'm creating charts with 7 or fewer points. My page also allows switching between chart types.
All charts are fine, except the area chart has quite a large white space between the sides of the chart and the axis. It simply doesn't look good, especially in difference to the other charts. I would like the chart to occupy the entire chart area. I notice when there are many points, the axis rotates 90° and the chart takes the full space.

How can I specify this behaviour? I have messed around with margins/bounds, but it's brittle.

http://jsbin.com/rihoredoja/1/edit

Upvotes: 1

Views: 460

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

It's because you've used a category axis on x which lays each point out at regular intervals. Your chart would be better suited to a time axis:

var svg = dimple.newSvg("#chartContainer", 600, 400),
    data = [
      { "year": "1998", "val": 123456789 },
      { "year": "1999", "val": 234567890 },
      { "year": "2000", "val": 234567890 },
      { "year": "2001", "val": 123456789 },
      { "year": "2002", "val": 134567890 },
      { "year": "2003", "val": 123456789 },
      { "year": "2004", "val": 234567890 }
    ],
    c = new dimple.chart(svg, data),
    x = c.addTimeAxis("x", "year", "%Y", "%Y"),
    y = c.addMeasureAxis("y", "val"),
    s = c.addSeries(null, dimple.plot.area);

c.draw();

Upvotes: 2

Related Questions