HighChart is displaying wrong

Question

I am using HighCharts in MVC and here is my action:

  public ActionResult RankGraph()
  {
    // lstRank is set up here

    // emplist is set up here

    Highcharts chart = new Highcharts("chart")
    .InitChart(new DotNet.Highcharts.Options.Chart { DefaultSeriesType = DotNet.Highcharts.Enums.ChartTypes.Column})
    .SetTitle(new DotNet.Highcharts.Options.Title { Text = "Rank Graph", Style = "font: 'normal 20px Impact', color: 'red'" })
    .SetXAxis(new DotNet.Highcharts.Options.XAxis { Categories = lstRank.ToArray(), })
    .SetYAxis(new DotNet.Highcharts.Options.YAxis { Title = new DotNet.Highcharts.Options.YAxisTitle { Text = "Test"} })
    .SetPlotOptions(new DotNet.Highcharts.Options.PlotOptions
                    {
                    Column = new DotNet.Highcharts.Options.PlotOptionsColumn
                    {
                    DataLabels = new DotNet.Highcharts.Options.PlotOptionsColumnDataLabels
                    {
                    Enabled = true
                    },
                    EnableMouseTracking = false
                    }
                    })
    .SetSeries(new DotNet.Highcharts.Options.Series
               {
               Data = new DotNet.Highcharts.Helpers.Data(new object[] {empList.ToArray() })
});

return View(chart);
}

Now when I view Source on the page itself, this is what I see specifically for the X Axis

xAxis: { categories: ['Rank1', 'Rank2', 'Rank3', 'Rank4', 'Rank5', 'Rank6', 'Rank7', 'Rank8', 'Rank9', 'Rank10', 'Rank11', 'Rank12'] }

This is what I see specifically for the Y-Axis:

series: [{ data: [[20, 17, 26, 22, 8, 53, 24, 3, 3, 1, 0, 1]] }]

But this how my graph renders:

Where are the labels for the X-Axis?

Why is the first label for X-Axis the first number for the Y-Axis?

Any help is appreciated.

Answer 1

I have figured this out.

This part was giving me trouble:

.SetSeries(new DotNet.Highcharts.Options.Series
               {
               Data = new DotNet.Highcharts.Helpers.Data(new object[] {empList.ToArray() })
});

Instead of using empList.ToArray(), which put all of the numbers as 1 giant value in the array instead of 12 different/separate values.. I went to where I initialized empList and added this:

object[] empListToArray = empList.Select(x => new object[] { x }).ToArray();

and then substituted empListToArray for empList where I set the Series for the chart.