Change color of specific scatter points

[rafalS]

Because every function creates its own this. We can always put our old this (point details) into a new variable point outside the setTimeout function:

Code: Select all

const point = this;

and then load our data with our point's details:

Code: Select all

data: onClick(point),

jsFiddle: http://jsfiddle.net/BlackLabel/4581j3hq/

Rafał

[Nitesh.Nagpal]

Thank You Again rafalS you are the savior

In my case I am getting the updated data by calling some function instead of referring directly to new data array, so in that case while calling function I am passing this as an argument and getting the clicked point to access it's some property (like x,y, name, etc).

But after adding the setTimeout function, I am not getting the point details/object inside the function, and I am not sure why it is happening.

sample fiddle http://jsfiddle.net/q349znu6/10/

Please help

[rafalS]

I got the same message as before

[Nitesh.Nagpal]

Hey rafalS,

Thanks again for this for helping in this, got new thing to learn and sorry for repeated message

I have 2 queries

1. 1. Can we force x-axis points to be close even if the count of xcategories is less? (because after zoom, we can see more points if they are rendered closely) or we have to decrease the width of the chart depending on the x-axis points to make them adjust automatically?

• 2. I have added the panning property in my chart with 'shift key', to pan the chart horizontally, so can we add some property to pan vertically also, is this possible with my current scatter plot scenario?

Thank You

[rafalS]

Hi,

1. I don't quite understand, how exactly do you want it to work. Can you prepare a jsFiddle with steps to reproduce?
Maybe you want this working with only y zooming instead of xy?

http://jsfiddle.net/BlackLabel/r6y7sta1/

2. When it comes to vertical panning, it is not available in Highcharts. You can use an unofficial plugin, but in my opinion, it is not working nicely.

https://www.highcharts.com/products/plu ... %20Panning

Rafał

[Nitesh.Nagpal]

Hey rafalS,

1. 1. whatever you said is helpful that I can go for only y zooming instead of xy as per my requirement, basically I want the x-axis categories to be closer instead of taking the whole width so that the points look compressed horizontally.
   
   Here is just the sample idea what I want http://jsfiddle.net/87L42y9t/107/, here I have fixed the width, but I don't think this is the permanent solution or for worst case I will have to set my width dynamic depending on the count of xCategories

• 2. The link you shared it is using highstock, and we have license only for higcharts, and with this example I changed the chart type to scatter but panning is not working, and can you explain when this plugin fails or in what conditions it is not recommended to use

Thank You

[rafalS]

Hi, Nitesh,

1. There is no such a feature like decreasing or increasing distance between points on the x-axis, but it can be simply controlled by setting max extreme. For example, if we have 4 categories (x=0, x=1, x=2, x=3) and we set xAxis.max: 10, distance between points will be lower. I wrote a simple function that calculates xAxis.max depending on the chart width and pointDistanceX variable:

Code: Select all

const pointDistanceX = 40;

  chart: {
      type: 'scatter',
      zoomType: 'xy',
      events: {
        load() {
          var chart = this,
            chartWidth = chart.plotWidth,
            xMax = chartWidth / pointDistanceX;
            chart.update({
              xAxis: {
                max: xMax
              }
            })
         }
       }
     },

Also, if you would like to hide ticks that are not under points, you can use this code:

Code: Select all

    chart.update({
          xAxis: {
          	max: xMax,
            tickPositioner: function() {
              var chart = this.chart,
                tickPositions = [],
                counter = 0;
              chart.series[0].data.forEach((point) => {
                if (point.x === counter) {
                  tickPositions.push(point.x);
                  counter++;
                }
              })
              this.update({
                tickPositions: tickPositions
              })
            }
          }
        })

jsFiddle: http://jsfiddle.net/BlackLabel/9ragfjw8/

2. The link I gave you in the previous post (y-axis panning) is available for Highcharts as well.
This plugin doesn't fail, it just doesn't look good enough for me. You can see it here: http://jsfiddle.net/BlackLabel/5yrma479/
But you can use it if you want to.

Rafał

[Nitesh.Nagpal]

Thank You rafalS for providing me such detail information ,

In my case as there are large number of data points and datalabels are displayed at some specific points as per the space availability, I want datalabels to be displayed mandatory for min and max point in each xCategory, and for rest of points datalabels will adjust automatic, so is it possible to add allowOverlap property for some specific points or something else like this?

I want one suggestion from you,
In my case there chart will be containing around 1.3 million/13 lacs datapoints for the worst case, so can you suggest something how to handle this or is there any risk for browser window hang, or should we keep limit the data to some extent?, please help

Thank You

Nitesh

[rafalS]

Nitesh,

Well, you can easily find points that are min or max in each xCategory and, for example, position them differently in CSS giving them new class. If you want me to tell you more or write some code, can you prepare a jsFiddle example with a large number of data and instructions, how and which dataLabels exactly do you want to align?

When it comes to 1 million points, you can display it using boost module. Check this demo: https://www.highcharts.com/demo/scatter-boost

The problem is... boost module turns off dataLabels because rendering such large number of them is inefficient. Do you really really need 1 million points with dataLabels in your chart?

[Nitesh.Nagpal]

Hey rafalS,

I have prepared sample fiddle of what I wanted, here datalabels are shown for random points as the chart adjust itself in the given space, and I want to display the datalabels of min and max of each category (first and last scatter point from bottom to top in each xCategory) mandatory and rest of datalabels should adjust itself automatically.
Here is the sample fiddle http://jsfiddle.net/q349znu6/17/.

And regarding using boost module, I have already tried this before asking you and I observed the same thing as you said regarding datalabels turn off, and I don't want to display datalabels for all scatter points in case of 1 million data, but on some points like highcharts displays automatically or for only min and max for each category or something else, can you suggest what should we do in this situation?

Please help.

Thank You

[rafalS]

Hi Nitesh,

We don't have to use allowOverlap property. Actually, it can not be used only for some chosen points.
Instead of this, we can just manually give our bottom and top labels more place by moving them a little bit down and up:

{"x":2015,"y":60,"value":64.48992828495473,dataLabels:{y: 20}}

jsFiddle: http://jsfiddle.net/BlackLabel/0e6r1sdt/

Of course, it can be automated - you can write a simple function that will look for points that are at the bottom or top and update their dataLabels.y value.

------------------------------------------------------------------------------------------------------

Regarding dataLabels with boost module - please get familiar with this thread: https://github.com/highcharts/highcharts/issues/4829

Have a good week!

[Nitesh.Nagpal]

Wow rafalS , again got new thing to learn.

I have added the dataLabels property in my function it is working properly as expected, but the labels for minimum values for each category are not displayed in some categories, I think it is related to the y value in the dataLabels object.

And thanks for the boost module link, what you suggest regarding displaying labels as per my scenario (having large number of data points)?

Also, I am planning to show some loading image(overlaying my whole page) when user zoom in or clicks on reset zoom button .
I was able to capture zoom in/out using redraw event in chart object, but I want to hide my loading image after chart gets rendered completely, so how can I captured this event?
i.e to capture both events
1. user zooming in
2. user resetting the zoomed view

Please help, and Thank You once again Sir

[rafalS]

Nitesh,

The best events for capturing zooming are setExtremes and afterSetExtremes events: https://api.highcharts.com/highcharts/yAxis.events

Could you send me a simplified jsFiddle with the code you have written so far and situation mapping your loading behavior? Then I will be able to find the best solution

Best regards!

[Nitesh.Nagpal]

Hey rafalS,

Here is the sample fiddle with large data, sorry I have to add whole json in JS code, because I was unable to upload it on some online referring it in script tag http://jsfiddle.net/q349znu6/36/. Also it will be helpful if you can explain when and where setExtremes is used

In my case user will be zooming and clicking on points, and for large number of data points it takes some time to redraw the chart, when user zoom in or zoom out or any click event happens it leads to data change and redraw of chart.

And in any of these situation I want to display some loading message while chart is getting redrawn, because at that time nothing happens and I want to inform user that something is getting processed/loading.

Please help

Thank You

[Nitesh.Nagpal]

Hey rafalS,

Hopefully everything I mentioned is clear, please let me know If you want any thing more.

Thank You