karuash
Posts: 21
Joined: Mon May 30, 2022 5:33 am

Need to display Horizontal and vertical gauge selectors with maximum and minimum selection.

Hi Team,

I need Gauge like in the screenshot with both x-axis and y-axis having minimum and maximum selection.

Can you please help me on that.

Regards,
Ashok.k
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Need to display Horizontal and vertical gauge selectors with maximum and minimum selection.

Hello,

You did not include the screenshot you are talking about. Could you try resending it?

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
karuash
Posts: 21
Joined: Mon May 30, 2022 5:33 am

Re: Need to display Horizontal and vertical gauge selectors with maximum and minimum selection.

Sorry,

We are developing 3D bubble chart(Find the attachment).I need slider with minimum and maximum selection in the below of x-axis and left side of y-axis like(check the below URL)
https://stackblitz.com/edit/ngx-slider- ... onent.html
if we move the slider then it will display the bubble chart in between the selected ranges.
3d bubble chart.PNG
3d bubble chart.PNG (43.23 KiB) Viewed 823 times
Can you please provide the solution for this.

Regards,
Ashok.K
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Need to display Horizontal and vertical gauge selectors with maximum and minimum selection.

Hi,

I have two possible ways of doing this, using input or using highstock.

You can anchor the value from the input in the method setExtremes to set the min and max extremes on the x-axis and change them dynamically.

Code: Select all

<input id="rangeSelector" type="range" value="100" min="0" max="100">

Code: Select all

rangeSelector.addEventListener('change', () => {
  chart.xAxis[0].setExtremes(0, rangeSelector.value);
});
https://api.highcharts.com/class-refere ... etExtremes

Demo with input: https://jsfiddle.net/BlackLabel/79hpg56b/3/

Have you considered using a range selector like the one built into the stock chart?
You can customize it a bit and change the look, maybe not exactly as your slider but there are quite a few options.

Demo in Stock: https://jsfiddle.net/BlackLabel/79hpg56b/4/

Let me know what you think about these solutions.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”