maxmar123
Posts: 18
Joined: Fri Oct 28, 2022 7:35 am

Change marker radius depending on amount of displayed data points on the chart

Hello!

I'm using a dynamic data chart from a Postgres database as the data source. A data point corresponds to a day. Clicking on a button changes the table from which the data is read. As a result, the x-axis is sometimes 5 years long and sometimes just 1 month long.

The chart is a line chart with markers. I want the markers to change size in steps when zooming, for example:
- if up to 60 data points are displayed, the markers should have a radius of 7.
- if between 61 - 500 data points are displayed, the markers should have a radius of 5
- if between 501 - 2000 data points are displayed, the markers should have a radius of 3
- etc...

I've tried a few things, but so far I've only managed to get the radius to be 3 when the entire chart is displayed and when you zoom, the radius changes to 5. But this is extremely impractical because, as I said, the length of the x axis differs greatly depending on the table and therefore the size of the markers is not applicable to everything.

In any case, the best way would be to count the displayed data points and adjust the marker size accordingly, but I absolutely can't get it to work.

Can someone give me an example of this please?
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Change marker radius depending on amount of displayed data points on the chart

Hi,

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

Each point has the visible parameter that determines whether the point is displayed in the plot. This allows you to count the number of points currently displayed on the chart.
Api: https://api.highcharts.com/class-refere ... nt#visible
Demo: https://jsfiddle.net/BlackLabel/5gz3vsax/

Let me know if that was what you were looking for!
Best regards!
Dawid Draguła
Highcharts Developer
maxmar123
Posts: 18
Joined: Fri Oct 28, 2022 7:35 am

Re: Change marker radius depending on amount of displayed data points on the chart

Thank you so much, this is exactly what I'm looking for!

Just an input for Highcharts staff that I didn't find it in the documentation and now that I know where to look, I still wouldn't know that I could do such things with the "visible" parameter. It would be good to name the capabilities in the description.

Thank you once again, I tried this for 3 days now :)
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Change marker radius depending on amount of displayed data points on the chart

You're welcome!
I'm glad you found it helpful!

In case of any other questions, feel free to contact us anytime.
Regards
Dawid Draguła
Highcharts Developer
maxmar123
Posts: 18
Joined: Fri Oct 28, 2022 7:35 am

Re: Change marker radius depending on amount of displayed data points on the chart

dawid.d wrote: Fri Oct 28, 2022 1:08 pm Hi,

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

Each point has the visible parameter that determines whether the point is displayed in the plot. This allows you to count the number of points currently displayed on the chart.
Api: https://api.highcharts.com/class-refere ... nt#visible
Demo: https://jsfiddle.net/BlackLabel/5gz3vsax/

Let me know if that was what you were looking for!
Best regards!

Even though it's exactly I was looking for, it's not working on my chart.
I adapted the render function but then the chart doesn't load anymore and it just shows a blank screen.
So I tried to figure out where the problem is and removed more code from the render function step by step, until I ended up with this:

Code: Select all

      
      render: function() {
        this.series[1].update({
          marker: {
            radius: 15
          }
        }, false);
      }
When I use this function my chart loads, which is good, but it only shows all other series and the data points for series[1] are gone and even the legend won't show. When I change your demo to use this function it still works.. I'm an absolutely noob to JS and I don't have any more ideas to troubleshoot this.

What can be the reason this is working in your demo but not in my chart?
I'm using the official React wrapper if this makes any difference.
maxmar123
Posts: 18
Joined: Fri Oct 28, 2022 7:35 am

Re: Change marker radius depending on amount of displayed data points on the chart

I found this thread: viewtopic.php?t=41919

So I tried to add this.series[1].show(); to my function and now the markers appear.
I will try to adapt the original demo now to my chart and hope I get this to work :D
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Change marker radius depending on amount of displayed data points on the chart

Hi,

It's really hard for me to say what the source of the problem could be as you haven't shared your code. I tried to recreate it by rewriting my code to react, but everything works here.
Demo: https://codesandbox.io/s/highcharts-rea ... ize-q77rbk

Could you please share a demo so that I can help you solve it?

Best regards
Dawid Draguła
Highcharts Developer
maxmar123
Posts: 18
Joined: Fri Oct 28, 2022 7:35 am

Re: Change marker radius depending on amount of displayed data points on the chart

dawid.d wrote: Mon Oct 31, 2022 7:25 am Hi,

It's really hard for me to say what the source of the problem could be as you haven't shared your code. I tried to recreate it by rewriting my code to react, but everything works here.
Demo: https://codesandbox.io/s/highcharts-rea ... ize-q77rbk

Could you please share a demo so that I can help you solve it?

Best regards
Thank you, I think you misinterpreted my last comment. I got it to work with adding "this.series[1].show();" to the function, so everything works fine.
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Change marker radius depending on amount of displayed data points on the chart

Hi,

I just wasn't sure if everything worked for you after all, so I didn't want to leave you without help.
Now that I know, I'm glad everything works!

Feel free to ask any further questions!
Kind regards
Dawid Draguła
Highcharts Developer

Return to “Highcharts Stock”