r.2 - AssetTitle_Pie (Color) Chart

by sanjshah

HTML

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

</div>

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'bar',
      height: 650,
      width: 150,
      spacingBottom: 0,
      spacingTop: 0,
      spacingLeft: 0,
      spacingRight: 0,
      marginBottom: 0,
      marginTop: 0,
      marginLeft: 0,
      marginRight: 0,
    },
    title: {
      text: null
    },
    subtitle: {
      text: null
    },
    legend: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    xAxis: {
      categories: ['Block A']
    },
    yAxis: {
      title: {
        text: null
      },
      max: 100,
      endOnTick: false,
      labels: {
        style: {
          color: 'white',
          fontSize: '15px'
        }
      },
    },
    tooltip: {
      headerFormat: '<b>{point.x}</b><br/>',
      pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
      series: {
        pointWidth: 60,
      },
      series: {
        groupPadding: 0,
        dataLabels: {
          align: 'right',
          enabled: true
        }
      }
    },
    series: [{
      name: '1',
      color: '#FF7C5B',
      data: [100]
    }, {
      name: '2',
      color: '#B3D8EC',
      data: [20]
    }, {
      name: '3',
      color: '#F9BFE0',
      data: [30]
    }, {
      name: '4',
      color: '#DD9CF5',
      data: [35]
    }, {
      name: '5',
      color: '#B3D8EC',
      data: [20]
    }, {
      name: '6',
      color: '#F9BFE0',
      data: [45]
    }, {
      name: '7',
      color: '#DD9CF5',
      data: [34]
    }, {
      name: '8',
      color: '#FF7C5B',
      data: [2]
    }, {
      name: '9',
      color: '#B3D8EC',
      data: [23]
    }, {
      name: '10',
      color: '#F9BFE0',
      data: [54]
    }, {
      name: '12',
      color: '#DD9CF5',
      data: [56]
    }, {
      name: '13',
      color: '#B3D8EC',
      data: [34]
    }, {
      name: '14',
      color: '#F9BFE0',
      data: [23]
   ...