Now, if you open the Solution Explorer, you will see that Highcharts script file is added in the Scripts folder of the project solution file and the reference of DotNet.Highcharts is added in the References section.
To initialize with basic configuration, first I am going to create a chart that shows the type of a chart, background color, border, etc., and provide an appropriate name for it.
Now, we have to define the text for a chart to set the title and subtitle.
Example
barChart.SetTitle(new Title()
{
Text = "Dravid Vs Ganguly"
});
barChart.SetSubtitle(new Subtitle()
{
Text = "Runs of 10 years(2004-2013)"
});
Using the method SetXAxis and SetYAxis, we can define the axis of the chart like what should render on xAxis and yAxis. we can define the title, type, and category of the axis as well.
Example
barChart.SetYAxis(new YAxis()
{
Title = new YAxisTitle()
{
Text = "Runs",
Style = "fontSize: '20px',color: 'green',fontWeight: 'Bold'"
},
ShowFirstLabel = true,
ShowLastLabel = true,
Min = 0
});
barChart.SetXAxis(new XAxis()
{
Type = AxisTypes.Category,
Title = new XAxisTitle() { Text = "Years", Style = "fontSize: '20px',fontWeight: 'bold', " },
Categories = new[] { "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013" }
});
barChart.SetLegend(new Legend
{
Enabled = true,
BorderColor = System.Drawing.Color.DarkRed,
BorderRadius = 15,
BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFADD8E6"))
});
Now, we can use SetSeries() method to set the data with series, where we have to provide a name for data and series which is used to bind with series.
Example
barChart.SetSeries(new Series[]
{
new Series{
Name = "Rahul Dravid",
Data = new Data(new object[] { 128, 429, 628, 425, 459, 772
, 914, 555, 666 ,201})
},
new Series()
{
Name = "Saurav Ganguly",
Data = new Data(new object[] { 921, 157, 281, 1111, 597, 181, 511, 164, 564,304 })
}
}
);
return View(barChart);
}
The code that appears below is a code of index action method for home controller:
Example
using DotNet.Highcharts;
using DotNet.Highcharts.Enums;
using DotNet.Highcharts.Helpers;
using DotNet.Highcharts.Options;
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace Asp.NETMVCHighChartsDemo.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
Highcharts barChart = new Highcharts("barchart");
barChart.InitChart(new Chart()
{
Type = DotNet.Highcharts.Enums.ChartTypes.Bar,
BackgroundColor = new BackColorOrGradient(System.Drawing.Color.LightGreen),
Style = "fontWeight: 'bold', fontSize: '17px'",
BorderColor = System.Drawing.Color.DarkBlue,
BorderRadius = 0,
BorderWidth = 2
});
barChart.SetTitle(new Title()
{
Text = "Dravid Vs Ganguly"
});
barChart.SetSubtitle(new Subtitle()
{
Text = "Runs of 10 years(2004-2013)"
});
barChart.SetYAxis(new YAxis()
{
Title = new YAxisTitle()
{
Text = "Runs",
Style = "fontSize: '20px',color: 'green',fontWeight: 'Bold'"
},
ShowFirstLabel = true,
ShowLastLabel = true,
Min = 0
});
barChart.SetXAxis(new XAxis()
{
Type = AxisTypes.Category,
Title = new XAxisTitle() { Text = "Years", Style = "fontSize: '20px',fontWeight: 'bold', " },
Categories = new[] { "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013" }
});
barChart.SetLegend(new Legend
{
Enabled = true,
BorderColor = System.Drawing.Color.DarkRed,
BorderRadius = 15,
BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFADD8E6"))
});
barChart.SetSeries(new Series[]
{
new Series{
Name = "Rahul Dravid",
Data = new Data(new object[] { 128, 429, 628, 425, 459, 772, 914, 555, 666 ,201})
},
new Series()
{
Name = "Saurav Ganguly",
Data = new Data(new object[] { 921, 157, 281, 1111, 597, 181, 511, 164, 564,304 })
}
}
);
return View(barChart);
}
}
}