JSFiddle - React, Tailwind, and code Playground

by Pedro Cruz

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/highcharts.js"></script>
<div id="DonuTchartIBV-MMS-1"></div>

JavaScript

Highcharts.setOptions({
                color: ['#449ecf', '#F5C700', '#EF4836', '#C43829', '#F69C00', '#0EBB9F', '#00AFD1', '#323A45']
            });

 var colors = Highcharts.getOptions().color;

  var categories = ['Product', 'Competition'],
                data = {
                    Product: {
                        name: 'Product',
                        size:'100%',
                        innerSize: '85%',
                        data: [{ name: "Product", y: 851.8, color: colors[1], category: 'TV', marker: { symbol: 'circle' } },
                               { name: "Product", y: 554.2, color: colors[2], category: 'Radio', marker: { symbol: 'circle' } },
                               { name: "Product", y: 487.6, color: colors[3], category: 'Press', marker: { symbol: 'circle' } },
                               { name: "Product", y: 375.3, color: colors[4], category: 'Outdoor', marker: { symbol: 'circle' } },
                               { name: "Product", y: 298, color: colors[5], category: 'Cinema', marker: { symbol: 'circle' } },
                               { name: "Product", y: 653.2, color: colors[6], category: 'Internet', marker: { symbol: 'circle' } }],
                        dataLabels: { enabled: false },
                        marker: { symbol: 'circle' }
                    },
                    Competition: {
                        name: 'Competition',
                        size:'75%',
                        innerSize: '90%',
                        data: [{ name: "Competition", y: 710.2, color: colors[1], category: 'TV', marker: { symbol: 'circle' } },
                               { name: "Competition", y: 0, color: colors[2], category: 'Radio', marker: { symbol: 'circle' } },
                               { name: "Competition", y: 9.2, color: colors[3], category: 'Press', marker: { symbol: 'circle' } },
                               { name: "Competition", y: 0, color: colors[4], category: 'Outdoor', marker: { symbol:...