CODEWITHSUNDEEP
javascripthighcharts
Ella Ryan
Ella Ryan

Reputation: 1155

Highcharts - label placement for categorized y-axis

I have a chart comparing boolean data for two people over a number of years.

The jsfiddle below represents what I need except that I need the labels on the bottom axis to be aligned with the centre of the red and green blocks and to not have the 5 appear on the rightmost tick.

http://jsfiddle.net/zzella/Xa46f/3/

Anybody have any ideas how to achieve this for the above chart, or perhaps a better way to structure the data so as to obtain the results I need? 

$(function () {
$('#container').highcharts({
    credits: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Action completed for year (Yes/No)'
    },
    xAxis: {
        categories: ['Person 1', 'Person 2'],
        labels: {
            align: 'left',
            style: {
                fontSize: '13px',
                fontFamily: 'Arial'
            },
            y: -45,
            x: 60
        },
        lineColor: '#FFFFFF',
        tickColor: '#FFFFFF',

    },
    yAxis: {
        type: 'category',
        categories: ["2010","2011","2012","2013", "2014"],
        title: false,
        lineColor: '#FFFFFF',
        tickColor: '#FFFFFF',
        gridLineColor: '#FFFFFF',
    },
    legend: false,
    plotOptions: {
        bar: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                align: 'center',
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif',
                    textShadow: '0 0 3px black'
                },
                formatter: function () {
                    console.log(this);
                    return this.key
                }
            },
        },
    },
    series: [{
        name: '2014',
        data: [{
            name: "2014: no",
            color: "#a50000",
            y: 1
        }, {
            name: "2014: yes",
            color: "#006500",
            y: 1
        }],

    }, {
        name: '2013',
        data: [{
            name: "2013: yes",
            color: "#006500",
            y: 1
        }, {
            name: "2013: yes",
            color: "#006500",
            y: 1
        }]
    }, {
        name: '2012',
        data: [{
            name: "2012: yes",
            color: "#006500",
            y: 1
        }, {
            name: "2012: no",
            color: "#a50000",
            y: 1
        }]
    }, {
        name: '2011',
        data: [{
            name: "2011: no",
            color: "#a50000",
            y: 1
        }, {
            name: "2011: yes",
            color: "#006500",
            y: 1
        }]
    }, {
        name: '2010',
        data: [{
            name: "2010: no",
            color: "#a50000",
            y: 1
        }, {
            name: "2010: no",
            color: "#a50000",
            y: 1
        }]
    }]
});
});

Upvotes: 2

Views: 196

Answers (1)

Blundering Philosopher
Blundering Philosopher

Reputation: 6805

One wait to attain this is by adding a label format to your yAxis, like you did to your xAxis. If you add labels: { x: 40 }, the labels will center along the boxes.

To get rid of the random 5, you can do showLastLabel: false.

Here is the final yAxis that does what you described:

yAxis: {
    type: 'category',
    categories: ["2010","2011","2012","2013", "2014"],
    title: false,
    lineColor: '#FFFFFF',
    tickColor: '#FFFFFF',
    gridLineColor: '#FFFFFF',
    labels: {
        x: 40
    },
    showLastLabel: false
},

Link to the Fiddle.

Upvotes: 1

Related Questions