Home / Questions / 34359
Accepted
Eduardo Munizaga
Asked: 2020-11-18 04:42:08 +0800 CST 2020-11-18 04:42:08 +0800 CST

How to remove time gaps in a highcharts chart?

  • 772

I have the following code (simplified example):

$(function () {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container'
        },

        xAxis: {
            type: 'datetime'
        },
        series: [{
            data: [
                [Date.UTC(2016, 0, 1), 29.9],               
                [Date.UTC(2016, 0, 2), 106.4],               
                [Date.UTC(2016, 0, 3), 75],
                [Date.UTC(2016, 0, 4), 129.2],
                [Date.UTC(2016, 1, 10), 176.0],
                [Date.UTC(2016, 1, 11), 176.0]

             ]
        }],

    });
});

Which gives me the following graph:

enter image description here

As you will see, there is a time gap in which there is no data, obtaining an unattractive result, especially when there are many points at both ends. What I hope to achieve is something like this:

enter image description here

This means that the plotted points only show the dates that exist.

Note: I am using Highcharts-4.2.6

javascript

2 Answers

  1. Add a data point with a value of undefined, within the span you want not to display. For example:

    var chart = new Highcharts.Chart({

  chart: {
    renderTo: 'highcharts-container'
  },

  xAxis: {
    type: 'datetime'
  },
  series: [{
    data: [
      [Date.UTC(2016, 0, 1), 29.9],               
      [Date.UTC(2016, 0, 2), 106.4],               
      [Date.UTC(2016, 0, 3), 75],
      [Date.UTC(2016, 0, 4), 129.2],
      [Date.UTC(2016, 0, 5), undefined],
      [Date.UTC(2016, 1, 10), 176.0],
      [Date.UTC(2016, 1, 11), 176.0]
    ]
  }],

});

    See a full example here .

    enter image description here

    The important part is obviously: [Date.UTC(2016, 0, 5), undefined],.

    If you are making a graph that shows a data value at given intervals of time (e.g. one value per day), then it is a good idea to generate a point for each day, even those points for which you do not have data , and explicitly make the value of those points undefined.

    In my opinion, it is important that the scale of the X axis is maintained . If you want to make your graph more aesthetic, you will have to ask yourself how you want to distort the data axes.

    This is possible with highcharts, but you will have to manually calculate the values ​​for the X axis, and provide a function that, given one of those values, returns the corresponding label.

    • 3
  2. Best Answer

    I got it and it was easier than it seemed:

    $(function () {
    var chart = Highcharts.chart('container', {

        xAxis: {
            categories: ['04/Ene', '11/Ene', '18/Ene', '25/Ene', '18/Feb', '11/Feb']
        },

        series: [{
            data: [29.9, 106.4,75, 129.2, 176.0, 176.0]
        }]
    }); 
});

    enter image description here

    • 1