Pie labels overlap problem

[SenSeo]

How to fix the pie chart overlap problem? . We found the fix for .Net code , but not for javascript with Html5.

http://www.teechart.net/support/viewtop ... 10&t=14601

[Yeray]

Hello,

Here it is a simple example using TeeChart for HTML5/Javascript:

Code: Select all

            var pie1 = Chart1.addSeries(new Tee.Pie());

            pie1.data.values = [300, 5, 2, 3, 4];
            pie1.data.labels = ["first", "second", "third", "fourth", "fifth"];

            pie1.marks.antioverlap = true;

            pie1.marks.drawPolar=function(center,radius,angle,index) {
                var text=this.series.markText(index),
                        px=center.x+Math.cos(angle)*radius,
                        py=center.y+Math.sin(angle)*radius,
                        c=this.chart.ctx;

                this.text=text;
                this.resize();

                var b=this.bounds, p2x, p2y, p=this.position;

                radius+=this.arrow.length;
                p2x=center.x+Math.cos(angle)*radius,
                        p2y=center.y+Math.sin(angle)*radius;

                if (p2x-b.width<0)
                    p2x-=(p2x-b.width-4);

                if (this.antioverlap) {
                    if (!this.positions) {
                        this.positions = [];
                    }

                    var p1 = new Rectangle(p2x, p2y, b.width, b.height);

                    for (var i = 0; i < this.positions.length; i++) {
                        if (i != index) {
                            var p2 = this.positions[i];

                            while (p2 && (p1.contains(new Point(p2.x, p2.y)) ||
                            p1.contains(new Point(p2.x, p2.y + p2.height)) ||
                            p1.contains(new Point(p2.x + p2.width, p2.y)) ||
                            p1.contains(new Point(p2.x + p2.width, p2.y + p2.height)) ) ) {

                                p1.x += 2;
                                p1.y += 2;
                            }
                        }
                    }

                    this.positions[index] = p1;
                    p2x = p1.x;
                    p2y = p1.y;
                }

                if (Math.abs(p2x-center.x)<b.width)
                    p.x=p2x-b.width*0.5;
                else
                    p.x= (p2x<center.x) ? p2x-b.width : p2x;

                if (Math.abs(p2y-center.y)<b.height)
                    p.y=p2y-b.height*0.5;
                else
                    p.y= (p2y<center.y) ? p2y-b.height : p2y;

                c.beginPath();
                c.moveTo(px,py);
                c.lineTo(p2x,p2y);

                if (this.arrow.underline) {
                    if ((p2y<=p.y) || (p2y>=(p.y+b.height))) {
                        c.moveTo(p.x,p2y);
                        c.lineTo(p.x+b.width,p2y);
                    }
                }

                this.arrow.stroke.prepare();
                c.stroke();

                this.draw();
            }

            Chart1.draw();
        }

        function Point(x,y) {
            this.x=x;
            this.y=y;
        }

        function Rectangle(x,y,width,height)
        {
            this.set(x,y,width,height);
        }

        Rectangle.prototype.contains=function(p) {
            return (p.x>=this.x) && (p.x<=(this.x+this.width)) &&
                    (p.y>=this.y) && (p.y<=(this.y+this.height));
        };

        Rectangle.prototype.set=function(x,y,width,height) {
            this.x=x;
            this.y=y;
            this.width=width;
            this.height=height;
        };