[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,

It looks like you're trying to use Unix timestamps, this isn't supported in .NET Framework as-is. You need to change those value to something .NET can understand and convert, for example:

• Use ISO 8601 date strings (e.g., "2026-05-01T00:00:00")
• Use .NET DateTime objects if you are binding the chart programmatically

For example, using date strings we can convert this

<telerik:RangeSeriesItem From="1753142400000" To="1755388800000" />

to this:

<telerik:RangeSeriesItem From="2026-05-01T00:00:00" To="2026-09-01T00:00:00" />

Here is your complete code snippet with those values converted:

<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="2025-12-30T00:00:00" To="2026-12-30T00:00:00" />
                </SeriesItems>
                <Appearance>
                    <FillStyle BackgroundColor="#5B9BD5" />
                </Appearance>
            </telerik:RangeBarSeries>

            <telerik:RangeBarSeries Name="PT1">
                <SeriesItems>
                    <telerik:RangeSeriesItem From="2025-12-30T00:00:00" To="2026-01-27T00:00:00" />
                </SeriesItems>
                <Appearance>
                    <FillStyle BackgroundColor="#ED7D31" />
                </Appearance>
            </telerik:RangeBarSeries>

            <telerik:RangeBarSeries Name="PT2">
                <SeriesItems>
                    <telerik:RangeSeriesItem From="2026-02-21T00:00:00" To="2026-03-19T00:00:00" />
                </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>

 

Programmatic Option

Since I imagine you need to dynamically add these data points to the chart, then it's better if you use DateTimeOffset.FromUnixTimeMilliseconds and get the value to use.

Here's the same example:

protected void Page_Load(object sender, EventArgs e)
{
    // ***** CONFIGURE X AXIS *****
    RadHtmlChart2.PlotArea.XAxis.Type = ChartAxisType.Date;
    RadHtmlChart2.PlotArea.XAxis.BaseUnit = ChartAxisBaseUnit.Months;
    RadHtmlChart2.PlotArea.XAxis.MinDateValue = new DateTime(2026, 5, 1);
    RadHtmlChart2.PlotArea.XAxis.MaxDateValue = new DateTime(2026, 9, 1);
    
    
    // ***** CREATE SERIES *****
    var series1 = new RangeBarSeries();
    series1.Name = "123";
    series1.Appearance.FillStyle.BackgroundColor = System.Drawing.ColorTranslator.FromHtml("#5B9BD5");
    
    var series2 = new RangeBarSeries();
    series2.Name = "PT1";
    series2.Appearance.FillStyle.BackgroundColor = System.Drawing.ColorTranslator.FromHtml("#ED7D31");
    
    var series3 = new RangeBarSeries();
    series3.Name = "PT2";
    series3.Appearance.FillStyle.BackgroundColor = System.Drawing.ColorTranslator.FromHtml("#A9D18E");



    // ***** CREATE SERIES ITEMS/DATA *****
    
    // 123 Series
    long from1 = 1748736000000;
    long to1   = 1783123200000;
    
    series1.SeriesItems.Add(new RangeSeriesItem(
      DateTimeOffset.FromUnixTimeMilliseconds(from1).DateTime, 
      DateTimeOffset.FromUnixTimeMilliseconds(to1).DateTime));
    
    
    // PT1 Series
    long from2 = 1748736000000;
    long to2   = 1751068800000;
    
    series2.SeriesItems.Add(new RangeSeriesItem(
      DateTimeOffset.FromUnixTimeMilliseconds(from2).DateTime, 
      DateTimeOffset.FromUnixTimeMilliseconds(to2).DateTime));
    
    
    // PT2 Series
    long from3 = 1753142400000;
    long to3   = 1755388800000;
    
    series3.SeriesItems.Add(new RangeSeriesItem(
      DateTimeOffset.FromUnixTimeMilliseconds(from3).DateTime, 
      DateTimeOffset.FromUnixTimeMilliseconds(to3).DateTime));


    // ***** CLEAR PREVIOUS DATA AND ADD NEW SERIES *****
    
    RadHtmlChart2.PlotArea.Series.Clear();
    RadHtmlChart2.PlotArea.Series.Add(series1);
    RadHtmlChart2.PlotArea.Series.Add(series2);
    RadHtmlChart2.PlotArea.Series.Add(series3);
}

I hope this helps!

Regards,
Lance | Senior Manager Technical Support
Progress Telerik