Highcharts with grouped categories

In highcharts may be some time you need subcategories of a category or more deep nested categories for that you need to use a js file called grouped-categories.js it is a plugin provided by highcharts for grouped categories.

this plugin can be downloaded from  https://github.com/blacklabel/grouped_categories/  after download please refer to the home page for examples http://www.highcharts.com/plugin-registry/single/11/Grouped-Categories but even though I followed there documentation but I haven't found it easy for me to implement it in column range chart

<div id="container" style="width: 100%; height: 100%;"></div>

<script src =''> </script>

   var chart = new Highcharts.Chart({
            chart: {
                renderTo: "container",
                type: "columnrange",
                inverted: true
            },
            series: [{
                data: [ [4, 11], [5, 14], [5, 18], [5, 10], [6, 11], [1, 5], [11, 14], [9, 15], [5, 18]]
            }],
            xAxis: {
                categories: [{
                    name: "Fruit",
                    categories: ["Apple", "Banana", "Orange"]
                }, {
                    name: "Vegetable",
                    categories: ["Carrot", "Potato", "Tomato"]
                }, {
                    name: "Fish",
                    categories: ["Cod", "Salmon", "Tuna"]
                }]
            }
        });
    });

run it after including all sources and grouped-categories.