Display label on each bar chart in ASP .NET MVC 5 Chart

I want to display a label on each bar of the chart horizontally

@using GJob.Models.Views
@model BasicChart1
@{
ViewBag.Title = "The Chart";
Layout = "~/Views/Shared/_Layout2.cshtml";
}

@{
var myChart = new Chart(width: 1200, height: 800)
.AddTitle("My chart title")
.AddSeries("Default",
chartType: "bar",
markerStep: 1,
xValue: Model.XData, xField: "Name",
yValues: Model.YDataINT, yFields: "Value")
.Write("png");
}


I have tried to get help from those articles

https://docs.microsoft.com/en-us/aspnet/web-pages/overview/data/7-displaying-data-in-a-chart

https://weblogs.asp.net/imranbaloch/chart-helper-in-asp-net-mvc-3-0-with-transparent-background

https://forums.asp.net/t/1654046.aspx?Chart+Helper+need+all+xvalue+labels+not+just+a+few

and as well as the definition of the constructor of the Chart

namespace System.Web.Helpers
{
//
// Summary:
// Displays data in the form of a graphical chart.
public class Chart


but no clue how to do it.

Please help. Thanks!

UPDATE 1

I assume that we have work around ChartArea

<asp:Chart ID="Chart1" runat="server" Width="600" Height="400" DataSourceID="SqlDataSource1">
<series>
<asp:Series Name="Series1" XValueMember="Country" YValueMembers="Column1"
ChartType="Column">
</asp:Series>
</series>
<chartareas>
<asp:ChartArea BackColor="NavajoWhite" BackGradientStyle="LeftRight"
Name="ChartArea1" ShadowOffset="5">
<AxisY Title="Number of Customers">
</AxisY>
<AxisX Title="Countries" IsLabelAutoFit="True">
<LabelStyle Angle="-90" Interval="1" />
</AxisX>
<Area3DStyle Enable3D="True" />
</asp:ChartArea>
</chartareas>
</asp:Chart>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT COUNT(*),Country FROM Customers GROUP BY Country">
</asp:SqlDataSource>


But it is unclear the syntax to config Chart class in ASP.NET MVC.

1 Answer
1

So I found correct approach here https://www.danylkoweb.com/Blog/simplified-aspnet-mvc-charts-A5

Controller

public ActionResult PercentageDistributionFault()
{
// Get data to use in Chart
var model = new BasicChart1();
var data = db.RequestMalfunctionTypes.GroupBy(x => x.MalfunctionTypeID).Select(x => new NameCountClass
{
Name = x.FirstOrDefault().MalfunctionType.Name,
Count = x.Count()
}).OrderBy(x => x.Count).ToList();

model.Data.AddRange(data);

foreach (var item in data)
{
model.XData.Add(item.Name);
model.YDataINT.Add(item.Count);
}
// Create chart object and pass it to View
var chart = new Chart(1200, 800, GetMyCustomTheme())
.AddTitle("Mega chart")
.AddSeries("Default",
chartType: "bar",
xValue: model.XData, xField: "Name",
yValues: model.YDataINT, yFields: "Value");

return View(chart);
}

private string GetMyCustomTheme()
{
return @"
<Chart BackColor=""White"" BackGradientStyle=""TopBottom"" BorderColor=""181, 64, 1""
BorderWidth=""2"" BorderlineDashStyle=""Solid"" Palette=""SemiTransparent""
AntiAliasing=""All"">

<ChartAreas>
<ChartArea Name=""Default"" _Template_=""All"" BackGradientStyle=""None""
BackColor=""White"" BackSecondaryColor=""White""
BorderColor=""64, 64, 64, 64"" BorderDashStyle=""Solid""
ShadowColor=""Transparent"">

<AxisX Title=""Countries"" IsLabelAutoFit=""True"">
<LabelStyle Angle = ""-90"" Interval = ""1"" />
</AxisX>

<Area3DStyle Enable3D=""False"" Inclination=""60"" Rotation=""45""/>
</ChartArea>
</ChartAreas>
</Chart>";
}


View

@using System.Web.Helpers
@model Chart

@{
ViewBag.Title = "Mega Chart";
Layout = "~/Views/Shared/_Layout2.cshtml";
}

@{
Model.Write(format: "png");
}


So the answer is to use this line <LabelStyle Angle = ""-90"" Interval = ""1"" />

<LabelStyle Angle = ""-90"" Interval = ""1"" />

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.