Search code examples
highchartslinepoints

High Charts Line Chart with missing data

I am using High Charts and using a Line chart for visualization. I have some bad data in the series data which is replaced with nulls and my line on the trend is not connected (bad data is not plotted on the trend, hence disconnected line) which is fine.

My issue is that I have some good data in between some bad data like (bad,bad,good,bad,bad,good,bad) this good data is shown as tool tips on my trend but no data point is shown on the trend. Is there any configuration option with in high charts so that I could plot individual data points along with disconnected line?

enter image description here

As you may see in the trend image, that the line series is broken but there are still some valid data points among bad data points which are not visible on the trend.

Here is how I initialize my highchart

 initializeChart() {
Highcharts.setOptions({global: { useUTC : false }});
let yAxesLoc = this.getYAxes(this.props.signals);
// Update the yAxes to use the unit abbrevation instead of the full name
let dfdArr = new Array();
yAxesLoc.forEach(function(yAxis) {
  if(!yAxis.unitName) {
    return;
  }
  dfdArr.push(AfModel.GetUnitByName(yAxis.unitName, function(unit) { 
    if (unit) {
      yAxis.unit = unit.Abbreviation;
      yAxis.title = {text: unit.Abbreviation};
    }
  }));
});
let that = this; 
// Only all the units are loaded, then we initialize Highcharts
return $.when.apply(null, dfdArr)
.always(function() {
  that.yAxes = yAxesLoc; // Set all the axis
  that.colorGenerator = new ColorGenerator(); // Initialize a new color generator for this trend
  that.chart = Highcharts.chart(that.state.chartDivId, {
    credits: {
      enabled: false
    },
    title: null,
    chart: {
      zoomType:'xy',
      events: {
        redraw: function(){
          // Remove all frozen tooltips
          if (that.cloneToolTip) {
            that.chart.container.firstChild.removeChild(that.cloneToolTip);
            that.cloneToolTip = null;
          }
          if (that.cloneToolTip2) {
              that.cloneToolTip2.remove();
              that.cloneToolTip2 = null;
          }
        }
      }
    },
    xAxis: {
      type:'datetime',
      min: that.props.startDateTime.getTime(),
      max: that.props.endDateTime.getTime(),
      labels: {
        rotation: 315,
        formatter: function() {
          return new Date(this.value).toString('dd-MMM-yy HH:mm')
        }
      }
    },
    tooltip: {
        shared: true,
        crosshairs: true,
        valueDecimals: 2,
        formatter: function(tooltip) { 
          return HcUtils.interpolatedTooltipFormatter.call(this, tooltip, function(yVal, series) {
            return NumberUtils.isNumber(yVal) ? 
                    (series.yAxis.userOptions.unit) ?
                       NumberUtils.round(yVal, 4) + " " + series.yAxis.userOptions.unit 
                    : NumberUtils.round(yVal, 4)
                  : yVal;
          }); 
        }
      },
    yAxis: that.yAxes,
    series: {
      animation: false,
      marker: {enabled: false}
    },
    plotOptions: {
      line: {
        animation: false,
        marker: {
          enabled:false
        }            
      },
      series: {             
          connectNulls: false,
          connectorAllowed: false,
          cursor: 'pointer',
          point: {
              events: {
                  // This event will freeze the tooltip when the user clicks
                  // Inspired by https://stackoverflow.com/questions/11476400/highcharts-keep-tooltip-showing-on-click
                  click: function() { 
                    if (that.cloneToolTip) {
                      that.chart.container.firstChild.removeChild(that.cloneToolTip);
                    }
                    if (that.cloneToolTip2) {
                        that.cloneToolTip2.remove();
                    }
                    that.cloneToolTip = this.series.chart.tooltip.label.element.cloneNode(true);
                    that.chart.container.firstChild.appendChild(that.cloneToolTip);

                    that.cloneToolTip2 = $('.highcharts-tooltip').clone(); 
                    $(that.chart.container).append(that.cloneToolTip2);
                  }
              }
          }
      }
    }
  });
})

}

Kindly suggest.

Thanks.

Solution

  • Highcharts draws a line only between two subsequent no-null points. Single points can be visualized as markers (which you disabled in your code).

    Here's a live demo that shows this issue: http://jsfiddle.net/BlackLabel/khp0e8qr/

      series: [{
    data: [1, 2, null, 4, null, 1, 7],
    marker: {
        //enabled: false // uncomment to hide markers
    }
  }]

    API reference: https://api.highcharts.com/highcharts/series.line.marker