Highcharts Demo

by BrankoSabo

HTML

<script src="https://code.highcharts.com/highcharts.js"></script><script src="https://code.highcharts.com/highcharts-more.js"></script><script src="https://code.highcharts.com/highcharts-3d.js"></script><script src="https://code.highcharts.com/modules/stock.js"></script><script src="https://code.highcharts.com/maps/modules/map.js"></script><script src="https://code.highcharts.com/modules/gantt.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script><script src="https://code.highcharts.com/modules/parallel-coordinates.js"></script><script src="https://code.highcharts.com/modules/accessibility.js"></script><script src="https://code.highcharts.com/modules/annotations-advanced.js"></script><script src="https://code.highcharts.com/modules/data.js"></script><script src="https://code.highcharts.com/modules/draggable-points.js"></script><script src="https://code.highcharts.com/modules/static-scale.js"></script><script src="https://code.highcharts.com/modules/broken-axis.js"></script><script src="https://code.highcharts.com/modules/heatmap.js"></script><script src="https://code.highcharts.com/modules/tilemap.js"></script><script src="https://code.highcharts.com/modules/timeline.js"></script><script src="https://code.highcharts.com/modules/treemap.js"></script><script src="https://code.highcharts.com/modules/treegraph.js"></script><script src="https://code.highcharts.com/modules/item-series.js"></script><script src="https://code.highcharts.com/modules/drilldown.js"></script><script src="https://code.highcharts.com/modules/histogram-bellcurve.js"></script><script src="https://code.highcharts.com/modules/bullet.js"></script><script src="https://code.highcharts.com/modules/funnel.js"></script><script src="https://code.highcharts.com/modules/funnel3d.js"></script><script src="https://code.highcharts.com/modules/pyramid3d.js"></script><script src="https://code.highcharts.com/modules/networkgraph.js"></script><script...

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'variablepie',
    events: {
      render: function () {
        var chart = this,
          renderer = chart.renderer,
          centerX = chart.plotWidth / 2 + chart.plotLeft,
          centerY = chart.plotHeight / 2 + chart.plotTop,
          innerSize = chart.series[0].options.innerSize,
          text = '3';

        // Remove existing center text if it exists
        if (chart.centerText) {
          chart.centerText.destroy();
        }

        // Render the new center text
        chart.centerText = renderer
          .text(text, centerX, centerY)
          .attr({
            align: 'center',
            verticalAlign: 'middle',
            zIndex: 10,
            style: {
              fontSize: '16px',
              fontWeight: 'bold',
              color: '#333333'
            }
          })
          .add();
      }
    }
  },
  title: {
    text: 'Countries compared by population density and total area, 2022.',
    align: 'left'
  },
  plotOptions: {
    variablepie: {
      startAngle: -90,
      endAngle: 90,
      dataLabels: {
        enabled: false // Disable the data labels
      }
    }
  },
  series: [{
    minPointSize: 10,
    innerSize: '30%',
    zMin: 0,
    name: 'countries',
    borderRadius: 5,
    data: [{
      y: 3,
      z: 50
    }, {
      y: 4,
      z: 10
    }],
    colors: [
      '#4caefe',
      '#3dc3e8'
    ]
  }]
});