Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts-3d.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/accessibility.js"></script>

<div class="container">
  <div id="chart-1" class="chart"></div>
  <div id="chart-2" class="chart"></div>
  <div id="chart-3" class="chart"></div>
  <div id="chart-4" class="chart"></div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 700px;
  margin: 0 auto;
}

.chart {
  width: 350px;
}

JavaScript

var myData = [18, 635, 21, 177, 20, 165, 22, 163, 24, 162, 25, 145, 19, 143,
  23, 139, 26, 112, 27, 110, 28, 104, 30, 91, 29, 88, 31, 68, 32,
  57, 36, 55, 34, 53, 33, 51, 35, 46, 37, 44, 39, 42, 43
];
var mySeries = [];
for (var i = 0; i < myData.length; i++) {
  if (i % 2 == 0) {
    mySeries.push({
      name: "DATO par " + i,
      y: myData[i],
      sliced: true,
      selected: true
    });
  } else
    mySeries.push(["DATO " + i, myData[i]]);

}

Highcharts.setOptions({
  chart: {
    type: 'pie',
    options3d: {
      enabled: true,
      alpha: 45,
      beta: 0
    },
    height: 350
  },
  title: {
    text: 'Informe Estadístico',
    align: 'left'
  },
  subtitle: {
    text: 'Periodo: 01/01/2023 - 31/03/2023',
    align: 'left'
  },
  accessibility: {
    point: {
      valueSuffix: '%'
    }
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      depth: 35,
      dataLabels: {
        enabled: true,
        format: '{point.name}'
      },
      showInLegend: true
    }
  },
  credits: {
    enabled: false
  },
  exporting: {
    buttons: {
      contextButton: {
        menuItems: ["downloadPNG", "downloadPDF"]
      }
    },
    sourceWidth: 900
  },
});

Highcharts.chart('chart-1', {
  series: [{
    type: 'pie',
    name: 'Porcentaje',
    description: 'PIE 1',
    data: mySeries
  }]
});
Highcharts.chart('chart-2', {
  series: [{
    type: 'pie',
    name: 'Share',
    data: [
      ['Samsung', 23],
      ['Apple', 18],
      {
        name: 'Xiaomi',
        y: 12,
        sliced: true,
        selected: true
      },
      ['Oppo*', 9],
      ['Vivo', 8],
      ['Others', 30]
    ]
  }]
});
Highcharts.chart('chart-3', {
	title: {
    text: 'Diffrent title',
  },
  subtitle: {
    text: 'With own subtitle',
  },
  series: [{
    type: 'pie',
    name: 'Share',
    data: [
      ['Samsung', 23],
      ['Apple', 18],
     ...