Highcharts Demo

author(s): Torstein Hønsi

by Black Label

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">

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

JavaScript

const options = {
  colors: [
    "#2D2357",
    "#4B3A7D",
    "#614FA2",
    "#7765C7",
    "#8E7BED",
    "#A392F5",
    "#B8A8FF",
    "#CCC0FF",
    "#E0D9FF"
  ],
  chart: {
    type: 'pie',
    style: {
      fontFamily: 'Montserrat, sans-serif'
    },
  },
  credits: {
    enabled: false
  },
  title: {
    text: 'Linguistic',
    style: {
      fontSize: '16px'
    }
  },
  legend: {
    enabled: false
  },
  series: [{
    name: 'Values',
    color: '#1B1534',
    dataLabels: {
      enabled: true,
      connectorWidth: 1,
      useHTML: true,
      formatter: function() {
        return this.key + '</span><br /><span>' + '<div style="text-align: center;"><span>' + this.y + '%</span></div>';
      },
      style: {
        fontWeight: 'normal',
        color: 'black',
        fontSize: '12px'
      }
    },
    data: [
      ['Society', 21.3],
      ['Games', 1.2],
      ['Science', 20.7],
      ['Computers', 6.2],
      ['Recreation', 9.5],
      ['Shopping', 3.9],
      ['Sports', 4.6],
      ['Business', 14.8],
      ['Health', 8.8],
      ['Home', 8.9]
    ]
  }]
};

Highcharts.chart('container', options);