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 = {
    title: {
      text: "Pie Chart"
    },
    data: [
      {
        type: "pie",
        indexLabel: "{y}",
        dataPoints: []
      }
    ]
  };
  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);
        pieChart.options.title.text = e.entries[0].dataPoint.name;
        pieChart.options.data[0].dataPoints = [];
        pieChart.options.data[0].dataPoints.push({y: e.entries[0].dataPoint.pie1});
        pieChart.options.data[0].dataPoints.push({y: e.entries[0].dataPoint.pie2});
        pieChart.options.data[0].dataPoints.push({y: e.entries[0].dataPoint.pie3});
        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, name: "First", pie1: 20, pie2: 30, pie3: 50},
        { y: 363040, name: "Second", pie1: 60, pie2: 20, pie3: 40}
      ]
    }]
  });
  chart.render();
}