javascriptamchartsanychart

3D Piechart with elevated slice on click

It is possibile to make an elevated slice on 3d Piechart on click? In the sample demo the slice moves away a little bit from pie but I need that it elevated in the z axis

Solution

  • Yes, you can do it with amCharts 4.

    You need to redefine like that the active state of slices:

    let as = series.slices.template.states.getKey("active"); // Get the right state (click)
as.properties.shiftRadius = 0; // Disable default behavior
as.properties.dy = -30; // Enable vertical move

    Please read the documentation:

    Full example:

    am4core.ready(() => {

  am4core.useTheme(am4themes_animated);

  let chart = am4core.create("chartdiv", am4charts.PieChart3D);
  chart.hiddenState.properties.opacity = 0;
  chart.innerRadius = am4core.percent(30);
  chart.depth = 100;
  chart.legend = new am4charts.Legend();
  chart.data = [
    {
      category: "Foo",
      value: 40
    },
    {
      category: "Bar",
      value: 30
    },
    {
      category: "Baz",
      value: 20
    },
    {
      category: "Qux",
      value: 10
    }
  ];

  let series = chart.series.push(new am4charts.PieSeries3D());
  series.dataFields.value = "value";
  series.dataFields.depthValue = "value";
  series.dataFields.category = "category";
  series.slices.template.cornerRadius = 5;
  series.colors.step = 3;

  let as = series.slices.template.states.getKey("active");
  as.properties.shiftRadius = 0;
  as.properties.dy = -30;

});
    #chartdiv {
  width: 100%;
  height: 350px;
}
    <script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>

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