How to remove Grand total for each bar from only Grand Summary series in Highchart

I wanted to remove the Grand Total For Each Bars bar from Grand Summary series. I have tried to remove it but it removes from all series April,May,Jun. I need to keep in other series group but not in Grand Summary. Here is my data and script. You can check if categories has Grand Summary then the Grand Total For Each Bars bar would not show in series. Here is my script:

var seriesData = [
    {
        "data": [
            690,
            230,
            230,
            230
        ],
        "name": "Grand Total For Each Bars"
    },
    {
        "data": [
            230,
            100,
            100,
            100
        ],
        "name": "April"
    },
    {
        "data": [
            230,
            50,
            50,
            50
        ],
        "name": "May"
    },
    {
        "data": [
            230,
            80,
            80,
            80
        ],
        "name": "Jun"
    }
];

var categoriesData = ['Grand Summary', 'April', 'May', 'Jun'];

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Remove Grand total for each bars in Grand total sumary series group',
        align: 'left'
    },
    xAxis: {
        categories: categoriesData,
        type: 'datetime',
        title: {
            text: null
        },
       
    },
    yAxis: {
       
        title: {
            text: '',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        },
        gridLineWidth: 0
    },
    
    series: seriesData
});

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
      
    </p>
</figure>

Thanks

Solution

You should not 'remove' it, but set it to null.

A hardcoded solution:

seriesData[0].data[0] = null;

Use find() if you need something dynamic.

var seriesData = [
    {
        "data": [
            690,
            230,
            230,
            230
        ],
        "name": "Grand Total For Each Bars"
    },
    {
        "data": [
            230,
            100,
            100,
            100
        ],
        "name": "April"
    },
    {
        "data": [
            230,
            50,
            50,
            50
        ],
        "name": "May"
    },
    {
        "data": [
            230,
            80,
            80,
            80
        ],
        "name": "Jun"
    }
];

seriesData[0].data[0] = null;

var categoriesData = ['Grand Summary', 'April', 'May', 'Jun'];

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Remove Grand total for each bars in Grand total sumary series group',
        align: 'left'
    },
    xAxis: {
        categories: categoriesData,
        type: 'datetime',
        title: {
            text: null
        },
       
    },
    yAxis: {
       
        title: {
            text: '',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        },
        gridLineWidth: 0
    },
    
    series: seriesData
});

.highcharts-figure,
.highcharts-data-table table {
    min-width: 310px;
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
      
    </p>
</figure>