BCT Sunburst Chart 19 | samples | Documentation

HTMLcopy

 
<label><input onclick="interactivitySelectionMode('drill-down')" type="radio" name="mode">drill-down</label>
<label><input onclick="interactivitySelectionMode('multi-select')" type="radio" name="mode">multi-select</label>
<label><input onclick="interactivitySelectionMode('single-select')" type="radio" name="mode">single-select</label>
<label><input onclick="interactivitySelectionMode('none')" type="radio" name="mode" checked>none</label>
<div id="container"></div>

CSScopy

 
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
label {
    display: inline-block;
    margin: 10px 0 0 10px;
}
#container {
    position: absolute;
    width: 100%;
    top: 35px;
    bottom: 0;
}

JavaScriptAutocompletecopy

​x
 
anychart.onDocumentReady(function () {
​
    // create data
    var data = [
      {name: "Company A", children: [
        {name: "Technical", children: [
          {name: "Team Leaders"},
          {name: "Architects"},
          {name: "Developers"},
          {name: "Testers"}
        ]},
        {name: "Sales", children: [
          {name: "Analysts"},
          {name: "Executives"}
        ]},
        {name: "HR"},
        {name: "Management"}
      ]}
    ];
​
    // create a chart and set the data
    chart = anychart.sunburst(data, "as-tree");
​
    // set the selection mode
    chart.interactivity().selectionMode("none");
​
    // set the chart title
    chart.title().useHtml(true);
    chart.title("Sunburst: Selection Mode = " +
                chart.interactivity().selectionMode() + "<br><br>" +
                "<span style='font-size:12; font-style:italic'>" +
                "Company Structure");
​
​
    // set the container id
    chart.container("container");
​
    // initiate drawing the chart
    chart.draw();
});
​
// set the selection mode
function interactivitySelectionMode(mode) {
  chart.interactivity().selectionMode(mode);
  // update the chart title
  chart.title("Sunburst: Selection Mode = " +
              chart.interactivity().selectionMode() + "<br><br>" +
              "<span style='font-size:12; font-style:italic'>" +
              "Company Structure");
}

Sample meta

AnyChart Documentation