I’m trying to set up a PieChart
using amCharts 5
, and I want to dynamically pass a color parameter to the tooltip so that each tooltip displays a different background color for each slice of the chart (as shown in the diagram). I have tried multiple approaches and events, but nothing seems to be working for me.
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/percent.js"></script>
<div id="chartdiv"></div>
<script>
// Create root and chart
var root = am5.Root.new("chartdiv");
var chart = root.container.children.push(
am5percent.PieChart.new(root, {
layout: root.verticalHorizontal
})
);
// Define data
var data = [{
country: "France",
sales: 100000,
color: am5.color(0x87CEEB)
}, {
country: "Spain",
sales: 160000,
color: am5.color(0x228B22)
}, {
country: "United Kingdom",
sales: 80000,
color: am5.color(0xFF7F50)
}];
// Create series
var series = chart.series.push(
am5percent.PieSeries.new(root, {
name: "Series",
valueField: "sales",
categoryField: "country"
})
);
series.data.setAll(data);
let tooltip = am5.Tooltip.new(root, {
getFillFromSprite: false
});
tooltip.get("background").setAll({
fill: am5.color(0xeeeeee)
});
series.set("tooltip", tooltip);
</script>