Generate legends for each bubble in amcharts v4

Question

I am trying to create a bubble chart using amCharts Version 4 library. Each bubble here represent a different country having different color. Now I need to generate legends for each bubble present in the chart. I am not able to achieve the same. Can anyone help me for it.

I am using the below mentioned tutorial to create the bubble chart.

https://www.amcharts.com/demos/zoomable-bubble-chart

Answer 1

According to the official docs you could use custom data for your legend.

chart.legend = new am4charts.Legend();
chart.legend.data = [{
  "name": "2016",
  "fill":"#72A6B2"
}, {
  "name": "2017",
  "fill": "#667E93"
}, {
  "name": "2018",
  "fill": "#488BB2"
}];

To adapt this to your data and create a legend for all countries you could use the following snippet:

chart.legend = new am4charts.Legend();
chart.legend.data = chart.data.map(i => ({
  "name": i.title, 
  "fill": i.color
}));

To update the data on legend toggle you can add a hidden property on your data values and tell amcharts to use it to hide some bullets.

series.dataFields.hidden = "hidden";

Add the data id to the legend data and the hidden property if you want to hide some countries on init.

chart.legend.data = chart.data.map(i => ({
  id: i.id, 
  name: i.title, 
  fill: i.color,
  visible: !i.hidden
}));

Add an click event to the legend to update the chart. Use the "up" event, because event.target.isActive is updated after the "hit" event is called.

chart.legend.itemContainers.template.events.on("up", (event) => {
  const id = event.target.dataItem.dataContext.id;
  chart.data.find(i => i.id === id).hidden = !event.target.isActive;
  chart.validateData();
});

I created this code pen as reference.