---
title: "Chart Helper in ASP.NET MVC"
description: "Into the ASP.NET MVC 3, It provides various helper methods that are used for different purposes. The chart helper method is one of them, which m"
author: "Chris Anderson"
published: 2011-10-10
updated: 2020-03-04
canonical: https://www.mindstick.com/articles/773/chart-helper-in-asp-dot-net-mvc
category: "asp.net mvc"
tags: ["asp.net mvc"]
reading_time: 3 minutes
---
# Chart Helper in ASP.NET MVC
Into the ASP.NET MVC 3, It provides various helper methods that are used for different purposes. \
The chart helper method is one of them, which makes it very easy to create charts in ASP.NET MVC. Into this article, I will show you that how you can use Chart helper in ASP.NET MVC. And at the same time, I will also show you how to use the theme provided by ASP.NET MVC to style your chart. And then I will show how to create a custom theme for making your chart background as transparent.
First of all Open visual studio 2010 and create a new ASP.NET MVC 3 Web Application (Razor) project as seen below:\
\
Choose Razor as the view engine and click OK.\
Add a controller in your project and give name as HomeController as shown in the below figure:\
After adding a Controller adds the code as shown below:
```
using System.Web.Mvc;using System.Web.Helpers;
namespace ChartDemo.Controllers{ public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult Chart() { new Chart(width: 400, height: 200, theme: ChartTheme.Green) .AddSeries( chartType: "column", xValue: new[] { "Math", "English", "Computer", "Science" }, yValues: new[] { "80", "90", "78", "68" }) .Write("png"); return null; } }
}
```
The chart is rendered as an image, to use the action you need to add an HTML
image to your page like this:
```
Index
```
The chart is displayed on the page as follows:
\
Now, let's add a custom theme which set the background color of your chart to
transparent and chart area background color to Aqua:
```
public ActionResult Chart(){ string myTheme = @"
"; new Chart(width: 400, height: 200, theme: myTheme) .AddSeries( chartType: "column", xValue: new[] { "Math", "English", "Computer", "Science" }, yValues: new[] { "80", "90", "78", "68" }) .Write("png"); return null;
}
```
Run this application again, you will see the following screen:
\
Thanks for reading this article and I think this will help you a lot.
\
[Read also this Article:- [**ToolBarTray Control in WPF**](https://www.mindstick.com/Articles/547/toolbartray-control-in-wpf)]
---
Original Source: https://www.mindstick.com/articles/773/chart-helper-in-asp-dot-net-mvc
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.