JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.anychart.com/releases/8.0.1/css/anychart-ui.min.css">
<link rel="stylesheet" href="https://cdn.anychart.com/releases/8.0.1/fonts/css/anychart-font.min.css">
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-exports.min.js"></script>
<div id="container"></div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

anychart.onDocumentReady(function () {
    // create pie chart with passed data
    var chart = anychart.pie([
        ['Apples', 6371664],
        ['Pears', 789622],
        ['Bananas', 7216301],
        ['Grapes', 1486621],
        ['Oranges', 1200000]
    ]);

    // set chart title text settings
    chart.title('Fruits imported in 2015 (in kg)');
    // set chart labels position to outside
    chart.labels().position('outside');
    // set legend title settings
    chart.legend().title()
            .enabled(true)
            .text('Retail channels')
            .padding([0, 0, 10, 0]);

    // set legend position and items layout
    chart.legend()
            .position('center-bottom')
            .itemsLayout('horizontal')
            .align('center');

    // set container id for the chart
    chart.container('container');
    // initiate chart drawing
    chart.draw();
});