Highchart grouped column with drill down

Question

I am trying to develop a GROUPED column chart with Highcharts and I expect a drill down on it, like when I click on category it should drilldown.

There are multiple examples available with column chart with drilldown, but no example works for Grouped column chart with drill drown.

Any help is appreciated.

Answer 1

This you can achieve by passing array of series values to .SetSeries function of highchart

public ActionResult ColumnWithDrilldown()
    {
        Data data = new Data(new[]
        {
             new SeriesData
            {
                Y = 55.6,
                Name = "Arabic",
                Drilldown = "Arabic"
            },

            new SeriesData
            {
                Y = 48.5,
                Name = "English",
                Drilldown = "English"
            }
        }
        );
        Data data1 = new Data(new[]
       {
            new SeriesData
            {
                Y = 50.1,
                Name = "Arabic",
                Drilldown = "Arabic1"
            },

            new SeriesData
            {
                Y = 60.5,
                Name = "English",
                Drilldown = "English1"
            }
        }
       );
        Data data2 = new Data(new[]
       {
             new SeriesData
            {
                Y = 63,
                Name = "Arabic",
                Drilldown = "Arabic2"
            },

            new SeriesData
            {
                Y = 80,
                Name = "English",
                Drilldown = "English2"
            }
        }
       );

        Drilldown drilldown = new Drilldown
        {
            Series = new[]
            {
                new Series
                {
                    Id = "Arabic",
                    Name = "test",
                    Data = new Data(new[]
                            {
                                new SeriesData
                                {
                                    Y = 10.85,
                                    Name = "Arabic 0.1",
                                    Drilldown = "Arabic0.1"
                                },
                                new SeriesData
                                {
                                    Y = 7.35,
                                    Name = "Arabic 0.2",
                                    Drilldown = "Arabic0.2"
                                }
                            })
                },
                new Series
                {
                    Id = "Arabic0.1",
                    Name = "Arabic0.11",
                    Data = new Data(new object[,] {{ "Arabic0.11", 10.85}, { "Arabic0.12", 7.35}})
                }
            }
        };

        Highcharts chart = new Highcharts("chart")
            .InitChart(new Chart { Type = ChartTypes.Column })
            .SetTitle(new Title { Text = "Browser market share, April, 2011" })
            .SetSubtitle(new Subtitle { Text = "Click the columns to view versions." })
            .SetXAxis(new XAxis { Type = AxisTypes.Category })
            .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Total percent market share" } })
            .SetLegend(new Legend { Enabled = false })
            .SetTooltip(new Tooltip
            {
                HeaderFormat = "<span style=\"font-size:11px\">{series.name}</span><br>",
                PointFormat = "<span style=\"color:{point.color}\">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>"
            })
            .SetPlotOptions(new PlotOptions
            {
                Column = new PlotOptionsColumn
                {
                    Stacking = Stackings.Normal,
                    BorderWidth = 0,
                    DataLabels = new PlotOptionsColumnDataLabels
                    {
                        Enabled = true,
                        Format = "{point.y:.1f}%",
                    }
                }
            })

            .SetSeries(new[]
            {
                new Series
                {
                    Name = "Browser brands",
                    Data =data,
                    Stack = "male"
                },
                new Series
                {
                    Name = "Browser brands1",
                    Data = data1,
                    Stack = "Fmale"
                },
                new Series
                {
                    Name = "Browser brands1",
                    Data = data2,
                    Stack = "Fmale1"
                }
            })
            .SetDrilldown(drilldown);
        return View(chart);
    }