JSFiddle - React, Tailwind, and code Playground

by Salehin Modasiya

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://highcharts.github.io/pattern-fill/pattern-fill-v2.js"></script>

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

JavaScript

$('#container').highcharts({
    
    title: {
        text: 'Pattern fill plugin demo'
    },

    series: [{
        type: 'pie',
        borderColor: Highcharts.getOptions().colors[0],
        data: [{
        	y: 1,
            color: 'url(#highcharts-default-pattern-0)'
        }, {
        	y: 1,
            color: 'url(#highcharts-default-pattern-1)'
        }, {
        	y: 1,
            color: 'url(#highcharts-default-pattern-2)'
        }, {
        	y: 1,
            color: 'url(#highcharts-default-pattern-3)'
        }, {
        	y: 1,
            color: 'url(#highcharts-default-pattern-4)'
        }, {
        	y: 1,
            color: 'url(#highcharts-default-pattern-5)'
        }, {
        	y: 1,
            color: 'url(#highcharts-default-pattern-6)'
        }, {
        	y: 1,
            color: 'url(#highcharts-default-pattern-7)',
            fillColor: 'red'
        }, {
        	y: 1,
            color: 'url(#highcharts-default-pattern-8)',
            filColor: 'red'
        }],
        dataLabels: {
	        connectorColor: Highcharts.getOptions().colors[0],
            formatter: function () {
                return 'pattern-' + (this.point.index - 1);
            }
        }
    }]
    
});