Sunburst of Fruits and Berries Production

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/HG9DGV7Z

<!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>
    .chart--container {
      width: 100%;
      height: 100%;
      min-height: 530px;
    }

    .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: 'total',
          text: 'Total',
          parent: '',
          dataInfo: "<br>2131.4"
        },
        {
          id: 'stone fruits',
          text: 'Stone fruits',
          parent: 'total'
        },
        {
          id: 'pome fruits',
          text: 'Pome fruits',
          parent: 'total'
        },
        {
          id: 'citrus fruits',
          text: 'Citrus fruits',
          parent: 'total'
        },
        {
          id: 'berries',
          text: 'Berries',
          parent: 'total'
        },
        {
          id: 'tropical / subtropical',
          text: 'Tropical / subtropical',
          parent: 'total'
        },
        {
          id: 'cherries',
          text: 'Cherries',
          parent: 'stone fruits',
          value: 177.87
        },
        {
          id: 'plums',
          text: 'Plums',
          parent: 'stone fruits',
          value: 154.87
        },
        {
          id: 'peaches',
          text: 'Peaches',
          parent: 'stone fruits',
          value: 136.93
        },
        {
          id: 'apricots',
          text: 'Apricots',
          parent: 'stone fruits',
          value: 76.12
        },
        {
          id: 'nectarines',
          text: 'Nectarines',
          parent: 'stone fruits',
          value: 63.78
        },
        {
          id: 'sother',
          text: 'Other',
          parent: 'stone fruits',
          value: 2.41
        },
        {
          id: 'apples',
          text: 'Apples',
          parent: 'pome fruits',
          value: 482.99
        },
        {
          id: 'pears',
          text: 'Pears',
          parent: 'pome fruits',
          value: 107.04
        },
        {
          id: 'pother',
          text: 'Other',
          parent: 'pome fruits',
          value: 7.47
        },
        {
          id: 'oranges',
          text: 'Oranges',
          parent: 'citrus fruits',
          value: 275.24
        },
        {
          id: 'small citrus fruits',
          text: 'Small citrus fruits',
          parent: 'citrus fruits',
          value: 156.54
        },
        {
          id: 'lemons and acid limes',
          text: 'Lemons and acid limes',
          parent: 'citrus fruits',
          value: 80.41
        },
        {
          id: 'pomelos and grapefruit',
          text: 'Pomelos and grapefruit',
          parent: 'citrus fruits',
          value: 3.84
        },
        {
          id: 'cother',
          text: 'Other',
          parent: 'citrus fruits',
          value: 3.95
        },
        {
          id: 'strawberries',
          text: 'Strawberries',
          parent: 'berries',
          value: 83.82
        },
        {
          id: 'currants',
          text: 'Currants',
          parent: 'berries',
          value: 58.17
        },
        {
          id: 'bother',
          text: 'Other',
          parent: 'berries',
          value: 38.22
        },
        {
          id: 'raspberries',
          text: 'Raspberries',
          parent: 'berries',
          value: 28.38
        },
        {
          id: 'blueberries',
          text: 'Blueberries',
          parent: 'berries',
          value: 25.01
        },
        {
          id: 'tother',
          text: 'Other',
          parent: 'tropical / subtropical',
          value: 57.03
        },
        {
          id: 'kiwis',
          text: 'Kiwis',
          parent: 'tropical / subtropical',
          value: 44.83
        },
        {
          id: 'figs',
          text: 'Figs',
          parent: 'tropical / subtropical',
          value: 27.21
        },
        {
          id: 'avocados',
          text: 'Avocados',
          parent: 'tropical / subtropical',
          value: 19.63
        },
        {
          id: 'bananas',
          text: 'Bananas',
          parent: 'tropical / subtropical',
          value: 19.62
        },
      ];
      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let chartConfig = {
        type: 'sunburst',
        globals: {
          fontFamily: 'Switzer Variable',
        },
        title: {
          text: 'Sunburst Diagram / Hierarchical',
          fontWeight: 400,
          htmlMode: true,
          textAlign: 'center',
          fontSize: '32px',
          lineHeight: '40px',
        },
        subtitle: {
          text: "Fruits and berries (excluding grapes) production in EU27 - Year 2020, Unit: tonnes\nSource: EuroStat",
          marginTop: '40px',
          fontWeight: 400,
          fontSize: '16px',
          color: '#6F6F6F',
          lineHeight: '24px',
          textAlign: 'center'
        },
        options: {
          palette: ['#FBF673', '#C3E352', '#63B28F', '#FDC664', '#C0B1F4'],
        },
        plot: {
          fontSize: '24px',
          tooltip: {
            align: 'left',
            padding: '10px 15px',
            borderRadius: '3px',
            thousandsSeparator: ','
          },
          valueBox: {
            text: '%data-vbtext',
            fontSize: '14px',
            fontWeight: 400,
            fontColor: '#2C2C2C',
            lineHeight: '20px',
            visible: null,
            rules: [
              //total
              {
                rule: "\"%t\" == \"Total\"",
                text: '%data-vbtext %data-info',
              }
            ]
          },
          borderWidth: '3px',
          rules: [
            //total
            {
              rule: "\"%t\" == \"Total\"",
              backgroundColor: "#FFFFFF"
            },
            //pome fruits
            {
              rule: "\"%t\" == \"Apples\"",
              backgroundColor: "#C5E4D7"
            },
            {
              rule: "\"%t\" == \"Pears\"",
              backgroundColor: "#ACD0C0"
            },
            //stone fruits
            {
              rule: "\"%t\" == \"Cherries\"",
              backgroundColor: "#E7F4B8"
            },
            {
              rule: "\"%t\" == \"Plums\"",
              backgroundColor: "#CDDBA0"
            },
            {
              rule: "\"%t\" == \"Peaches\"",
              backgroundColor: "#EFF8D1"
            },
            {
              rule: "\"%t\" == \"Apricots\"",
              backgroundColor: "#D7E5A4"
            },
            {
              rule: "\"%t\" == \"Nectarines\"",
              backgroundColor: "#F5FBE3"
            },
            //citrus fruits
            {
              rule: "\"%t\" == \"Oranges\"",
              backgroundColor: "#FDD084"
            },
            {
              rule: "\"%t\" == \"Small citrus fruits\"",
              backgroundColor: "#E3B15B"
            },
            {
              rule: "\"%t\" == \"Lemons and acid limes\"",
              backgroundColor: "#FDDCA2"
            },
            {
              rule: "\"%t\" == \"Pomelos and grapefruit\"",
              backgroundColor: "#F5FBE3"
            },
            //berries
            {
              rule: "\"%t\" == \"Strawberries\"",
              backgroundColor: "#E6E0FB"
            },
            {
              rule: "\"%t\" == \"Currants\"",
              backgroundColor: "#D3C9F8"
            },
            {
              rule: "\"%t\" == \"Raspberries\"",
              backgroundColor: "#E6E0FB"
            },
            {
              rule: "\"%t\" == \"Blueberries\"",
              backgroundColor: "#9A8FC4"
            },
            // Tropical / subtropical
            {
              rule: "\"%t\" == \"Kiwis\"",
              backgroundColor: "#FBF89C"
            },
            {
              rule: "\"%t\" == \"Figs\"",
              backgroundColor: "#E1DD67"
            },
            {
              rule: "\"%t\" == \"Avocados\"",
              backgroundColor: "#FCFBC6"
            },
            {
              rule: "\"%t\" == \"bananas\"",
              backgroundColor: "#E1DD67"
            },
          ],
        },
        plotarea: {
          margin: '120px 0px 0px 0px'
        },
        series: chartData
      };
      // render chart
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        output: 'svg'
      });
    });
  </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>

// 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: 'total',
      text: 'Total',
      parent: '',
      dataInfo: "<br>2131.4"
    },
    {
      id: 'stone fruits',
      text: 'Stone fruits',
      parent: 'total'
    },
    {
      id: 'pome fruits',
      text: 'Pome fruits',
      parent: 'total'
    },
    {
      id: 'citrus fruits',
      text: 'Citrus fruits',
      parent: 'total'
    },
    {
      id: 'berries',
      text: 'Berries',
      parent: 'total'
    },
    {
      id: 'tropical / subtropical',
      text: 'Tropical / subtropical',
      parent: 'total'
    },
    {
      id: 'cherries',
      text: 'Cherries',
      parent: 'stone fruits',
      value: 177.87
    },
    {
      id: 'plums',
      text: 'Plums',
      parent: 'stone fruits',
      value: 154.87
    },
    {
      id: 'peaches',
      text: 'Peaches',
      parent: 'stone fruits',
      value: 136.93
    },
    {
      id: 'apricots',
      text: 'Apricots',
      parent: 'stone fruits',
      value: 76.12
    },
    {
      id: 'nectarines',
      text: 'Nectarines',
      parent: 'stone fruits',
      value: 63.78
    },
    {
      id: 'sother',
      text: 'Other',
      parent: 'stone fruits',
      value: 2.41
    },
    {
      id: 'apples',
      text: 'Apples',
      parent: 'pome fruits',
      value: 482.99
    },
    {
      id: 'pears',
      text: 'Pears',
      parent: 'pome fruits',
      value: 107.04
    },
    {
      id: 'pother',
      text: 'Other',
      parent: 'pome fruits',
      value: 7.47
    },
    {
      id: 'oranges',
      text: 'Oranges',
      parent: 'citrus fruits',
      value: 275.24
    },
    {
      id: 'small citrus fruits',
      text: 'Small citrus fruits',
      parent: 'citrus fruits',
      value: 156.54
    },
    {
      id: 'lemons and acid limes',
      text: 'Lemons and acid limes',
      parent: 'citrus fruits',
      value: 80.41
    },
    {
      id: 'pomelos and grapefruit',
      text: 'Pomelos and grapefruit',
      parent: 'citrus fruits',
      value: 3.84
    },
    {
      id: 'cother',
      text: 'Other',
      parent: 'citrus fruits',
      value: 3.95
    },
    {
      id: 'strawberries',
      text: 'Strawberries',
      parent: 'berries',
      value: 83.82
    },
    {
      id: 'currants',
      text: 'Currants',
      parent: 'berries',
      value: 58.17
    },
    {
      id: 'bother',
      text: 'Other',
      parent: 'berries',
      value: 38.22
    },
    {
      id: 'raspberries',
      text: 'Raspberries',
      parent: 'berries',
      value: 28.38
    },
    {
      id: 'blueberries',
      text: 'Blueberries',
      parent: 'berries',
      value: 25.01
    },
    {
      id: 'tother',
      text: 'Other',
      parent: 'tropical / subtropical',
      value: 57.03
    },
    {
      id: 'kiwis',
      text: 'Kiwis',
      parent: 'tropical / subtropical',
      value: 44.83
    },
    {
      id: 'figs',
      text: 'Figs',
      parent: 'tropical / subtropical',
      value: 27.21
    },
    {
      id: 'avocados',
      text: 'Avocados',
      parent: 'tropical / subtropical',
      value: 19.63
    },
    {
      id: 'bananas',
      text: 'Bananas',
      parent: 'tropical / subtropical',
      value: 19.62
    },
  ];
  // full ZingChart schema can be found here:
  // https://www.zingchart.com/docs/api/json-configuration/
  let chartConfig = {
    type: 'sunburst',
    globals: {
      fontFamily: 'Switzer Variable',
    },
    title: {
      text: 'Sunburst Diagram / Hierarchical',
      fontWeight: 400,
      htmlMode: true,
      textAlign: 'center',
      fontSize: '32px',
      lineHeight: '40px',
    },
    subtitle: {
      text: "Fruits and berries (excluding grapes) production in EU27 - Year 2020, Unit: tonnes\nSource: EuroStat",
      marginTop: '40px',
      fontWeight: 400,
      fontSize: '16px',
      color: '#6F6F6F',
      lineHeight: '24px',
      textAlign: 'center'
    },
    options: {
      palette: ['#FBF673', '#C3E352', '#63B28F', '#FDC664', '#C0B1F4'],
    },
    plot: {
      fontSize: '24px',
      tooltip: {
        align: 'left',
        padding: '10px 15px',
        borderRadius: '3px',
        thousandsSeparator: ','
      },
      valueBox: {
        text: '%data-vbtext',
        fontSize: '14px',
        fontWeight: 400,
        fontColor: '#2C2C2C',
        lineHeight: '20px',
        visible: null,
        rules: [
          //total
          {
            rule: "\"%t\" == \"Total\"",
            text: '%data-vbtext %data-info',
          }
        ]
      },
      borderWidth: '3px',
      rules: [
        //total
        {
          rule: "\"%t\" == \"Total\"",
          backgroundColor: "#FFFFFF"
        },
        //pome fruits
        {
          rule: "\"%t\" == \"Apples\"",
          backgroundColor: "#C5E4D7"
        },
        {
          rule: "\"%t\" == \"Pears\"",
          backgroundColor: "#ACD0C0"
        },
        //stone fruits
        {
          rule: "\"%t\" == \"Cherries\"",
          backgroundColor: "#E7F4B8"
        },
        {
          rule: "\"%t\" == \"Plums\"",
          backgroundColor: "#CDDBA0"
        },
        {
          rule: "\"%t\" == \"Peaches\"",
          backgroundColor: "#EFF8D1"
        },
        {
          rule: "\"%t\" == \"Apricots\"",
          backgroundColor: "#D7E5A4"
        },
        {
          rule: "\"%t\" == \"Nectarines\"",
          backgroundColor: "#F5FBE3"
        },
        //citrus fruits
        {
          rule: "\"%t\" == \"Oranges\"",
          backgroundColor: "#FDD084"
        },
        {
          rule: "\"%t\" == \"Small citrus fruits\"",
          backgroundColor: "#E3B15B"
        },
        {
          rule: "\"%t\" == \"Lemons and acid limes\"",
          backgroundColor: "#FDDCA2"
        },
        {
          rule: "\"%t\" == \"Pomelos and grapefruit\"",
          backgroundColor: "#F5FBE3"
        },
        //berries
        {
          rule: "\"%t\" == \"Strawberries\"",
          backgroundColor: "#E6E0FB"
        },
        {
          rule: "\"%t\" == \"Currants\"",
          backgroundColor: "#D3C9F8"
        },
        {
          rule: "\"%t\" == \"Raspberries\"",
          backgroundColor: "#E6E0FB"
        },
        {
          rule: "\"%t\" == \"Blueberries\"",
          backgroundColor: "#9A8FC4"
        },
        // Tropical / subtropical
        {
          rule: "\"%t\" == \"Kiwis\"",
          backgroundColor: "#FBF89C"
        },
        {
          rule: "\"%t\" == \"Figs\"",
          backgroundColor: "#E1DD67"
        },
        {
          rule: "\"%t\" == \"Avocados\"",
          backgroundColor: "#FCFBC6"
        },
        {
          rule: "\"%t\" == \"bananas\"",
          backgroundColor: "#E1DD67"
        },
      ],
    },
    plotarea: {
      margin: '120px 0px 0px 0px'
    },
    series: chartData
  };
  // render chart
  zingchart.render({
    id: 'myChart',
    data: chartConfig,
    output: 'svg'
  });
});

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

.zc-ref {
  display: none;
}

Radial tree / Circular dendrogram / Hyperbolic tree 7/281 Population pyramid with labels and basic animation

Sunburst of Fruits and Berries Production

Related Documentation: