In this post, will tell you how to use Highchart in ASP.NET. Highchart in ASP.NET is purely a JavaScript and jQuery based API which can create interactive charts for representing the data. Highchart is a client-side API and it is flexible for use on different kinds of web browsers.

And here is the feature of highchart:

  • Compatible: Highchart works on all kinds of browsers.
  • Highchart is free for non-commercial purposes.
  • Different types of charts are available.
  • We can easily integrate it with .NET.

Types of Charts

Highcharts support different types of charts, such as:

  • Gauges
  • Basic Area chart
  • Bar chart
  • Column chart
  • Line chart
  • Pie chart
  • Polar chart
  • Range series

How it works

  • Download this dll and add to your project:
  • Download and add JavaScript to your project:
  • Chart Creation
  • Chart Output

Step 1

  • Download this dll to add to your project or install NET Highcharts.
  • You can follow the below steps.

Step 2
Download Highcharts and add reference of the JavaScript in your page or master page:
Add the below script
        <script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> 
        <script src="../../Scripts/highcharts.js" type="text/javascript"></script> 

Step 3

Chart Creation

Below code 
        for Mvc 
        public ActionResult Index() { 
                DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart").SetXAxis(new XAxis { 
                        Categories = new [] { 
                            "Jan", 
                            "Feb", 
                            "Mar", 
                            "Apr", 
                            "May", 
                            "Jun", 
                            "Jul", 
                            "Aug", 
                            "Sep", 
                            "Oct", 
                            "Nov", 
                            Dec " }  
                        }).SetSeries(new Series { 
                        Data = new Data(new object[] { 
                            29.9, 
                            71.5, 
                            106.4, 
                            129.2, 
                            144.0, 
                            176.0, 
                            135.6, 
                            148.5, 
                            216.4, 
                            .1, 
                            95.6, 
                            54.4 
                        }) 
                    }); 
                    return View(chart); 
                } 
                Below Code 
                for Asp.net 
                protected void Page_Load(object sender, EventArgs e) { 
                    DotNet.Highcharts.Highcharts chart = new DotNet.Highcharts.Highcharts("chart").SetXAxis(new XAxis { 
                        Categories = new [] { 
                            "Jan", 
                            "Feb", 
                            "Mar", 
                            "Apr", 
                            "May", 
                            "Jun", 
                            "Jul", 
                            "Aug", 
                            "Sep", 
                            "Oct", 
                            "Nov", 
                            "Dec" 
                        } 
                    }).SetSeries(new Series { 
                        Data = new Data(new object[] { 
                            29.9, 
                            71.5, 
                            106.4, 
                            129.2, 
                            144.0, 
                            176.0, 
                            135.6, 
                            148.5, 
                            216.4, 
                            194.1, 
                            95.6, 
                            54.4 
                        }) 
                    }); 
                    ltrChart.Text = chart.ToHtmlString(); 
                } 
    HTML Code
        For Mvc 
        @model DotNet.Highcharts.Highcharts 
        @(Model) 
        For Asp.net < asp: Content ID = "BodyContent" 
        runat = "server" 
        ContentPlaceHolderID = "MainContent" > < asp: Literal ID = "ltrChart" 
        runat = "server" > < /asp:Literal>  < /asp:Content> 


Step 4

We get the output like the below image.

HostForLIFE.eu ASP.NET Core 1.1 Hosting

European best, cheap and reliable ASP.NET hosting with instant activation. HostForLIFE.eu is #1 Recommended Windows and ASP.NET hosting in European Continent. With 99.99% Uptime Guaranteed of Relibility, Stability and Performace. HostForLIFE.eu security team is constantly monitoring the entire network for unusual behaviour. We deliver hosting solution including Shared hosting, Cloud hosting, Reseller hosting, Dedicated Servers, and IT as Service for companies of all size.