Question

I have a chart that looks like this:

I want to remove the text that is under the bars, “ödmjukhet”, “engagemang” etc.. but I still want to display the categorie names on the labels when a user hover over the bars. How can I do this?

This is my code in C#

        Highcharts chart1 = new Highcharts("Chart")
        .SetXAxis(new XAxis { Categories = averageGrades.Select(averageGrade => averageGrade.CoreValue.Name).ToArray(), })
        .SetYAxis(new YAxis { Min = 0, Max = 10, TickInterval = 1, Title = new YAxisTitle { Text = "Betygskalan" } })
        .SetSeries(new Series { Data = data, Name = "Snittbetyg" })
        .SetLegend(new Legend { Enabled = false, Layout = Layouts.Horizontal})
        .SetTitle(new Title { Text = "" })
        .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column, Height = 300, Width = 200});

And this is the code by javascript output code:

var Chart;
$(document).ready(function() {
    Chart = new Highcharts.Chart({
        chart: { renderTo:'Chart_container', defaultSeriesType: 'column', height: 300, width: 200 }, 
        legend: { enabled: false, layout: 'horizontal' }, 
        title: { text: '' }, 
        xAxis: { categories: ['Engagemang', 'Kompetens', 'Lönsamhet', 'Ödmjukhet'] }, 
        yAxis: { max: 10, min: 0, tickInterval: 1, title: { text: 'Betygskalan' } }, 
        series: [{ data: [{ color: '#FF9980', y: 4 }, { color: '#A6FF80', y: 8 }, { color: '#FF9980', y: 3 }, { color: '#A6FF80', y: 9 }], name: 'Snittbetyg' }]
    });
});

Thanks in advance!

Answer 1

remove

 xAxis: { categories: ['Engagemang', 'Kompetens', 'Lönsamhet', 'Ödmjukhet'] }, 

from your code

OR
add class into your style, if you want to keep on hover see DEMO

.highcharts-axis{
    display: none;
}​