[SOLVED] In amchart4 on hover border color not changing properly for PieChart

In amchart4 on hover border color not changing properly for PieChart

I am trying to change border color on hover of PieChart in amchart4 but its not applying properly. In attached screenshot you can see for first slice border applying properly but for remaining two slices its not working correctly. Also sharing the codepen link where I am facing this issue.

codepen link

// Create chart instance
    var chart = am4core.create("chartdiv", am4charts.PieChart);

   // Add data
chart.data = [{
  "country": "Lithuania",
  "litres": 30
}, {
  "country": "Czech Republic",
  "litres": 30
}, {
  "country": "Ireland",
  "litres": 40
}];

// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.colors.list = [
      am4core.color("#F18D8D"),
      am4core.color("#EFCA4F"),
      am4core.color("#4DB7F6"),
    ];
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";

// Let's cut a hole in our Pie chart the size of 40% the radius
chart.innerRadius = am4core.percent(40);
chart.logo.disabled = true;

// Put a thick white border around each Slice
pieSeries.slices.template.stroke = am4core.color("#506276");
pieSeries.slices.template.fillOpacity = 1;
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;

var hs = pieSeries.slices.template.states.getKey("hover");
hs.properties.stroke = am4core.color("white");
hs.properties.fillOpacity = 1;
hs.properties.strokeWidth = 2;

// Add a legend
chart.legend = new am4charts.Legend();

chart.legend = new am4charts.Legend();
chart.legend.itemContainers.template.togglable = false;
chart.legend.position = "bottom";
chart.legend.fontFamily = "sans";
chart.legend.fontSize = 8;
chart.legend.labels.template.fill = "#ffffff";
chart.legend.labels.template.opacity = "0.6";
chart.legend.valueLabels.template.fill = "#ffffff";
chart.legend.valueLabels.template.opacity = "0";
chart.legend.valueLabels.template.align = "left";
chart.legend.valueLabels.template.textAlign = "end";
chart.legend.itemContainers.template.paddingTop = 5;
chart.legend.itemContainers.template.paddingBottom = 5;

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: 400px;
  background-color: #555;
}

<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/charts.js"></script>
<div id="chartdiv"></div>

any help will be appreciated.

here are the screenshots.

Solution

This happens because of the order of slices. You should bring the hovered one to front:

pieSeries.slices.template.events.on("over", function(e){
  e.target.toFront()
})

answer available on git.

git link