SyncFusion Blazor Chart for Gantt development

[Ramesh S]

Hi,

I would like know if any of Chart types in SyncFusion Blazor library supports the following requirements. We are planning to develop a Gantt chart like application using Blazor.

Our chart may look like as depicted in the following picture.

I am also exploring SyncFusion's Range Bar control in the following demo.

https://blazor.syncfusion.com/demos/chart/range-bar?theme=fluent

My questions are :

1. Do you have any chart type recommendation for the above requirement if any, please?
   
2. Can we add labels like 'P1', 'S1' on both ends of a range bar data-point and also in the middle like 'Label1' etc?
3. There will be around 2000 intervals on Y axis and 100 date interval on X axis. Can we add scrollbars on X and Y axis in Range Bar ?
4. Will this Range Bar support lazy loading?
5. Does the Range Bar support Context menu(right click menu)?
   

Thanks,
Ramesh S

[Swetha Babu]

Hi Ramesh,

Greetings from Syncfusion.

Please find the below response for your queries:

Query 1, Query 2 and Query 3:

We can achieve your requirement by using the RangeColumn type chart. The labels ‘P1’, ‘S1’ is rendered by using the DataLabel and Text argument in OnDataLabelRender event of the Chart. We can enable the scrollbar for the axes by using the ChartScrollBarSettings in ChartPrimaryXAxis. We have created a simple blazor application to demonstrate the same and it can be downloaded from the below link.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RangeBar1849750133

Code Snippet:

<SfChart IsTransposed="true">

        <ChartEvents OnAxisLabelRender="axisLabel" OnDataLabelRender="textLabel"></ChartEvents>       

        <ChartPrimaryXAxis Minimum="10" Maximum="100" Interval="10" ValueType="Syncfusion.Blazor.Charts.ValueType.Double">

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

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

            <ChartAxisScrollbarSettings Enable="true">

            </ChartAxisScrollbarSettings>

        </ChartPrimaryXAxis>

        <ChartPrimaryYAxis Minimum="1" Maximum="15" Interval="1">

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

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

            <ChartAxisScrollbarSettings Enable="true">

            </ChartAxisScrollbarSettings>

        </ChartPrimaryYAxis>

       

        <ChartAnnotations>

            @foreach(var annotation in AnnotationValue)

            {

                <ChartAnnotation CoordinateUnits="Units.Point" X="annotation.XPoint" Y="@(annotation.YPoint)" Region="Regions.Series">

                    <ContentTemplate>

                        <div>@annotation.Text</div>

                    </ContentTemplate>

                </ChartAnnotation>           

            }       

        </ChartAnnotations>

        <ChartSeriesCollection>

            <ChartSeries PointColorMapping="Color" DataSource="@ChartPoints" XName="Date" High="HighTemp" Low="LowTemp" ColumnSpacing="0.1" Type="ChartSeriesType.RangeColumn">               

                <ChartMarker>

                    <ChartDataLabel Visible="true" Position="LabelPosition.Outer" Name="Text"></ChartDataLabel>

                </ChartMarker>

            </ChartSeries>           

        </ChartSeriesCollection>

    </SfChart>

Screenshot:

Query 4: Lazy loading in Range Bar.

The chart supports lazy loading. Please find the below UG link for your reference.

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

Kindly, revert us if you have any concerns.

Regards,

Swetha