charts.js | Business Charts | Chart library

I have multiple heatmaps in one container. I wanted to set the color axis so that the positive numbers fall in the green range and the negative numbers in the red range. So I set the colorAxis: minColor to #009933 and colorAxis: maxColor to #ff3300. This is not setting all the negatives to ranges of red and the positives to ranges of red. Can I do that using Highcharts?

Here is my code:

I am trying to add subcategories to my yaxis on the heatmap on highcharts but I am getting [object, object]

I am trying to add iphone and ipad as categories and google, bing and jeeves as the subcategories.

This is the method I saw in documentation to create the multi level categories:

I wanted to draw rSquared best fit line in scatter plot of actual and predicted values , where I was given the rsquare value , I first thought of to use ag grid chart , but could not find a way , so thinking of using any of the js chart package (d3.js , chart.js , highcharts.js) is it possible to draw this rsquare line in scatter plot . for reference I added data in this plunkr , but used ag grid chart but could not find any way to do that .

I was trying to achieve the below chart. However, there are two problems I am facing. I am able to create most of the charts. Here is the link to Working fiddle.

1. Here I was able to get the data labels as shown in the image but I don't want to use the function. If it is possible, please tell me how?
2. Second is the connecting lines between data labels and charts. This I was able to achieve even with any function. There is something called connector shape for pie chart in which we have one of the options as crookedLine. The connector lines in the below image look like that. Please help me, even with function.

I have an highchart gauge graph that is working fine. I however want to fill with colors depending on the percentages as below. The colors should fill up to the point marked by the percentage and the rest should remain grey color.

I've read the docs regarding typescript on Highcharts but I still don't have it very clear how to use types in highcharts.js functions.

For example, I have a formatter function on my tooltip options and it admits a parameter this. How do I type it?

Right now I'm using any but that's just to bypass the typescript errors. I don't want to manually type it in case Highcharts updates its content in future versions, so I assume there's a proper way of doing it?

I have multiple highcharts in one container and wanted to use a shared tooltip for it.

I am able to generate a shared tooltip for am not able to format it to how I want.

This is my code:

I want to create a timeline using Charts.js. For this i imported data in the format hours:minutes:seconds like "00:00:10".
When using Charts.js 2.0 one was able to set the parser, which allowed one to import the time values as string.

But after upgrading to Charts.js 3.2.1 the parser option seems to be no longer working.
In the documentation it is stated that one can still use the parser as before. https://www.chartjs.org/docs/latest/axes/cartesian/time.html#parser

I found multiple forum threads that explained how to do this, but they are done in Charts.js 2.x and are no longer working in my example.
Plot lap times with Chart.js from time strings
Chartjs time in Xaxes

Here is my code.
The first example is not going to work because of the script failing with the parser. In the second example you can see the exact same code but without the parser, which is working.

So how can i parse my string data, so that it is formated correctly and the timeline is shown?

Thank you very much for your help.

new to react so I am not quite sure what I am doing wrong here... I am trying to call data from an API, then use this data to populate a charts.js based component. When I cmd + s, the API data is called in the console, but if I refresh I get 'Undefined'.

I know I am missing some key understanding about the useEffect hook here, but i just cant figure it out? All I want is to be able to access the array data in my component, so I can push the required values to an array... ive commented out my attempt at the for loop too..

Any advice would be greatly appreciated! My not so functional code below: