Combining Steparea and Column Series in one Chart

[gisela]

Hi syncfusion team,

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

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

[Swetha Babu]

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

[gisela]

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

 

[Swetha Babu]

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

[gisela]

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:

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

[Swetha Babu]

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

[gisela]

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

[Swetha Babu]

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