JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>

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

JavaScript

var _Labels = {
  '0': 'Procesos Pronóstico',
  '22.5': 'TI Pronóstico',
  '45': 'Organización Pronóstico',
  '67.5': 'Procesos Pronóstico',
  '90': 'KPIs Pronóstico',
  '112.5': 'TI Colaboración',
  '135': 'Organización Colaboración',
  '157.5': 'KPIs Colaboración',
  '180': 'Procesos Capacidades',
  '202.5': 'TI Capacidades',
  '225': 'Organización Capacidades',
  '247.5': 'KPIs Capacidades',
  '270': 'Procesos S&OP',
  '292.5': 'TI S&OP',
  '315': 'Organización S&OP',
  '337.5': 'KPIs S&OP',
};
// Create the chart
Highcharts.chart('container', {
  chart: {
    polar: true
  },
  title: {
    text: ''
  },
  pane: {
    startAngle: 0,
    endAngle: 360
  },
  xAxis: {
    tickInterval: 22.5,
    min: 0,
    max: 360,
    labels: {
      formatter: function() {
        return _Labels[this.value];
      }
    }
  },
  yAxis: {
    gridLineInterpolation: 'circle',
    lineWidth: 0,
    min: 0,
    visible: false
  },
  legend: {
    enabled: false
  },
  tooltip: {
    backgroundColor: 'white',
    borderWidth: 0,
    shadow: false,
    enabled: false
  },
  plotOptions: {
    showInLegend: false,
    series: {
      pointStart: 0,
      pointInterval: 22.5
    },
  },

  series: [{
    type: 'pie',
    name: 'Dimensión',
    keys: ['name', 'y', 'selected', 'sliced'],
    colors: ['#466f2b', '#5f943c', '#7ab159', '#b7d0ab'],
    data: [
      ['Pronóstico', 5, true],
      ['Colaboración', 5, true],
      ['Capacidades', 5, true],
      ['Consenso', 5, true],

    ],
    //pointPlacement: 'on'
    dataLabels: {
      enabled: true,
      format: '{point.name}',
      style: {
        color: '#ff0000',
        fontSize: '16px',
        textOutline: '',
        fontWeight: 'bold'
      }

    },
    showInLegend: false,

  }, {
    type: 'line',
    color: '#000',
    //style: 'dotted',
    keys: ['name', 'y', 'selected'],
    data: <?php echo json_encode( $spyder ); ?>,
    //pointPlacement: 'on',
    allowPointSelect: false,
    label: {
      onArea: false,
     ...