combine chart with bar & line series

[Kenneth Tang]

Dear all,

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

Please advance & thx.

KennethT

[Dharanidharan Dharmasivam]

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. 

[Kenneth Tang]

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

[Kalaimathi Chellaiah]

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.