AmCharts5: get active dataItem on click LineSeries

Question

How I can get dataContext from point by click on free area?

When you hover the mouse cursor, a tooltip appears, can I determine who has it currently active?

Answer 1

I am not sure to understand your question properly, but if you want to get the data behind a bullet when you click on it, this is the way to go:

am5.ready(() => {

  let root = am5.Root.new("chartdiv");

  let chart = root.container.children.push(am5xy.XYChart.new(root, {}));

  let data = [
    {
      category: "Category 1",
      value: 10
    },
    {
      category: "Category 2",
      value: 20
    },
    {
      category: "Category 3",
      value: 15
    }
  ];

  let xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
    categoryField: "category",
    renderer: am5xy.AxisRendererX.new(root, {})
  }));

  xAxis.data.setAll(data);

  let yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  }));

  let series = chart.series.push(am5xy.LineSeries.new(root, {
    name: "Series",
    xAxis: xAxis,
    yAxis: yAxis,
    categoryXField: "category",
    valueYField: "value"
  }));

  series.strokes.template.set("strokeWidth", 3);

  series.data.setAll(data);
  
  let bulletTemplate = am5.Template.new(root, {});

  bulletTemplate.events.on("click", e => {
    let context = e.target.dataItem.dataContext;
    console.log(`${context.category} | ${context.value}`);
  });
  
  series.bullets.push(() => {
    return am5.Bullet.new(root, {
      sprite: am5.Circle.new(root, {
        strokeWidth: 3,
        stroke: series.get("stroke"),
        radius: 5,
        fill: root.interfaceColors.get("background")
      }, bulletTemplate)
    });
  });

});

#chartdiv {
  width: 100%;
  height: 350px;
}

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>

<div id="chartdiv"></div>

You can read the documentation here: Bullets – amCharts 5 Documentation