Search code examples
javascripthighchartsbar-chartdata-visualizationaxis-labels

Highcharts Y-axis labels


This is how my graph currently looks: enter image description here

How can I change the values on the Y-axis to be equal to the name that you can see in the tool tip, i.e "Other Issue", I want this name to be in place of the numeric values that are currently going up on the Y-axis

This is my code:

 function BarChartCategory() {

        var arr =  @Html.Raw(Json.Encode(@ViewBag.Categories));

        console.log(arr);

        var RNames = [], RValues = [], prev;

        //Count how many occurances of each value
        arr.sort();
        for ( var i = 0; i < arr.length; i++ ) {
            if ( arr[i] !== prev ) {
                RNames.push(arr[i]);
                RValues.push(1);
            } else {
                RValues[RValues.length-1]++;
            }
            prev = arr[i];
        }

        console.log(RValues);
        console.log(RNames);

        var final = [];

        for(var i=0; i < RNames.length; i++) {
            final.push({
                name: RNames[i],
                y: RValues[i]
            });
        }

        console.log(final);


        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'By Category Results'
            },
            yAxis: {
                allowDecimals: false,

            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        this.point.y + ' ' + this.point.name.toLowerCase();
                }
            },
            series: [{
                name: "Issues: ",
                colorByPoint: true,
                data: final
            }]
        });
    }

Solution

  • I was able to find a solution to my problem, I first changed the Yaxis to xaxis and added a loop that went through each result in the array

    xAxis: {
                    allowDecimals: false,
    
                    categories: function(){
                        var data
                        for(var i=0;i< final.length;i++){
                            data.push({
                                categories: final[i].name
                            })
                        };
                        return data;
                    }
    
                }