Completed
Last Updated: 10 Aug 2021 15:24 by ADMIN
ADMIN
Danail Vasilev
Created on: 09 Jun 2015 12:42
Category: HtmlChart
Type: Bug Report
0
Labels.Distance property of the client-side object should take effect for insideEnd/center position in RadHtmlChart pie series
For the time being you can use the following workaround:

        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
        <script>
            function pageLoad() {
                var position = 'insideEnd'; // 'center'
                $find("<%=PieChart1.ClientID%>")._chartObject.options.series[0].labels.position = position;
                $find("<%=PieChart1.ClientID%>")._chartObject.options.series[0].labels.distance = -20;
                $find("<%=PieChart1.ClientID%>")._chartObject.redraw();
            }
        </script>
        <telerik:RadHtmlChart runat="server" ID="PieChart1" Transitions="true">
            <PlotArea>
                <Series>
                    <telerik:PieSeries StartAngle="90">
                        <LabelsAppearance DataFormatString="{0} %" />
                        <TooltipsAppearance DataFormatString="{0} %" />
                        <Items>
                            <telerik:SeriesItem BackgroundColor="Purple" Exploded="true" Name="Internet Explorer" YValue="18.3" />
                            <telerik:SeriesItem BackgroundColor="Orange" Exploded="false" Name="Firefox" YValue="35.8" />
                            <telerik:SeriesItem BackgroundColor="Green" Exploded="false" Name="Chrome" YValue="38.3" />
                            <telerik:SeriesItem BackgroundColor="Blue" Exploded="false" Name="Safari" YValue="4.5" />
                            <telerik:SeriesItem BackgroundColor="Red" Exploded="false" Name="Opera" YValue="2.3" />
                        </Items>
                    </telerik:PieSeries>
                </Series>
            </PlotArea>
            <ChartTitle Text="Browser Usage for April 2012">
            </ChartTitle>
        </telerik:RadHtmlChart>
        <script>
            var INSIDE_END = "insideEnd",
                CENTER = "center",
                LEFT = "left",
                RIGHT = "right",
                dataviz = kendo.dataviz,
                Box2D = dataviz.Box2D,
                math = Math;

            kendo.dataviz.PieSegment.fn.reflowLabel = function () {
                var segment = this,
                    sector = segment.sector.clone(),
                    options = segment.options,
                    label = segment.label,
                    labelsOptions = options.labels,
                    labelsDistance = labelsOptions.distance,
                    angle = sector.middle(),
                    lp, x1, labelWidth, labelHeight;

                if (label) {
                    labelHeight = label.box.height();
                    labelWidth = label.box.width();
                    if (labelsOptions.position == CENTER) {
                        sector.r = math.abs((sector.r - labelHeight) / 2) + labelHeight + labelsDistance;
                        lp = sector.point(angle);
                        label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y));
                    } else if (labelsOptions.position == INSIDE_END) {
                        sector.r = sector.r - labelHeight / 2 + labelsDistance;
                        lp = sector.point(angle);
                        label.reflow(Box2D(lp.x, lp.y - labelHeight / 2, lp.x, lp.y));
                    } else {
                        lp = sector.clone().expand(labelsDistance).point(angle);
                        if (lp.x >= sector.c.x) {
                            x1 = lp.x + labelWidth;
                            label.orientation = RIGHT;
                        } else {
                            x1 = lp.x - labelWidth;
                            label.orientation = LEFT;
                        }
                        label.reflow(Box2D(x1, lp.y - labelHeight, lp.x, lp.y));
                    }
                }
            }
        </script>
1 comment
ADMIN
Rumen
Posted on: 10 Aug 2021 15:24
Please use the solution provided as a workaround by Danail.