Tooltip on legend with amcharts4

34 Views Asked by At

I'm using Angular 16 and amcharts 4. This is what I need to achieve:

enter image description here

and this is what I'm right now:

enter image description here

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: enter image description here

0

There are 0 best solutions below