Gallery Back to Gallery

Bubble Pie Chart with Tooltips

Powered by ZingChart
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .chart--container {
      min-height: 530px;
      width: 100%;
      height: 100%;
    }

    .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 chartConfig = {
      type: 'bubble-pie',
      title: {
        text: 'Corporate Survey'
      },
      subtitle: {
        text: 'Public Perception'
      },
      legend: {
        align: 'center',
        item: {
          text: '%data-pie'
        },
        verticalAlign: 'bottom'
      },
      plot: {
        values: [
          [2015, 2003, 2003],
          [2016, 2543, 2543],
          [2017, 3521, 3521],
          [2018, 2804, 2804],
          [2019, 4205, 4205]
        ],
        tooltip: {
          text: '%data-pv% %data-pie'
        },
        valueBox: {
          text: '%node-size-value total responses',
          fontColor: 'black',
          fontWeight: 'normal',
          placement: 'bottom'
        },
        dataBubble: ['2015', '2016', '2017', '2018', '2019']
      },
      scaleX: {
        values: '2015:2019:1'
      },
      series: [{
          dataPie: 'Positive',
          dataV: [603, 789, 1800, 1502, 2105],
          marker: {
            backgroundColor: '#5dc911'
          }
        },
        {
          dataPie: 'Negative',
          dataV: [1200, 1600, 1421, 1200, 1900],
          marker: {
            backgroundColor: '#e32143'
          }
        },
        {
          dataPie: 'Neutral',
          dataV: [200, 154, 300, 102, 200],
          marker: {
            backgroundColor: '#bfbfbf'
          }
        }
      ]
    };

    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 chartConfig = {
  type: 'bubble-pie',
  title: {
    text: 'Corporate Survey'
  },
  subtitle: {
    text: 'Public Perception'
  },
  legend: {
    align: 'center',
    item: {
      text: '%data-pie'
    },
    verticalAlign: 'bottom'
  },
  plot: {
    values: [[2015, 2003, 2003], [2016, 2543, 2543], [2017, 3521, 3521], [2018, 2804, 2804], [2019, 4205, 4205]],
    tooltip: {
      text: '%data-pv% %data-pie'
    },
    valueBox: {
      text: '%node-size-value total responses',
      fontColor: 'black',
      fontWeight: 'normal',
      placement: 'bottom'
    },
    dataBubble: ['2015', '2016', '2017', '2018', '2019']
  },
  scaleX: {
    values: '2015:2019:1'
  },
  series: [
    {
      dataPie: 'Positive',
      dataV: [603, 789, 1800, 1502, 2105],
      marker: {
        backgroundColor: '#5dc911'
      }
    },
    {
      dataPie: 'Negative',
      dataV: [1200, 1600, 1421, 1200, 1900],
      marker: {
        backgroundColor: '#e32143'
      }
    },
    {
      dataPie: 'Neutral',
      dataV: [200, 154, 300, 102, 200],
      marker: {
        backgroundColor: '#bfbfbf'
      }
    }
  ]
};
 
zingchart.render({
  id: 'myChart',
  data: chartConfig,
  height: '100%',
  width: '100%',
});
.chart--container {
  min-height: 530px;
  width: 100%;
  height: 100%;
}

.zc-ref {
  display: none;
}
Bubble Pie Chart with Legend 171/269 Line Zoom Menu

Related Documentation: