Bubble Pie Chart with Legend

Please enable JavaScript to see the interactive demo.

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

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

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

<body>
  <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"];
    let chartData = [{
        // Pie Slice 1
        valueBox: {
          text: '%data-bubblesize',
          fontColor: 'black',
          placement: 'bottom',
        },
        dataPie: 'Food',
        dataV: [6599, 6602, 6759],
      },
      {
        // Pie Slice 2
        dataPie: 'Housing',
        dataV: [16887, 17148, 17798],
      },
      {
        // Pie Slice 3
        dataPie: 'Apparel and Services',
        dataV: [1736, 1604, 1786],
      },
      {
        // Pie Slice 4
        dataPie: 'Transportation',
        dataV: [8998, 9004, 9073],
      },
      {
        // Pie Slice 5
        dataPie: 'Healthcare',
        dataV: [3556, 3631, 4290],
      },
      {
        // Pie Slice 6
        dataPie: 'Entertainment',
        dataV: [2605, 2482, 2728],
      },
      {
        // Pie Slice 7
        dataPie: 'Contributions',
        dataV: [7504, 7362, 7514],
      },
      {
        // Pie Slice 8
        dataPie: 'Other',
        dataV: [3557, 3267, 3548],
      },
    ];

    let chartConfig = {
      type: 'bubble-pie',
      title: {
        text: 'Average Annual Expenditures in the U.S.',
        fontFamily: 'Georgia',
      },
      subtitle: {
        text: 'Source: U.S. Bureau of Labor Statistics<br>http://www.bls.gov/news.release/cesan.nr0.htm',
        fontWeight: 'normal',
      },
      legend: {
        header: {
          text: 'Expenditure Breakdown',
          fontFamily: 'Georgia',
          paddingTop: '8px',
        },
        height: '50%',
        item: {
          text: '%data-pie',
        },
        width: '21%',
        x: '75%',
        y: '25%',
      },
      plot: {
        tooltip: {
          text: '%data-pie: $%data-v (or %data-pv%)',
        },
        values: [
          // Bubbles
          [0, 51442, 51442],
          [1, 51100, 51100],
          [2, 53495, 53495],
        ],
        dataBubble: ['2012', '2013', '2014'], // Year
        dataBubblesize: ['$51,442', '$51,100', '$53,495'], // Total Expenditures,
        maxSize: 50,
        minSize: 40,
      },
      plotarea: {
        marginLeft: '10%',
        marginRight: '30%',
        marginTop: '20%',
      },
      scaleX: {
        item: {
          fontFamily: 'Georgia',
        },
        labels: ['2015', '2016', '2017'],
        offsetEnd: '75px',
        offsetStart: '75px',
      },
      scaleY: {
        values: '51100:54000:900',
        decimals: 0,
        format: '$%v',
        item: {
          fontFamily: 'Georgia',
        },
        offsetEnd: '75px',
        offsetStart: '75px',
        short: true,
        shortUnit: 'k',
      },
      series: chartData,
    };

    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>
		<div id="myChart" class="chart--container"><a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a></div>
	</body>
</html>

let chartData = [
  {
    // Pie Slice 1
    valueBox: {
      text: '%data-bubblesize',
      fontColor: 'black',
      placement: 'bottom',
    },
    dataPie: 'Food',
    dataV: [6599, 6602, 6759],
  },
  {
    // Pie Slice 2
    dataPie: 'Housing',
    dataV: [16887, 17148, 17798],
  },
  {
    // Pie Slice 3
    dataPie: 'Apparel and Services',
    dataV: [1736, 1604, 1786],
  },
  {
    // Pie Slice 4
    dataPie: 'Transportation',
    dataV: [8998, 9004, 9073],
  },
  {
    // Pie Slice 5
    dataPie: 'Healthcare',
    dataV: [3556, 3631, 4290],
  },
  {
    // Pie Slice 6
    dataPie: 'Entertainment',
    dataV: [2605, 2482, 2728],
  },
  {
    // Pie Slice 7
    dataPie: 'Contributions',
    dataV: [7504, 7362, 7514],
  },
  {
    // Pie Slice 8
    dataPie: 'Other',
    dataV: [3557, 3267, 3548],
  },
];

let chartConfig = {
  type: 'bubble-pie',
  title: {
    text: 'Average Annual Expenditures in the U.S.',
    fontFamily: 'Georgia',
  },
  subtitle: {
    text: 'Source: U.S. Bureau of Labor Statistics<br>http://www.bls.gov/news.release/cesan.nr0.htm',
    fontWeight: 'normal',
  },
  legend: {
    header: {
      text: 'Expenditure Breakdown',
      fontFamily: 'Georgia',
      paddingTop: '8px',
    },
    height: '50%',
    item: {
      text: '%data-pie',
    },
    width: '21%',
    x: '75%',
    y: '25%',
  },
  plot: {
    tooltip: {
      text: '%data-pie: $%data-v (or %data-pv%)',
    },
    values: [
      // Bubbles
      [0, 51442, 51442],
      [1, 51100, 51100],
      [2, 53495, 53495],
    ],
    dataBubble: ['2012', '2013', '2014'], // Year
    dataBubblesize: ['$51,442', '$51,100', '$53,495'], // Total Expenditures,
    maxSize: 50,
    minSize: 40,
  },
  plotarea: {
    marginLeft: '10%',
    marginRight: '30%',
    marginTop: '20%',
  },
  scaleX: {
    item: {
      fontFamily: 'Georgia',
    },
    labels: ['2015', '2016', '2017'],
    offsetEnd: '75px',
    offsetStart: '75px',
  },
  scaleY: {
    values: '51100:54000:900',
    decimals: 0,
    format: '$%v',
    item: {
      fontFamily: 'Georgia',
    },
    offsetEnd: '75px',
    offsetStart: '75px',
    short: true,
    shortUnit: 'k',
  },
  series: chartData,
};

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

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

.zc-ref {
  display: none;
}

Open-High-Low-Close Chart with Preview and Interactive Crosshairs 184/281 Bubble Pie Chart with Tooltips

Bubble Pie Chart with Legend

Related Documentation: