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 data labels draw outside of the canvas #223
Comments
I'm having this issue as well - I think this should be labeled as a bug rather than an enhancement, as the software doesn't work as expected |
+1 on this issue, could the pie be automatically sized depending on the data labels ?? |
+1 |
+1 here too. My company purchased a license to use this software recently. Fixing this bug would a big help. Can anyone at Highslide chime in with priority/comment on what's going on here? This has been open for a year. |
+1. What randallmorey said - exact same situation. Also, agree with rowanmanning, chopping off things is a bug. |
This bug was opened 2 years ago. Any progress? Piecharts are useless to us if the labels get chopped off. |
Detecting the space needed for data labels is very complicated, and we |
+1 |
I'm also having this problem. |
this should be tagged as a Bug, Enhancement means its working properly but can be improved which isn't the case here obviously. hey @highslide-software , is there going to be any solution for this? can canvas based chart be a possible solution? |
+1 |
+1 I'm having this problem as well. |
me too |
Okay folks, I'll try to come up with a solution. We need som recursive logic that draws data labels, finds out if they're spilling out, then recursively reduce the size of the pie until all labels are in. |
Here's what we did:
Demos:
All comments are appreciated! |
I have a bunch of really long data labels (I can't really make them shorter) that will likely result in the chart being absurdly tiny. Is there a way to make the labels auto wrap to two or three lines if they exceed a certain width? Thanks! |
Yes, I think you can set the dataLabels.style.width to, say, '100px'. |
Thanks very much for this - Is there an estimate for when this will be merged into 'master' or in a release? |
I have a case where I'm displaying multiple pie charts on one page in a a 2x2 formation. Each pie has the same labels but different data. So this solution may generate 4 differently sized pies which is not desirable - is there a way to avoid this and still make the labels fit? Really what I want is the datalabels to be adjusted to fit the chart, not the pie. Thanks in advanced. |
This will be released and merged into master when Highcharts 3.0 is out, hopefully before Christmas. In the case where you have multiple pies in the same chart, you still need to use absolute size. In theory, I think what you describe could be solved by adjusting each pie, then use the smallest pie size for all of them. But I'm not sure how this will work in practice, since the pies are adjusted within the plot area and not relative to each other. |
@highslide-software Note the examples above are not working due to the CDN for highcharts. I have fixed the fiddle examples for anyone interested in them: http://jsfiddle.net/CjgLg/13/ . Grab the resizing handle at the lower right to observe how the autosize is handled. Thanks for the fix! +1 :) |
I've a problem with this auto-sizing feature on donuts. It works fine for single pies, but when used on a 2-series pie (i.e. a donut), both the inner and outer pies are resized independently. In particular, when the inner pie doesn't have spider-like legends and the outer pie does have them, the inner pie is not resized at all and the outer pie is indeed resized to fit into the viewport. This results in a distorted chart (usually the inner pie becomes wider than the outer pie, completely breaking the look and semantics of the chart). Is there any chance that you extend this fix to support donuts too, as a single big pie? Here's an example: http://jsfiddle.net/mmarchetta/34VAT/2/ The pie that seems to be the outer one there (green/blue) is actually the inner pie, and the one with more slices that looks to be the inner one is actually the outer one. Thanks! |
I have the same issue with donut chart, labels are extending out side the chart. |
This case shows how labels are clipped: http://jsfiddle.net/highcharts/7okk430t/ |
I have worked on this and explored logic to add ellipsis to overflowing data labels. It currently works well on static charts, but breaks on dynamically resizing or updating the chart. A live demo can be seen at http://jsfiddle.net/highcharts/7okk430t/1/. .. and here's the diff: diff --git a/js/parts/DataLabels.js b/js/parts/DataLabels.js
index c72fabf..a7222c5 100644
--- a/js/parts/DataLabels.js
+++ b/js/parts/DataLabels.js
@@ -619,13 +619,41 @@ if (seriesTypes.pie) {
* fall within the plot area.
*/
seriesTypes.pie.prototype.placeDataLabels = function () {
+
+ var chart = this.chart,
+ spacing = chart.spacing;
each(this.points, function (point) {
var dataLabel = point.dataLabel,
- _pos;
+ _pos,
+ overflow,
+ ellipsis;
if (dataLabel && point.visible) {
_pos = dataLabel._pos;
if (_pos) {
+
+ if (dataLabel._attr.align === 'right') {
+ overflow = _pos.x - dataLabel.width;
+ if (overflow < spacing[3]) {
+ ellipsis = true;
+ }
+ }
+
+ if (dataLabel._attr.align === 'left') {
+ overflow = chart.chartWidth - _pos.x - dataLabel.width - spacing[1] - spacing[3];
+ if (overflow < spacing[1]) {
+ ellipsis = true;
+ }
+ }
+
+ if (ellipsis) {
+ dataLabel._attr.width = dataLabel.width + overflow;
+ dataLabel.css({
+ width: dataLabel._attr.width + PX,
+ textOverflow: 'ellipsis'
+ });
+ }
+
dataLabel.attr(dataLabel._attr);
dataLabel[dataLabel.moved ? 'animate' : 'attr'](_pos);
dataLabel.moved = true;
diff --git a/js/parts/SvgRenderer.js b/js/parts/SvgRenderer.js
index 1f8b71d..fcc629d 100644
--- a/js/parts/SvgRenderer.js
+++ b/js/parts/SvgRenderer.js
@@ -10,7 +10,7 @@ SVGElement.prototype = {
opacity: 1,
// For labels, these CSS properties are applied to the <text> node directly
textProps: ['fontSize', 'fontWeight', 'fontFamily', 'fontStyle', 'color',
- 'lineHeight', 'width', 'textDecoration', 'textShadow'],
+ 'lineHeight', 'width', 'textDecoration', 'textOverflow', 'textShadow'],
/**
* Initialize the SVG renderer |
I tried the javascript from here (http://jsfiddle.net/CjgLg/13/) and get following: Uncaught TypeError: $(...).resizable is not a function |
The |
Ah... imported these 2 (jquery-ui.css and jquery-ui.min.js) and works fine now, thanks! |
I also have data labels cutting off. +1 for the ellipsis solution to be implemented into high charts. |
Why is this issue closed? It was started in 2011, but I still have this problem in 2017. |
…en pie size was explicitly set.
The pie chart is not taking into account the length of the data label when trying to position it, so they often render partially outside of the canvas. I was able to use margins on the chart to give myself enough padding, but this isn't the way to fix it,
The text was updated successfully, but these errors were encountered: