JSFiddle - React, Tailwind, and code Playground

by NabiKAZ

HTML

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

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

JavaScript

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        type: 'pie'
    },

    title: {
        text: 'یک نمودار؟!',
		useHTML: true, //bug fixed `IE9` and `EDGE`
        style: {
            fontSize: '20px',
            fontFamily: 'tahoma',
            direction: 'rtl',
        },
    },

    tooltip: {
        useHTML: true,
        style: {
            fontSize: '20px',
            fontFamily: 'tahoma',
            direction: 'rtl',
        },
    },

    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
				y: -5, //Optional
				format: '\u202B' + '{point.name}', // \u202B is RLE char for RTL support
                style: {
                    fontSize: '15px',
                    fontFamily: 'tahoma',
					textShadow: false, //bug fixed IE9 and EDGE
                },
            },
        },
    },

    series: [{
        name: 'برند',
        colorByPoint: true,
        data: [{
            name: 'اینترنت اکسپلورر؟!',
            y: 56.33
        }, {
            name: 'کروم؟!',
            y: 24.03,
        }, {
            name: 'فایرفکس؟!',
            y: 10.38
        }, {
            name: 'سفاری؟!',
            y: 4.77
        }, {
            name: 'اوپرا؟!',
            y: 0.91
        }, {
            name: 'دیگر؟!',
            y: 0.2
        }],
    }],

});