Define the chart in the View

The chart can be defined anywhere inside the View’s HTML definition, based on your page layout. To define the chart, go to cshtml file and copy/paste the following code:

...
@{ var chartOptions = new Highcharts
    {
        Title = new Title
        {
            Text = "Area chart with negative values"
        },
        XAxis = new List
    {
                new XAxis
                {
                    Categories =  new List { "Apples", "Oranges", "Pears", "Grapes", "Bananas" }
                }
            },
        Credits = new Credits
        {
            Enabled = false
        },
        Series = new List
    {
                new AreaSeries
                {
                    Name = "John",
                    Data =  as List
                },
                new AreaSeries
                {
                    Name = "Jane",
                    Data =  as List
                },
                new AreaSeries
                {
                    Name = "Joe",
                    Data =  as List
                }
            }
    };

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

@Html.Raw(renderer.RenderHtml())
...

The ID is used to obtain a reference to the chart on the client-side to manipulate it with JavaScript. More info and sample codes are available online, for example, the “Ajax Loaded Data, Clickable Points” demo. Use RenderHtml method of HighchartsRenderer object to render chart on website.

If you are using Visual Studio .NET, you will get automatic auto-complete for all the options that are available to the chart. There are many available options - for setting the legend, tooltip, axis and various other aspects of your chart. Click here to get access to a complete API reference documentation.