1. Home
  2. Forum
  3. Blazor
  4. Chart with multiple series with some missing data doesn't sort categories correctly

Chart with multiple series with some missing data doesn't sort categories correctly

If you have a chart that displays multiple series, and has a category axis:


<SfChart @ref="Chart">

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory" LabelFormat="yyyy-MM-dd" />
    <ChartPrimaryYAxis Minimum="40" />
    <ChartSeriesCollection>
        @foreach (var series in Data)
        {           
            <ChartSeries DataSource="@series.Value" XName="Category" YName="Value"                         Type="ChartSeriesType.Line" Name="@series.Key" />       
         }
    </ChartSeriesCollection>
</SfChart>


…and the data looks like this:


    private SfChart Chart;
    public class SimpleChartData

    {       
        public DateTime Category { get; set; } 
        public double Value { get; set; }   
    }
    public Dictionary<string, List<SimpleChartData>> Data = new();

    protected override async Task OnInitializedAsync()
    {
        Data["Series 1"] = new List<SimpleChartData> 
        {
            new SimpleChartData { Category = new DateTime(2021, 6, 2), Value = 50 },            
            new SimpleChartData { Category = new DateTime(2021, 6, 3), Value = 60 }
        };
        Data["Series 2"] = new List<SimpleChartData>   
        {
            new SimpleChartData { Category = new DateTime(2021, 6, 1), Value = 50 },        
            new SimpleChartData { Category = new DateTime(2021, 6, 2), Value = 60 },          
            new SimpleChartData { Category = new DateTime(2021, 6, 3), Value = 70 }      
        };
     }



(Notice how the first series doesn't have a category for June 1st, but the second series does.)


Then the control will order the categories as follows:

  1. 2021-06-02
  2. 2021-06-03
  3. 2021-06-01


Notice how the category that wasn't in the first series just gets pushed at the end. This also happens with numeric categories.


The resulting diagram is:





I'm guessing that this is a bug; if not, is there a way to ask the chart to order them explicitly?


1 Reply
SM Srihari Muthukaruppan Syncfusion Team June 25, 2021 10:29 AM UTC

Hi Soeren, 
 
Based on your request we would like to let you know that the dateTimeCategory axis is aligned based on the index. Hence we suggest you to use DateTime Axis to achieve your requirement. Please find the sample, code snippet and screenshot. 
 
 
Code Snippet: 
// add your additional code here 
 
<SfChart @ref="Chart"> 
    <ChartPrimaryXAxis RangePadding="ChartRangePadding.Additional" EdgeLabelPlacement="EdgeLabelPlacement.Hide" ValueType="Syncfusion.Blazor.Charts.ValueType.DateTime" Interval="1" IntervalType="IntervalType.Days" LabelFormat="yyyy-MM-dd" /> 
    <ChartPrimaryYAxis Minimum="40" /> 
    <ChartSeriesCollection> 
        @foreach (var series in Data) 
        { 
            <ChartSeries DataSource="@series.Value" XName="Category" YName="Value" Type="ChartSeriesType.Line" Name="@series.Key" /> 
        } 
    </ChartSeriesCollection> 
</SfChart> 
 
// add your additional code here 
 
 
Screenshot: 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari  


Loader.
Up arrow icon