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 AreaMissing()
        {
            List<double?> johnValues = new List<double?> {0, 1, 4, 4, 5, 2, 3, 7 };
            List<double?> janeValues = new List<double?> {1, 0, 3, null, 3, 1, 2, 1 };

            List<AreaSeriesData> johnData = new List<AreaSeriesData>();
            List<AreaSeriesData> janeData = new List<AreaSeriesData>();

            johnValues.ForEach(p => johnData.Add(new AreaSeriesData { Y = p }));
            janeValues.ForEach(p => janeData.Add(new AreaSeriesData { Y = p }));

            ViewData["johnData"] = johnData;
            ViewData["janeData"] = janeData;

            return View();
        }      
    }
}

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

@using Highsoft.Web.Mvc.Charts
@using Highsoft.Web.Mvc.Charts.Rendering;

<script type="text/javascript">

    function formatYAxis() {
        return this.value;
    }

    function formatTooltip() {
        return '<b>' + this.series.name + '</b><br/>' +
            this.x + ': ' + this.y;
    }

</script>

@{ var chartOptions =
         new Highcharts
         {
             Chart = new Highsoft.Web.Mvc.Charts.Chart
             {
                 SpacingBottom = 30
             },
             Title = new Title
             {
                 Text = "Fruit consumption *"
             },
             Subtitle = new Subtitle
             {
                 Text = "* Jane\'s banana consumption is unknown",
                 Floating = true,
                 Align = SubtitleAlign.Right,
                 VerticalAlign = SubtitleVerticalAlign.Bottom,
                 Y = 15
             },
             Legend = new Legend
             {
                 Layout = LegendLayout.Vertical,
                 Align = LegendAlign.Left,
                 VerticalAlign = LegendVerticalAlign.Top,
                 X = 150,
                 Y = 100,
                 Floating = true,
                 BorderWidth = 1,
             },

             XAxis = new List<XAxis>
             {
                new XAxis
                {
                    Categories = new List<string> { "Apples", "Pears", "Oranges", "Bananas", "Grapes", "Plums", "Strawberries", "Raspberries" }
                }
                     },
             YAxis = new List<YAxis>
             {
                new YAxis
                {
                    Title = new YAxisTitle
                    {
                        Text = "Y-Axis"
                    },
                    Labels = new YAxisLabels
                    {
                        Formatter = "formatYAxis"
                    }
                }
                     },
             Tooltip = new Tooltip
             {
                 Formatter = "formatTooltip"
             },
             PlotOptions = new PlotOptions
             {
                 Area = new PlotOptionsArea
                 {
                     FillOpacity = 0.5
                 }
             },
             Credits = new Credits
             {
                 Enabled = false
             },
             Series = new List<Series>
             {
                new AreaSeries
                {
                    Name = "John",
                    Data = @ViewData["johnData"] as List<AreaSeriesData>
                },
                new AreaSeries
                {
                    Name = "Jane",
                    Data = @ViewData["janeData"] as List<AreaSeriesData>
                }
                     }
         };

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

@Html.Raw(renderer.RenderHtml())