[Solved]-How can I add double related x-axis bar to high chart in zoom-Highcharts

You can use two linked datetime x-axis with enabled zoom and different tick interval:

    chart: {
        zoomType: 'x'
    },
    xAxis: [{
        type: 'datetime'
    }, {
        type: 'datetime',
        tickInterval: 1000 * 60 * 60 * 24 * 30,
        linkedTo: 0
    }]

Filling label backgrounds will be harder to achieve, but this thread should help: How can i create Highchart xAxis labels centered and enclosed?

Live demo: http://jsfiddle.net/BlackLabel/ot6g0fvj/

API Reference: https://api.highcharts.com/highcharts/xAxis