BCT Circle Packing Chart 07 | samples | Documentation

HTMLcopy

 
<button onclick="switchMode()">Switch labels display mode</button>    
<div id="container"></div>

CSScopy

 
html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

JavaScriptAutocompletecopy

​x
 
var chart;
anychart.onDocumentReady(function () {
​
    // create data
    var data = [
      {name:   "Root 1", children: [
        {name: "Leaf 1",        value: 150000000},
        {name: "Leaf 2",      value:  150000000},
        {name: "Leaf 3",     value:   150000000}
      ]},
    {name:   "Root 2", children: [
        {name: "Leaf 1",        value: 150000000},
        {name: "Leaf 2",      value:  150000000},
        {name: "Leaf 3",     value:   150000000}
      ]}      
    ];
​
    // create a chart and set the data
    chart = anychart.circlePacking(data, "as-tree");
​
    // set the chart title
    chart.title().useHtml(true);
    chart.title("Circle Packing: Labels and Tooltips (Labels mode)");
​
    // set the container id
    chart.container("container");
​
    // initiate drawing the chart
    chart.draw();
});
​
// circle packing chart labels switching function
function switchMode(){
  if (chart.labelsMode()=='leaves') {
    chart.labelsMode('roots');
  } else {
    chart.labelsMode('leaves');
  }
}

Sample meta

AnyChart Documentation