Container is not set or can not be properly recognized. Use container() method to set it

Question

I'm following the example from here: https://codesandbox.io/s/charming-meadow-476fso?file=/src/SunburstAnyChart.js:5181-6356

but in my setup I keep getting the error Container is not set or can not be properly recognized. Use container() method to set it. in the console. What could be the cause? AnyChart just keeps creating a div by itself with <div id="ac-chart-container"> ignoring the reference id to the enclosing div that I am passing ... what could be wrong?

quoting it for convenience:

class SunburstAnyChart extends React.Component {
  constructor(props) {
    super(props);
    // makes tree from the data for the sample
    let dataTree = anychart.data.tree(data, "as-table");

    let chart = anychart.sunburst(dataTree);

    // set calculation mode
    chart.calculationMode("parent-independent");

    // set chart title
    chart.title("Europe Population");

    // set custom palette
    chart.palette(["#0288d1", "#d4e157", "#ff6e40", "#f8bbd0"]);

    // format chart labels
    chart.labels().format("{%Name}\n{%Value}{scale:(1000000)(1)|( mln)}");

    // format chart tooltip
    chart.tooltip().format("Population: {%Value}{scale:(1000000)(1)|( mln)}");

    // the fill specified in the data has priority
    // set point fill
    chart.fill(function () {
      return anychart.color.darken(this.parentColor, 0.15);
    });

    // set container id for the chart
    chart.container(props.containerId);

    // initiate chart drawing
    this.state = {
      chart: chart.draw()
    };
  }
  render() {
    return (
      <div id={this.props.containerId}>
        <AnyChart instance={this.state.chart} title="" />
      </div>
    );
  }
}

export default SunburstAnyChart;

Answer 1

I found the solution. The link to the forked codesandbox is here.

https://codesandbox.io/s/jovial-nash-zpxr8y

Basically, after reading the documentation, it is evident that there should be a div with id=container.

However,

    render() {
        return (
          <div id="container">
            <AnyChart instance={this.state.chart} title="" />
          </div>
        );
      }

did not work. So, what I realized after going through some samples is that, we need

 constructor() {
    super();
  
    let dataTree = anychart.data.tree(data, "as-table");
    let chart = anychart.sunburst(dataTree);

    // TODO: ADD THIS LINE
    let stage = anychart.graphics.create("container");

    chart.calculationMode("parent-independent");
    chart.title("Europe Population");
    chart.palette(["#0288d1", "#d4e157", "#ff6e40", "#f8bbd0"]);
    chart.labels().format("{%Name}\n{%Value}{scale:(1000000)(1)|( mln)}");
    chart.tooltip().format("Population: {%Value}{scale:(1000000)(1)|( mln)}");
    chart.fill(function () {
      return anychart.color.darken(this.parentColor, 0.15);
    });

    // TODO: ADD THIS LINE
    chart.container(stage);   

    // initiate chart drawing
    this.state = {
      chart: chart.draw()
    };
  }
  render() {
    return (
      <div>
        <AnyChart instance={this.state.chart} title="title" />
      </div>
    );
  }

The name inside can by any string

let stage = anychart.graphics.create("dog");