How to make a Min, Max and Average Chart ?

[Julien Gambini]

Hello,

How can I achieve this kind of chart using the Syncfusion Chart control ?

[Swetha Babu]

Hi Julien,

Greetings from Syncfusion.

We can render the chart based on your requirement by rendering the scatter series shape as rectangle to render that square at the center, error bar can be used to render the line and then again scatter series can be set as circle to render all the circles. However, we have created a ASP.NET Core application to demonstrate the same and it can be downloaded from the attached file.

Code Snippet:

<ejs-chart title="Min, Max & Average Points by Team">

        <e-series-collection>

            <e-series type="Scatter">

                <e-series-marker visible="false" width="10" height="10" shape="Rectangle"></e-series-marker>

                <e-series-errorbar visible="true" verticalError="Error" mode="Vertical">

                    <e-errorbarcap length="0" width="0" color="#0000ff"></e-errorbarcap>

                </e-series-errorbar>

            </e-series>

            <e-series type="Scatter">

                <e-series-marker visible="false" width="10" height="10" shape="Circle"></e-series-marker>

            </e-series>

            <e-series type="Scatter">

                <e-series-marker visible="false" width="10" height="10" shape="Circle"></e-series-marker>

            </e-series>

        </e-series-collection>

    </ejs-chart>

Screenshot:

Kindly, revert us if you need further assistance.

Regards,

Swetha

[SpeedT]

Hi Swetha,

How can I achieve the same chart using Syncfusion Blazor chart components?

I'm not able to extend/show the error bar between min and max values. Error bar only shows up for the rectangle/avg value.

<ChartSeries Name="Mean" XName="Id" Width="2"

             YName="AvgTime" Type="ChartSeriesType.Scatter">

    <ChartErrorBarSettings Visible="true" Mode="ErrorBarMode.Vertical" Type="ErrorBarType.Custom" >

        <ChartErrorBarCapSettings Length="0" Width="0" Color="#0000ff"></ChartErrorBarCapSettings>

    </ChartErrorBarSettings>

    <ChartMarker Visible="false" Width="10" Height="10" Shape="ChartShape.Rectangle">

    </ChartMarker>

</ChartSeries>

<ChartSeries  Name="Min" XName="Id" Width="2"

             YName="MinTime" Type="ChartSeriesType.Scatter">

    <ChartMarker Visible="false" Width="10" Height="10" Shape="ChartShape.Circle">

    </ChartMarker>

</ChartSeries>

<ChartSeries  Name="Max" XName="Id" Width="2"

             YName="MaxTime" Type="ChartSeriesType.Scatter">

    <ChartMarker Visible="false" Width="10" Height="10" Shape="ChartShape.Circle">

    </ChartMarker>

</ChartSeries>

[Durga Gopalakrishnan]

Hi SpeedT,

We have prepared the sample using Blazor chart. Your requirement can be achieved by using Scatter and RangeColumn series. Please check with the attached sample and screenshot for your reference.

<SfChart>

<ChartSeriesCollection>

    <ChartSeries Type="ChartSeriesType.Scatter">

        <ChartMarker Visible=false Shape="ChartShape.Rectangle"></ChartMarker>

    </ChartSeries>

    <ChartSeries ColumnWidth=0.005 Type="ChartSeriesType.RangeColumn">

        <ChartMarker Visible=true IsFilled=true></ChartMarker>

    </ChartSeries>

</ChartSeriesCollection>

</SfChart>

Sample : https://blazorplayground.syncfusion.com/rZrfNKslgQzSqgle

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[SpeedT]

Appreciate your quick response. Worked great!

[Swetha Babu]

SpeedT,

Most Welcome! Please get back to us if you need any other assistance.