How to disable basic Pie interactions?

[t3946]

How to disable basics Pie interactions like hover and click? I want pie do nothing when i click on pie data item.

`JS import "bootstrap/dist/js/bootstrap"; import { Root } from '@amcharts/amcharts5'; import am5themes_Animated from "@amcharts/amcharts5/themes/Animated"; import am5themes_Micro from "@amcharts/amcharts5/themes/Micro"; import {PieChart, PieSeries} from "@amcharts/amcharts5/percent"; import am5themes_Responsive from "@amcharts/amcharts5/themes/Responsive";

/**

• ---

• This demo was created using amCharts 5.
• For more information visit:
• https://www.amcharts.com/
• Documentation is available at:
• https://www.amcharts.com/docs/v5/

• ---

*/

const root = Root.new("chartdiv");

root.setThemes([ // am5themes_Animated.new(root),

am5themes_Micro.new(root), am5themes_Responsive.new(root) ]);

const chart = root.container.children.push(PieChart.new(root, { layout: root.verticalLayout }));

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

series.data.setAll([ { value: 10, category: "One" }, { value: 9, category: "Two" }, { value: 6, category: "Three" }, { value: 5, category: "Four" }, { value: 4, category: "Five" }, { value: 3, category: "Six" }, { value: 1, category: "Seven" }, ]);

series.slices.template.setAll({ tooltipText: "", stateAnimationDuration: false, stateAnimationEasing: false, interactionsEnabled: false, events: false, focusable: false, });

/**

• I have tried here */ // series.slices.template.events.on("click", function(ev) { // ev.stopPropagation(); // ev.preventDefault(); // }); // series.slices.template.events.on("hover", function(ev) { // ev.stopPropagation(); // ev.preventDefault(); // }); series.slices.template.events.removeType("hover"); console.log(series.slices.template.events); series.slices.template.interactionsEnabled = false; series.slices.template.disableType("click"); series.slices.template.disableType("pointerover");

series.appear(); `

[xorspark]

You can set forceInactive to true on your slice template to disable all interactions.

series.slices.template.setAll({
  // ...
  forceInactive: true
})

Note that this will also disable tooltips. If you still want tooltips to be visible on hover but want the other effects disabled, then use states to disable the shiftRadius and scale changes instead:

// disable slice growth on hover
series.slices.template.states.create('hover', {
  scale: 1
});
// disable slice pull out on click
series.slices.template.states.create('active', {
  shiftRadius: 0
});

[t3946]

You can set forceInactive to true on your slice template to disable all interactions.

series.slices.template.setAll({
  // ...
  forceInactive: true
})

Note that this will also disable tooltips. If you still want tooltips to be visible on hover but want the other effects disabled, then use states to disable the shiftRadius and scale changes instead:

// disable slice growth on hover
series.slices.template.states.create('hover', {
  scale: 1
});
// disable slice pull out on click
series.slices.template.states.create('active', {
  shiftRadius: 0
});

Thanks.

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. It will be closed in 5 days unless a new comment is added.