[docs] sunburst > widths

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body>
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
      let chartData = [{
        id: 'flare',
        text: 'flare',
        parent: ''
      }, {
        id: 'analytics',
        text: 'analytics',
        parent: 'flare'
      }, {
        id: 'cluster',
        text: 'cluster',
        parent: 'analytics'
      }, {
        id: 'agglomerativecluster',
        text: 'AgglomerativeCluster',
        parent: 'cluster',
        value: 3938
      }, {
        id: 'communitystructure',
        text: 'CommunityStructure',
        parent: 'cluster',
        value: 3812
      }, {
        id: 'hierarchicalcluster',
        text: 'HierarchicalCluster',
        parent: 'cluster',
        value: 6714
      }, {
        id: 'mergeedge',
        text: 'MergeEdge',
        parent: 'cluster',
        value: 743
      }, {
        id: 'graph',
        text: 'graph',
        parent: 'analytics'
      }, {
        id: 'betweennesscentrality',
        text: 'BetweennessCentrality',
        parent: 'graph',
        value: 3534
      }, {
        id: 'linkdistance',
        text: 'LinkDistance',
        parent: 'graph',
        value: 5731
      }, {
        id: 'maxflowmincut',
        text: 'MaxFlowMinCut',
        parent: 'graph',
        value: 7840
      }, {
        id: 'shortestpaths',
        text: 'ShortestPaths',
        parent: 'graph',
        value: 5914
      }, {
        id: 'spanningtree',
        text: 'SpanningTree',
        parent: 'graph',
        value: 3416
      }, {
        id: 'optimization',
        text: 'optimization',
        parent: 'analytics'
      }, {
        id: 'aspectratiobanker',
        text: 'AspectRatioBanker',
        parent: 'optimization',
        value: 7074
      }, {
        id: 'animate',
        text: 'animate',
        parent: 'flare'
      }, {
        id: 'easing',
        text: 'Easing',
        parent: 'animate',
        value: 17010
      }, {
        id: 'functionsequence',
        text: 'FunctionSequence',
        parent: 'animate',
        value: 5842
      }, {
        id: 'interpolate',
        text: 'interpolate',
        parent: 'animate'
      }, {
        id: 'arrayinterpolator',
        text: 'ArrayInterpolator',
        parent: 'interpolate',
        value: 1983
      }, {
        id: 'colorinterpolator',
        text: 'ColorInterpolator',
        parent: 'interpolate',
        value: 2047
      }, {
        id: 'dateinterpolator',
        text: 'DateInterpolator',
        parent: 'interpolate',
        value: 1375
      }, {
        id: 'interpolator',
        text: 'Interpolator',
        parent: 'interpolate',
        value: 8746
      }, {
        id: 'matrixinterpolator',
        text: 'MatrixInterpolator',
        parent: 'interpolate',
        value: 2202
      }, {
        id: 'numberinterpolator',
        text: 'NumberInterpolator',
        parent: 'interpolate',
        value: 1382
      }, {
        id: 'objectinterpolator',
        text: 'ObjectInterpolator',
        parent: 'interpolate',
        value: 1629
      }, {
        id: 'pointinterpolator',
        text: 'PointInterpolator',
        parent: 'interpolate',
        value: 1675
      }];
      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let chartConfig = {
        type: 'sunburst',
        title: {
          text: "Sunburst Chart"
        },
        options: {
          widths: [40, 60, 70, 30]
        },
        series: chartData
      };

      // render chart
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        height: '100%',
        width: '100%',
      });
    });
  </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body>
  <!-- CHART CONTAINER -->
  <div id="myChart" class="chart--container">
    <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
  </div>
</body>

</html>

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

.chart--container {
  min-height: 150px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}

// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content
  let chartData = [{
    id: 'flare',
    text: 'flare',
    parent: ''
  }, {
    id: 'analytics',
    text: 'analytics',
    parent: 'flare'
  }, {
    id: 'cluster',
    text: 'cluster',
    parent: 'analytics'
  }, {
    id: 'agglomerativecluster',
    text: 'AgglomerativeCluster',
    parent: 'cluster',
    value: 3938
  }, {
    id: 'communitystructure',
    text: 'CommunityStructure',
    parent: 'cluster',
    value: 3812
  }, {
    id: 'hierarchicalcluster',
    text: 'HierarchicalCluster',
    parent: 'cluster',
    value: 6714
  }, {
    id: 'mergeedge',
    text: 'MergeEdge',
    parent: 'cluster',
    value: 743
  }, {
    id: 'graph',
    text: 'graph',
    parent: 'analytics'
  }, {
    id: 'betweennesscentrality',
    text: 'BetweennessCentrality',
    parent: 'graph',
    value: 3534
  }, {
    id: 'linkdistance',
    text: 'LinkDistance',
    parent: 'graph',
    value: 5731
  }, {
    id: 'maxflowmincut',
    text: 'MaxFlowMinCut',
    parent: 'graph',
    value: 7840
  }, {
    id: 'shortestpaths',
    text: 'ShortestPaths',
    parent: 'graph',
    value: 5914
  }, {
    id: 'spanningtree',
    text: 'SpanningTree',
    parent: 'graph',
    value: 3416
  }, {
    id: 'optimization',
    text: 'optimization',
    parent: 'analytics'
  }, {
    id: 'aspectratiobanker',
    text: 'AspectRatioBanker',
    parent: 'optimization',
    value: 7074
  }, {
    id: 'animate',
    text: 'animate',
    parent: 'flare'
  }, {
    id: 'easing',
    text: 'Easing',
    parent: 'animate',
    value: 17010
  }, {
    id: 'functionsequence',
    text: 'FunctionSequence',
    parent: 'animate',
    value: 5842
  }, {
    id: 'interpolate',
    text: 'interpolate',
    parent: 'animate'
  }, {
    id: 'arrayinterpolator',
    text: 'ArrayInterpolator',
    parent: 'interpolate',
    value: 1983
  }, {
    id: 'colorinterpolator',
    text: 'ColorInterpolator',
    parent: 'interpolate',
    value: 2047
  }, {
    id: 'dateinterpolator',
    text: 'DateInterpolator',
    parent: 'interpolate',
    value: 1375
  }, {
    id: 'interpolator',
    text: 'Interpolator',
    parent: 'interpolate',
    value: 8746
  }, {
    id: 'matrixinterpolator',
    text: 'MatrixInterpolator',
    parent: 'interpolate',
    value: 2202
  }, {
    id: 'numberinterpolator',
    text: 'NumberInterpolator',
    parent: 'interpolate',
    value: 1382
  }, {
    id: 'objectinterpolator',
    text: 'ObjectInterpolator',
    parent: 'interpolate',
    value: 1629
  }, {
    id: 'pointinterpolator',
    text: 'PointInterpolator',
    parent: 'interpolate',
    value: 1675
  }];
  // full ZingChart schema can be found here:
  // https://www.zingchart.com/docs/api/json-configuration/
  let chartConfig = {
    type: 'sunburst',
    title: {
      text: "Sunburst Chart"
    },
    options: {
      widths: [40, 60, 70, 30]
    },
    series: chartData
  };

  // render chart
  zingchart.render({
    id: 'myChart',
    data: chartConfig,
    height: '100%',
    width: '100%',
  });
});