Pie charts draw slice labels in positions causing them to be cut off

[Adam Reece]

There is an issue with pie charts in that the slice text is drawn far too close to the outside edge, and this doesn't appear to be a configurable option.

What can easily happen is the label text overflows outside of the chart slice space. This causes the label to not be fully readable. The problem is also more apparent if the text colour is white against the white page background if the text overflows outside of the chart slices completely.

I've attached 2 pictures showing the issue. One of them uses text size 24 as intended, and another uses text size 14 to try and fit the text in the slices.

The 2 issues are:

1. If the text overflows so that it draws over the page background the text becomes invisible.
   I appreciate that not using white text is an obvious answer, but not acceptable for us due to brand style guidelines.
2. If the text overflows so that it draws into the space of another slice the text becomes cut off.
   There is no good workaround for this. Even at size 14 the 2% on the red slice in the left pie chart can easily fit within the slice space, but the positioning is obviously just wrong.

I don't think the slice label origin is wrong. For example on the left chart in the first image:

• The "19.8%" in the orange slice this is in a great position.
• The "12%" in the grey slice is in an adequate position. Fully readable, but should be moved to the left a bit.
• The "65.7%" in the green slice is in a terrible position. Biggest slice but the label is too far right.

It looks like the issue is that the text alignment is pinned left from the origin rather than centred on the origin. (That should be a a simple option to implement, though I feel that this would make sense to be the default alignment.) Also if the label cannot fit within the bounds of a slice it should not be drawn at all, and let the user read it by a tool tip instead.

[Adam Reece]

I forgot to mention -- Changing the donut size down does not impact the label position, even if the donut mode is disabled completely.

[Daniel LaLiberte]

The issue is most likely that the text size is effectively zero because you are drawing the chart when it is not yet displayed.  That's why it appears to be left aligned rather than centered.

The workaround is to arrange that you only draw the chart when it is displayed.

On Tue, Oct 10, 2017 at 7:22 AM, Adam Reece <ad...@webboxdigital.co.uk> wrote:

I forgot to mention -- Changing the donut size down does not impact the label position, even if the donut mode is disabled completely.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/deef5020-9389-443b-9013-57ae13227d6b%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlaliberte@Google.com   5CC, Cambridge MA

[Adam Reece]

Interestingly the pie charts in question are on different tabs (Bootstrap).

However to fix a different issue what we do is render them on the first visible tab, then once all charts have finished rendering they are shifted onto their intended tabs. I'll have a play around with this, but shifting the chart after it has completed rendering shouldn't cause this?

On Tuesday, 10 October 2017 16:06:33 UTC+1, Daniel LaLiberte wrote:

The issue is most likely that the text size is effectively zero because you are drawing the chart when it is not yet displayed.  That's why it appears to be left aligned rather than centered.

The workaround is to arrange that you only draw the chart when it is displayed.

On Tue, Oct 10, 2017 at 7:22 AM, Adam Reece <ad...@webboxdigital.co.uk> wrote:

I forgot to mention -- Changing the donut size down does not impact the label position, even if the donut mode is disabled completely.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/deef5020-9389-443b-9013-57ae13227d6b%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte

dlali...@Google.com   5CC, Cambridge MA

[Adam Reece]

Likely resolved: Adding a 500ms delay to the jQuery that moves the charts to their intended tab after drawn using a `setTimeout()` seems to have done the trick. There is probably something asynchronous still going on between calling `draw()` on the charts and the main JS wanting to move them to their intended tab.

Thanks for suggesting an avenue for me to explore Daniel. :)