JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

window.onload = function () {
  var chartOptions = {
    "Data 1": {
      title: {
        text: "Data 1 Pie Chart"
      },
      data: [
        {
          type: "pie",
          dataPoints: [
            {  y: 53.37, indexLabel: "Android" },
            {  y: 35.0, indexLabel: "Apple iOS" },
            {  y: 7, indexLabel: "Blackberry" },
            {  y: 2, indexLabel: "Windows Phone" },
            {  y: 5, indexLabel: "Others" }
          ]
        }
      ]
    },
    "Data 2": {
      title: {
        text: "Data 2 Pie Chart"
      },
      data: [
        {
          type: "pie",
          dataPoints: [
            { y: 51.08, label: "Chrome" },
            { y: 27.34, label: "Internet Explorer" },
            { y: 10.62, label: "Firefox" },
            { y: 5.02, label: "Microsoft Edge" },
            { y: 4.07, label: "Safari" },
            { y: 1.22, label: "Opera" },
            { y: 0.44, label: "Others" }
          ]
        }
      ]
    }
  };
  var pieChart = {};
  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Displaying Chart within Tooltip"
    },
    
    toolTip: {
      updated: function(e) {
        typeof pieChart.destroy === "function" && pieChart.destroy();  
        pieChart = new CanvasJS.Chart('pie-chart', chartOptions[e.entries[0].dataPoint.label]);
        pieChart.render(); 
      },
      contentFormatter: function() {
        return "<div id='pie-chart' style='width:200px; height:200px;'></div>";
      },
      hidden: function() {
        typeof pieChart.destroy === "function" && pieChart.destroy();
      }
    },
    data: [{        
      type: "scatter",
      dataPoints: [
        { y: 219960, label: "Data 1" },
        { y: 363040, label: "Data 2" }
      ]
    }]
  });
  chart.render();
}