How to group multiple same intervals into one?

[Anil-bohorya]

I started working on react-c3js and got stuck into some problem.

Below is my X-axis array:

"axis": {"x": ["4 2018", "4 2018", "5 2018", "5 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "6 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "7 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "8 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "9 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "10 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "11 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "12 2018", "1 2019", "1 2019", "1 2019"]
}

My code :

const chartData = ({ data }) =>
  <C3Chart tooltip= {{
    format: {
        value: function (value, ratio, id) {
            return (value == -30) ? 'STD' : value;
        }
    }
}} axis= {{'x': {type: 'category',categories: axis['x'],tick: {culling: {max: 10 }}}, 'y': {max: 180,min: -30,padding: {top:1, bottom:1}, tick: { values: [0, 30, 60, 90, 120, 150, 180]}}}} line= {{ connectNull: false }} data={{ json: data.chartInfo, type:'line'}} />

Actual result:

How to merger these interval so that it looks like

Also raised here:
https://stackoverflow.com/questions/55008548/how-to-group-x-axis-points-in-react-c3js