I'm using Angular 16 and amcharts 4. This is what I need to achieve:
and this is what I'm right now:
How can I add that tooltip to display something I have stored in variables? This is my actual chart configuration:
let chart = am4core.create(this.chartId, am4charts.PieChart);
if (this.useAnimation) am4core.useTheme(am4themes_animated);
// Add data
chart.data = this.data;
// Set inner radius
chart.innerRadius = am4core.percent(this.innerRadius);
// Add and configure Series
let pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "score";
pieSeries.dataFields.category = "type";
pieSeries.slices.template.stroke = am4core.color(this.borderColor);
pieSeries.slices.template.strokeWidth = 2;
pieSeries.slices.template.strokeOpacity = 1;
pieSeries.slices.template.propertyFields.fill = "color";
pieSeries.labels.template.disabled = this.labelDisabled;
pieSeries.ticks.template.disabled = this.tickDisabled;
if (this.disableTooltipOnHover) pieSeries.slices.template.tooltipText = "";
if (this.displayLegend) {
chart.legend = new am4charts.Legend();
// TODO tooltip not working
// chart.legend.tooltip = new am4core.Tooltip();
// chart.legend.tooltip.label.text = "prova tooltip";
// chart.legend.tooltipPosition = "pointer";
// console.log(chart.legend.tooltip);
chart.legend.valueLabels.template.text = this.legendTemplate;
}
let hs = pieSeries.slices.template.states.getKey("hover");
if (!this.sliceOnHover) {
hs!.properties.scale = 1;
} else {
hs!.properties.scale = this.sliceScale;
}
// This creates initial animation
pieSeries.hiddenState.properties.opacity = 1;
pieSeries.hiddenState.properties.endAngle = -90;
pieSeries.hiddenState.properties.startAngle = -90;
let label = chart.seriesContainer.createChild(am4core.Label);
label.text = this.innerText;
label.horizontalCenter = "middle";
label.verticalCenter = "middle";
label.fontSize = 20;
// TODO center text 20 NPS
Any idea? In //TODO there is what I tried to add the tooltip, but failing.
Another issue I'm having, it's about the text inside the circle of the donut chart. I need to write: 20 NPS, on two lines, and I had to add the text like "20 \nNPS" to make it work, but I'm not able to center the text as shown in this picture:


