CODEWITHSUNDEEP
javascripthighcharts
ConfusedDeveloper
ConfusedDeveloper

Reputation: 7001

Highchart - Connect nulls only when value is null

I have a Highchart which renders a line series as shown in the snippet below: 

Highcharts.chart('container', {

    title: {
        text: 'The graphs connect from April to June, despite the null value in May'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            connectNulls: true
        }
    },

    series: [{
        data: [
            20,
            60,
            null,
            11,
            null,
            160,
            120,
            130,
            NaN,
            NaN,
            80,
            40],
        type: 'line',
        name: 'Area range series',
        marker: {
            enabled: false
        }
    }]

});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container"></div>

I know that Highchart has a property connectNulls to connect null values. But I want to connect only when value is Null and not NaN.

Upvotes: 0

Views: 854

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

NaN is not a correct point format, just like String or Boolean. If value is not a number then it's treated as null-point. I think you want to use opposite options: connectNulls to false and just remove null points, with given indexes, demo: http://jsfiddle.net/BlackLabel/fquznbeq/4/

You can automate this process: http://jsfiddle.net/BlackLabel/fquznbeq/8/

function toHCFormat(data) {
  var formatted = [];

  data.forEach(function (point, i) {
    if (point === null) {
      // do nothing
    } else if (isNaN(point)) {
      formatted.push([i, null]);
    } else {
      formatted.push([i, point]);
    }
  });

  return formatted;
}

Use:

data: toHCFormat([
  20,
  60,
  null,
  11,
  null,
  160,
  120,
  130,
  NaN,
  NaN,
  80,
  40
]),

Upvotes: 1

Related Questions