We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

combine chart with bar & line series

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
loading
Tags: Chart
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

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, 
 
More information on multiple axis can be found below, 
 
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
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

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:  
 
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. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon