Combine two different scale chart into one

[raycywong]

Hi,

In the attached file(upper chart), you can see I combine a line chart and column chart into one. In the line series, there are 365 data. However, I just only have 3 data in the column series. As the result, the width of the columns is very thin and location in the most left hand side.

My question is how do I make a chart like the attached file(lower chart).

Thanks!

Ray

[Sheik Syed Abthaheer M]

Hi Ray,

Thanks for using Syncfusion products.

We would like to inform you that the segment width(like column, bar chart types) depends on the number of segments(datapoints) presents in axis (either Primary Axis or Secondary Axis). Thus when we have more number of datapoints in the axis, width of the segment will be less.

 

In your scenario, one of the series is having more datapoints(365), and thus the segment width will depends on that maximum axis value. Thus the width of the column segment (another series) is small due to more datapoints. If you change the Line chart as Column,you can find the size of the each segment. This is our default behaviour.

 

But you can able to increase the width of column by setting SegmentLabelMode property of ChartSeries as Relative. This property will take the Y1 values(second value bind in YBindingPaths) from viewmodel. As we can have custom width for each segment, nearby segments may get overlap.

 

We have prepared the sample based on your requirement. Please download the sample from the given below location.

Please let us know if you have any queries.

Regards,

M. Sheik

CombineChartDemo_863828da.zip

[raycywong]

Thanks a lot. It works to me and I can resize the column width instead the default behavior.

In fact, the 365 datapoints are the day of year. I want to show date format(DD/MM) in the x-axis. However, not matter how many times I tried, I only got the sequence number in the x-axis. 

How can I do? Please help.

Thanks.

Ray

[Sheik Syed Abthaheer M]

Hi Ray,

Thanks for your update.

We have analyzed your query and you can achieve your requirement by applying LabelDateTimeFormat property of Primary Axis as shown in the given below code snippet

Code Snippet [Xaml]:

<syncfusion:ChartAxis ValueType="DateTime" LabelDateTimeFormat="dd/MM" />

We have prepared the sample based on your requirement. Please download the sample from the given below location.

Please let us know if you have any queries.

Regards,

M. Sheik

CombineChartDemowithDateTime_4a60bb4c.zip

[raycywong]

You really help me a lot.

In the last post, you solved my problem that showing data format(DD/MM) in x-axis. If I want to show the first day of every month only in the x-axis, i.e. 01/01, 01/02, 01/03......01/12. How can I do?

I have tried to use interval. However, days of every month is not the same, so I cannot just set the interval to 30 to solve the problem. Thanks.

Regards,

Ray

[Sheik Syed Abthaheer M]

Hi Ray,

 Thanks for your update.

 We have analyzed your query and we are sorry to let you know that currently we do not have support for displaying first day of every month in DateTime Chart Axis(ValueType as "DateTime"). We have already logged the Feature request for this.

 FR link: http://www.syncfusion.com/support/directtrac/features/5352

 Please let us know if you have any queries.

 Regards,

M. Sheik