Search code examples
highchartsscatter-plot

Scatter seems to have a problem in version 10.2.1

I have a jsfiddle which comes as close as possible to my production environment. However, the series are not displayed as a scatter chart but as a line. This problem started occurring today apparently when the CDN (https://code.highcharts.com/) started serving version 10.2.1

My questions:

  1. Is this a bug or am I doing something wrong?
  2. How do I specifically use the previous (working) version i.e. probably version 9
  3. In my oper. env. I also get a crash in the console. See screenshot below. This is principally the same chart but differs in much longer series (hundreds of points)

[Edit:] And apparently the problem seems to be in version 8.2 and 9.1.0 as well - confirmed this by looking at sites using those versions.

Screenshot

        console.log('Creating chart: Windrichting');
        chart = Highcharts.StockChart('chartcontainer', {
            title: {
                text: 'Windrichting',
            },
            xAxis: {
                type: 'datetime',
            },
            yAxis: {
                id: 'Direction',
                title: {
                    text: 'Directrion (Compass / degrees)'
                },
                opposite: false,
                min: 0,
                max: 360,
                tickInterval: 45,
                labels: {
                    align: 'right',
                    x: -5,
                    y: -2,
                    formatter: function () {
                        return compassP(this.value);
                    }
                },
                allowDecimals: false
            },
            legend: {
                enabled: true
            },
            series: [],
        });
        chart.showLoading();
      WindrichtingAddSeries(chart);
            chart.hideLoading();
            chart.redraw();
      console.log('Creating chart: Done');
      
      
function WindrichtingAddSeries(thisChart) {
  thisChart.addSeries({
    name: 'Kompasrichting',
    id: 'Bearing',
    data: [[1661789460000,13],[1661789520000,26],[1661789580000,19],[1661789640000,12],[1661789700000,17],[1661789760000,354],[1661789820000,357]],
    color: '',
    yAxis: 'Direction',
    type: 'scatter',
    lineWidth: 2,
    zIndex: 5,
    tooltip: {
      valueSuffix: ' '
    }
  }, false);
  thisChart.addSeries({
    name: 'Gem. Kompasrichting',
    id: 'AverageBearing',
    data: [[1661789460000,90],[1661789520000,100],[1661789580000,120],[1661789640000,130],[1661789700000,120],[1661789760000,110],[1661789820000,100]],
    color: '',
    yAxis: 'Direction',
    type: 'scatter',
    lineWidth: 2,
    zIndex: 5,
    tooltip: {
      valueSuffix: ' '
    }
  }, false);
}

function compassP(deg) {
        var a = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
        return a[Math.floor((deg + 22.5) / 45) % 8];
    };
Solution

    1. It is not a bug. The series has a connector between points because you set lineWidth. API Reference: https://api.highcharts.com/highcharts/series.scatter.lineWidth

    2. You can specify Highcharts version by appending the version number to the root level, for example: https://code.highcharts.com/10.2.1/highcharts.js. For more info please check: https://code.highcharts.com/