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. Image for the cookie policy date

Combining Steparea and Column Series in one Chart

Hi syncfusion team,

I slightly modified the "Steparea" demo example by changing the second chart series from type "Steparea" to "Column":

StepArea.PNG


I would expect the start and end points of both series to be identical, and the step area should represent 12 data points, not only 11.

Thanks in advance



7 Replies

SB Swetha Babu Syncfusion Team October 26, 2022 05:48 AM

Hi Gisela,


Greetings from Syncfusion.


The column gets rendered based on the size of the column and the step area gets rendered based on the data that we provide. So, as of now, we do not have support to render both the step area and the column start and end at the same point.


Kindly, revert us if you have any concerns. If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Regards,

Swetha



GI gisela replied to Swetha Babu October 27, 2022 11:30 AM

Hi Swetha,

thank you for your answer, but i don't understand.

Why do you speak of "size" in the column series and "data" in the step area series? In both cases, the representation is based on data.

Can i combine the step area with any other chart type?


Thanks in advance

Gisela

 



SB Swetha Babu Syncfusion Team October 28, 2022 05:35 AM

Hi Gisela,


Sorry for the inconvenience caused.


We can achieve your requirement by adjusting the data of the step area. We have created a simple blazor application to demonstrate the same and it can be downloaded from the below link.


Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CombinationSeries-370734577


Code Snippet:


<ChartSeriesCollection>

            <ChartSeries DataSource="@ChartPoints1" Name="Renewable" XName="Period"

                         YName="RenewableResourcesProduction" Opacity="0.6" Type="ChartSeriesType.StepArea">               

                <ChartSeriesBorder Width="2"></ChartSeriesBorder>

            </ChartSeries>

            <ChartSeries DataSource="@ChartPoints" Name="Non-Renewable" XName="Period" Width="2"

                         YName="NonRenewableResourcesProduction" Opacity="0.6" Type="ChartSeriesType.Column">

                <ChartSeriesBorder Width="2"></ChartSeriesBorder>

            </ChartSeries>

        </ChartSeriesCollection>


Screenshot:



Kindly, revert us if you have any concerns. If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.


Regards,

Swetha



GI gisela October 29, 2022 07:41 AM

Hi Swetha,

thank you for your answer, but your sample project does not meet my requirements. For one, I would expect the following layout, the start and end of each step and column are identical:

Steparea2.PNG

On the other hand, the combination of Steparea and Column should also work in the case of ValueType="Syncfusion.Blazor.Charts.ValueType.Category" of the ChartPrimaryXAxis.


Thank's in advance

Gisela



SB Swetha Babu Syncfusion Team November 1, 2022 04:39 AM

Hi Gisela,


We can achieve your requirement by rendering the Step area in primary axis and Column chart in secondary x axis. We have created a simple blazor application to demonstrate the same and it can be downloaded from the below link.


Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartSample1754333013


Code Snippet:


<SfChart Title="Olympic Medal Counts - RIO">

        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>

        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Double" Minimum="1" Maximum="28" Interval="1">

            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

        </ChartPrimaryXAxis>

        <ChartPrimaryYAxis Maximum="4000" Interval="1000">

            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

        </ChartPrimaryYAxis>

        <ChartAxes>

            <ChartAxis Visible="false" Name="XAxis1" Minimum="0.5" Maximum="28.5" Interval="1.5" ColumnIndex="1"></ChartAxis>

        </ChartAxes>

        <ChartSeriesCollection>

            <ChartSeries Opacity="0.3" DataSource="@ChartPoints" XName="XValue" YName="YValue" Type="ChartSeriesType.StepArea">               

            </ChartSeries>

            <ChartSeries Fill="red" XAxisName="XAxis1" DataSource="@ChartPoints1" XName="XValue" YName="YValue" Type="ChartSeriesType.Column">               

            </ChartSeries>

        </ChartSeriesCollection>

    </SfChart>


Screenshot:



Kindly, revert us if you have any concerns.


Regards,

Swetha



GI gisela November 1, 2022 06:54 AM

Hi Swetha,


thank you for your time.

Your Demo sample works in the case of ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Double", it's a tricky workaround.

But the workaround doesn't work and can't work for ValueType="Syncfusion.Blazor.Charts.ValueType.Category".


Thank's in advance

Gisela



SB Swetha Babu Syncfusion Team November 2, 2022 07:03 AM

Hi Gisela,


We have created a sample using the Category axis and the same can be downloaded from the below link.


Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartSample-25209969


Code Snippet:


<SfChart Title="Olympic Medal Counts - RIO">

        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>

        <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" LabelPlacement="LabelPlacement.OnTicks" >

            <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

        </ChartPrimaryXAxis>

        <ChartPrimaryYAxis Maximum="4000" Interval="1000">

            <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

            <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

        </ChartPrimaryYAxis>

        <ChartAxes>

            <ChartAxis Visible="false" Name="XAxis1" Minimum="0.5" Maximum="28.5" Interval="1.5" ColumnIndex="1"></ChartAxis>

        </ChartAxes>

        <ChartSeriesCollection>

            <ChartSeries Opacity="0.3" DataSource="@ChartPoints" XName="XValue" YName="YValue" Type="ChartSeriesType.StepArea">               

            </ChartSeries>

            <ChartSeries Fill="red" XAxisName="XAxis1" DataSource="@ChartPoints1" XName="XValue" YName="YValue" Type="ChartSeriesType.Column">               

            </ChartSeries>

        </ChartSeriesCollection>

    </SfChart>


Screenshot:



Kindly, revert us if you have any concerns.


Regards,

Swetha


Loader.
Live Chat Icon For mobile
Up arrow icon