CODEWITHSUNDEEP
javascripthighchartscategoriesheatmapaxis
nb_nb_nb
nb_nb_nb

Reputation: 1381

Add Sub categories to y axis on highcharts

I am trying to add subcategories to my yaxis on the heatmap on highcharts but I am getting [object, object]

I am trying to add iphone and ipad as categories and google, bing and jeeves as the subcategories.

This is the method I saw in documentation to create the multi level categories:

yAxis: {
        categories: [
        {
            name: "iphone",
            categories: [
            "google",
            "bing",
            "jeeves",
            ]
        },
        {
            name: "ipad",
            categories: [
            "google",
            "bing",
            "jeeves",
            ]
        }
        ]
    }

This is my code:

function getPointCategoryName(point, dimension) {
        var series = point.series,
        isY = dimension === 'y',
        axis = series[isY ? 'yAxis' : 'xAxis'];
        return axis.categories[point[isY ? 'y' : 'x']];
    }

    Highcharts.chart('container', {

        chart: {
            type: 'heatmap',
        /* marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1 */
    },

    xAxis: {
        categories: ['val1', 'val2', 'val3',]
    },

    yAxis: {
        categories: [
        {
            name: "iphone",
            categories: [
            "google",
            "bing",
            "jeeves",
            ]
        },
        {
            name: "ipad",
            categories: [
            "google",
            "bing",
            "jeeves",
            ]
        }
        ]
    },

    accessibility: {
        point: {
            descriptionFormatter: function (point) {
                var ix = point.index + 1,
                xName = getPointCategoryName(point, 'x'),
                yName = getPointCategoryName(point, 'y'),
                val = point.value;
                return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
            }
        }
    },

    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    /* legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 280
    }, */

    tooltip: {
        formatter: function () {
            return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
            this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
        }
    },

    series: [{

        borderWidth: 1,
       // xAxis: 1,
       data:[[0, 0, 67],
       [0, 1, 23],
       [0, 2, 10],
       [0, 3, 67],
       [0, 4, 23],
       [0, 5, 10],
       [1, 0, 78],
       [1, 1, 12],
       [1, 2, 20],
       [1, 3, 78],
       [1, 4, 12],
       [1, 5, 20],
       [2, 0, 12],
       [2, 1, 14],
       [2, 2, 30],
       [2, 3, 12],
       [2, 4, 14],
       [2, 5, 30]]
       ,
       dataLabels: {
        enabled: true,
        color: '#000000'
       }
   }],

   responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            yAxis: {
                labels: {
                    formatter: function () {
                        return this.value.charAt(0);
                    }
                }
            }
        }
    }]
   }

});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

I am trying to do something similar to what is done on the x-axis in this solution: multilevel categories

Why is my y axis not showing any categories and sub categories.

Upvotes: 1

Views: 740

Answers (2)

ppotaczek
ppotaczek

Reputation: 39119

You have missing grouped-categories plugin, but as you can see in this example: http://jsfiddle.net/BlackLabel/46j9xsow/ it doesn't play well with y-axis.

As a solution I recommend you to use inverted chart and grouped categories on x-axis.

    chart: {
        inverted: true
    }

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

API Reference: https://api.highcharts.com/highcharts/chart.inverted

Docs: https://www.npmjs.com/package/highcharts-grouped-categories

Upvotes: 2

Deepu Reghunath
Deepu Reghunath

Reputation: 9703

add y-axis value as follows

 yAxis: {
     labels: {
      formatter: function() {
       return categories[0].name
    }
 }
},


var categories = [
        {
            name: "iphone",
            categories: [
            "google",
            "bing",
            "jeeves",
            ]
        },
        {
            name: "ipad",
            categories: [
            "google",
            "bing",
            "jeeves",
            ]
        }
       ];
function getPointCategoryName(point, dimension) {
        var series = point.series,
        isY = dimension === 'y',
        axis = series[isY ? 'yAxis' : 'xAxis'];
        return axis.categories[point[isY ? 'y' : 'x']];
    }

    Highcharts.chart('container', {

        chart: {
            type: 'heatmap',
        /* marginTop: 40,
        marginBottom: 80,
        plotBorderWidth: 1 */
    },

    xAxis: {
        categories: ['val1', 'val2', 'val3',]
    },

    yAxis: {
         labels: {
          formatter: function() {
           return categories[0].name
        }
     }
    },

    accessibility: {
        point: {
            descriptionFormatter: function (point) {
                var ix = point.index + 1,
                xName = getPointCategoryName(point, 'x'),
                yName = getPointCategoryName(point, 'y'),
                val = point.value;
                return ix + '. ' + xName + ' sales ' + yName + ', ' + val + '.';
            }
        }
    },

    colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
    },

    /* legend: {
        align: 'right',
        layout: 'vertical',
        margin: 0,
        verticalAlign: 'top',
        y: 25,
        symbolHeight: 280
    }, */

    tooltip: {
        formatter: function () {
            return '<b>' + getPointCategoryName(this.point, 'x') + '</b> sold <br><b>' +
            this.point.value + '</b> items on <br><b>' + getPointCategoryName(this.point, 'y') + '</b>';
        }
    },

    series: [{

        borderWidth: 1,
       // xAxis: 1,
       data:[[0, 0, 67],
       [0, 1, 23],
       [0, 2, 10],
       [0, 3, 67],
       [0, 4, 23],
       [0, 5, 10],
       [1, 0, 78],
       [1, 1, 12],
       [1, 2, 20],
       [1, 3, 78],
       [1, 4, 12],
       [1, 5, 20],
       [2, 0, 12],
       [2, 1, 14],
       [2, 2, 30],
       [2, 3, 12],
       [2, 4, 14],
       [2, 5, 30]]
       ,
       dataLabels: {
        enabled: true,
        color: '#000000'
       }
   }],

   responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        chartOptions: {
            yAxis: {
                labels: {
                    formatter: function () {
                        return this.value.charAt(0);
                    }
                }
            }
        }
    }]
   }

});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

Upvotes: 0

Related Questions