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 SplineSymbols()
        {
            List<double> tokyoValues = new List<double> { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 };
            List<double> londonValues = new List<double> { 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8 };
            List<SplineSeriesData> tokyoData = new List<SplineSeriesData>();
            List<SplineSeriesData> londonData = new List<SplineSeriesData>();

            foreach (double value in tokyoValues)
            {
                SplineSeriesData data = new SplineSeriesData();
                data.Y = value;
                if (value == 26.5)
                {
                    data.Marker.Symbol = "url(https://www.highcharts.com/demo/gfx/sun.png)";
                }

                tokyoData.Add(data);
            }

            foreach (double value in londonValues)
            {
                SplineSeriesData data = new SplineSeriesData();
                data.Y = value;
                if (value == 3.9)
                {
                    data.Marker.Symbol = "url(https://www.highcharts.com/demo/gfx/snow.png)";
                }

                londonData.Add(data);
            }

            ViewData["tokyoData"] = tokyoData;
            ViewData["londonData"] = londonData;

            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 formatYAxisLabels() {
        return this.value + '°';
    }

</script>

@{ var chartOptions =
      new Highcharts
      {
          Title = new Title
          {
              Text = "Monthly Average Temperature"
          },
          XAxis = new List<XAxis>
          {
            new XAxis
            {
                Categories = new List<string> { "Jan", "Feb", "Mar", "Apr", "May", "Jun",
                            "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" },
                Crosshair = new XAxisCrosshair
                {
                    Width = 1
                }
            }
                          },
          YAxis = new List<YAxis>
          {
            new YAxis
            {
                Title = new YAxisTitle
                {
                    Text = "Temperature (°C)"
                },
                Labels = new YAxisLabels
                {
                    Formatter = "formatYAxisLabels"
                },
                Crosshair = new YAxisCrosshair
                {
                    Width = 1
                }
            }
                          },
          Tooltip = new Tooltip
          {
              Shared = true
          },
          PlotOptions = new PlotOptions
          {
              Spline = new PlotOptionsSpline
              {
                  Marker = new PlotOptionsSplineMarker
                  {
                      Radius = 4,
                      LineColor = "#666666",
                      LineWidth = 1
                  }
              }
          },
          Series = new List<Series>
          {
            new SplineSeries
            {
                Name = "Tokyo",
                Data = @ViewData["tokyoData"] as List<SplineSeriesData>
            },
            new SplineSeries
            {
                Name = "London",
                Data = @ViewData["londonData"] as List<SplineSeriesData>
            }
                          }
      };

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

@Html.Raw(renderer.RenderHtml())