Highcharts Demo PIE with colors

author(s): Torstein Hønsi

by Faisal Khan Janjua

HTML

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

<div id="container2"></div>

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

CSS

@import 'https://code.highcharts.com/css/highcharts.css';
#container {
  height: 400px;
  max-width: 800px;
  min-width: 320px;
  margin: 0 auto;
}

.highcharts-pie-series .highcharts-point {
  stroke: #EDE;
  stroke-width: 2px;
}

.highcharts-pie-series .highcharts-data-label-connector {
  stroke: silver;
  stroke-dasharray: 2, 2;
  stroke-width: 2px;
}

JavaScript

Object.size = function(obj) {
  var size = 0,
      key;
  for (key in obj) {
    if (obj.hasOwnProperty(key)) size++;
  }
  return size;
};

var z = {
  "1": {
    "name": "Apples",
    "value": "29.9"
  },
  "2": {
    "name": "Pears",
    "value": "71.5"
  },
  "3": {
    "name": "Mobile Telecommunication Company K.S.C.",
    "value": "37.05"
  },
  "4": {
    "name": "Public",
    "value": "51.14"
  },
  "5": {
    "name": "",
    "value": ""
  }
};
var size = Object.size(z);

var arr = [];
for (i = 1; i < size; i++) {
  var x = z[i].name;
  var y = z[i].value;
  var c = [x, parseFloat(y)];
  console.log(c);
  arr.push(c)

}
console.log(arr)

Highcharts.chart('container', {

  title: {
    text: 'Pie point CSS'
  },
  series: [{
    type: 'pie',
    allowPointSelect: false,
    keys: ['x', 'y'],
    data: [
      { name: 'Faden Trading & Contracting Establishment', y: 5.97 },
      { name: 'Saudi Plastic Factory', y: 5.85 },
      { name: 'Mobile Telecommunication Company K.S.C.', y: 37.05 },
      { name: 'Public', y: 51.14 },
    ],
    showInLegend: false
  }]
});