combine chart with bar & line series

Kenneth Tang

Asked On February 4, 2019 01:06 AM UTC

Dear all,

How could we create a combine chart which have difference axis as showing as follow?

Please advance & thx.

KennethT

Reply | Reply with quote

Dharanidharan Dharmasivam [Syncfusion]

Replied On February 4, 2019 08:34 AM UTC

Hi Kenneth,

Greetings from Syncfusion.

We have analyzed your query. We already having online sample for adding multiple axis which can be found below,

https://ej2.syncfusion.com/aspnetmvc/Chart/MultipleAxes#/material

More information on multiple axis can be found below,

https://ej2.syncfusion.com/aspnetmvc/documentation/chart/axis-customization/#multiple-axis

We also have pareto series in which the single series need to be given which will be rendered as column type and its cumulative values will be shown in line series with different axis. Online sample and user guide can be found here.

Hope this helps.

Thanks,

Dharani.

Reply | Reply with quote

Kenneth Tang

Replied On February 10, 2019 05:04 PM UTC

Dear Dharani,

We have create the chart using your sample as follow with code

@Html.EJS().Chart("InOutDaily").Series(series =>

{

series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("hour").YName("inCount").DataSource(ViewBag.chartDaily).Name("IN").Add();

series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("hour").YName("outCount").DataSource(ViewBag.chartDaily).Name("Out").Add();

series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).XName("hour").YName("total").DataSource(ViewBag.chartDaily).Name("Total").Add();

series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).YAxisName("yAxis").XName("hour")

.Marker(mr=>mr.Visible(true).Width(10).Height(10).Border(br=>br.Color("#F8AB1D").Width(2))).YName("temperature").DataSource(ViewBag.chartDaily).Name("temperature").Add();

}).PrimaryXAxis(px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.Category).MajorGridLines(mg=>mg.Width(0))

.Interval(1).LabelIntersectAction(Syncfusion.EJ2.Charts.LabelIntersectAction.Rotate90).LineStyle(ls=>ls.Width(0))

).PrimaryYAxis(py => py.LabelFormat("{value}").LineStyle(ls=>ls.Width(0))

).Axes(ax =>

{

ax.OpposedPosition(true).RowIndex(0).Minimum(24).Maximum(36).Interval(2).Name("yAxis").LabelFormat("{value}°C").MajorTickLines(mt=>mt.Width(0)).MajorGridLines(mg=>mg.Width(0)).LineStyle(ls=>ls.Width(0)).LabelStyle(ls=>ls.Color("transparent")).Add();

}

).ChartArea(area => area.Border(br=>br.Color("transparent"))).Tooltip(tt => tt.Enable(true)

).LegendSettings(lg=>lg.Visible(true)).Load("Dailychartload").Render()

Please advance that why the temperature data can't be show and how we could show the temperature axis at the right hand side.

Thank a lot!

KennethT

Reply | Reply with quote

Kalaimathi Chellaiah [Syncfusion]

Replied On February 11, 2019 05:57 AM UTC

Hi KennethT,

Thanks for the update.

We have prepared a sample with the shared code snippet and the reported issue is not reproduced at our end. We suspect that in your axes minimum and maximum value might be wrong with your datasource. Also, while using the below code the labels will not be visible.

.LabelStyle(ls => ls.Color("transparent"))

Please find attached screenshot and sample for your reference,

Screenshot:

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/multipleaxeschart338362084.zip

Since we are not aware of your exact scenario, which the issue was reproduced. We suspect that you have done some customization in your application, so please revert us back with following details which was more helpful for further analysis and provide you the solution sooner.

Try to reproduce the reported scenario with the above sample and revert us.
Provide your sample with replication steps.
provide your data source file

Regards,

Kalai.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
142428	Feb 4,2019 01:06 AM UTC	Feb 11,2019 05:57 AM UTC	ASP.NET MVC - EJ 2	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US