Highcharts Demo

author(s): Kamil Kulig

by amrutaJgtp

HTML

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

CSS

#container {
    height: 400px;
    width: 600px;
}

JavaScript

Highcharts.chart('container', {
  "chart": {
    "type": "pie"
  },
  
  "tooltip": {
    "enabled": true
  },
  "plotOptions": {
    "pie": {
      "series": {
        "pie": {}
      },
      "startAngle": 0,
      "center": ["50%", "50%"]
    }
  },
  "legend": {
    "enabled": true,
    
    "layout": "horizontal",
    "eQLegendPlacement": "CHART",
    "backgroundColor": "rgba(255,255,255,0)",
    
    "align": "center",
    "verticalAlign": "bottom"
  },
 
  "series": [{
    "id": "series0",
    "name": "Sales",
    
    "data": [{
      
      "name": "Product1",
      "y": 500,
      "color": "rgba(0,41,170,1)",
      "sliced": false,
      "dataLabels": {
        "style": {}
      }
    }, {
     
      "name": "Product2",
      "y": 5,
      "color": "rgba(65,146,217,1)",
      "sliced": false,
      "dataLabels": {
        "style": {}
      }
    }],
    "innerSize": "0%",
    "slicedOffset": 0,
    "dataLabels": {
      "enabled": true,
      "connectorWidth": true,
      "borderWidth": 0,
      "style": {
        "fontSize": "1rem",
        "fontFamily": "Open Sans",
        "fontWeight": "normal",
        "fontStyle": "normal",
        "textDecoration": "none",
        "color": "#000000",
        "textOutline": ""
      },
      "allowOverlap": false
    },
    "borderWidth": 0,
    "edgeWidth": 0
  }]
});