Highcharts Demo2

author(s): Torstein Hønsi

by hajime_nagahata

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

var colorBase = ['#8bc346', '#037cd9', '#d37ee5', '#eeeeee'];
var colorPredict = ['#c5e1a2', '#81bdec', '#e9bef2', '#f6f6f6'];

Highcharts.chart('container', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: 0,
    plotShadow: false,
  },
  title: {
    text: '18-05',
    align: 'center',
    verticalAlign: 'bottom',
    y: 0,
    style: {
      fontSize: "30px"
    }
  },
  tooltip: {
    pointFormat: '{series.name}:<br><b>¥ {point.y:,.0f}</b><br><b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
        distance: -50,
        style: {
          fontWeight: 'bold',
          color: 'white',
          textShadow: '0px 1px 2px black'
        }
      },
      startAngle: -180,
      endAngle: 180,
      center: ['50%', '50%']
    }
  },
  series: [{
    type: 'pie',
    name: '18-05',
    size: '80%',
    innerSize: '40%',
    data: [
      ['A', 197120.3312],
      ['B', 16810.70107],
      ['C', 14000.81066],
      ['D', 1500.4225356]
    ],
    colors: colorBase
  },{
    type: 'pie',
    name: '18-05',
    size: '45%',
    innerSize: '40%',
    data: [
      ['A\'', 196990.8833],
      ['B\'', 64150.50965],
      ['C\'', 12000.13398],
      ['D\'', 160.0770306]
    ],
    colors: colorPredict
  }]
});