add scatter points on line chart, Highcharts

Question

So, What I have is a Graph which shows 2000 datapoints at a speed of 1000/130. as you can see the fiddle Below

https://jsfiddle.net/abnitchauhan/xah4b7jg/

till this point everything works fine. but the problem arises when I add scatter plots to the same chart.

suppose I have the X-axis and Y-axis which shows some scatter points on the same chart.

  xPeak =[20,140,267,331,430,499,567,689,798,878,980,1084,1194,1303,1421,1600,1789,1857,1897,];

  yPeak =[0.568983828,0.677775032,0.68688825,0.686838299,0.685661679,0.7656789,0.74788438,0.7846787877,0.76785048,0.967867401,0.678468927,0.756786269,0.756786506,0.6767838,0.686875904,0.86586541,0.785671637,0.75678593,0.73670506,];

when I add scatter points on the same chart. the chart's functioning gets distorted. What I need is to show the scatter points at the point the line reach that point.

Here is the fiddle for the chart including the scatter points.

https://jsfiddle.net/abnitchauhan/6jqx9dwb/

the chart should be running like the first fiddle, but the scatter points should also be plotted with that.

ppotaczek ppotaczek · Accepted Answer · 2019-10-31T10:03:09

In 'afterGetSeriesExtremes' event you can overwrite extremes for xAxis to include only the first series data:

(function(H) {
    H.addEvent(H.Axis, 'afterGetSeriesExtremes', function(e) {
        var series = this.series[0],
            xExtremes;

        if (this.coll === 'xAxis') {
            xExtremes = series.getXExtremes(series.xData);

            this.dataMin = xExtremes.min;
            this.dataMax = xExtremes.max;
        }
    });
}(Highcharts));

Live demo: https://jsfiddle.net/BlackLabel/f64goze2/

Docs: https://www.highcharts.com/docs/extending-highcharts

add scatter points on line chart, Highcharts

1 Answers