Create and render chart.

Open HighchartsControl.ascx.cs file, and follow the instructions below:

1. Add references.
   

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

2. Create Highcharts object in Page_Load method.
   

   public partial class HighchartsControl : System.Web.UI.UserControl
   {
       protected void Page_Load(object sender, EventArgs e)
       {
           …
           Highcharts higcharts = new Highcharts
           {
               Title = new Title
               {
                   Text = "Monthly Average Temperature",
                   X = -20
               },
               Subtitle = new Subtitle
               {
                   Text = "Source: WorldClimate.com",
                   X = -20
               },
               XAxis = new List
               {
                   new XAxis
                   {
                       Categories = new List { "Jan", "Feb", "Mar", "Apr", "May", "Jun",
                               "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" },
                   }
               },
               YAxis = new List
               {
                   new YAxis
                   {
                       Title = new YAxisTitle
                       {
                           Text = "Temperature (°C)"
                       },
                       PlotLines = new List
                       {
                           new YAxisPlotLines
                           {
                               Value = 0,
                               Width = 1,
                               Color = "#808080"
                           }
                       }
                   }
               },
               Tooltip = new Tooltip
               {
                   ValueSuffix = "°C"
               },
               Legend = new Legend
               {
                   Layout = LegendLayout.Vertical,
                   Align = LegendAlign.Right,
                   VerticalAlign = LegendVerticalAlign.Middle,
                   BorderWidth = 0
               },
               Series = new List
               {
                   new LineSeries
                   {
                       Name = "Tokyo",
                       Data = tokyoData as List
                   },
                   new LineSeries
                   {
                       Name = "NY",
                       Data = nyData as List
                   },
                   new LineSeries
                   {
                       Name = "Berlin",
                       Data = berlinData as List
                   },
                   new LineSeries
                   {
                       Name = "London",
                       Data = londonData as List
                   }
               }
           };
           …
       }
   }

3. Render object to html with using HighchartsRenderer.
   

   The chart‘s HTML code needs to be received, that is why you need to add a HighchartsRenderer. To do so, scroll down to the end of the method, then add HighchartsRenderer.

   var renderer = new HighchartsRenderer(highcharts);

4. Send it to the view.
   

   Response.Write(renderer.RenderHtml());

Sample code below:

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

namespace HighchartsWebForms.Control
{
    public partial class HighchartsControl : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            List tokyoValues = new List { 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 nyValues = new List { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5 };
            List berlinValues = new List { -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0 };
            List londonValues = new List { 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 tokyoData = new List();
            List nyData = new List();
            List berlinData = new List();
            List londonData = new List();

            tokyoValues.ForEach(p => tokyoData.Add(new LineSeriesData { Y = p }));
            nyValues.ForEach(p => nyData.Add(new LineSeriesData { Y = p }));
            berlinValues.ForEach(p => berlinData.Add(new LineSeriesData { Y = p }));
            londonValues.ForEach(p => londonData.Add(new LineSeriesData { Y = p }));

            Highcharts highcharts = new Highcharts
            {
                Title = new Title
                {
                    Text = "Monthly Average Temperature",
                    X = -20
                },
                Subtitle = new Subtitle
                {
                    Text = "Source: WorldClimate.com",
                    X = -20
                },
                XAxis = new List
            {
                new XAxis
                {
                    Categories = new List { "Jan", "Feb", "Mar", "Apr", "May", "Jun",
                                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" },
                }
            },
                YAxis = new List
            {
                new YAxis
                {
                    Title = new YAxisTitle
                    {
                        Text = "Temperature (°C)"
                    },
                    PlotLines = new List
                    {
                            new YAxisPlotLines
                        {
                            Value = 0,
                            Width = 1,
                            Color = "#808080"
                        }
                    }
                }
            },
                Tooltip = new Tooltip
                {
                    ValueSuffix = "°C"
                },
                Legend = new Legend
                {
                    Layout = LegendLayout.Vertical,
                    Align = LegendAlign.Right,
                    VerticalAlign = LegendVerticalAlign.Middle,
                    BorderWidth = 0
                },
                Series = new List
            {
                new LineSeries
                {
                    Name = "Tokyo",
                    Data = tokyoData as List
                },
                new LineSeries
                {
                    Name = "NY",
                    Data = nyData as List
                },
                new LineSeries
                {
                    Name = "Berlin",
                    Data = berlinData as List
                },
                new LineSeries
                {
                    Name = "London",
                    Data = londonData as List
                }
            }
            };
            
            highcharts.ID = "chart1";
            var renderer = new HighchartsRenderer(highcharts);

            Response.Write(renderer.RenderHtml());
        }
    }
}