npm i @amcharts/amcharts5

import React, { useEffect } from "react";
import { Container, Row, Col } from "react-bootstrap";
            
import * as am4core from "@amcharts/amcharts4/core";
import * as am4charts from "@amcharts/amcharts4/charts";
import am4themes_animated from "@amcharts/amcharts4/themes/animated";
            
const ChartAm = () => {
useEffect(() => {
// Create chart instance
const chart = am4core.create('chartdiv', am4charts.PieChart);
            
// Add data
chart.data = [
{ category: 'Category 1', value: 40 },
{ category: 'Category 2', value: 30 },
{ category: 'Category 3', value: 20 },
{ category: 'Category 4', value: 10 },
];
            
// Create series
const pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = 'value';
pieSeries.dataFields.category = 'category';
            
// Configure tooltip
pieSeries.slices.template.tooltipText = '{category}: {value}';
            
// Cleanup chart on component unmount
return () => {
chart.dispose();
};
}, []);

return(
    <>
        <Col xs={12} lg={6}>
            <Card>
                <Card.Header className="d-flex justify-content-between rounded-top-5">
                    <Card.Header.Title className="header-title">
                        <h4 className="card-title">3D Pie Chart</h4>
                    </Card.Header.Title>
                </Card.Header>
                <Card.Body>
                    <div id="chartdiv" style={ width: '100%', height: '400px' } />;
                </Card.Body>
            </Card>
        </Col>
    </>
    )
}
export default ChartAm