using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Highsoft.Web.Mvc.Charts;


namespace MVC_Demo.Areas.Highcharts.Controllers.Shared
{
    public partial class SharedController : Controller
    {
        public ActionResult ColumnRotatedLabels()
        {
            List<ColumnSeriesData> populationData = new List<ColumnSeriesData>();

            populationData.Add(new ColumnSeriesData { Name = "Shanghai", Y = 23.7 });
            populationData.Add(new ColumnSeriesData { Name = "Lagos", Y = 16.1 });
            populationData.Add(new ColumnSeriesData { Name = "Instanbul", Y = 14.2 });
            populationData.Add(new ColumnSeriesData { Name = "Karachi", Y = 14.0 });
            populationData.Add(new ColumnSeriesData { Name = "Mumbai", Y = 12.5 });
            populationData.Add(new ColumnSeriesData { Name = "Moscow", Y = 12.1 });
            populationData.Add(new ColumnSeriesData { Name = "Sao Paulo", Y = 11.8 });
            populationData.Add(new ColumnSeriesData { Name = "Beijing", Y = 11.7 });
            populationData.Add(new ColumnSeriesData { Name = "Guangzou", Y = 11.1 });
            populationData.Add(new ColumnSeriesData { Name = "Delhi", Y = 11.1 });
            populationData.Add(new ColumnSeriesData { Name = "Shenzen", Y = 10.5 });
            populationData.Add(new ColumnSeriesData { Name = "Seoul", Y = 10.4 });
            populationData.Add(new ColumnSeriesData { Name = "Jakarta", Y = 10.0 });
            populationData.Add(new ColumnSeriesData { Name = "Kinshasa", Y = 9.3 });
            populationData.Add(new ColumnSeriesData { Name = "Tianjin", Y = 9.3 });
            populationData.Add(new ColumnSeriesData { Name = "tokyo", Y = 9.0 });
            populationData.Add(new ColumnSeriesData { Name = "Cairo", Y = 8.9 });
            populationData.Add(new ColumnSeriesData { Name = "Mexico City", Y = 8.9 });
            populationData.Add(new ColumnSeriesData { Name = "Lima", Y = 8.9 });

            ViewData["populationData"] = populationData;

            return View();
        }
    }
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

@using System.Collections
@using Highsoft.Web.Mvc.Charts
@using Highsoft.Web.Mvc.Charts.Rendering


@{ var chartOptions = new Highcharts
    {
        Title = new Title
        {
            Text = "World's largest cities per 2014"
        },
        Subtitle = new Subtitle
        {
            Text = "Source: <a href='https://en.wikipedia.org/wiki/List_of_cities_proper_by_population'>Wikipedia</a>"
        },

        XAxis = new List<XAxis>
    {
                new XAxis
                {
                    Type = "category",
                    Labels = new XAxisLabels
                    {
                        Rotation = -45,
                        Style = new XAxisLabelsStyle()
                        {
                            FontSize = "13px"
                        }
                    }
                }
            },
        YAxis = new List<YAxis>
    {
                new YAxis
                {
                    Min = 0,
                    Title = new YAxisTitle
                    {
                        Text = "Population (millions)"
                    }
                }
            },
        Legend = new Legend
        {
            Enabled = false
        },
        Tooltip = new Tooltip
        {
            PointFormat = "Population in 2008: <b>{point.y:.1f} millions</b>"
        },
        Series = new List<Series>
    {
                new ColumnSeries
                {
                    Name = "Population",
                    DataLabels = new ColumnSeriesDataLabels
                    {
                        Enabled = true,
                        Rotation = -90,
                        Color = "#FFFFFF",
                        Align = ColumnSeriesDataLabelsAlign.Right,
                        Format = "{point.y:.1f}",
                        Y = 10,

                        Shadow = new Shadow()
                        {
                            Enabled = true,
                            Color = "black",
                            Width = 10,
                            OffsetX = 0,
                            OffsetY = 0
                        }
                    },
                    Data = @ViewData["populationData"] as List<ColumnSeriesData>
                }
            }
    };

    chartOptions.ID = "chart";
    var renderer = new HighchartsRenderer(chartOptions);
}

@Html.Raw(renderer.RenderHtml())