How to increase number of groups in a stacked bar Highchart?

We are new to Highcharts and as per requirement we have to show data as per date.

Below is the minimum working code link. We want to increase number of groups, in example there are only three groups and its corresponding stacked data, now if I want to add one more group then it's not getting displayed.

What am I missing?

Text is needed at the end of stacked bar as shown:

// Data retrieved from https://en.wikipedia.org/wiki/Winter_Olympic_Games
Highcharts.chart('container', {

    chart: {
        type: 'bar'
    },

    title: {
        text: 'Olympic Games all-time medal table, grouped by continent'
    },

    xAxis: {
        categories: ['Gold', 'Silver', 'Bronze','abhinav']
    },

    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Count medals'
        }
    },

    tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },

    plotOptions: {
        bar: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                formatter: function() {
                        //console.log(this.y);
                                return this.y + 'hello'
                                //return formatme(this.y);
                        }

                }
        }
    },

    series: [{
        name: 'Norway',
        data: [148, 133, 124],
        stack: 'Europe'
    }, {
        name: 'Germany',
        data: [102, 98, 65],
        stack: 'Europe'
    }, {
        name: 'United States',
        data: [113, 122, 95],
        stack: 'North America'
    }, {
        name: 'Canada',
        data: [77, 72, 80],
        stack: 'North America'
    }, {
        name: 'abhinav',
        data: [193, 222, 15],
        stack: 'xs'
    }]
});

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

#container {
    height: 700px;
}

.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">
        Chart showing stacked columns with grouping, allowing specific series to
        be stacked on the same column. Stacking is often used to visualize
        data that accumulates to a sum.
    </p>
</figure>

Solution

You missing your fourth value , change your

 series: [{
        name: 'Norway',
        data: [148, 133, 124],
        stack: 'Europe'
    }

To this , do this for all (Germany,United States,Canada ,abhinav)

series: [{
        name: 'Norway',
        data: [148, 133, 124,666],
        stack: 'Europe'
}

// Data retrieved from https://en.wikipedia.org/wiki/Winter_Olympic_Games
Highcharts.chart('container', {

    chart: {
        type: 'bar'
    },

    title: {
        text: 'Olympic Games all-time medal table, grouped by continent'
    },

    xAxis: {
        categories: ['Gold', 'Silver', 'Bronze','abhinav']
    },

    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Count medals'
        }
    },

    tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y + '<br/>' +
                'Total: ' + this.point.stackTotal;
        }
    },

    plotOptions: {
        bar: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                formatter: function() {
                 return this.series.name;
                        }

                }
        }
    },

    series: [{
        name: 'Norway',
        data: [148, 133, 124,111],
        stack: 'Europe'
    }, {
        name: 'Germany',
        data: [102, 98, 65,222],
        stack: 'Europe'
    }, {
        name: 'US',
        data: [113, 122, 95,333],
        stack: 'North America'
    }, {
        name: 'Canada',
        data: [77, 72, 80,444],
        stack: 'North America'
    }, {
        name: 'abhinav',
        data: [193, 222, 15,555],
        stack: 'xs'
    }]
});

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

#container {
    height: 700px;
}

.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">
        Chart showing stacked columns with grouping, allowing specific series to
        be stacked on the same column. Stacking is often used to visualize
        data that accumulates to a sum.
    </p>
</figure>