CODEWITHSUNDEEP
javascripthighcharts
Coo
Coo

Reputation: 1882

Highcharts Spiderweb chart xAxis labels disappear on long label name

I have a spiderweb chart with 12 labels on the x-axis. This chart is multilingual. In English, all labels show just fine. In German, due to the long names, some labels are hidden.

Highcharts.chart('container', {

    chart: {
        polar: true,
        type: 'line',
        animation: false,
    },

    title: {
        text: "Does what ever a spider can",
    },

    pane: {
        size: '80%'
    },

    xAxis: {
        categories: [
            "Strategisches Denken",
            "Kreatives und innovatives Denken",
            "Change Management",
            "Mitarbeiterentwicklung",
            "Kommunikation",
            "Teamarbeit",
            "Entscheidungsfindung",
            "Kundenorientierung",
            "Ergebnisorientierung",
            "Selbstmanagement",
            "Leistungsmotivation",
            "Verantwortungsbewusstsein"
        ],
        tickmarkPlacement: 'between',
        lineWidth: 0,
    },

    yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0,
        max: 5,
        tickInterval: 1,
    },

    tooltip: {
        enabled: false,
    },

    legend: {
        enabled: true,
        verticalAlign: 'top'
    },

    plotOptions: {
        series: {
            animation: false
        }
    },

    series: [{
        name: "Stuff",
        data: [1,2,3,4,5,4,3,2,1,2,3,4],
    }],

});

Fiddle here.

This produces a Spiderweb chart where the xAxis labels "Kreatives und innovatives Denken", "Entscheidungsfindung" and "Verantwortungsbewusstsein" are hidden. If I replace these names with shorter names they do display.

I've tried making the font size smaller, but all labels are displayed when font size is 5 (default is 11). This is unforunately unacceptably small.

I can't find any fixed character length or even amount of line breaks after which a label disappears. It seems to be calculated dynamically based off of a labels position and neighboring labels. (Otherwise I would've been happy with truncating strings.)

Is there some setting to force all labels to show?

Upvotes: 0

Views: 399

Answers (1)

ppotaczek
ppotaczek

Reputation: 39079

You can use internal allowOverlap property:

xAxis: {
    labels: {
        allowOverlap: true
    },
    ...
}

Live demo: https://jsfiddle.net/BlackLabel/ok7Lrn5j/

Upvotes: 1

Related Questions