How to get value of bubble in amcharts when click event triggered

Question

find image from here

    import React, { Component } from 'react';
    import * as am4core from "@amcharts/amcharts4/core";
    import * as am4charts from "@amcharts/amcharts4/charts";
    import am4themes_animated from "@amcharts/amcharts4/themes/animated";

    am4core.useTheme(am4themes_animated);

    class BubbleChart extends Component {
    componentDidMount() {
        let hide = document.querySelector("rect").width
        console.log(hide,"check")
        let chart = am4core.create("bubbleChart", am4charts.XYChart);

        let valueAxisX = chart.xAxes.push(new am4charts.ValueAxis());
        valueAxisX.renderer.ticks.template.disabled = true;
        valueAxisX.renderer.axisFills.template.disabled = true;

        let valueAxisY = chart.yAxes.push(new am4charts.ValueAxis());
        valueAxisY.renderer.ticks.template.disabled = true;
        valueAxisY.renderer.axisFills.template.disabled = true;

        let series = chart.series.push(new am4charts.LineSeries());
        series.dataFields.valueX = "x";
        series.dataFields.valueY = "y";
        series.dataFields.value = "value";
        series.strokeOpacity = 0;
        series.sequencedInterpolation = true;
        series.tooltip.pointerOrientation = "vertical";

        let bullet = series.bullets.push(new am4charts.CircleBullet());
        bullet.fill = am4core.color("#ff0000");
        bullet.propertyFields.fill = "color";
        bullet.strokeOpacity = 0;
        bullet.strokeWidth = 2;
        bullet.fillOpacity = 0.5;
        bullet.stroke = am4core.color("#ffffff");
        bullet.hiddenState.properties.opacity = 0;
        bullet.circle.tooltipText = "[bold]{title}:[/]\nPopulation: {value.value}\nIncome: {valueX.value}\nLife expectancy:{valueY.value}";

        let outline = chart.plotContainer.createChild(am4core.Circle);
        outline.fillOpacity = 0;
        outline.strokeOpacity = 0.8;
        outline.stroke = am4core.color("#ff0000");
        outline.strokeWidth = 2;
        outline.hide(0);

        let blurFilter = new am4core.BlurFilter();
        outline.filters.push(blurFilter);

        bullet.events.on("over", function(event) {
            let target = event.target;
            chart.cursor.triggerMove({ x: target.pixelX, y: target.pixelY }, "hard");
            chart.cursor.lineX.y = target.pixelY;
            chart.cursor.lineY.x = target.pixelX - chart.plotContainer.pixelWidth;
            valueAxisX.tooltip.disabled = false;
            valueAxisY.tooltip.disabled = false;

            outline.radius = target.circle.pixelRadius + 2;
            outline.x = target.pixelX;
            outline.y = target.pixelY;
            outline.show();
        })

        bullet.events.on("out", function(event) {
            chart.cursor.triggerMove(event.pointer.point, "none");
            chart.cursor.lineX.y = 0;
            chart.cursor.lineY.x = 0;
            valueAxisX.tooltip.disabled = true;
            valueAxisY.tooltip.disabled = true;
            outline.hide();
        })

        let hoverState = bullet.states.create("hover");
        hoverState.properties.fillOpacity = 1;
        hoverState.properties.strokeOpacity = 1;

        series.heatRules.push({ target: bullet.circle, min: 2, max: 60, property: "radius" });

        bullet.circle.adapter.add("tooltipY", function (tooltipY, target) {
            return -target.radius;
        })

        chart.cursor = new am4charts.XYCursor();
        chart.cursor.behavior = "zoomXY";

        chart.scrollbarX = new am4core.Scrollbar();
        chart.scrollbarY = new am4core.Scrollbar();

        chart.data = [
            {
                "title": "Chad",
                "id": "TD",
                "color": "#de4c4f",
                "continent": "africa",
                "x": 1768.88201756553,
                "y": 50.724,
                "value": 11830573
            },
            {
                "title": "Chile",
                "id": "CL",
                "color": "#86a965",
                "continent": "south_america",
                "x": 15403.7608144625,
                "y": 79.691,
                "value": 17423214
            },
            {

                "title": "China",
                "id": "CN",
                "color": "#eea638",
                "continent": "asia",
                "x": 9501.57424554247,
                "y": 75.178,
                "value": 1353600687
            }
        ];
    }

    componentWillUnmount() {
        if (this.chart) {
        this.chart.dispose();
        }
    }


    render() {
        return (
        <div id="bubbleChart" style={{ width: "100%", height: "500px" }}></div>
        );
    }
    }

    export default BubbleChart;

Here i am using amcharts with react.js Please check the screenshot for BubbleChart.

Is there any way to get data for the same bubble when user will trigger click event.

Suppose use will click on china bubbble it should log

{

"title": "China",
"id": "CN",
"color": "#eea638",
"continent": "asia",
"x": 9501.57424554247,
"y": 75.178,
"value": 1353600687
}

this in console.

I checked with onclick but it is not coming anything event.target.value.

Only event class is coming.

Image is available in below link.

Answer 1

You would use the "hit" event, e.g.

bullet.events.on("hit", function(event){
  console.log(event.target.dataItem.dataContext);
});