Search code examples
highchartslabelhorizontal-line

In highcharts horizontal bar chart, I can't display the default ticks

This is the graph code in javascript:

Highcharts.chart(here, {
        exporting: {
            enabled: false
        },
        chart: {
            type: "bar",
            //width: 300,
            //height: 60,
            width: 800,
            height: 160,
            margin: [0, 0, 0, 0]
        },
        title: {
            text: null
        },

        xAxis: {
            categories: ["Default category name"],
            title: {
                text: "testo uno"
            },
            //labels: {
            //    enabled: true
            //},
            opposite: true,
            tickInterval: 1
        },
        yAxis: {
            max: maximum,
            min: 0,
            title: {
                text: "testo due"
            }
            //labels: {
            //    enabled: true
            // }
        },
        tooltip: {
            enabled: true,
            valueSuffix: " millions"
        },
        plotOptions: {
            series: {
                pointPadding: 0.3,
                groupPadding: 0.1,
                animation: false
            }
        },
        legend: {
            enabled: false
        },
        credits: {
            enabled: false
        },
        series: [
            {
                name: "Name number one",
                data: [v1],
                color: "rgb(251, 147, 53)"
            },
            {
                name: "Name number two",
                data: [v2],
                color: "rgb(128, 128, 128)"
            },
            {
                name: "Name number three",
                data: [v3],
                color: "rgb(137, 196, 76)"
            }
        ]
    });

I want the default ticks' labels to be displayed on top. I can't seem to get those, I tried setting labels{enabled} to false, and some other things but I can't seem to get the ticks' labels display on top. Please look the attached screenshot to see where I want the ticks to be. Any suggestions? enter image description here

Solution

  • You need to make space for the labels, for example by keeping the default margin and set yAxis.opposite to true.

    In API we can read:

    margin: number, Array.

    ...

    By default there is no margin. The actual space is dynamically calculated from the offset of axis labels, axis title, title, subtitle and legend in addition to the spacingTop, spacingRight, spacingBottom and spacingLeft options.

        yAxis: {
        opposite: true,
        ...
    }

    Live demo: http://jsfiddle.net/BlackLabel/9rgjdesw/

    API Reference:

    https://api.highcharts.com/highcharts/chart.margin

    https://api.highcharts.com/highcharts/xAxis.opposite