Animate startAngle in anychart sunburst chart

How can we animate the startangle in Anychart sunburst chart. Below is my code:

this.chart = anychart.sunburst(data, "as-tree");

this.chart.container(this.container.nativeElement);

this.chartDraw();

this.pointSelectChart();

this.pointHoverChart();

this.mouseDownChart();

this.chart.level(2).labels().position("circular");
this.chart.level(2).labels().hAlign("center");
this.chart.labels().useHtml(true);
this.chart
  .level(2)
  .labels()
  .format(
    "<span style='font-size:14px; word-break: break-word'>{%name}</span>"
  );
this.chart
  .level(1)
  .labels()
  .format("<span style='font-size:20px'>{%name}</span>");
this.chart
  .level(0)
  .labels()
  .format(
    "<span style='font-size:18px; text-transform: uppercase;'>SUSTAINABILITY</span><br><span style='font-size:18px; ; text-transform: uppercase;'>AT THE LME</span>"
  );
this.chart.interactivity().selectionMode("single-select");
this.chart.normal();
this.chart.startAngle(320);
this.chart.contextMenu(false);
this.chart.draw();
this.generateDisclosureTable(
  data[0].children[0].name,
  "theme",
  data[0].children[0].fill,
  data[0].children[0].backgroundColor,
  data[0].children[0].fontColor
);

onclick of leaves I am trying to animate the startAngle.

Anychart doesn't seem to provide any animate function on sunburst chart. How could we go about to achieve this.

Solution

The sunburst chart has no animations out of the box.

To create an effect of an animation, you may utilize custom functions with the startAngle method. You can find more information about the Sunburst startAngle in the documentation.

We have prepared 2 demos with different use cases:

The first demo shows how to dynamically change an angle of a chart by dragging the slider.

//get slider DOM element
var slider = document.getElementById("startAngleSlider")
...
...
//change chart start angle by slider
slider.addEventListener("input", function(e){
chart.startAngle(slider.value)
})

The second demo shows how to dynamically change an angle of a chart by clicking.

  //update a start angle
  var updateStartAngle = function (endAngle)
   {    
  //set timeout for updating start angle
  setTimeout(function ()
  {
    //check if there is a need to update an angle
    if (endAngle > 0)
    {
        //update the chart by 5 angles
        chart.startAngle(chart.startAngle() + 5);
        //recursive call of an update function with 5 angles less goal
        updateStartAngle(endAngle-5);
    }
  }, 5)}

 chart.listen("mouseDown", function(){
 updateStartAngle(90);
 })

However, charts with massive data sets may cause performance issues with this approach.