[Solved] Unable to get RangeBar chart working with dates

[Claudia]

This is the sample I am trying to get working. Any help would be appreciated.

        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart2" Width="900px" Height="400px">
            <ChartTitle Text="Services">
                <Appearance Align="Center" />
            </ChartTitle>
            <Legend>
                <Appearance Visible="true" Position="Bottom" />
            </Legend>
            <PlotArea>
                <Series>
                    <telerik:RangeBarSeries Name="123">
                        <SeriesItems>
                            <telerik:RangeSeriesItem From="1748736000000" To="1783123200000" />
                        </SeriesItems>
                        <Appearance>
                            <FillStyle BackgroundColor="#5B9BD5" />
                        </Appearance>
                    </telerik:RangeBarSeries>

                    <telerik:RangeBarSeries Name="PT1">
                        <SeriesItems>
                            <telerik:RangeSeriesItem From="1748736000000" To="1751068800000" />
                        </SeriesItems>
                        <Appearance>
                            <FillStyle BackgroundColor="#ED7D31" />
                        </Appearance>
                    </telerik:RangeBarSeries>

                    <telerik:RangeBarSeries Name="PT2">
                        <SeriesItems>
                            <telerik:RangeSeriesItem From="1753142400000" To="1755388800000" />
                        </SeriesItems>
                        <Appearance>
                            <FillStyle BackgroundColor="#A9D18E" />
                        </Appearance>
                    </telerik:RangeBarSeries>
                </Series>
                <XAxis Type="Date" BaseUnit="Months" MinDateValue="05/01/2026" MaxDateValue="09/01/2026">
                    <MinorGridLines Visible="false" />
                </XAxis>
                <YAxis>
                    <MinorGridLines Visible="true" />
                    <MajorGridLines Visible="true" />
                </YAxis>
            </PlotArea>
        </telerik:RadHtmlChart>

This is the current output: 

 

[Lance | Senior Manager Technical Support]

Hello Claudia,

[redacted to avoid confusion and incorrect search results]

See Rumen's answer for explanation and clarification on casting the value type

Regards,
Lance | Senior Manager Technical Support
Progress Telerik

[Claudia]

Per this article (https://www.telerik.com/products/aspnet-ajax/documentation/controls/htmlchart/how-to/programmatic-creation-of-seriesitems-with-datetime) and the errors I am getting trying to build, RangeSeriesItem uses decimal not datetime hence the reason I was NOT using dates but converting them to decimal (

(decimal)scopeStart.Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds)

 

[Rumen]

Hi Claudia,

You are absolutely right that  the RangeSeriesItem constructor accepts decimal? for its From and To parameters, not DateTime. Your approach of converting to Unix millisecond timestamps and casting to decimal is correct.

There were a few issues preventing the chart from rendering properly:

1. RangeSeriesItem accepts decimal?, not DateTime — Pass Unix timestamps (milliseconds) cast directly to decimal:

   series1.SeriesItems.Add(new RangeSeriesItem((decimal)from1, (decimal)to1));
   Or, if starting from DateTime objects (your original approach), this also works:
   
   (decimal)scopeStart.Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds

2. Axis configuration for RangeBarSeries — RangeBarSeries renders horizontal bars, which means the axes are swapped from what you might expect:
   • The YAxis in markup is the horizontal value axis (bottom) where From/To values are plotted.
   • The XAxis in markup is the vertical category axis (left side).
   Because of this, Type="Date" and BaseUnit should not be set on the XAxis — they only work on category axes and will cause the chart to render empty. Instead, configure the YAxis with numeric MinValue/MaxValue using Unix timestamps.
3. Date formatting on the value axis — Since the axis is numeric (not a date axis), use a ClientTemplate on the YAxis labels to format the timestamps as readable dates:

   <ClientTemplate>
       #= kendo.toString(new Date(value), \'MMM dd, yyyy\') #
   </ClientTemplate>
   
   

I have attached a working sample project with two files (RangeBarChartTest.aspx and RangeBarChartTest.aspx.cs) that demonstrates the correct approach using your original Unix timestamps. The key parts of the code-behind are:

// Configure YAxis as the value axis (horizontal for RangeBarSeries)
RadHtmlChart2.PlotArea.YAxis.MinValue = ToTimestamp(new DateTime(2025, 5, 1));
RadHtmlChart2.PlotArea.YAxis.MaxValue = ToTimestamp(new DateTime(2026, 8, 1));
RadHtmlChart2.PlotArea.YAxis.Step = (decimal)TimeSpan.FromDays(30).TotalMilliseconds;

// Add series items with Unix timestamps cast to decimal
long from1 = 1748736000000;  // Jun 01, 2025
long to1   = 1783123200000;  // Jul 03, 2026
series1.SeriesItems.Add(new RangeSeriesItem((decimal)from1, (decimal)to1));

I hope this clears things up. Please let me know if you have any questions.

Regards,
Rumen
Progress Telerik

[Claudia]

Success! Thanks for the help.