1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. ASP.NET MVC: Bar Chart Layout

ASP.NET MVC: Bar Chart Layout

Hello Community!

Currently I am working in syncfusion bar chart layout and I'm trying to changes the color of the Data Series, percentage tick mark and change the legend icon however it wasn't changing I am new in this component and I would appreciate if you guide me. The attachment below are my sample codes and layout. Thank you


Attachment: Bar_Chart_sample_work_8029c1a2.rar

3 Replies
DG Durga Gopalakrishnan Syncfusion Team October 22, 2021 07:47 AM UTC

Hi Ika, 

Greetings from Syncfusion. 

We have prepared sample based on your requirement. We suggest you to use Fill property to change the series color. You can add percentage for y axis labels using LabelFormat property and using LegendShape property, you can change the legend icon. Please check with below snippet and screenshot. 

@Html.EJS().Chart("container").Series( 
    sr => 
    { 
        sr.Fill("orange").ColumnSpacing(0.1).Marker(mr => mr.DataLabel(dl => dl.Visible(true))).          LegendShape(Syncfusion.EJ2.Charts.LegendShape.Rectangle).Add(); 
}).PrimaryXAxis( 
    xAxis => {        xAxis.MajorTickLines(mt=>mt.Width(0)).MajorGridLines(mg=>mg.Width(0));  }) 
   .PrimaryYAxis( 
    yAxis=>yAxis.LineStyle(ls=>ls.Width(0)).MajorTickLines(mt => mt.Width(0)).MajorGridLines(mg => mg.Width(0)).LabelFormat("{value}%")) 
.LegendSettings(ls=>ls.ShapeHeight(5).ShapeWidth(20)) 
.Render() 

 


UG : 

Note : If you want to add custom legend in chart, you can use Annotations property. 

Kindly revert us if you have any concerns. 

Regards, 
Durga G

IK Ika October 29, 2021 02:39 AM UTC

Hello,

Now im working in syncfusion pie chart bind in Sql Server in asp.net mvc. I tried to use the Controller code of Bar Chart in creating a Pie Chart however it doesn't work. What should be the problem.


Controller:

List data = new List();

string connectionString = null;

SqlDataAdapter adapter = new SqlDataAdapter();

DataSet dataset = new DataSet();

connectionString = @"Data Source=LAPTOP-V3QJAMBF\SQLEXPRESS;Initial Catalog=My_Database;Integrated Security=True;";

SqlConnection con = new SqlConnection(connectionString);

con.Open();


string command2 = "SELECT * FROM [myTable] WHERE Item_ID < 10";

SqlCommand cmd1 = new SqlCommand(command2, con);

adapter.SelectCommand = cmd1;

adapter.Fill(dataset);

for (var i = 0; i < dataset.Tables[0].Rows.Count; i++)

{

int x1 = (int)Convert.ToInt32(dataset.Tables[0].Rows[i]["this.Item_ID"]);

int y1 = (int)Convert.ToInt32(dataset.Tables[0].Rows[i]["Item_Score"]);


data.Add(new ChartSqlData(x1, y1));

}

ViewBag.dataSource = data;

return View();

}

[Serializable]

public class ChartSqlData

{

public ChartSqlData(int xvalue, int yvalue1)

{

this.Item_ID = xvalue;

this.Item_Score = yvalue1;


}

public int Item_ID {

get;

set;

}

public int Item_Score{

get;

set;

}


CSHTML

@(Html.EJS().AccumulationChart("container")

.Series(sr =>

{

sr.Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)

.XName("Item_ID")

.YName("Item_Score")

.Name("Item_ID")

.Explode(true)

.DataLabel(dl => dl.Visible(true).Name("Item_ID").Position(Syncfusion.EJ2.Charts.AccumulationLabelPosition.Outside).ConnectorStyle(cs => cs.Type(Syncfusion.EJ2.Charts.ConnectorType.Line).Length("5 %")).Font(ft => ft.Size("14px")))

.Animation(animate => animate.Enable(true))

.Radius("70%")

.StartAngle(0)

.EndAngle(360)

.InnerRadius("0%")

.GroupTo("9")

.GroupMode(Syncfusion.EJ2.Charts.GroupModes.Point)

.DataSource(ViewBag.dataSource).Add();

})



DG Durga Gopalakrishnan Syncfusion Team October 29, 2021 02:43 PM UTC

Hi Ika, 

We have ensured your reported scenario with attached snippet. We have noted that, Render method is not called at end of control creation. We have prepared sample based on your requirement.  

@(Html.EJS().AccumulationChart("container").Render()) 

 


Kindly revert us if you have any concerns. 

Regards,  
Durga G 


Loader.
Up arrow icon