search

nuagenetworks / visualization-framework

Visualization Framework using ReactJS
BSD 3-Clause "New" or "Revised" License
7 stars 25 forks source link

Improve PieChart legend placement #286

Open t00f opened 7 years ago

t00f commented 7 years ago

@curran

Here is the PieChart we discussed this morning with the 2 labels that overlaps.

screen shot 2016-12-01 at 2 51 04 pm

I am thinking about 2 options here:

  1. Compute labels position in order to have them separated
  2. Use the same legend as we have in the kitchenSink

screen shot 2016-12-01 at 2 53 55 pm

curran commented 7 years ago

Yes this is a tricky one. Probably the "best" (but unfortunately most difficult to achieve) solution would be to use a force layout to spread the labels. Here's a good discussion on this topic http://stackoverflow.com/questions/17425268/d3js-automatic-labels-placement-to-avoid-overlaps-force-repulsion

This might be another approach to take:

image

t00f commented 7 years ago

I really like the forced layout ! However, if it's easier, let go with the second option for now and we will improve our graphs later.

nxanil commented 7 years ago

@ronakmshah Verified, ready to close.