1. Home
  2. Forum
  3. Blazor
  4. Multiple series in one LineChart

Multiple series in one LineChart

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)

3 Replies 1 reply marked as answer
DG Durga Gopalakrishnan Syncfusion Team June 6, 2021 03:00 PM UTC

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 : 

 

Kindly revert us is you have any concerns. 

Regards, 
Durga G

UN Unknown Syncfusion Team June 14, 2021 02:54 PM UTC

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

DG Durga Gopalakrishnan Syncfusion Team June 15, 2021 03:36 PM UTC

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 : 

 


Kindly revert us if you have any concerns. 

Regards,  
Durga G

Marked as answer
Loader.
Up arrow icon