Doughnut | Podcast client for Mac | Audio Utils library

I am using ChartJS library in Typescript. Here is my code,

My study colleague and I are working on creating some doughnut graphs, and want to use mouseOver to print the values of doughnut slices. The calculations we are using are in radians (using angleMode(RADIANS). To track the mouse position, we are calculating the mouseX and mouseY positions, and also a 'mouse angle' as the angleBetween comparing a vector(1, 0) and a vector of mouseX, mouseY. For me, the result is positive radians clockwise from 3.00 o'clock to 9.00 o'clock, and then negative radians for the opposite. However, for my study colleague they are getting absolute values in radians. We found a GitHub detailing a bug in this function from August 2019: (https://github.com/processing/p5.js/issues/3973) My colleague implemented a fix checking on the overall position of Y before calling the angleBetween function, but this is obviously not optimal.

Has anyone else encountered this issue, and know why this is happening?

Thanks!

I'm trying to build a doughnut chart with rounded edges only on one side. My problem is that I have both sided rounded and not just on the one side. Also can't figure out how to do more foreground arcs not just one.

I have started using ng2-charts with Angular where I need to hide the text/value coming on slice of doughnut/Pie chart as shown and highlighted in below screenshot

Below is my code

I am trying to bring APEX Doughnut chart in Angular 11x app, but cannot understand the documentation.

I am unable to remove the % value and set a fixed value in doughnut chart, nor able to set colors.

I am working on a doughnut circle svg with expanding tabs. As of last night the expanding tabs are fully functional and the correct x/y transform is applied on mouseenter/mouseleave. (the x/y is essential on both mouse enter and mouse leave for proper transform origin - this was difficult to get each tab expansion to appear centered as it is a circle).

Today I have tried going further with the project by creating an additional loop that displays corresponding content based on the active tab index. (This is working).

Now I want to go a step further by making the current tab stay expanded until another tab is hovered over. Right now the eventlistener mouseleave applies when my mouse leaves the tab (obviously). What can I do to keep the current tab "active" unless hovering over another tab? (rather than the mouseleave?). I am still fairly inexperienced with JS, I'll be content if anyone could just send me in the right direction

CodePen

I am attempting to animate an svg doughnut circle with gsap. After much testing with code and layering, I am stumped with a glitchy hover effect (which I tried to resolve with pointer events) and the transform origin is only applied to a few of the expanded tabs. I am wondering if this might be that the tabs may have a different bounding box?

Comments added per request:

Side Note: I've tried applying fill-box to entire svg instead, I'm wondering if I need a parent layer thats an exact square so I can apply the transform origin for the child "expandtabs" to the center of that?

I assumed I needed to iterate through an array of both to have the tabs correspond. Unless the tabs were children of each other?

TLDR; Tabs are not scaling from center of circle, and glitchy hover effect

CodePen Example

HTML

When I run npm run build which executes ng build -c production build will be completed as expected. But command prompt will be filled with this warning: