mgugliuzza
Posts: 16
Joined: Sat May 02, 2020 3:49 pm

Scatter/quadrant chart with dynamic and percise background

Hello!

I'm working on a quadrant chart that will contain two plot points. Depending on the user's data, not only will they fall within one of the four quadrants, but I'd also like to add three additional diagonal sections to categorize the user. These sections should dynamically highlight depending on where the user falls.

Below is a mock-up I created in excel... Within this example, the text: Flex and Anchor are used to name the top right and bottom left quadrants. The text: Office, Hybrid, Remote are used to define the three additional sections.

Can anyone please tell me if this is possible to achieve with highcharts?

Thanks so much.

Image
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Scatter/quadrant chart with dynamic and percise background

Hello,

Welcome to our forum and thanks for contacting us with your question!

Yes, it is possible. You can use SVGRenderer for this.

Demo: https://jsfiddle.net/BlackLabel/v3ndmhLy/
API: https://api.highcharts.com/class-refere ... VGRenderer

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
mgugliuzza
Posts: 16
Joined: Sat May 02, 2020 3:49 pm

Re: Scatter/quadrant chart with dynamic and percise background

michal.f wrote: Tue Oct 12, 2021 11:33 am Hello,

Welcome to our forum and thanks for contacting us with your question!

Yes, it is possible. You can use SVGRenderer for this.

Demo: https://jsfiddle.net/BlackLabel/v3ndmhLy/
API: https://api.highcharts.com/class-refere ... VGRenderer

Let me know if you have any further questions!
Best regards!
Wow this is extremely helpful- thank you so much!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Scatter/quadrant chart with dynamic and percise background

Hi,

I'm glad to hear. It was nice to write a quadrant graph also thanks for the nice question. :D

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
mgugliuzza
Posts: 16
Joined: Sat May 02, 2020 3:49 pm

Re: Scatter/quadrant chart with dynamic and percise background

michal.f wrote: Wed Oct 13, 2021 3:01 pm Hi,

I'm glad to hear. It was nice to write a quadrant graph also thanks for the nice question. :D

Feel free to ask any further questions!
Best regards!
Thanks again for your help with this... do you know how this would be possible within a React component? I tried to replicate using the current settings, but the chart appears off-center and the text does not appear.

Here's is what it currently looks like:
Image


I tried placing this in a JSFiddle to demonstrate- but unfortunately I couldn't get it to run... You can, however, see the code used here:
https://jsfiddle.net/mg2020/g4wnok75/17/

Thanks so much for your time
M
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Scatter/quadrant chart with dynamic and percise background

Hi,

I recreated the graph I sent you in React using CodeSandbox and it works fine. Remember that it is important with this graph to set a constant width and height so that it draws correctly.

Demo: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
mgugliuzza
Posts: 16
Joined: Sat May 02, 2020 3:49 pm

Re: Scatter/quadrant chart with dynamic and percise background

michal.f wrote: Thu Jan 13, 2022 11:34 am Hi,

I recreated the graph I sent you in React using CodeSandbox and it works fine. Remember that it is important with this graph to set a constant width and height so that it draws correctly.

Demo: https://codesandbox.io/s/highcharts-rea ... =/demo.jsx

Let me know if you have any further questions!
Best regards!
Wow- you are incredible. Thank you so much again! This is extremely helpful!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Scatter/quadrant chart with dynamic and percise background

You're welcome! In case of any further questions, feel free to contact us again.

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”