Search code examples
javascripthighchartsjsfiddle

Line chart does not connect dots if they have gaps in values between in serie object

I have a regular chart, and sometimes for example you do not get values in some series ( y value ) it ends up being null, but my goal is to go through all series and if he does not find in next serie Y value to move on to next and connect the dots. 

{
                "drilldown": false,
                "y": null,
                "name": "Febbraio",
                "datetype": "string"
            },
            {
                "drilldown": false,
                "y": 0,
                "name": "Marzo",
                "datetype": "string"
            },
            {
                "drilldown": false,
                "y": null,
                "name": "Aprile",
                "datetype": "string"
            },
            {
                "drilldown": false,
                "y": null,
                "name": "Maggio",
                "datetype": "string"
            },
            {
                "drilldown": false,
                "y": 0,
                "name": "Giugno",
                "datetype": "string"
            },

At the moment i have enter image description here

And what i am trying to do is to connect grey dots with one line and black dots with one line. Anyone have an idea what am i doing wrong ? You can find my fiddle here http://jsfiddle.net/zg9paq6e/

Solution

  • You are looking for the option connectNulls.

    It can be applied to an individual series or all series by using plotOptions.

    I added this to your series definition to get a line even when information is missing:

    series: [{
  connectNulls: true,
  ...
}]

    Working JSFiddle(where I used connectNulls for one series): http://jsfiddle.net/ewolden/uL3cmpjv/

    API on connectNulls: https://api.highcharts.com/highcharts/plotOptions.line.connectNulls