Bug regarding donut chart

[brijesh-imemori]

image 1 :

image 2 :

As shown in the above images, we are using a donut chart in both the local and build environment on the server instance with all the development in place. However, the issue of an extra top value being added to the HTML content still persists. I am unsure where this extra top value is coming from. Please help us fix this bug.

[martynasma]

That doesn't look like something built-in. Would you be able to post your whole chart and data on CodePen/jsFiddle so that we can test?

[brijesh-imemori]

https://codesandbox.io/p/sandbox/donut-chart-related-bug-cxw3hm?file=%2Fsrc%2FcircleChart%2FcircleChart.tsx%3A75%2C11

As you can see in the code above, this is how it works in the compiler. However, in our local environment without the compiler, it works fine.

Image 1:

The above image is from the inspect tool of the code in the compiler environment. You can see the top value is different.

Image 2:

The above image is from the inspect tool of the code in the local environment. Here, the top value is correct.

We found a temporary solution for now by adding dy: -30 inside the label in circleChart.tsx.

[martynasma]

I think the issue is that you have all those heights set, both in label settings and HTML styles. Try removing them.

[brijesh-imemori]

https://codesandbox.io/p/sandbox/donut-chart-related-bug-cxw3hm?file=%2Fsrc%2FcircleChart%2FcircleChart.tsx%3A89%2C23

Now, as you can see, we removed all the HTML style, but the issue is still there. There is some extra top value added above the label.

[martynasma]

You still have height set in label's settings:

    const label = root.tooltipContainer.children.push(
      am5.Label.new(root, {
        html: htmlContent,
        position: "absolute",
        textAlign: "center",
        centerY: am5.percent(50),
        y: am5.percent(50),
        height: 10, // <- this
        x: am5.percent(50),
        centerX: am5.percent(50),
        fill: am5.color(0x8c8c8c),
      })
    );