Toggle navigation Highcharts
  • About Us
    • About Us
    • Job Openings
    • Contact Us
    • News
    • Resellers
  • Home
  • Products
    • Highcharts
    • Highstock
    • Highmaps
    • Mobile
    • Highcharts Cloud
    • Highcharts Editor
    • Wrappers
    • Plugins
  • Demo
    • Highcharts demos
    • Highstock demos
    • Highmaps demo
  • Docs
    • General Documentation
    • API Reference
    • Changelog
    • Roadmap
  • Support
    • Support
    • Download
  • Blog
  • Community
    • Project Showcase
    • Chart Code Showcase
    • Contribute
  • Buy
  • About Us
    • About Us
    • Job Openings
    • Contact Us
    • News
    • Resellers
Highcharts .NET 
  • Highcharts .NET
  • Highstock .NET
Docs 
  • Demos
  • API
  • Docs
  • See on NuGet
  • Download 
  • Demo
  • API
  • Docs
  • See on NuGet
  • Download 
Highcharts .NET
 Highcharts  Highstock
  • System Requirements
    • Server-Side System Requirements
    • Client-Side System Requirements
  • Add Highcharts .NET Reference to Visual Studio
    • Visual Studio .NET
    • Other IDEs / Web Projects
  • Your first chart for MVC
    • Introduction
    • Add reference to the view
    • Include JavaScript files
    • Define the chart in the view
    • Add data
  • Your first chart for Web Forms
    • Introduction
    • Add User Control
    • Create and render chart
    • Add User Control to the web page
list

Your first chart with Highcharts .NET and .NET Core

There are five main steps to create a chart with Highcharts .NET and .NET Core

1. Add a reference to Higcharts.dll

2. Add data

To define data, you can either pass it from the controller to the chart in the view or use fixed data in the view.

A. Passing data from the controller to the chart view

This process would involve a database query, but for the sake of simplicity, fixed data is used.

Go to controller file and create a List<LineSeriesData> with values corresponding to the data you would like to display on the chart you need. If you are using other chart types, e.g. “Area” instead of “Line”, the collection becomes List<AreaSeriesData>. You can add any data to the collection and then set the ViewData for the respective item to the instance of the collection you need. This will later be used by the View and the chart itself to get the data, for example:

B. Use fixed data in the view

The method described above is the most common way to define data. Another way to define data is to create Highcharts object directly in the View, as shown here:

3. Include JavaScript files

Go to the view file and add online reference:

Some of the advanced chart types and features in Highcharts are not defined in the main “highcharts.js” file, but are available as separate modules. Add these modules as needed, for your project. Available additional modules are as follows:

4. Add references to your view file

To add the references to the view file, copy and paste the following lines:

5. Define 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 view file (cshtml) and copy/paste the following code:

Here is the explanation of the code above:

5.1 First create Highcharts object chartOptions with all options inside

5.2 Define the ID of DIV using the chartOptions.ID=charts where the chart should be rendered.

5.3 Create HighchartsRenderer object based on Highcharts options using this line of code var renderer = new HighchartsRenderer(chartOptions);

5.4 Finally, render entire chart using this line of code @Html.Raw(renderer.RenderHtml())

The final result will look like the picture below

© 2022 Highcharts. All rights reserved.