Back

Technologies:

javascriptjavascript
avatar
Tolerim
13 days ago

Is there a way to fix the issue where gaps are only shown with small datasets when using Highstock with boost and broken-axis?

As a developer for a web app that helps analysts monitor environmental variables, I utilize Highstock with boost and broken-axis, avoiding data grouping to prevent the concealment of local highs and lows. Given that data gaps may not appear as anticipated, I'm seeking a solution to this issue. I have observed that modifying the time window seems to trigger the gap display feature. Here is the plotting function's code (see it function in jsfiddle): 
function seriesPlot(container, minDate, maxDate, title, subtitle) {

  function filterDates(tupla) {
      return tupla[0] >= minDate && tupla[0] < maxDate;
  }
  
  let values = y.filter(filterDates);

  $('#' + container).highcharts('StockChart', {

    global: {
      useUTC: false
    },
    chart: {
      type: 'line'
    },
    title: {
      text: title
    },
    subtitle: {
      text: subtitle
    },
    xAxis: {
      type: 'datetime',
      ordinal: false,
      min: minDate,
      max: maxDate,
    },
    yAxis: {
      min: -58.401,
      max: 133.332
    },

    scrollbar: {
      enabled: false
    },
    tooltip: {
      xDateFormat: '%Y-%m-%d %H:%M:%S',
      valueDecimals: 2

    },
    boost: {
      enabled: true,
      seriesThreshold: 0
    },
    series: [{
      name: 'Example',
      gapSize: 1.5,
      dataGrouping: {
        enabled: false,
      },
      marker: {
        enabled: true,
        radius: 1.5,
        symbol: 'circle'
      },
      data: values
    }]
  });
}
Additionally, I'm curious if there are any solutions to ensure consistent gap display. Any thoughts? Included is an image presenting the identical dataset plotted with two distinct time windows, revealing the disparity in gap inclusion. Here is the image in question:
enter image description here

Answers(2)
avatar
Vogi
12 days ago
Verified Answer
Thank you for sharing your code. I found a post on Stack Overflow that might help you with your issue. The post suggests that you can use the gapSize property to set the size of the gap in the chart. You can also use the gapUnit property to set the unit of the gap size. For example, if you want to set the gap size to 5 minutes, you can use the following code: 
plotOptions: {
    series: {
        gapSize: 5,
        gapUnit: 'minute'
    }
}
You can also use the gapUnit property to set the unit of the gap size. For example, if you want to set the gap size to 5 minutes, you can use the following code: 
plotOptions: {
    series: {
        gapSize: 5,
        gapUnit: 'minute'
    }
}
I hope this helps! Let me know if you have any other questions.

Sources

Break Chart Axis - Excel - Automate ExcelShow gap of missing data with Highstock - Stack Overflowhighstock xaxis ordinal and broken xaxis problem - Highcharts official ...Highstock- show full data sets on x axis - Stack Overflow
avatar
Tolerim
13 days ago
One solution could be to set gapSize to a value greater than 0 for the series in the seriesPlot function. In the provided code, this is already being done with a value of 1.5. Another thing to check is if the data has any missing or incomplete points that may be causing the gaps to not show up. Additionally, making sure that dataGrouping is disabled can help avoid obfuscating local minimums or maximum values as well as ensuring that the gaps are displayed.
;