html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

      {x: "A long label", value: 637166},

      {x: "B one more label, but much longer than previous", value: 721630},

      {x: "C", value: 148662},

      {x: "D", value: 78662},

      {x: "E", value: 90000}

    ];

​

    // create a chart and set the data

    var chart = anychart.pie(data);

​

    // create an iterator variable

    let longestLabelChars = 0

    // set the position of labels

    chart.labels().position("outside").format(function(e){

      if(longestLabelChars < e.x.length){

        longestLabelChars = e.x.length

      }

      return e.x

    });

​

​

    //show labels length before a chart was drawn

    console.log(`Before draw - ${longestLabelChars}`)

    chart.radius("100%");

​

    // configure connectors

    chart.connectorStroke({color: "#595959", thickness: 2, dash:"2 2"});

    //create Resize observer

    const resizeObserver = new ResizeObserver((entries) => {

      const currentContainerWidth = entries[0].contentRect.width;

      //set up your radius break point in pixels

      //assuming that average char width is 7 px

      const maxLabelLength = longestLabelChars*7;

      //create a break point variable, which is 3 legths of labels + additional space

      const breakPoint = (maxLabelLength*2) + 50;

      //trim labels based on charts width

      chart.labels().maxLength(currentContainerWidth/longestLabelChars)

      // set labels position to "inside" when chart is too small

      if (chart.getPixelRadius() < 10 && currentContainerWidth < breakPoint) {

            console.log("switch labels position to INSIDE")

            chart.labels().position("inside")

            chart.title("Pie Chart: Inner Labels")

        }

      // set labels position to "outside" when chart is expanding

      else if(currentContainerWidth > breakPoint){

            console.log("switch labels position to OUTSIDE", maxLabelLength)

            chart.labels().position("outside")

            chart.title("Pie Chart: Outer Labels")

        }

    });

    //observe a container resize

    resizeObserver.observe(document.getElementById("container"));

​

    // disable the legend

    chart.legend(false);

​

    // set the chart title

    chart.title("change container size to change labels position");

​

    // set the container id

    chart.container("container");

​

    // initiate drawing the chart

    chart.draw();

    chart.labels().maxLength(longestLabelChars);

    console.log(`After draw - ${longestLabelChars}`)

});