Chart with multiple series

[Richard Warriner]

I am trying to replicate this chart from a winforms app. It shows number of orders received over time from different sources.

My data is in the form

Web, 20240521, 10

Web, 20240520, 6

HOS TRIP, 20240521, 3

HOS TRIP , 20240520, 6

HOS PO, 20240521, 16

HOS TRIP , 20240519, 9

Can it be done ? I cant work out how to do it?? Do I need dynamic series?

[Ilamathi Govindaraj]

Hi Richard,

We have analyzed your query regarding the chart with multiple series. We have created a multiple-series chart by binding it with different data sources in the chart series collection. Additionally, we customized the legend using the Legend Position and Alignment properties. The Interval and IntervalType properties of the X-axis can be utilized to customize datetime intervals. We have attached a sample and a screenshot for your reference. Please review the code snippet below.

Code Snippet:

<SfChart Title="Orders Over Last 14 Days" Theme="Theme.Fluent">

    <ChartPrimaryXAxis Interval="1" IntervalType="IntervalType.Days" LabelIntersectAction="LabelIntersectAction.MultipleRows"

        LabelPlacement=" LabelPlacement.OnTicks" LabelFormat="dddd" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime">

    </ChartPrimaryXAxis>

    <ChartPrimaryYAxis Minimum="0" Maximum="60" Interval="20">

    </ChartPrimaryYAxis>

    <ChartSeriesCollection>

        <ChartSeries Type="ChartSeriesType.Line" DataSource="Web_OrdersDetails" XName="Date" YName="NumberOfOrders" Width="2" Name="Web">

        </ChartSeries>

        <ChartSeries Type="ChartSeriesType.Line" DataSource="HOS_TRIP_OrdersDetails" XName="Date" YName="NumberOfOrders" Width="2" Name="HOS TRIP">

        </ChartSeries>

        <ChartSeries Type="ChartSeriesType.Line" DataSource="HOS_PO_OrdersDetails" XName="Date" YName="NumberOfOrders" Width="2" Name="HOS PO">

        </ChartSeries>

    </ChartSeriesCollection>

 

    <ChartLegendSettings EnableHighlight="true" Position="LegendPosition.Right" Alignment="Alignment.Near"></ChartLegendSettings>

</SfChart>

Screenshot:

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

Kindly revert us if you have any concerns.

Regards,

Ilamathi Govindaraj.