Highcharts Demo

author(s): Torstein Hønsi

by jlujan

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

JavaScript

Highcharts.chart('container', {

  chart: {
    height: 200,
  },

  title: {
    text: ''
  },

  credits: {
    enabled: false
  },

  labels: {
    items: [{
      html: 'Title 1',
      style: {
        left: '70px',
        top: '-3px',
        color: 'black',
        fontSize: '1.5em',
        fontWeight: 'bold'
      }
    }, {
      html: 'Title 2',
      style: {
        left: '280px',
        top: '-3px',
        color: 'black',
        fontSize: '1.5em',
        fontWeight: 'bold'
      }
    }]
  },

  series: [{
    type: 'pie',
    data: [{
        name: 'North America',
        y: 35,

      }, {
        name: 'Europe',
        y: 24,

      }, {
        name: 'Asia',
        y: 24,

      },
      {
        name: 'Other',
        y: 17,

      },
    ],
    center: [80, 55],
    size: 100,
    showInLegend: false,
    dataLabels: {
      distance: 5,
      format: '{point.name}<br>{point.percentage:.1f} %',
      connectorWidth: 0,
      style: {
        width: '40px',
        fontSize: '0.8em'
      }
    }
  }, {
    type: 'pie',
    data: [{
        name: 'North America',
        y: 46,

      }, {
        name: 'Europe',
        y: 34,

      }, {
        name: 'Asia',
        y: 0,

      }, {
        name: 'Other',
        y: 20,
      }

    ],

    center: [300, 55],
    size: 100,
    showInLegend: false,
    dataLabels: {
      distance: 5,
      format: '{point.name}<br>{point.percentage:.1f} %',
      connectorWidth: 0,
      style: {
        width: '40px',
        fontSize: '0.8em'
      }
    }
  }]

});