Highcharts not showing time at every null values

[ras24]

I have an API that automatically generate number value in 30 seconds. The number value range is 1 to 1000 and can generate null value too.

This is the picture

The graph looks fine, but after get null values from API it looks every null values are not showing the time at the graph like this picture

You can see the first null time (underlined) is 03:23:30 and end at 03:51:00 there is a 28 minutes difference.

This is the code :

import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactHighstock from 'react-highcharts/ReactHighstock';
import moment from 'moment-timezone';

const getConfig = data => ({
    chart: {
        type: 'area'
    },
    rangeSelector: {
        allButtonsEnabled: false,
        buttons: [{
            type: 'minute',
            count: 5,
            text: '5m'
        }, {
            type: 'minute',
            count: 30,
            text: '30m'
        }, {
            type: 'hour',
            count: 1,
            text: '1h'
        }, {
            type: 'hour',
            count: 3,
            text: '3h'
        }, {
            type: 'hour',
            count: 6,
            text: '6h'
        }, {
            type: 'day',
            count: 1,
            text: '1d'
        }, {
            type: 'week',
            count: 1,
            text: '1w'
        }, {
            type: 'all',
            text: 'All'
        }],     
        selected: 1
    },
        animation: {
            duration: 2000
        },
    labelStyle: {
        display: 'none'
    },
    title: {
        text: 'Highcharts',
    },
    time: {
        getTimezoneOffset: function (timestamp) {
            var zone = 'Asia/Makassar',
                timezoneOffset = -moment.tz(timestamp, zone).utcOffset();
            return timezoneOffset;
        }
    },
    xAxis: {
        tickInterval: 1000,
        showEmpty: true
    },
    yAxis: {
        allowDecimals: false,
        labels: {
            format: '{value}'
        }
    },
    tooltip: {
        formatter: function () {
            return 'Value: <b>' + this.y + '</b>';
        }
    },
    area: {
        stacking: 'normal'
    },
    series: [
        {
            name: 'Values',
            data: data,
            connectNulls: false
        },
    ],
});

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataResults: [],
        };
    }

    componentDidMount() {
        this.getData();
    }

    getData = () => {
        fetch('http://myapi.net/graphs/data')
            .then(res => res.json())
            .then(data => {
                this.setState({
                    dataResults: data,
                });
            });
    };

    render() {
        const { dataResults } = this.state;
        const chartConfig = getConfig(dataResults);
        return <ReactHighstock config={chartConfig} />;
    }
}

export default App;

render(<App />, document.getElementById('root'));

How to show every null values in 30 seconds so no time difference 28 minutes like picture above?

[Kirill Cherkashin]

Closing and there has been no activity in this issue for a while.
if this is still relevant, please feel free to reopen