Sunburst With Custom Level | #GzvMIxG8

HTMLcopy

​x
 
<div style="display: inline-block">
​
</div>
​
<div id="container"></div>

CSScopy

 
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
​
        #container {
            float: center;          
            width: 85%;
            height: 800px;
            margin: 0;
        }
    </style>

JavaScriptAutocompletecopy

 
var chart1, chart2, chart3, chart4;
​
function createChart(container, data, bouds, levels) {
  
  var dataTree = anychart.data.tree(data, 'as-table');
  
  var chart = anychart.sunburst(dataTree);
  
  var palette = anychart.palettes.distinctColors();
  palette.items(['DodgerBlue', 'green', 'darkorange', 'gold', 'green', 'maroon']);
  // Set palette.
  chart.palette(palette);
  // set point fill
  /*chart.fill(function () { //parentColor from level 2
    if(this.parent.parent != null) {
        return this.parent ? anychart.color.darken(this.parentColor, 0.15) : this.mainColor
    }
  });*/
  
  chart.bounds(bouds);
​
  /*
  chart.labels(true);
  //chart.labels().fontFamily("");
    chart.labels().fontSize(18);
    chart.labels().fontWeight(100);
  chart.radius('90%');
  chart.innerRadius('0%');
  */
​
  chart.calculationMode('parent-dependent');
  chart.labels().format('{%Name}');
 
  chart.level(0).enabled(levels[0]);
  chart.level(1).enabled(levels[1]);
  chart.level(2).enabled(levels[2]);
 // chart.level(3).enabled(levels[3]);
  
  chart.leaves().thickness('45%');
  
  var l1 = anychart.standalones.label();
  l1.text("Company Structure");
  l1.width("100%");
  l1.height("100%");
  l1.fontColor("#dd2c00");
  l1.fontSize(12);
  l1.fontWeight(600);
  l1.hAlign("center");
  l1.vAlign("middle");
    
  // set the center content
  chart.center().content(l1);
  
  //chart.leaves().labels().format("<span style='font-size:20px'>{%name}</span>");
  
  chart.leaves().hovered().labels().fontColor('black');
  chart.leaves().normal().labels().fontSize('20px');
  
  chart.level(2).labels().format(function() {
  return "<span style='font-size:20px'>" + this.name + 
         "</span><br/>" + " mln";
    });
  
    //chart.level(1).fill(this.parentColor
                        /*chart.fill(function () { //parentColor from level 2
    if(this.parent.parent != null) {
        return this.parent ? anychart.color.darken(this.parentColor, 0.15) : this.mainColor
    }
  });*/
  var title = chart.title();
  title.enabled(true);
    title.text('Set word-wrap mode. This title contains averyveryveryveryveryverylongword');
    title.wordWrap('break-normal');
  
  // chart.level(0).label(
    chart.labels().format(function() {
    var value0 = this.name.split(" "); 
      var value1 = value0[0] + " ";
      for(var i = 1; i < value0.length; i++) {
        value1 += value0[i];
        i == 1 ? value1 += "\n": null;
      }
    return value1
    });
​
    // chart.level(0).labels().format(function() {}
      
    //var c1 = [255, 0, 0];
    //var mixColor1 = anychart.color.blend(color1, color2, 0.2);
      
    /*chart.level(1).fill(function() {
        return this.color ? anychart.color.blend(color1, color2, 0.2) : this.mainColor
      }*/
  // (Green 90%green-10%grey, Blue 75-25, yellow 50-50, orange 25-75,Red 10-90)
  
  /*chart.fill(function () { //parentColor from level 2
    if(this.parent.parent != null) {
        return this.parent ? anychart.color.darken(this.parentColor, 0.15) : this.mainColor
    }
  });*/
                        
  //chart.level(0).wordWrap();
        //chart.level(0).wordWrap("normal");
        //chart.level(0).wordBreak("keep-all");
                        
  
  chart.container(container).draw();
  
  return chart;
}
​
anychart.onDocumentReady(function() {
  var data = [
    // {
    //   "id": "100",
    //   "name": "Root 2",
    //   "parent": null,
    //   "value": 500
    // },
    //
    // {
    //   "id": "200",
    //   "name": "Root 3",
    //   "parent": null,
    //   "value": 4
    // },
​
    {
      "id": "00",
      "name": "A Resilient Reputation",
      "parent": null,
      "value": 1000,
      // "fill": "DodgerBlue"
    },
​
​
    {
      "parent": "00",
      "id": "01",
      "name": "Leadership",
      "value": 200,
      // "fill": "green"
    }, {
      "parent": "00",
      "id": "02",
      "name": "Performance",
      "value": 200, 
      //"fill": "DarkOrange"   
    }, {
      "parent": "00",
      "id": "03",
      "name": "Consumer",
      "value": 200 , 
      //"fill": "Gold"      
    }, {
      "parent": "00",
      "id": "04",
      "name": "Ethics",
      "value": 200,
      //"fill": "green"
    }, {
      "parent": "00",
      "id": "05",
      "name": "Culture",
      "value": 200,
      //"fill": "maroon"
    },
​
​
​
//   {
//     "parent": "50",
//      "id": "500",
//      "name": "Meat 2",
//      "value": 50
//    },
​
​
    {
      "parent": "01",
      "id": "11",
      "name": "Integrity",
      "value": 40
    }, {
      "parent": "01",
      "id": "12",
      "name": "Diversity",
      "value": 20,
      // "fill": "DodgerBlue"
    }, {
      "parent": "01",
      "id": "13",
      "name": "Board Accountability",
      "value": 45
    }, {
      "parent": "01",
      "id": "14",
      "name": "CEO Accountability",
      "value": 45
    }, {
      "parent": "01",
      "id": "15",
      "name": "Vision",
      "value": 25
    }, {
      "parent": "01",
      "id": "16",
      "name": "Quality Comms",
      "value": 25
    }, 
    
    
    {
      "parent": "02",
      "id": "21",
      "name": "Delivery",
      "value": 50
    }, {
      "parent": "02",
      "id": "22",
      "name": "Meets Expectations",
      "value": 50,
      // "fill": "DodgerBlue"
    }, {
      "parent": "02",
      "id": "23",
      "name": "OutPerforms Market",
      "value": 10,
      // "fill": "green"
    }, 
    {
      "parent": "02",
      "id": "25",
      "name": "Financially Sustainable",
      "value": 50
    }, {
      "parent": "02",
      "id": "26",
      "name": "Strong Growth",
      "value": 40
    }, 
    
    
    {
      "parent": "03",
      "id": "33",
      "name": "Service",
      "value": 40
    }, {
      "parent": "03",
      "id": "34",
      "name": "Good Products",
      "value": 40, 
      // "fill": "DarkOrange"  
    }, {
      "parent": "03",
      "id": "35",
      "name": "Competitive",
      "value": 40,
      // "fill": "DodgerBlue"
    }, {
      "parent": "03",
      "id": "36",
      "name": "Responsive",
      "value": 40,
      // "fill": "green"
    }, {
      "parent": "03",
      "id": "37",
      "name": "Innovative",
      "value": 40
    }, 
    
    
    {
      "parent": "04",
      "id": "41",
      "name": "Leadership",
      "value": 40
    }, {
      "parent": "04",
      "id": "42",
      "name": "Values",
      "value": 40
    }, {
      "parent": "04",
      "id": "43",
      "name": "Integrity",
      "value": 40
    }, {
      "parent": "04",
      "id": "44",
      "name": "CEO Accountability",
      "value": 40,
      // "fill": "DodgerBlue"
    }, {
      "parent": "04",
      "id": "45",
      "name": "Board Accountability",
      "value": 20,
      // "fill": "DodgerBlue"
    }, {
      "parent": "04",
      "id": "46",
      "name": "Commitment",
      "value": 20
    }, 
    
    
    {
      "parent": "05",
      "id": "51",
      "name": "Long Term Investment",
      "value": 40
    }, {
      "parent": "05",
      "id": "52",
      "name": "Upholds Community Standards",
      "value": 40, 
      // "fill": "DarkOrange"  
    }, {
      "parent": "05",
      "id": "53",
      "name": "Environtmentally Responsible",
      "value": 40, 
      // "fill": "DarkOrange"  
    }, {
      "parent": "05",
      "id": "54",
      "name": "Treats Customers Fairly",
      "value": 40
    }, {
      "parent": "05",
      "id": "55",
      "name": "Management Accountability",
      "value": 20
    }, {
      "parent": "05",
      "id": "56",
      "name": "Board Accountability",
      "value": 20
    }
  ];
​
var stage = anychart.graphics.create('container');
chart4 = createChart(stage, data, anychart.math.rect(0, 0, '100%', '100%'), [true,true,true,true]);
​
  $('#' + chart4.calculationMode()).attr('checked', 'checked');
 $('input[name=calculationMode]').on('change', function() {
    chart4.calculationMode($(this).val());
  });
  
  $('#' + chart4.sort()).attr('checked', 'checked');
  $('input[name=sort]').on('change', function() {
    chart4.sort($(this).val());
  });
  var maxDepth = chart4.getStat('treeMaxDepth');
  for (var i = 0; i <= maxDepth; i++) {
    var enabled = chart4.level(i).enabled();
   $('#levels').append('<input type="checkbox" name="levels" id="level ' + i + '" value="' + i + '" ' + (enabled ? 'checked' : '') + '>');
   $('#levels').append('<label for="' + i + '">Level ' + i + '</label><br>');
  }
    
  
  $('input[name=levels]').on('change', function() {
    chart4.level(+$(this).val()).enabled($(this).is(':checked'));
  });
    chart4.level(0).textContent().wordWrap('break-normal');
});
​
​
​

Sample meta

AnyChart Documentation