Is it possible to do a Range Bar chart with dates?

I am looking to create a ranged-bar chart with dates... very similar to this sample: https://blazor.syncfusion.com/demos/chart/range-bar?theme=fluent except that each range rather than for example 28 to 72 degrees is July 1, 2000 to Aug 16, 2013.

Is this possible or do I have to fake-convert the date do something like 20000701 and 20130816, and then play games with formatting labels.

(Edit: A Gantt chart is WAY more complex that we need, but the bars would look similar.)

Thanks!


1 Reply

DG Durga Gopalakrishnan Syncfusion Team January 4, 2024 02:04 PM UTC

Hi Byron,


Greetings from Syncfusion.


By default, y axis supports double and logarithmic value types alone. To achieve your required scenario, we suggest you to specify the datasource y value in milliseconds and convert the axis labels in OnAxisLabelRender event in required datetime format. We have prepared sample based on your requirement. Please check with the below snippet and sample.


<SfChart IsTransposed="true">

   <ChartEvents OnAxisLabelRender="AxisLabelEvent"></ChartEvents>

</SfChart>

@code {

  protected override void OnInitialized()

 {

     base.OnInitialized();

     foreach (var data in ChartPoints)

     {

         data.lowTemp = (DateTime.Now - data.IND_LowTemp).TotalMilliseconds;

         data.highTemp = (DateTime.Now - data.IND_HighTemp).TotalMilliseconds;

     }

 }

  public void AxisLabelEvent(AxisLabelRenderEventArgs args)

  {

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

        {

            args.Text = ((new DateTime(1970, 1, 1)).AddMilliseconds(args.Value)).ToString("HH:mm");

        }

    }

}



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


Kindly revert us if you have any concerns.


Regards,

Durga Gopalakrishnan.


Loader.
Up arrow icon