set Labels Inside Pie Chart nomatter what size the page is

[StatementSolutions]

when I placed the label inside the pie chart(Code in bold).  When i decrease the size of the page with the jChartFx  pie chart the label inside the chart gets pushed outside of the pie chart with pointers.  It seem after a certain size of the page where the jChartFx pie chart is on it pushes the label outside of the pie chart.   How can I make the label inside the pie chart stay inside the pie chart no matter what size the page with jChartFx pie chart is?

 

code:

@model ePortfolio.Models.WidgetViewModel
@using System.Web.Script.Serialization;

<div class="widget-head" style="display:block;overflow:no-content;height:10%;width:100%;">
    <div class="widget-title text-center" style="padding-top:10px;"><label>@Model.Widget.Title</label></div>
    <div id="id-refresh-@Model.Widget.Id" class="wdgbkg"> </div>
   
</div>

<div class="widget-body" style="display: inline-block;overflow: visible;height:100%;width:100%;">
    <div class="widget-content" id="ChartDiv" style="display: inline-block; overflow: visible;height:90%;width:100%;"></div>
</div>

<script type="text/javascript" language="javascript">
    var chart@(Model.Widget.Id);

    function LoadPieChart() {

        chart@(Model.Widget.Id) = new cfx.Chart();

        chart@(Model.Widget.Id).setGallery(cfx.Gallery.Pie);
        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setVisible(true);

        var pieAttr = chart@(Model.Widget.Id).getAllSeries().getGalleryAttributes();
        
        pieAttr.setSliceSeparation(50);
        pieAttr.setLabelsInside(true);
        pieAttr.setExplodingMode(cfx.ExplodingMode.First);

        //chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%l %p%%");
        chart@(Model.Widget.Id).getAllSeries().getPointLabels().setFormat("%p%%");

        var str = @Html.Raw(Json.Encode(ViewData["Asset Allocations Chart"]));

        chart@(Model.Widget.Id).getAxisY().getDataFormat().setDecimals(2);
        chart@(Model.Widget.Id).getView3D().setEnabled(true);        

        chart@(Model.Widget.Id).setDataSource(str);

        var data = chart@(Model.Widget.Id).getData();
        data.setSeries(1);
        data.setPoints(10);

        chart@(Model.Widget.Id).getToolTips().setEnabled(true);
        chart@(Model.Widget.Id).getToolTips().setAlignment("near");
        chart@(Model.Widget.Id).getToolTips().setFormat("%l%");

        chart@(Model.Widget.Id).getLegendBox().setVisible(false);
        @*chart@(Model.Widget.Id).getLegendBox().setWidth(175);
        chart@(Model.Widget.Id).getLegendBox().setDock(cfx.DockArea.Right);
        chart@(Model.Widget.Id).getLegendBox().setContentLayout(cfx.ContentLayout.Near);*@

        chart@(Model.Widget.Id).getPlotAreaMargin().setTop(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setBottom(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setRight(0);
        chart@(Model.Widget.Id).getPlotAreaMargin().setLeft(0);

        var divHolder = document.getElementById('ChartDiv');
        chart@(Model.Widget.Id).create(divHolder);
    }

    $(function() {
        LoadPieChart();
    });
    
    function ResizeChart()
    {
        if (chart@(Model.Widget.Id) != null)
            chart@(Model.Widget.Id).doUpdate(true);
    };

</script>
 

[JuanC]

We have a flag to avoid showing the labels inside but we do not have a flag to force the labels to be inside. If we calculate the size of the label and decide it will be bigger than the slice it will be drawn outside.

 

JuanC