HumbleSoftware / Flotr2

Graphs and Charts for Canvas in JavaScript.
http://www.humblesoftware.com/flotr2/
MIT License
2.44k stars 526 forks source link

Pie chart can't be repositioned #304

Open sambostock opened 9 years ago

sambostock commented 9 years ago

I am building a pie chart which must be contained inside a rather small box. Due to the size of the box, the legend overlaps with the pie chart.

Instead, I would like the chart on the left, with the legend on the right, with no overlap, roughly as follows:

+---------------+
|    ###    +--+|
|   #####   |  ||
|    ###    +--+|
+---------------+

There appears to be no way to shift the pie chart over, so it isn't in the centre of the container.

I was able to hack something together by lying about the width in the pie options I pass in, but that obviously isn't an ideal solution.

Would it be possible to add a pair of shift options to pass in?

// ...
  pie: {
  show: true,
  explode: 0,
  // ...
  shiftRight: -10  // px by default, but could be % instead or something
  shiftDown: 0
}
// ...
cesutherland commented 9 years ago

Hey, you should be able to position the legend it its own container. That'll let you treat the flotr container as just the pie graph, and position each a bit more flexibly!

Here's an example: http://jsfiddle.net/qju6u6da/

sambostock commented 9 years ago

That doesn't quite work for me unfortunately, as I am using a library that restricts what I can do with the web page. It sits between flotr and the rest of my application, but allows me to pass in options and such. However, I would be unable to easily stick in a legend div.

Also, your link doesn't seem to work. The fiddle results are empty.

sambostock commented 9 years ago

I have implemented a solution to this, and have submitted a pull request #305.

TL;DR: I add two options: horizonalShift, and verticalShift which allow you to move the pie chart around within it's container. Radius calculation is smart and accounts for the position.

cyberjetx commented 6 years ago

I implemented this and it resolved my issue completely. Good fix.