0

Hi I am currently developing a column high chart with a 3 level drill down however I am having bother naming the legend, I would like to have the legend displaying the data name however it is only displaying the series name at the moment.

Also I was having bother with the legend changing to the appropriately as it goes down through the different levels.

http://jsfiddle.net/amccormack10/tdy2x4dp/1/

 $(function () {

    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Number of Students Enrolled & Withdrawn'
        },
        subtitle: {
            text: 'Click the Columns to see Totals for each Level'
        },
        xAxis: {
            type: 'category',


            title: {
                text: 'Students'
            }
        },
        yAxis: {
            title: {
                text: 'Total Number of Students'
            }
        },

        legend: {
            enabled: true
            //backgroundColor: '#FFFFFF',
            //layout: 'vertical',
            //floating: true,
            //align: 'left',
            //verticalAlign: 'top',
            //x: 90,
            //y: 60,
            //shadow: true

        },



        series: [{
            name: 'Overall Total of Students',
            colorByPoint: true,
            data: [{
                name: 'Enrolled',
                y: 44,
                drilldown: 'LevelEnrolled'

            }, {
                name: 'Withdrawn',
                y: 55,
                drilldown: 'LevelWithdrawn'
            }]

        }],



        drilldown: {


            series: [{
                name: 'Enrolled by Level',
                colorByPoint: true,
                id: 'LevelEnrolled',
                data: [{
                    name: 'Level 1',
                    y: 23,
                    drilldown: 'Level1Enrolled'
                }, {
                    name: 'Level 2',
                    y: 24,
                    drilldown: 'Level2Enrolled'
                }, {
                    name: 'Level 3',
                    y: 11,
                    drilldown: 'Level3Enrolled'
                }]
            }, {
                name: 'Withdrawn by Level',
                colorByPoint: true,
                id: 'LevelWithdrawn',
                data: [{
                    name: 'Level 1',
                    y: 12,
                    drilldown: 'Level1Withdrawn'
                }, {
                    name: 'Level 2',
                    y: 33,
                    drilldown: 'Level2Withdrawn'
                }, {
                    name: 'Level 3',
                    y: 33,
                    drilldown: 'Level3Withdrawn'
                }]
            }, {
                id: 'Level1Enrolled',
                colorByPoint: true,
                data: [
                    ['CIT', 22],
                    ['CS', 11],
                    ['GD', 33],
                    ['SD', 12],
                    ['BIT', 34]
                ]
            }, {
                id: 'Level2Enrolled',
                colorByPoint: true,
                data: [
                    ['CIT', 43],
                    ['CS', 22],
                    ['GD', 33],
                    ['SD', 22],
                    ['BIT', 22]
                ]
            }, {
                id: 'Level3Enrolled',
                colorByPoint: true,
                data: [
                    ['CIT', 22],
                    ['CS', 22],
                    ['GD', 12],
                    ['SD', 11],
                    ['BIT', 23]
                ]
            }, {
                id: 'Level1Withdrawn',
                colorByPoint: true,
                data: [
                    ['CIT', 23],
                    ['CS', 11],
                    ['GD', 2],
                    ['SD', 1]
                ]
            }, {
                id: 'Level2Withdrawn',
                colorByPoint: true,
                data: [
                    ['CIT', 3],
                    ['CS', 2],
                    ['GD', 4],
                    ['SD', 7]
                ]
            }, {
                id: 'Level3Withdrawn',
                colorByPoint: true,
                data: [
                    ['CIT', 3],
                    ['CS', 4],
                    ['GD', 5],
                    ['SD', 8]
                ]

            }]


        }
    });
});

Any help would be greatly appreciated.

Thanks

4
  • Which data name should it show for example going down to 2nd level after clicking on "Enrolled"? Should legend show "Level 1" or 2 or 3? That would make no sense. The chart looks like it is working correctly.
    – wergeld
    Apr 15, 2015 at 18:40
  • 1
    Generally in legend you have printed serie, not points. Apr 16, 2015 at 11:20
  • @wergeld yeah in the top level should show enrolled/withdrawn in the second level Level1/Level2/level3 basically what is appearing on the x-axis i am trying to get it to appear in the legend, I have it working for a pie chart however i am still having trouble getting it to work with column charts
    – Aidan Mc
    Apr 17, 2015 at 9:29
  • That doesn't really make sense like you think it does. In a pie chart each slice is its own point element so it shows up in the legend. However, the bar/line chart types each point in a series belongs to a distinct series and that series is shown in the legend. The only way I could think to do this would be to have single-point series in your drilldown - doable but sort of not really a useful thing in my opinion.
    – wergeld
    Apr 17, 2015 at 11:55

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.