Highcharts: Getting x-axis to display legend

Question

firstly here is my code

http://jsfiddle.net/woon123/5t2gpyx7/

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            type: 'column',
            renderTo: 'venue_chart',
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Popularity of Venues'
        },
        subtitle: {
            text: 'Redemption Count'
        },
        yAxis: {
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of Users'
            }
        },
        xAxis: {
            type: 'category'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            y: 30
        },
        series: [{
            name: "Chicken Up @ Jurong East",
            data: [{
                name: "Chicken Up @ Jurong East",
                y: 30,
                drilldown: "Chicken Up @ Jurong East"
            }]
        }, {
            name: "Chicken Up @ Tanjong Pagar",
            data: [{
                name: "Chicken Up @ Tanjong Pagar",
                y: 50,
                drilldown: "Chicken Up @ Tanjong Pagar"
            }]
        }, {
            name: "Chicken Up @ Tampines",
            data: [{
                name: "Chicken Up @ Tampines",
                y: 60,
                drilldown: "Chicken Up @ Tampines"
            }]
        }, ],
        drilldown: {
            series: [{
                name: "Redemption Count",
                id: "Chicken Up @ Jurong East",
                data: [
                    [
                        "Yangpa Bomb Introductory Promo", 5],
                    [
                        "1 For 1 Chicken Up Wings and Korean Bingsu", 4],
                    [
                        "Soju Cocktails at $17.00", 1],
                    [
                        "12345678", 10],
                    [
                        "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10], ]
            }, {
                name: "Redemption Count",
                id: "Chicken Up @ Tanjong Pagar",
                data: [
                    [
                        "Yangpa Bomb Introductory Promo", 10],
                    [
                        "1 For 1 Chicken Up Wings and Korean Bingsu", 10],
                    [
                        "Soju Cocktails at $17.00", 10],
                    [
                        "12345678", 10],
                    [
                        "Early Bird 20% Off Bill", 3],
                    [
                        "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 17], ]
            }, {
                name: "Redemption Count",
                id: "Chicken Up @ Tampines",
                data: [
                    [
                        "Yangpa Bomb Introductory Promo", 10],
                    [
                        "1 For 1 Chicken Up Wings and Korean Bingsu", 10],
                    [
                        "Soju Cocktails at $17.00", 15],
                    [
                        "12345678", 15],
                    [
                        "50% OFF Ganjang, Yanguyum Wings and Soju Cocktails!", 10], ]
            }, ]
        }
    });
});

My problem is that although the legend displays properly, when using type:category in the x-axis it only shows the last name which is Chicken Up @ Tampines.

I would like for the x-axis to show all three venues instead of just the last one and the legend to remain as it is.

Another issue is after I drill down.

In this case, I would like the legend to display the x-axis in order to allow me to toggle them on/off.

I tried setting x-axis to display categories['venue1', 'venue2', 'venue3'] but in this case my legend just shows series 1.

I would like some advice on how to make both the legend and x-axis be the same.

Thank you!

Answer 1

i give you two fiddles,these can be a clue !

first: fiddle

$(function(){
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Staten Island Violation Distribution'
    },
    subtitle: {
        text: 'Source: NYC Open DataSet</a>'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45,
            style: {
                fontSize: '13px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    data: {
        csv: document.getElementById('csv').innerHTML
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Count'
        }
    },
    legend: {
        enabled: true
    },
    tooltip: {
        pointFormat: 'Count: <b>{point.y}</b>'
    },
    plotOptions: {
        column: {
            grouping: false,
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                format: '{point.y}', // one decimal
                y: 10, // 10 pixels down from the top
                style: {
                    fontSize: '8px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }    
        }        
    },
    series: [ { name: "Description" },
              { name: "Description1" },
              { name: "Description2" },
              { name: "Description3" },
              { name: "Description4" },
              { name: "Description5" } ]
});
});

second:fiddle

$(function () {

// Create the chart
$('#container').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Basic drilldown'
    },
    xAxis: {
        type: 'category'
    },

    legend: {
        enabled: false
    },

    plotOptions: {
        series: {
            borderWidth: 0,
            dataLabels: {
                enabled: true
            }
        }
    },

    series: [{
        name: 'Things',
        colorByPoint: true,
        data: [{
            name: 'Animals',
            y: 5,
            drilldown: 'animals'
        }, {
            name: 'Fruits',
            y: 2,
            drilldown: 'fruits'
        }, {
            name: 'Cars',
            y: 4,
            drilldown: 'cars'
        }]
    }],
    drilldown: {
        series: [{
            id: 'animals',
            data: [
                ['Cats', 4],
                ['Dogs', 2],
                ['Cows', 1],
                ['Sheep', 2],
                ['Pigs', 1]
            ]
        }, {
            id: 'fruits',
            data: [
                ['Apples', 4],
                ['Oranges', 2]
            ]
        }, {
            id: 'cars',
            data: [
                ['Toyota', 4],
                ['Opel', 2],
                ['Volkswagen', 2]
            ]
        }]
    }
});
});

happy coding !