Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container-fluid">
  <div class="row mt-2">
    <div class="col-4">
      <div class="demo-card">
        <div class="theme-control">
          <h5 class="mb-1">Themes</h5>
            <button id="fusion-theme-switcher" class="btn btn-sm btn-selected" onClick="handler.switchTheme('fusion')">Fusion</button>
            <button id="gammel-theme-switcher" class="btn btn-sm" onClick="handler.switchTheme('gammel')">Gammel</button>
            <button id="candy-theme-switcher" class="btn btn-sm" onClick="handler.switchTheme('candy')">Candy</button>
            <button id="umber-theme-switcher" class="btn btn-sm" onClick="handler.switchTheme('umber')">Umber</button>
        </div>
        <div class="node-label mt-2">
          <h5 class="mb-1">Center Angle</h5>
          <button id="0deg-centerangle-btn" class="btn btn-sm btn-selected" onClick="handler.centerAngle(0)">0°</button>
          <button id="90deg-centerangle-btn" class="btn btn-sm" onClick="handler.centerAngle(90)">90°</button>
          <button id="180deg-centerangle-btn" class="btn btn-sm" onClick="handler.centerAngle(180)">180°</button>
          <button id="270deg-centerangle-btn" class="btn btn-sm" onClick="handler.centerAngle(270)">270°</button>
          <button id="360deg-centerangle-btn" class="btn btn-sm" onClick="handler.centerAngle(360)">360°</button>
        </div>
        <div class="node-label mt-2">
          <h5 class="mb-1">Total Angle</h5>
          <button id="60deg-totalangle-btn" class="btn btn-sm" onClick="handler.totalAngle(60)">60°</button>
          <button id="90deg-totalangle-btn" class="btn btn-sm" onClick="handler.totalAngle(90)">90°</button>
          <button id="180deg-totalangle-btn" class="btn btn-sm" onClick="handler.totalAngle(180)">180°</button>
          <button id="270deg-totalangle-btn" class="btn btn-sm" onClick="handler.totalAngle(270)">270°</button>
          <button id="360deg-totalangle-btn" class="btn btn-sm btn-selected" onClick="handler.totalAngle(360)">360°</button>
        </div>
        <div class="hover-control mt-2">
          <h5 class="mb-1">Hover Effect</h5>
          <button id="enable-hover-btn" class="btn btn-sm" onClick="handler.hoverEffect(1)">Enable</button>
          <button id="disable-hover-btn" class="btn btn-sm btn-selected" onClick="handler.hoverEffect(0)">Disable</button>
        </div>
      </div>
    </div>
    <div class="col-8">
      <div id="chart-container"></div>
    </div>
  </div>
</div>
              
            
!

CSS

              
                #chart-container {
  width: 100%;
  height: 500px;
}

.demo-card {
  margin: 10px;
  padding: 10px;
  border-radius: 3px;
  background: #b3b3b3;
  width: 100%;
}

.btn-sm:hover {
  background: #212344;
  color: #FFFFFF;
}

.btn-selected {
  background: #212344;
  color: #FFFFFF;
}
              
            
!

JS

              
                const dataSource = {
  chart: {
    caption: "Flare Data Store Segregation",
    subCaption: "Click on the segments to Drill-down",
    showPlotBorder: "1",
    theme: "fusion",
    unfocussedAlpha: 40
  },
  data: [
    {
      id: 1,
      name: "analytics",
      value: 1
    },
    {
      id: 2,
      parent: 1,
      name: "cluster",
      value: 1
    },
    {
      id: 3,
      parent: 2,
      name: "AgglomerativeCluster",
      value: 3938
    },
    {
      id: 4,
      parent: 2,
      name: "CommunityStructure",
      value: 3812
    },
    {
      id: 5,
      parent: 2,
      name: "HierarchicalCluster",
      value: 6714
    },
    {
      id: 6,
      parent: 2,
      name: "MergeEdge",
      value: 743
    },
    {
      id: 7,
      parent: 1,
      name: "graph",
      value: 1
    },
    {
      id: 8,
      parent: 7,
      name: "BetweennessCentrality",
      value: 3534
    },
    {
      id: 9,
      parent: 7,
      name: "LinkDistance",
      value: 5731
    },
    {
      id: 10,
      parent: 7,
      name: "MaxFlowMinCut",
      value: 7840
    },
    {
      id: 11,
      parent: 7,
      name: "ShortestPaths",
      value: 5914
    },
    {
      id: 12,
      parent: 7,
      name: "SpanningTree",
      value: 3416
    },
    {
      id: 13,
      parent: 1,
      name: "optimization",
      value: 1
    },
    {
      id: 14,
      parent: 13,
      name: "AspectRatioBanker",
      value: 7074
    },
    {
      id: 15,
      name: "animate",
      value: 1
    },
    {
      id: 16,
      parent: 15,
      name: "Easing",
      value: 17010
    },
    {
      id: 17,
      parent: 15,
      name: "FunctionSequence",
      value: 5842
    },
    {
      id: 18,
      parent: 15,
      name: "interpolate",
      value: 1
    },
    {
      id: 19,
      parent: 18,
      name: "ArrayInterpolator",
      value: 1983
    },
    {
      id: 20,
      parent: 18,
      name: "ColorInterpolator",
      value: 2047
    },
    {
      id: 21,
      parent: 18,
      name: "DateInterpolator",
      value: 1375
    },
    {
      id: 22,
      parent: 18,
      name: "Interpolator",
      value: 8746
    },
    {
      id: 23,
      parent: 18,
      name: "MatrixInterpolator",
      value: 2202
    },
    {
      id: 24,
      parent: 18,
      name: "NumberInterpolator",
      value: 1382
    },
    {
      id: 25,
      parent: 18,
      name: "ObjectInterpolator",
      value: 1629
    },
    {
      id: 26,
      parent: 18,
      name: "PointInterpolator",
      value: 1675
    },
    {
      id: 27,
      parent: 18,
      name: "RectangleInterpolator",
      value: 2042
    },
    {
      id: 28,
      parent: 15,
      name: "ISchedulable",
      value: 1041
    },
    {
      id: 29,
      parent: 15,
      name: "Parallel",
      value: 5176
    },
    {
      id: 30,
      parent: 15,
      name: "Pause",
      value: 449
    },
    {
      id: 31,
      parent: 15,
      name: "Scheduler",
      value: 5593
    },
    {
      id: 32,
      parent: 15,
      name: "Sequence",
      value: 5534
    },
    {
      id: 33,
      parent: 15,
      name: "Transition",
      value: 9201
    },
    {
      id: 34,
      parent: 15,
      name: "Transitioner",
      value: 19975
    },
    {
      id: 35,
      parent: 15,
      name: "TransitionEvent",
      value: 1116
    },
    {
      id: 36,
      parent: 15,
      name: "Tween",
      value: 6006
    },
    {
      id: 37,
      name: "data",
      value: 1
    },
    {
      id: 38,
      parent: 37,
      name: "converters",
      value: 1
    },
    {
      id: 39,
      parent: 38,
      name: "Converters",
      value: 721
    },
    {
      id: 40,
      parent: 38,
      name: "DelimitedTextConverter",
      value: 4294
    },
    {
      id: 41,
      parent: 38,
      name: "GraphMLConverter",
      value: 9800
    },
    {
      id: 42,
      parent: 38,
      name: "IDataConverter",
      value: 1314
    },
    {
      id: 43,
      parent: 38,
      name: "JSONConverter",
      value: 2220
    },
    {
      id: 44,
      parent: 37,
      name: "DataField",
      value: 1759
    },
    {
      id: 45,
      parent: 37,
      name: "DataSchema",
      value: 2165
    },
    {
      id: 46,
      parent: 37,
      name: "DataSet",
      value: 586
    },
    {
      id: 47,
      parent: 37,
      name: "DataSource",
      value: 3331
    },
    {
      id: 48,
      parent: 37,
      name: "DataTable",
      value: 772
    },
    {
      id: 49,
      parent: 37,
      name: "DataUtil",
      value: 3322
    },
    {
      id: 50,
      name: "display",
      value: 1
    },
    {
      id: 51,
      parent: 50,
      name: "DirtySprite",
      value: 8833
    },
    {
      id: 52,
      parent: 50,
      name: "LineSprite",
      value: 1732
    },
    {
      id: 53,
      parent: 50,
      name: "RectSprite",
      value: 3623
    },
    {
      id: 54,
      parent: 50,
      name: "TextSprite",
      value: 10066
    },
    {
      id: 55,
      name: "flex",
      value: 1
    },
    {
      id: 56,
      parent: 55,
      name: "FlareVis",
      value: 4116
    },
    {
      id: 57,
      name: "physics",
      value: 1
    },
    {
      id: 58,
      parent: 57,
      name: "DragForce",
      value: 1082
    },
    {
      id: 59,
      parent: 57,
      name: "GravityForce",
      value: 1336
    },
    {
      id: 60,
      parent: 57,
      name: "IForce",
      value: 319
    },
    {
      id: 61,
      parent: 57,
      name: "NBodyForce",
      value: 10498
    },
    {
      id: 62,
      parent: 57,
      name: "Particle",
      value: 2822
    },
    {
      id: 63,
      parent: 57,
      name: "Simulation",
      value: 9983
    },
    {
      id: 64,
      parent: 57,
      name: "Spring",
      value: 2213
    },
    {
      id: 65,
      parent: 57,
      name: "SpringForce",
      value: 1681
    },
    {
      id: 66,
      name: "query",
      value: 1
    },
    {
      id: 67,
      parent: 66,
      name: "AggregateExpression",
      value: 1616
    },
    {
      id: 68,
      parent: 66,
      name: "And",
      value: 1027
    },
    {
      id: 69,
      parent: 66,
      name: "Arithmetic",
      value: 3891
    },
    {
      id: 70,
      parent: 66,
      name: "Average",
      value: 891
    },
    {
      id: 71,
      parent: 66,
      name: "BinaryExpression",
      value: 2893
    },
    {
      id: 72,
      parent: 66,
      name: "Comparison",
      value: 5103
    },
    {
      id: 73,
      parent: 66,
      name: "CompositeExpression",
      value: 3677
    },
    {
      id: 74,
      parent: 66,
      name: "Count",
      value: 781
    },
    {
      id: 75,
      parent: 66,
      name: "DateUtil",
      value: 4141
    },
    {
      id: 76,
      parent: 66,
      name: "Distinct",
      value: 933
    },
    {
      id: 77,
      parent: 66,
      name: "Expression",
      value: 5130
    },
    {
      id: 78,
      parent: 66,
      name: "ExpressionIterator",
      value: 3617
    },
    {
      id: 79,
      parent: 66,
      name: "Fn",
      value: 3240
    },
    {
      id: 80,
      parent: 66,
      name: "If",
      value: 2732
    },
    {
      id: 81,
      parent: 66,
      name: "IsA",
      value: 2039
    },
    {
      id: 82,
      parent: 66,
      name: "Literal",
      value: 1214
    },
    {
      id: 83,
      parent: 66,
      name: "Match",
      value: 3748
    },
    {
      id: 84,
      parent: 66,
      name: "Maximum",
      value: 843
    },
    {
      id: 85,
      parent: 66,
      name: "methods",
      value: 1
    },
    {
      id: 86,
      parent: 85,
      name: "add",
      value: 593
    },
    {
      id: 87,
      parent: 85,
      name: "and",
      value: 330
    },
    {
      id: 88,
      parent: 85,
      name: "average",
      value: 287
    },
    {
      id: 89,
      parent: 85,
      name: "count",
      value: 277
    },
    {
      id: 90,
      parent: 85,
      name: "distinct",
      value: 292
    },
    {
      id: 91,
      parent: 85,
      name: "div",
      value: 595
    },
    {
      id: 92,
      parent: 85,
      name: "eq",
      value: 594
    },
    {
      id: 93,
      parent: 85,
      name: "fn",
      value: 460
    },
    {
      id: 94,
      parent: 85,
      name: "gt",
      value: 603
    },
    {
      id: 95,
      parent: 85,
      name: "gte",
      value: 625
    },
    {
      id: 96,
      parent: 85,
      name: "iff",
      value: 748
    },
    {
      id: 97,
      parent: 85,
      name: "isa",
      value: 461
    },
    {
      id: 98,
      parent: 85,
      name: "lt",
      value: 597
    },
    {
      id: 99,
      parent: 85,
      name: "lte",
      value: 619
    },
    {
      id: 100,
      parent: 85,
      name: "max",
      value: 283
    },
    {
      id: 101,
      parent: 85,
      name: "min",
      value: 283
    },
    {
      id: 102,
      parent: 85,
      name: "mod",
      value: 591
    },
    {
      id: 103,
      parent: 85,
      name: "mul",
      value: 603
    },
    {
      id: 104,
      parent: 85,
      name: "neq",
      value: 599
    },
    {
      id: 105,
      parent: 85,
      name: "not",
      value: 386
    },
    {
      id: 106,
      parent: 85,
      name: "or",
      value: 323
    },
    {
      id: 107,
      parent: 85,
      name: "orderby",
      value: 307
    },
    {
      id: 108,
      parent: 85,
      name: "range",
      value: 772
    },
    {
      id: 109,
      parent: 85,
      name: "select",
      value: 296
    },
    {
      id: 110,
      parent: 85,
      name: "stddev",
      value: 363
    },
    {
      id: 111,
      parent: 85,
      name: "sub",
      value: 600
    },
    {
      id: 112,
      parent: 85,
      name: "sum",
      value: 280
    },
    {
      id: 113,
      parent: 85,
      name: "update",
      value: 307
    },
    {
      id: 114,
      parent: 85,
      name: "variance",
      value: 335
    },
    {
      id: 115,
      parent: 85,
      name: "where",
      value: 299
    },
    {
      id: 116,
      parent: 85,
      name: "xor",
      value: 354
    },
    {
      id: 117,
      parent: 85,
      name: "_",
      value: 264
    },
    {
      id: 118,
      parent: 66,
      name: "Minimum",
      value: 843
    },
    {
      id: 119,
      parent: 66,
      name: "Not",
      value: 1554
    },
    {
      id: 120,
      parent: 66,
      name: "Or",
      value: 970
    },
    {
      id: 121,
      parent: 66,
      name: "Query",
      value: 13896
    },
    {
      id: 122,
      parent: 66,
      name: "Range",
      value: 1594
    },
    {
      id: 123,
      parent: 66,
      name: "StringUtil",
      value: 4130
    },
    {
      id: 124,
      parent: 66,
      name: "Sum",
      value: 791
    },
    {
      id: 125,
      parent: 66,
      name: "Variable",
      value: 1124
    },
    {
      id: 126,
      parent: 66,
      name: "Variance",
      value: 1876
    },
    {
      id: 127,
      parent: 66,
      name: "Xor",
      value: 1101
    },
    {
      id: 128,
      name: "scale",
      value: 1
    },
    {
      id: 129,
      parent: 128,
      name: "IScaleMap",
      value: 2105
    },
    {
      id: 130,
      parent: 128,
      name: "LinearScale",
      value: 1316
    },
    {
      id: 131,
      parent: 128,
      name: "LogScale",
      value: 3151
    },
    {
      id: 132,
      parent: 128,
      name: "OrdinalScale",
      value: 3770
    },
    {
      id: 133,
      parent: 128,
      name: "QuantileScale",
      value: 2435
    },
    {
      id: 134,
      parent: 128,
      name: "QuantitativeScale",
      value: 4839
    },
    {
      id: 135,
      parent: 128,
      name: "RootScale",
      value: 1756
    },
    {
      id: 136,
      parent: 128,
      name: "Scale",
      value: 4268
    },
    {
      id: 137,
      parent: 128,
      name: "ScaleType",
      value: 1821
    },
    {
      id: 138,
      parent: 128,
      name: "TimeScale",
      value: 5833
    },
    {
      id: 139,
      name: "util",
      value: 1
    },
    {
      id: 140,
      parent: 139,
      name: "Arrays",
      value: 8258
    },
    {
      id: 141,
      parent: 139,
      name: "Colors",
      value: 10001
    },
    {
      id: 142,
      parent: 139,
      name: "Dates",
      value: 8217
    },
    {
      id: 143,
      parent: 139,
      name: "Displays",
      value: 12555
    },
    {
      id: 144,
      parent: 139,
      name: "Filter",
      value: 2324
    },
    {
      id: 145,
      parent: 139,
      name: "Geometry",
      value: 10993
    },
    {
      id: 146,
      parent: 139,
      name: "heap",
      value: 1
    },
    {
      id: 147,
      parent: 146,
      name: "FibonacciHeap",
      value: 9354
    },
    {
      id: 148,
      parent: 146,
      name: "HeapNode",
      value: 1233
    },
    {
      id: 149,
      parent: 139,
      name: "IEvaluable",
      value: 335
    },
    {
      id: 150,
      parent: 139,
      name: "IPredicate",
      value: 383
    },
    {
      id: 151,
      parent: 139,
      name: "IValueProxy",
      value: 874
    },
    {
      id: 152,
      parent: 139,
      name: "math",
      value: 1
    },
    {
      id: 153,
      parent: 152,
      name: "DenseMatrix",
      value: 3165
    },
    {
      id: 154,
      parent: 152,
      name: "IMatrix",
      value: 2815
    },
    {
      id: 155,
      parent: 152,
      name: "SparseMatrix",
      value: 3366
    },
    {
      id: 156,
      parent: 139,
      name: "Maths",
      value: 17705
    },
    {
      id: 157,
      parent: 139,
      name: "Orientation",
      value: 1486
    },
    {
      id: 158,
      parent: 139,
      name: "palette",
      value: 1
    },
    {
      id: 159,
      parent: 158,
      name: "ColorPalette",
      value: 6367
    },
    {
      id: 160,
      parent: 158,
      name: "Palette",
      value: 1229
    },
    {
      id: 161,
      parent: 158,
      name: "ShapePalette",
      value: 2059
    },
    {
      id: 162,
      parent: 158,
      name: "SizePalette",
      value: 2291
    },
    {
      id: 163,
      parent: 139,
      name: "Property",
      value: 5559
    },
    {
      id: 164,
      parent: 139,
      name: "Shapes",
      value: 19118
    },
    {
      id: 165,
      parent: 139,
      name: "Sort",
      value: 6887
    },
    {
      id: 166,
      parent: 139,
      name: "Stats",
      value: 6557
    },
    {
      id: 167,
      parent: 139,
      name: "Strings",
      value: 22026
    },
    {
      id: 168,
      name: "vis",
      value: 1
    },
    {
      id: 169,
      parent: 168,
      name: "axis",
      value: 1
    },
    {
      id: 170,
      parent: 169,
      name: "Axes",
      value: 1302
    },
    {
      id: 171,
      parent: 169,
      name: "Axis",
      value: 24593
    },
    {
      id: 172,
      parent: 169,
      name: "AxisGridLine",
      value: 652
    },
    {
      id: 173,
      parent: 169,
      name: "AxisLabel",
      value: 636
    },
    {
      id: 174,
      parent: 169,
      name: "CartesianAxes",
      value: 6703
    },
    {
      id: 175,
      parent: 168,
      name: "controls",
      value: 1
    },
    {
      id: 176,
      parent: 175,
      name: "AnchorControl",
      value: 2138
    },
    {
      id: 177,
      parent: 175,
      name: "ClickControl",
      value: 3824
    },
    {
      id: 178,
      parent: 175,
      name: "Control",
      value: 1353
    },
    {
      id: 179,
      parent: 175,
      name: "ControlList",
      value: 4665
    },
    {
      id: 180,
      parent: 175,
      name: "DragControl",
      value: 2649
    },
    {
      id: 181,
      parent: 175,
      name: "ExpandControl",
      value: 2832
    },
    {
      id: 182,
      parent: 175,
      name: "HoverControl",
      value: 4896
    },
    {
      id: 183,
      parent: 175,
      name: "IControl",
      value: 763
    },
    {
      id: 184,
      parent: 175,
      name: "PanZoomControl",
      value: 5222
    },
    {
      id: 185,
      parent: 175,
      name: "SelectionControl",
      value: 7862
    },
    {
      id: 186,
      parent: 175,
      name: "TooltipControl",
      value: 8435
    },
    {
      id: 187,
      parent: 168,
      name: "data",
      value: 1
    },
    {
      id: 188,
      parent: 187,
      name: "Data",
      value: 20544
    },
    {
      id: 189,
      parent: 187,
      name: "DataList",
      value: 19788
    },
    {
      id: 190,
      parent: 187,
      name: "DataSprite",
      value: 10349
    },
    {
      id: 191,
      parent: 187,
      name: "EdgeSprite",
      value: 3301
    },
    {
      id: 192,
      parent: 187,
      name: "NodeSprite",
      value: 19382
    },
    {
      id: 193,
      parent: 187,
      name: "render",
      value: 1
    },
    {
      id: 194,
      parent: 193,
      name: "ArrowType",
      value: 698
    },
    {
      id: 195,
      parent: 193,
      name: "EdgeRenderer",
      value: 5569
    },
    {
      id: 196,
      parent: 193,
      name: "IRenderer",
      value: 353
    },
    {
      id: 197,
      parent: 193,
      name: "ShapeRenderer",
      value: 2247
    },
    {
      id: 198,
      parent: 187,
      name: "ScaleBinding",
      value: 11275
    },
    {
      id: 199,
      parent: 187,
      name: "Tree",
      value: 7147
    },
    {
      id: 200,
      parent: 187,
      name: "TreeBuilder",
      value: 9930
    },
    {
      id: 201,
      parent: 168,
      name: "events",
      value: 1
    },
    {
      id: 202,
      parent: 201,
      name: "DataEvent",
      value: 2313
    },
    {
      id: 203,
      parent: 201,
      name: "SelectionEvent",
      value: 1880
    },
    {
      id: 204,
      parent: 201,
      name: "TooltipEvent",
      value: 1701
    },
    {
      id: 205,
      parent: 201,
      name: "VisualizationEvent",
      value: 1117
    },
    {
      id: 206,
      parent: 168,
      name: "legend",
      value: 1
    },
    {
      id: 207,
      parent: 206,
      name: "Legend",
      value: 20859
    },
    {
      id: 208,
      parent: 206,
      name: "LegendItem",
      value: 4614
    },
    {
      id: 209,
      parent: 206,
      name: "LegendRange",
      value: 10530
    },
    {
      id: 210,
      parent: 168,
      name: "operator",
      value: 1
    },
    {
      id: 211,
      parent: 210,
      name: "distortion",
      value: 1
    },
    {
      id: 212,
      parent: 211,
      name: "BifocalDistortion",
      value: 4461
    },
    {
      id: 213,
      parent: 211,
      name: "Distortion",
      value: 6314
    },
    {
      id: 214,
      parent: 211,
      name: "FisheyeDistortion",
      value: 3444
    },
    {
      id: 215,
      parent: 210,
      name: "encoder",
      value: 1
    },
    {
      id: 216,
      parent: 215,
      name: "ColorEncoder",
      value: 3179
    },
    {
      id: 217,
      parent: 215,
      name: "Encoder",
      value: 4060
    },
    {
      id: 218,
      parent: 215,
      name: "PropertyEncoder",
      value: 4138
    },
    {
      id: 219,
      parent: 215,
      name: "ShapeEncoder",
      value: 1690
    },
    {
      id: 220,
      parent: 215,
      name: "SizeEncoder",
      value: 1830
    },
    {
      id: 221,
      parent: 210,
      name: "filter",
      value: 1
    },
    {
      id: 222,
      parent: 221,
      name: "FisheyeTreeFilter",
      value: 5219
    },
    {
      id: 223,
      parent: 221,
      name: "GraphDistanceFilter",
      value: 3165
    },
    {
      id: 224,
      parent: 221,
      name: "VisibilityFilter",
      value: 3509
    },
    {
      id: 225,
      parent: 210,
      name: "IOperator",
      value: 1286
    },
    {
      id: 226,
      parent: 210,
      name: "label",
      value: 1
    },
    {
      id: 227,
      parent: 226,
      name: "Labeler",
      value: 9956
    },
    {
      id: 228,
      parent: 226,
      name: "RadialLabeler",
      value: 3899
    },
    {
      id: 229,
      parent: 226,
      name: "StackedAreaLabeler",
      value: 3202
    },
    {
      id: 230,
      parent: 210,
      name: "layout",
      value: 1
    },
    {
      id: 231,
      parent: 230,
      name: "AxisLayout",
      value: 6725
    },
    {
      id: 232,
      parent: 230,
      name: "BundledEdgeRouter",
      value: 3727
    },
    {
      id: 233,
      parent: 230,
      name: "CircleLayout",
      value: 9317
    },
    {
      id: 234,
      parent: 230,
      name: "CirclePackingLayout",
      value: 12003
    },
    {
      id: 235,
      parent: 230,
      name: "DendrogramLayout",
      value: 4853
    },
    {
      id: 236,
      parent: 230,
      name: "ForceDirectedLayout",
      value: 8411
    },
    {
      id: 237,
      parent: 230,
      name: "IcicleTreeLayout",
      value: 4864
    },
    {
      id: 238,
      parent: 230,
      name: "IndentedTreeLayout",
      value: 3174
    },
    {
      id: 239,
      parent: 230,
      name: "Layout",
      value: 7881
    },
    {
      id: 240,
      parent: 230,
      name: "NodeLinkTreeLayout",
      value: 12870
    },
    {
      id: 241,
      parent: 230,
      name: "PieLayout",
      value: 2728
    },
    {
      id: 242,
      parent: 230,
      name: "RadialTreeLayout",
      value: 12348
    },
    {
      id: 243,
      parent: 230,
      name: "RandomLayout",
      value: 870
    },
    {
      id: 244,
      parent: 230,
      name: "StackedAreaLayout",
      value: 9121
    },
    {
      id: 245,
      parent: 230,
      name: "TreeMapLayout",
      value: 9191
    },
    {
      id: 246,
      parent: 210,
      name: "Operator",
      value: 2490
    },
    {
      id: 247,
      parent: 210,
      name: "OperatorList",
      value: 5248
    },
    {
      id: 248,
      parent: 210,
      name: "OperatorSequence",
      value: 4190
    },
    {
      id: 249,
      parent: 210,
      name: "OperatorSwitch",
      value: 2581
    },
    {
      id: 250,
      parent: 210,
      name: "SortOperator",
      value: 2023
    },
    {
      id: 251,
      parent: 168,
      name: "Visualization",
      value: 16540
    }
  ]
};

FusionCharts.ready(function() {
  var myChart = new FusionCharts({
    type: "sunburst",
    renderAt: "chart-container",
    id: "sunburst-demo-chart",
    width: "100%",
    height: "100%",
    dataFormat: "json",
    dataSource
  }).render();
});

const handler = {
  switchTheme: function(val) {
    let fusionThemeElem = document.getElementById("fusion-theme-switcher");
    let gammelThemeElem = document.getElementById("gammel-theme-switcher");
    let candyThemeElem = document.getElementById("candy-theme-switcher");
    let umberThemeElem = document.getElementById("umber-theme-switcher");

    fusionThemeElem.classList.remove("btn-selected");
    gammelThemeElem.classList.remove("btn-selected");
    candyThemeElem.classList.remove("btn-selected");
    umberThemeElem.classList.remove("btn-selected");

    if(val === "fusion") {
      fusionThemeElem.classList.add("btn-selected");
    } else if(val === "gammel") {
      gammelThemeElem.classList.add("btn-selected");
    } else if(val === "candy") {
      candyThemeElem.classList.add("btn-selected");
    } else if(val === "umber") {
      umberThemeElem.classList.add("btn-selected");
    }

    FusionCharts.items['sunburst-demo-chart'].setChartAttribute("theme", val);
  },

  centerAngle: function (val) {
    let deg0Elem = document.getElementById("0deg-centerangle-btn");
    let deg90Elem = document.getElementById("90deg-centerangle-btn");
    let deg180Elem = document.getElementById("180deg-centerangle-btn");
    let deg270Elem = document.getElementById("270deg-centerangle-btn");
    let deg360Elem = document.getElementById("360deg-centerangle-btn");

    deg0Elem.classList.remove("btn-selected");
    deg90Elem.classList.remove("btn-selected");
    deg180Elem.classList.remove("btn-selected");
    deg270Elem.classList.remove("btn-selected");
    deg360Elem.classList.remove("btn-selected");

    if(val === 0) {
      deg0Elem.classList.add("btn-selected");
    } else if(val === 90) {
      deg90Elem.classList.add("btn-selected");
    } else if(val === 180) {
      deg180Elem.classList.add("btn-selected");
    } else if(val === 270) {
      deg270Elem.classList.add("btn-selected");
    } else if(val === 360) {
      deg360Elem.classList.add("btn-selected");
    }

    FusionCharts.items['sunburst-demo-chart'].setChartAttribute("centerAngle", val);
  },

  totalAngle: function(val) {
    let deg60Elem = document.getElementById("60deg-totalangle-btn");
    let deg90Elem = document.getElementById("90deg-totalangle-btn");
    let deg180Elem = document.getElementById("180deg-totalangle-btn");
    let deg270Elem = document.getElementById("270deg-totalangle-btn");
    let deg360Elem = document.getElementById("360deg-totalangle-btn");

    deg60Elem.classList.remove("btn-selected");
    deg90Elem.classList.remove("btn-selected");
    deg180Elem.classList.remove("btn-selected");
    deg270Elem.classList.remove("btn-selected");
    deg360Elem.classList.remove("btn-selected");

    if(val === 60) {
      deg60Elem.classList.add("btn-selected");
    } else if(val === 90) {
      deg90Elem.classList.add("btn-selected");
    } else if(val === 180) {
      deg180Elem.classList.add("btn-selected");
    } else if(val === 270) {
      deg270Elem.classList.add("btn-selected");
    } else if(val === 360) {
      deg360Elem.classList.add("btn-selected");
    }

    FusionCharts.items['sunburst-demo-chart'].setChartAttribute("totalAngle", val);
  },

  hoverEffect: function(val) {
    let enableElem = document.getElementById("enable-hover-btn");
    let disableElem = document.getElementById("disable-hover-btn");

    enableElem.classList.remove("btn-selected");
    disableElem.classList.remove("btn-selected");

    if(val === 0) {
      disableElem.classList.add("btn-selected");
    } else if(val === 1) {
      enableElem.classList.add("btn-selected");
    }

    FusionCharts.items['sunburst-demo-chart'].setChartAttribute("useHoverColor", val);
  }
};
              
            
!
999px

Console