Stacked bar chart rows with same height

[Krasimir Ivanov]

Hello, 

Depending on the number of data points the height of the bars changes. Could you give me a way to set the height to a constant value?

My code is:

<SfChart @[email protected]>

    <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" >

        <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

        <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

    </ChartPrimaryXAxis>

    <ChartPrimaryYAxis [email protected]>

    </ChartPrimaryYAxis>

    <ChartSeriesCollection>

        <ChartSeries ColumnWidth="0.6"

                     DataSource="@this.Statistics"

                     XName="Name"

                     YName="OpenCount"

                     Width="2"

                     Name="Active"

                     Type="ChartSeriesType.StackingBar"

                     Fill="#00354C">

            <ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>

        </ChartSeries>

        <ChartSeries ColumnWidth="0.6"

                     DataSource="@this.Statistics"

                     XName="Name"

                     YName="ResolvedCount"

                     Name="Resolved"

                     Type="ChartSeriesType.StackingBar"

                     Fill="#D3D3D3">

            <ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>

        </ChartSeries>

        <ChartSeries ColumnWidth="0.6"

                     DataSource="@this.Statistics"

                     XName="Name"

                     YName="RejectedCount"

                     Name="Rejected"

                     Type="ChartSeriesType.StackingBar"

                     Fill="#009CE1">

            <ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>

        </ChartSeries>

    </ChartSeriesCollection>

    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>

    <ChartLegendSettings Visible="true">

        <ChartLegendTextStyle FontFamily="Titillium Web"></ChartLegendTextStyle>

    </ChartLegendSettings>

</SfChart>

[Ilamathi Govindaraj]

Hi Krasimir Ivanov,

We have analyzed your query regarding the height of the stacked bar chart changing depending on the number of data points. To address this, we suggest implementing a lazy loading feature. By adding the points' length with the current range minimum in the OnScrollChanged event, the chart's height will remain consistent while scrolling. We have attached a sample and screenshot for your reference. Please review the code snippet below.

Code Snippet:

<SfChart Title="Lazy Loading Chart">

    <ChartEvents OnScrollChanged="@ScrollChange"></ChartEvents>

    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">

        <ChartAxisScrollbarSettings Enable="true" PointsLength="30"></ChartAxisScrollbarSettings>

    </ChartPrimaryXAxis>

    <ChartSeriesCollection>

            <ChartSeries DataSource="@dataSource" Fill="#66B2B2" XName="XValue" YName="y" Name="Series 1" Type="ChartSeriesType.StackingBar">

        </ChartSeries>

    </ChartSeriesCollection>

</SfChart>

protected override void OnInitialized()

{

  dataSource = this.GetData();

}

public void ScrollChange(ScrollEventArgs e)

{

        this.dataSource = GetRangeData(Convert.ToInt32(e.CurrentRange.Minimum), Convert.ToInt32(e.CurrentRange.Minimum) + 6);

        StateHasChanged();

}

public List<ColumnChartData> GetRangeData(int min, int max)

{

    List<ColumnChartData> data = new List<ColumnChartData>();

    for (; min < max; min++)

    {

        data.Add(new ColumnChartData

            {

                x = min,

                XValue = xValues[min % 2] + min.ToString(),

                y = random.Next(10, 100)

            });

    }

    return data;

}

Screenshot:

UG: https://blazor.syncfusion.com/documentation/chart/how-to/lazy-loading

Kindly revert us if you have any concerns.

Regards,

Ilamathi Govindaraj.

Attachment: BarChartApp_a3c1f3e3.zip

[Krasimir Ivanov]

Hello,

Thank you for the reply. But I can't get it to work using an already loaded collection. Could you please provide me with a solution that has loaded all of the records (e.g. 50) and then scrolls over them without creating new data points but using the already loaded ones? 

[Durga Gopalakrishnan]

Krasimir,

We have created new data for an example. Initially, you can load the entire dataset and assign the first 6 data points to the chart series' data source. Then, as you scroll using the scrollbar's OnScrollChanged event, you can filter the data by examining the minimum and maximum values using the List GetRange method from the originally loaded dataset. We've provided the updated sample for your review. Please refer to the snippet and sample provided below.

protected override void OnInitialized()

{

     originalData = this.GetData();

     dataSource = originalData.GetRange(0,6);

}

public void ScrollChange(ScrollEventArgs e)

{

     var min = Convert.ToInt32(e.CurrentRange.Minimum);

     var max = Convert.ToInt32(e.CurrentRange.Minimum) + 6;

 

     this.dataSource = originalData.GetRange(min, max - min);

     StateHasChanged();

}

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

Please revert us if you have any concerns.

[Krasimir Ivanov]

Unfortunately, this didn't work for me. The scroll glitches and jumps. However, I found a solution. I set the height property of the sf chart (<SfChart [email protected]>) and depending on the number of data points set  this.ChartHeight = $"{Count * 45}px"

[Durga Gopalakrishnan]

Krasimir,

Thanks for sharing your workaround. Setting the height property seems like a smart solution to address the scroll glitches and jumps. We are glad you found a fix that works for your situation. Please get back to us if you need any further assistance. We are always happy in assisting you.