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

Cannot disable Pie dataLabels text-ellipsis functionality #6841

Closed
Drumstix42 opened this Issue Jun 15, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@Drumstix42

Drumstix42 commented Jun 15, 2017

If you create a pie chart within a small area, and specifically would like to have dataLabels overflow the chart margin/area, it does not seem currently possible. They are clipped and text-ellipsis is applied.

Expected behaviour

Have a method/property to disable text ellipsis/clipping of text for dataLabels, even if it overflows the chart margin/area.

Actual behaviour

dataLabel.sideOverflow logic prevents this, based on the plotWidth

Example

http://jsfiddle.net/drumstix42/45k96hjf/1/

Suggested change

I'm sure the devs may have a better method, but my personal suggestion is to read from the dataLabels.crop option before applying the sideOverflow logic within seriesTypes.pie.prototype.placeDataLabels

Updated the variable section:

                    var dataLabel = point.dataLabel,
                        series = point.series,
                        options = series.options.dataLabels,
                        dataLabelCrop = pick(options.crop, true),
                        _pos;

Updated the check for sideOverflow functionality:

                            // Shorten data labels with ellipsis if they still overflow
                            // after the pie has reached minSize (#223).
                            if (dataLabelCrop && dataLabel.sideOverflow) {

Maybe there is a better way, like reading the style for textOverflow, but since these are dataLabels and not axis labels, I wasn't sure.

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Jun 19, 2017

Contributor

Hi @Drumstix42
Thank you for the reporting and suggestion.

You can set the useHTML param as a true and declare width of label.

Demo:

Contributor

sebastianbochan commented Jun 19, 2017

Hi @Drumstix42
Thank you for the reporting and suggestion.

You can set the useHTML param as a true and declare width of label.

Demo:

@Drumstix42

This comment has been minimized.

Show comment
Hide comment
@Drumstix42

Drumstix42 Jun 19, 2017

@sebastianbochan

While this does remedy the text ellipsis part, it introduces other issues like the text getting clipped off the edge of the chart. Some may want text to be contained within the chart, but in this instance I was looking for a way to display the text whether it would overflow or not -- I still wanted it visible.

Perhaps my desired result is too specific a request, but I wanted to submit the issue/suggestion either way.

Drumstix42 commented Jun 19, 2017

@sebastianbochan

While this does remedy the text ellipsis part, it introduces other issues like the text getting clipped off the edge of the chart. Some may want text to be contained within the chart, but in this instance I was looking for a way to display the text whether it would overflow or not -- I still wanted it visible.

Perhaps my desired result is too specific a request, but I wanted to submit the issue/suggestion either way.

@sebastianbochan

This comment has been minimized.

Show comment
Hide comment
@sebastianbochan

sebastianbochan Jun 19, 2017

Contributor

Thank you for the feedback. It is also related with the bug: #1581

Contributor

sebastianbochan commented Jun 19, 2017

Thank you for the feedback. It is also related with the bug: #1581

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment