Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pie chart can't be repositioned #304

Open
sambostock opened this issue Jul 16, 2015 · 4 comments
Open

Pie chart can't be repositioned #304

sambostock opened this issue Jul 16, 2015 · 4 comments

Comments

@sambostock
Copy link

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
Copy link
Member

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
Copy link
Author

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
Copy link
Author

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants