AM4Charts: How to display charts in tooltip of bar chart (Angular 2+) -without using jquery

Actually i am looking to showing chart in tooltip of bar chart when someone hovers over it, but under some scenario given, which are listed below:
For example: I am hovering over chart implemented in am4charts i.e. version 4, over hovering, i have to see pie chart based on data provided.
Requirement:
*no jquery allowed
*can use angular 2+
*only version 4, amcharts (v4)
Any kind of help is welcome
Thanks in advance!

let chart = am4core.create("chartdiv", am4charts.XYChart);
this.chart = chart;
/* Add data */
chart.data = [{
  "year": "1994",
  "bicycles": 121
}, {
  "year": "1995",
  "bicycles": 146
}, {
  "year": "1996",
  "bicycles": 138
}, {
  "year": "1997",
  "bicycles": 127
}, {
  "year": "1998",
  "bicycles": 105
}, {
  "year": "1999",
  "bicycles": 109
}, {
  "year": "2000",
  "bicycles": 112
}, {
  "year": "2001",
  "bicycles": 101
}, {
  "year": "2002",
  "bicycles": 97
}, {
  "year": "2003",
  "bicycles": 93
}, {
  "year": "2004",
  "bicycles": 101
}, {
  "year": "2005",
  "bicycles": 87
}, {
  "year": "2006",
  "bicycles": 79
}, {
  "year": "2007",
  "bicycles": 81
}, {
  "year": "2008",
  "bicycles": 75
}, {
  "year": "2009",
  "bicycles": 88
}, {
  "year": "2010",
  "bicycles": 82
}, {
  "year": "2011",
  "bicycles": 87
}, {
  "year": "2012",
  "bicycles": 71
}];
chart.logo.height = -1500;
let categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
categoryAxis.dataFields.category = "year";

/* Create value axis */
let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

/* Create series */

let series3 = chart.series.push(new am4charts.LineSeries());
series3.dataFields.valueY = "bicycles";
series3.dataFields.categoryX = "year";
series3.name = "Bicycles";
series3.strokeWidth = 3;
series3.tensionX = 0.7;
series3.bullets.push(new am4charts.CircleBullet());

// HTML in tooltip
series3.tooltipHTML = `<center><strong>YEAR {categoryX}</strong></center>
      <hr />
      <table>
      <tr>
        <th align="left">Cars</th>
        <td>{cars}</td>
      </tr>
      <tr>
        <th align="left">Motorcycles</th>
        <td>{motorcycles}</td>
      </tr>
      <tr>
        <th align="left">Bicycles</th>
        <td>{bicycles}</td>
      </tr>
      </table>
      <hr />`;
series3.tooltip.pointerOrientation = "vertical";

Source: Angular Questions