Multiple series in one LineChart

[Unknown]

I created in Winforms a chart with mutliple series in a stacked bar (see picture)

Now I want to use in Blazor chart to have the same bar.

My DataSource has 3 values (Green(1), Red(2) and Yellow(3))

But is has 2 series with each containing the 3 colors.

When hover it it shows the series, color and value (2.3.value = Yellow value).

Is there a way to achieve this in one bar? This can be really stacked if I have to create a bar for each series

Ofcourse this is an extreme example. (I have no idea how many series this is but bu guess is around 50 maybe more)

[Durga Gopalakrishnan]

Hi Michael, 

Greetings from Syncfusion. 

We have prepared sample based on your requirement. As per screenshot, we have used 10 series each with single data with random y values and palettes to assign custom colors for each series. Please check with the below snippet and screenshot. 

<SfChart Palettes="@palettes" Height="40%"> 

<ChartSeriesCollection> 

        @foreach (ChartSeries series in seriesCollection) 

        { 

            <ChartSeries DataSource="@series.DataSource" XName="@series.XName" YName="@series.YName" Name="@series.Name" Type="@series.Type"> 

            </ChartSeries> 

        } 

    </ChartSeriesCollection> 

</SfChart> 

 

protected override void OnInitialized() 

    { 

        for (int i = 1; i <= 10; i++) 

        { 

            seriesCollection.Add( 

                    new ChartSeries 

                    { 

                        XName = "X", 

                        YName = "Y", 

                        Type = ChartSeriesType.StackingBar, 

                        DataSource = new List<StackedBarChartData> { 

                            new StackedBarChartData {X = "Jan", Y = i*randomNum.NextDouble() } 

                        }, 

                        Name = "Series " + i 

                    } 

                ); 

        } 

    } 

Screenshot : 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/StackedBar1008247720.zip 

Kindly revert us is you have any concerns. 

Regards, 

Durga G

[Unknown]

Thanks, I was able to change it to my liking.

But now I tried to change the labels to custom labels.

I want on the place where it says 0 a start time and at the end an end time. The values are not binded to the data that is displayed.

I want to the the same on the other axis.

With kind regards,

Michael

[Durga Gopalakrishnan]

Hi Michael, 

We request you to use OnAxisLabelRender event to customize the axis labels as per your need. We have attached sample for your reference. In the sample, we have also used OnAxisActualRangeCalculated event to get the first and last label using Minimum and Maximum value.  

Code Snippet : 

<SfChart> 

    <ChartEvents OnAxisActualRangeCalculated="RangeCalculated" OnAxisLabelRender="LabelRender"></ChartEvents> 

</SfChart> 

@code{ 

    public double Minimum { get; set; } 

    public double Maximum { get; set; } 

    public void RangeCalculated(AxisRangeCalculatedEventArgs Args) 

    { 

        Minimum = Args.Minimum; 

        Maximum = Args.Maximum; 

        Maximum = ((Maximum - Minimum) / Args.Interval) * Args.Interval; 

    } 

    public void LabelRender(AxisLabelRenderEventArgs Args) 

    { 

        if (Args.Axis.Name == "PrimaryYAxis") 

        { 

            Args.Text = Args.Text == Minimum.ToString() ? "Start Time" : (Args.Text == Maximum.ToString() ? "End Time" : Args.Text); 

        } 

    } 

} 

Screenshot : 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/CustomAxisLabel-1296049633.zip 

Kindly revert us if you have any concerns. 

Regards,  

Durga G