Is it possible with the range bar chart to show multiple segments on one line?

1 Answer 201 Views

Chart (HTML5)

1 Answer, 1 is accepted

answered on 12 Aug 2022, 12:32 PM | edited on 12 Aug 2022, 12:33 PM

Hi Marco,

The Stacked Bar chart is most likely what you are looking for. Check out the live demo, click on the stacked checkbox and let me know if this works for you.

The Range Bar chart does not offer the ability to position the series items on the same line.

Regards,
Rumen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Marco

commented on 12 Aug 2022, 05:24 PM

Thanks. Follow-up: If I try to implement using a stacked bar, can I have control over the color of specific segments of each bar? Using my original example, if I am showing a free/busy schedule for a number of people, the first bar segment would be from 0 (the beginning of the day) until the first meeting time. So that's no problem to have that the same color for all bars. But then, in between meetings will again be free time. So do I have control over those segments so that I can make their colors the same as the original segment?

Rumen

commented on 15 Aug 2022, 07:21 AM

Yes, you can control the telerik:CategorySeriesItem color through the provided BackgroundColor property:

					<telerik:BarSeries Name="Quarter 2">
						<Appearance>
							<FillStyle BackgroundColor="#92b622"></FillStyle>
						</Appearance>
						<LabelsAppearance DataFormatString="${0}" Position="Center"></LabelsAppearance>
						<TooltipsAppearance BackgroundColor="#92b622" DataFormatString="${0}" Color="White"></TooltipsAppearance>
						<SeriesItems>
							<telerik:CategorySeriesItem Y="360000" BackgroundColor="red"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="540000" BackgroundColor="red"></telerik:CategorySeriesItem>
							<telerik:CategorySeriesItem Y="735000" BackgroundColor="red"></telerik:CategorySeriesItem>
						</SeriesItems>
					</telerik:BarSeries>

For more information, check the source code of the Bar Chart demo and the Chart Element Customization demo.