JSFiddle - React, Tailwind, and code Playground

by Shestac92

HTML

<script src="https://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.anychart.com/css/7.14.3/anychart-ui.min.css">
<div id="container"></div>
<div id='custom-tooltip'>
    <p>Custom tooltip</p>
</div>

CSS

html, body, #container {
            width: 600px;
            height: 500px;
            margin: 0;
            padding: 0;
        }
                #custom-tooltip {
            position: absolute;
            pointerEvents: none;
            background-color: darkgray;
            padding: 4px;
            border: solid black 2px;
            display: block;
            z-index: 10000;
        }

JavaScript

anychart.onDocumentReady(function () {
    // create data
    var data0 = [
        ["A", 637166],
        ["B", 721630],
        ["C", 148662],
        ["D", 78662],
        ["E", 90000]
    ];

    var data1 = [
        {x: "A", value: 400, fill: "#b75c46"},
        {x: "B", value: 130, fill: "#93ab33"},
        {x: "C", value: 130, fill: "#59af3f"}
    ];

    //create 2 donut charts
    var chart0 = anychart.pie(data0);
    var chart1 = anychart.pie(data1);

    //set appearence of the biggest donut
    chart0.radius(200);
    chart0.innerRadius('70%');
    chart0.legend().margin().right(250);

    //set appearence of the smallest one
    chart1.radius(140);
    chart1.innerRadius('60%');

    //turn off the background of this chart
    //to make it transparent
    // chart1.background({fill: 'none'});
    chart1.background({enabled: false});

    chart1.legend().margin().left(250);

    stage = acgraph.create('container');

    //create 2 layers in the stage
    var layer0 = stage.layer();
    var layer1 = stage.layer();

    chart0.container(layer0);
    chart1.container(layer1);

    chart0.tooltip(false);
    var tooltip = document.getElementById('custom-tooltip');
    tooltip.style.display = "none";


    chart0.draw();
    chart1.draw();

    chart1.listen('mouseMove', function (e) {
        var clientX = e['offsetX'];
        var clientY = e['offsetY'];
        var center = chart0.getCenterPoint();
        var l = Math.sqrt(Math.pow(clientX - center.x,2) + Math.pow(clientY - center.y,2))
        tooltip.style.left = clientX + 20 + "px";
        tooltip.style.top = clientY + 10 + "px";

        if (l < 200 && l > 140) {
            tooltip.style.display = "block";
        } else {
            tooltip.style.display = "none";
        }
    });
    
});