Chart25

Chart25 is a powerful charting control built on top of Chart.js. It supports Bar, Stacked, Horizontal, Pie, Donut, Area, and Line charts with configurable colors, legends, headers, and scaling options.

Supported Chart Types

• Bar Chart
• Stacked Bar Chart
• Horizontal Bar Chart
• Pie Chart
• Donut Chart
• Area Chart
• Line Chart

Common Enums

Color

Defines standard colors used in charts.

• Green
• Red
• Yellow
• Blue
• Pink
• Orange
• Purple

HeaderColor

Defines the header style color of the chart container.

• Blue
• Green
• Red
• Yellow
• Cyan
• Grey
• White
• Dimgrey

BarChart Styles

• BarChart – Standard vertical bar chart
• Stacked – Stacked bar chart
• Horizontal – Horizontal bar chart

Standard Vertical Bar Chart

Sample Code

var barchart = new BarChart("BarChart", "Bar Chart");
barchart.AddDataX(new List<string>() { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" });
barchart.AddDataY("First List", ValueList, defaultcolors, 30);
barchart.Legend = true;
barchart.ChartHeight = "300";
barchart.HeaderColor = HeaderColor.Dimgrey;
ViewBag.BarChart = barchart.GetHtml(Chart25.BarChart.Styles.BarChart).ToString();

Stacked Bar Chart

Horizontal Bar Chart

Sample Code

var LeadList = new List<string>() { "20", "50", "40" };
var DataList = new List<string>() { "20" };

var horizontal = new BarChart("HorizontalChart", "Horizontal Chart");
horizontal.AddDataX(new List<string>() { "Assigned", "Owned", "Completed" });
horizontal.AddDataY("Sale Lead", LeadList, colors, 50);
horizontal.Legend = false;
horizontal.ChartHeight = "300";
horizontal.HeaderColor = HeaderColor.Blue;

ViewBag.HorizontalChart =
    horizontal.GetHtml(Chart25.BarChart.Styles.Horizontal).ToString();

PieChart

The PieChart class is used to display data distribution using Pie and Donut charts.

Sample Code

var piechart = new PieChart("PieChart", "Pie Chart");
piechart.AddDataX(new List<string>() { "Jan", "Feb", "Mar", "Apr", "May" });
piechart.AddDataY(new List<string>() { "200", "500", "2000", "1300", "5000" });
piechart.AddColor(new List<string>() { "red", "green", "pink", "blue", "#22c7f5" });
piechart.ChartHeight = "300";
piechart.HeaderColor = HeaderColor.Dimgrey;

ViewBag.PieChart =
    piechart.GetHtml(Chart25.PieChart.Styles.PieChart).ToString();

Donut Chart

Sample Code

var donutchart = new PieChart("DonutChart", "Donut Chart");
donutchart.AddDataX(new List<string>() { "Jan", "Feb", "Mar", "Apr", "May" });
donutchart.AddDataY(new List<string>() { "200", "500", "2000", "1300", "5000" });
donutchart.AddColor(new List<Chart25.Color>()
{
    Color.Red, Color.Blue, Color.Yellow, Color.Pink, Color.Green
});
donutchart.ChartHeight = "300";

ViewBag.DonutChart =
    donutchart.GetHtml(Chart25.PieChart.Styles.Donut).ToString();

AreaChart

The AreaChart class supports both area and line charts. Area charts fill the space under the line, while line charts show only lines.

Sample Code

var areachart = new AreaChart("AreaChart", "Area Chart");
areachart.AddDataX(new List<string>() { "Jan", "Feb", "Mar", "Apr", "May" });
areachart.AddDataY("First List", ValueList, Color.Red);
areachart.AddDataY("Second List", ValueList2, Color.Green);
areachart.ChartHeight = "300";
areachart.HeaderColor = HeaderColor.Dimgrey;
areachart.Legend = true;

ViewBag.AreaChart =
    areachart.GetHtml(Chart25.AreaChart.Styles.AreaChart).ToString();

Line Chart

Sample Code

var linechart = new Chart25.AreaChart("LineChart", "Line Chart");
linechart.AddDataX(new List<string>() { "Jan", "Feb", "Mar", "Apr", "May" });
linechart.AddDataY("First List", ValueList, Color.Red);
linechart.MaximumYScale = "160";
linechart.StepValue = "10";
linechart.ChartHeight = "300";
linechart.Legend = true;
linechart.HeaderColor = HeaderColor.Dimgrey;

ViewBag.LineChart =
    linechart.GetHtml(Chart25.AreaChart.Styles.LineChart).ToString();