html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

anychart.onDocumentReady(function () {

​

    // create data

    var data = [

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

      {x: "B", 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

    });

  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

      const radiusBreakPoint = longestLabelChars+200;

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

      if (chart.getPixelRadius() < currentContainerWidth*0.1 ) {

            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 > radiusBreakPoint && chart.getPixelRadius() > radiusBreakPoint){

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

            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();

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

});