javascriptamcharts5

Disable hover and click on a pie slice with amCharts 5

I'm trying to find a way to disable hover and click events on pie chart slice using amCharts 5.

So far I only found a way to disable on a legend:

legend.itemContainers.template.setup = function(item) {
    item.events.disableType("click")
};
Solution

  • In case you want to disable effects for all slices you can try these:

    // Disable hover events only
series.slices.template.set("tooltipText", null);
series.slices.template.states.create("hover", {
  scale: 1,
});

// Disable click event only
series.slices.template.set("toggleKey", "none");

    In case you want to disable interactions for specific slice your code should be something like this:

    let root = am5.Root.new("chartdiv");
root.setThemes([am5themes_Animated.new(root)]);

let chart = root.container.children.push(
  am5percent.PieChart.new(root, {
    layout: root.horizontalLayout
  })
);

let pieSeries = chart.series.push(
  am5percent.PieSeries.new(root, {
    valueField: "value",
    categoryField: "category"
  })
);

pieSeries.data.setAll([
  { category: "Category A", value: 20 },
  { category: "Category B", value: 20 },
  { category: "Category C", value: 60 }
]);


pieSeries.events.on("datavalidated", function() {
  pieSeries.dataItems.forEach((dataItem) => {
    // 🔎 Check if the slice matches your specific condition
    if (dataItem.get("category") === "Category A") {
      let slice = dataItem.get("slice");
      slice.set("interactive", false);
      slice.events.disableType("click");
    }
  });
});


pieSeries.appear(1000, 100);
chart.appear(1000, 100);
    body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 180px;
}
    <script src="//cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<script src="//cdn.amcharts.com/lib/5/percent.js"></script>
<script src="//cdn.amcharts.com/lib/5/index.js"></script>
<div id="chartdiv"></div>

    Hope that helps...🍻