JSFiddle - React, Tailwind, and code Playground

by hajime_nagahata

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 300px"></div>

JavaScript

var year = 12;

Highcharts.seriesTypes.pie.prototype.getCenter = function () {
  var allPies = this.chart.series.filter(function (s) {
    return s.type === 'pie';
  }),
      count = year,
      index = allPies.indexOf(this),
      plotWidth = this.chart.plotWidth,
      plotHeight = this.chart.plotHeight,
      smallestSize = Math.min(plotWidth / 6, plotHeight);

  return [
    index<year ? (plotWidth/count) * (index%(year/2)*2 + 1) : (plotWidth/count) * (4%(year/2)*2 + 1),
    index<year ? plotHeight/2 - smallestSize/2 + smallestSize*Math.floor(index/(year/2)) : plotHeight/2 - smallestSize/2 + smallestSize*Math.floor(4/(year/2)),
    index<year ? smallestSize - 20 : smallestSize - 45,
    40
  ]
};

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

var chart = Highcharts.chart('container', {

  chart: {
    type: 'pie',
    plotBorderWidth: 0
  },
  title: {
    text: null
  },
  tooltip: {
    pointFormat: '{series.name}:<br><b>¥ {point.y:,.0f}</b><br><b>{point.percentage:.1f}%</b>'
  },
  series: [
    {
      data: [
        ['A', 197120.3312, '#FF0000'],
        ['B', 16810.70107],
        ['C', 14000.81066],
        ['D', 150.4225356]
      ],
      name: '18-01',
      colors: colorBase,
      title: {
        verticalAlign: 'bottom',
        format: '<b>{name}</b>',
        y: 0
      }
    },
    {
      data: [
        ['A', 178320.5144],
        ['B', 15490.99932],
        ['C', 13000.31121],
        ['D', 150.3074927]
      ],
      name: '18-02',
      colors: colorBase
    },
    {
      data: [
        ['A', 190010.8706],
        ['B', 16310.78327],
        ['C', 11000.68528],
        ['D', 150.9186456]
      ],
      name: '18-03',
      colors: colorBase
    },
    {
      data: [
        ['A', 196990.8833],
        ['B', 64150.50965],
        ['C', 12000.13398],
        ['D', 160.0770306]
      ],
      name: '18-04',
      colors:...