Questions on UI for WPF Forum

1 answer

30 views

Customizing Doughnut Series - Bind Color of Slice to ViewModel

Hello, how can I bind the color of the individual slices to my viewmodel?

Chart

answered on 10 Mar 2025

1 answer

27 views

Cartesian PlotBand Annotation with MVVM

Hello, I would like to add a “Cartesian PlotBand Annotation” to a “CartesianChart” at runtime.
This should be done in the MVVM environment. For this I would add a list “List<CartesianPlotBandAnnotation>” as a property to my “MainViewModel”. I then fill the individual elements of this list with the corresponding data. The property “Axis” of type “CartesianAxis” must also be specified. Unfortunately, this object is not known to the “MainViewModel”. What is the solution here?

Chart

answered on 26 Feb 2025

0 answers

36 views

Calculation error in doughnutchart

Hello, I use the chart with binding for the data and the label.


// Model
public class StatisticRowItem
{
public double ValueDouble { get; set; }
public string Value { get; set; }
public string Name { get; set; }
}// ViewModel
public class ViewModel 
{
 public ObservableCollection<StatisticRowItem> RowItemList { get; set; }
}

If only the values are bound, the calculation of the percentage values is correct.

<telerik:RadPieChart Grid.Row="1" Palette="{StaticResource customPalette}">
    <telerik:RadPieChart.Series>
        <telerik:DoughnutSeries
            InnerRadiusFactor="0.35"
            ItemsSource="{Binding RowItemList}"
            RadiusFactor="0.50">
            <telerik:DoughnutSeries.ValueBinding>
                <telerik:PropertyNameDataPointBinding PropertyName="ValueDouble" />
            </telerik:DoughnutSeries.ValueBinding>
            <telerik:DoughnutSeries.LabelConnectorsSettings>
                <telerik:ChartSeriesLabelConnectorsSettings />
            </telerik:DoughnutSeries.LabelConnectorsSettings>
        </telerik:DoughnutSeries>
    </telerik:RadPieChart.Series>
</telerik:RadPieChart>

However, if the value and the label are linked, the calculation is incorrect.

<telerik:RadPieChart Grid.Row="1" Palette="{StaticResource customPalette}">
    <telerik:RadPieChart.Series>
        <telerik:DoughnutSeries
            InnerRadiusFactor="0.35"
            ItemsSource="{Binding RowItemList}"
            RadiusFactor="0.50">
            <telerik:DoughnutSeries.ValueBinding>
                <telerik:PropertyNameDataPointBinding PropertyName="ValueDouble" />
            </telerik:DoughnutSeries.ValueBinding>
            <telerik:DoughnutSeries.LabelDefinitions>
                <telerik:ChartSeriesLabelDefinition Margin="-15,0,0,0">
                    <telerik:ChartSeriesLabelDefinition.Template>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock
                                    Foreground="{DynamicResource Brushes.Text.Dark}"
                                    Text="{Binding DataItem.Name}"
                                    Style="{StaticResource ControlBase.FontStyle.ButtonText}" />
                                <TextBlock
                                    HorizontalAlignment="Center"
                                    Foreground="{DynamicResource Brushes.Text.Dark}"
                                    Style="{StaticResource ControlBase.FontStyle.ButtonText}"
                                    Text="{Binding Value}" />
                                <TextBlock
                                    HorizontalAlignment="Center"
                                    Foreground="{DynamicResource Brushes.Text.Dark}"
                                    Style="{StaticResource ControlBase.FontStyle.ButtonText}"
                                    Text="{Binding Percent}" />
                            </StackPanel>
                        </DataTemplate>
                    </telerik:ChartSeriesLabelDefinition.Template>
                </telerik:ChartSeriesLabelDefinition>
            </telerik:DoughnutSeries.LabelDefinitions>
            <telerik:DoughnutSeries.LabelConnectorsSettings>
                <telerik:ChartSeriesLabelConnectorsSettings />
            </telerik:DoughnutSeries.LabelConnectorsSettings>
        </telerik:DoughnutSeries>
    </telerik:RadPieChart.Series>
</telerik:RadPieChart>

The Telerik version 2024.1.130.45 of the WPF controls is used.

Chart

asked on 17 Dec 2024

0 answers

31 views

Kendo js, issue with position of date on xAxis

have a chart of (date- value) using Kendo js, the positions were wrong on the xAxis line there's an offset, I used the property baseUnit: "days", it fixed the first one but still seeing an offset for the others (date-value) and can't fix it , here's an image of my chart :

Chart

updated question on 22 Nov 2024

1 answer

55 views

RadCartesianChart bugs when programmatically changing the X and Y min and max

I am using a RadCartesianChart with a ChartSeriesProvider to have multiple ScatterLineSeries plotted. I am controlling the X and Y min and max values displayed programmatically.

I am using a timer so I can change the X axis at some frequency I can set. I am testing it, but I intend to update the X min and max more than once a second so the chart shows a live previous 10 seconds. You can see points when they are created, then move through time until they go off the chart once it's more than 10 seconds old.

I am running into two problems.

I have 4 series. Each one is having points added about once a second. I run until I eventually get

'Collection was modified; enumeration operation may not execute.'

The call stack shows

at System.ThrowHelper.ThrowInvalidOperationException(ExceptionResource resource)
at System.Collections.Generic.List`1.Enumerator.MoveNextRare()
at Telerik.Charting.DataPointCollection`1.<System.Collections.Generic.IEnumerable<Telerik.Charting.DataPoint>.GetEnumerator>d__5.MoveNext()
at Telerik.Charting.NumericalAxisModel.PlotNormal(IEnumerable`1 series)
at Telerik.Charting.NumericalAxisModel.PlotCore(AxisUpdateContext context)
at Telerik.Charting.ChartAreaModelWithAxes.PlotAxisAndCombinedStrategy(AxisModel axis, AxisUpdateContext context)
at Telerik.Charting.ChartAreaModelWithAxes.PlotAxesAndCombinedStrategies(SeriesByAxesTuple seriesByAxes)
at Telerik.Charting.ChartAreaModelWithAxes.ArrangeOverride(RadRect rect)
at Telerik.Charting.ChartNode.Arrange(RadRect rect, Boolean shouldRoundLayout)
at Telerik.Charting.ChartAreaModel.Arrange()
at Telerik.Windows.Controls.ChartView.RadChartBase.CallUpdateUI()
at Telerik.Windows.Controls.ChartView.RadChartBase.OnInvalidated()

...

I think the chart is enumerating through the collection to see if it needs to update the axes every time a point is added. I am setting both axes myself as I have said so I'd think it wouldn't have to do that. If my assumption is correct, is there a way to turn this off? Otherwise should I look at locking the collection, or creating a buffer and adding chunks of data at a time? It does happen when there is just one series, and all 4 series.

Sorry to put two questions in here, but they may be related. I am wondering how much I am overloading the chart. Maybe it's not intended to have the axis updated super frequently so it's view/window moves through time.

The other problem relates to the band annotations I am using. They actually don't change, at least not when the chart is moving through time. I am setting vertical bands. The Y axis range only changes when values come in that are too high. But when that happens, the bands still stay the same. Both upper and lower bands' To and From don't change when the chart is moving through time.

''-1' is not a valid value for 'Width'.'

at System.Windows.DependencyObject.SetValueCommon(DependencyProperty dp, Object value, PropertyMetadata metadata, Boolean coerceWithDeferredReference, Boolean coerceWithCurrentValue, OperationType operationType, Boolean isInternal) in System.Windows\DependencyObject.cs:line 812
at System.Windows.DependencyObject.SetValue(DependencyProperty dp, Object value) in System.Windows\DependencyObject.cs:line 605
at Telerik.Windows.Controls.ChartView.CartesianPlotBandAnnotation.UpdatePresenters(ChartLayoutContext context)
at Telerik.Windows.Controls.ChartView.ChartAnnotation.Update(ChartLayoutContext context)
at Telerik.Windows.Controls.ChartView.CartesianStrokedAnnotation.UpdateUICore(ChartLayoutContext context)
at Telerik.Windows.Controls.ChartView.PresenterBase.UpdateUI(ChartLayoutContext context)
at Telerik.Windows.Controls.ChartView.RadChartBase.UpdatePresenters(ChartLayoutContext context, List`1 presenters)
at Telerik.Windows.Controls.ChartView.RadChartBase.UpdateUICore(ChartLayoutContext context)
at Telerik.Windows.Controls.ChartView.PresenterBase.UpdateUI(ChartLayoutContext context)
at Telerik.Windows.Controls.ChartView.RadChartBase.CallUpdateUI()
at Telerik.Windows.Controls.ChartView.RadChartBase.OnInvalidated()
at System.Windows.Threading.ExceptionWrapper.InternalRealCall(Delegate callback, Object args, Int32 numArgs) in System.Windows.Threading\ExceptionWrapper.cs:line 59
at System.Windows.Threading.ExceptionWrapper.TryCatchWhen(Object source, Delegate callback, Object args, Int32 numArgs, Delegate catchHandler) in System.Windows.Threading\ExceptionWrapper.cs:line 24
...

The chart bands shouldn't ever have -1 being set as their width. When this exception happens, none of my code is changing the bands. The properties the bands' To and From are bound to aren't changing. I haven't seen this happen when I just comment out the bands in xaml.

Chart

ChartView

answered on 31 Oct 2024

2 answers

39 views

Using ChartDataSourceStyle breaks DefaultVisualStyle DataItem binding

I'm using a DefaultVisualStyle Property to set the style in order to control the Fill color of ScatterPointSeries via the DataItem.PointColor property (as seen below)

This works fine, but when I try to use a ChartDataSourceStyle to reduce the number of datapoints using Index-based sampling, something breaks and I no longer see ANY points displayed in the graph, due to this binding failure:

Path Tag.DataItem.PointColor Path.Fill Brush PointColor property not found on object of type DataPointSamplingInfo.

** How can I redirect the DataPointSamplingInfo points to use the PointColor of its DataItems (they'll all have the same value) **

<telerik:ChartSeriesProvider Source="{Binding ChartData}" >
<telerik:ChartSeriesProvider.SeriesDescriptors >

<telerik:ScatterSeriesDescriptor XValuePath="SV"
YValuePath="Depth"
x:Name="DownCastPoints"
ItemsSourcePath="ItemSelectionDown">
<telerik:ScatterSeriesDescriptor.Style>
<Style TargetType="telerik:ScatterPointSeries">
<Setter Property="PointSize" Value="8,8"/>
<Setter Property="Opacity" Value="0.8"/>
<Setter Property="Visibility" Value="{Binding DownCastPointsVisible, Converter={StaticResource BooleanToVisibilityConverter}}"/>
<Setter Property="DefaultVisualStyle" Value="{StaticResource ScatterPointStyle}"/>
</Style>
</telerik:ScatterSeriesDescriptor.Style>
<telerik:ScatterSeriesDescriptor.ChartDataSourceStyle>
<Style TargetType="telerik:ChartDataSource">
<Setter Property="SamplingThreshold" Value="50" />
</Style>
</telerik:ScatterSeriesDescriptor.ChartDataSourceStyle>
</telerik:ScatterSeriesDescriptor>

Chart

ChartView

answered on 16 Oct 2024

1 answer

119 views

Styling ChartSeriesProvider LineSeries Point Marks

Hello,

I am using a ChartSeriesProvider to chart multiple LineSeries. I would like each LineSeries to have the actual points styled instead of just being a plain line.

Styling each LineSeries is a little different since I am using a ChartSeriesProvider.

<telerik:RadCartesianChart
	Grid.Row="2"
	Background="#FF282828">
		<telerik:RadCartesianChart.SeriesProvider>
			<telerik:ChartSeriesProvider
				Source="{Binding InspectionData}">
					<telerik:ChartSeriesProvider.SeriesDescriptors>
						<telerik:CategoricalSeriesDescriptor
							CategoryPath="InspectionDateTime"
							ValuePath="InspectionValue"
							ItemsSourcePath="CameraChartData"
							CollectionIndex="0">
							<telerik:CategoricalSeriesDescriptor.Style>
								<Style
									TargetType="telerik:LineSeries">
									<Setter
										Property="StrokeThickness"
										Value="2" />
									<Setter
										Property="Stroke"
										Value="DeepSkyBlue" />
								</Style>
							</telerik:CategoricalSeriesDescriptor.Style>
						</telerik:CategoricalSeriesDescriptor>
						<telerik:CategoricalSeriesDescriptor
							CategoryPath="InspectionDateTime"
							ValuePath="InspectionValue"
							ItemsSourcePath="CameraChartData"
							CollectionIndex="1">
							<telerik:CategoricalSeriesDescriptor.Style>
								<Style
									TargetType="telerik:LineSeries">
									<Setter
										Property="StrokeThickness"
										Value="2" />
									<Setter
										Property="Stroke"
										Value="Yellow" />
								</Style>
							</telerik:CategoricalSeriesDescriptor.Style>
						</telerik:CategoricalSeriesDescriptor>

This documentation says

Currently, changing the point marks appearance could be done only via the provided API. Declarative customizations are not supported.

But, this documentation shows a LineSeries has property "Fill" (need to also set size) which is exactly what I want. TargetPath is different, in this example it's set to "Path" and in my xaml it's "telerik:LineSeries" because it has to be since it's in a CategoricalSeriesDescriptor.

How do I style the points? Is it possible?

Chart

answered on 13 Sep 2024

1 answer

60 views

Sorting problem with RadCartesianChart with live updates

I'm working with the RadCartesianChart and using a BarSeries. In the series I have values that change, items that ger removed, and items that get added. I'd like for them to be sorted. I think I am implementing it correctly but could be mistaken. When the chart updates it displays values that are not sorted

I have attached a demo project to this post. I am using version 2024.2.514. Please let me know if there is anything I need to change or if I'm doing something incorrect.

Thank You,

Giuliano

Chart

answered on 09 Sep 2024

0 answers

66 views

BarSeries Fixed height(width) for bars

Hello,

I'm wondering if there is a way to set a fixed height to the bars in a barseries. For example, instead of the bars changing height in the following example, I'd like them to stay up with a fixed height.

The desired outcome would look something like this:

The xaml I used fort the example is this:

<telerik:RadCartesianChart>

    <telerik:RadCartesianChart.Series>
        <telerik:BarSeries ShowLabels="False"
                           CategoryBinding="Category"
                           ValueBinding="Value">

            <telerik:BarSeries.DataPoints>
                <telerik:CategoricalDataPoint Category="Apples" Value="20"/>
                <telerik:CategoricalDataPoint Category="Bananas" Value="28"/>
                <telerik:CategoricalDataPoint Category="Oranges" Value="17"/>
                <telerik:CategoricalDataPoint Category="Strawberries" Value="30"/>
            </telerik:BarSeries.DataPoints>
        </telerik:BarSeries>
    </telerik:RadCartesianChart.Series>

    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:LinearAxis x:Name="horizontalAxis1"/>
    </telerik:RadCartesianChart.HorizontalAxis>
    
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:CategoricalAxis/>
    </telerik:RadCartesianChart.VerticalAxis>


</telerik:RadCartesianChart>

Is this possible using the BarSeries? Any help is appreciated.

Thank You,

Giuliano

Chart

asked on 22 Aug 2024

1 answer

50 views

Align label definitions left for bar series

Hello,

I'm trying to see if there is a way to align a chart label so that it shows up inside the bar but left aligned. Here is what I have right now:

I'd like for the numbers to be left aligned but still in the bar:

Here is the xaml I have:

<Window x:Class="TestRadCartesianChart.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:local="clr-namespace:TestRadCartesianChart"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>

        <telerik:RadCartesianChart>

            <telerik:RadCartesianChart.Series>
                <telerik:BarSeries ShowLabels="True"
                                   CategoryBinding="Category"
                                   ValueBinding="Value">

                    <telerik:BarSeries.LabelDefinitions>

                        <telerik:ChartSeriesLabelDefinition HorizontalAlignment="Center" VerticalAlignment="Center">
                            <telerik:ChartSeriesLabelDefinition.Template>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Value}"/>
                                </DataTemplate>
                            </telerik:ChartSeriesLabelDefinition.Template>
                        </telerik:ChartSeriesLabelDefinition>

                    </telerik:BarSeries.LabelDefinitions>

                    <telerik:BarSeries.DataPoints>
                        <telerik:CategoricalDataPoint Category="Apples" Value="20"/>
                        <telerik:CategoricalDataPoint Category="Bananas" Value="28"/>
                        <telerik:CategoricalDataPoint Category="Oranges" Value="17"/>
                        <telerik:CategoricalDataPoint Category="Strawberries" Value="30"/>
                    </telerik:BarSeries.DataPoints>
                </telerik:BarSeries>
            </telerik:RadCartesianChart.Series>

            <telerik:RadCartesianChart.HorizontalAxis>
                <telerik:LinearAxis x:Name="horizontalAxis1"/>
            </telerik:RadCartesianChart.HorizontalAxis>
            
            <telerik:RadCartesianChart.VerticalAxis>
                <telerik:CategoricalAxis/>
            </telerik:RadCartesianChart.VerticalAxis>


        </telerik:RadCartesianChart>

    </Grid>
</Window>

Any help is appreciated.

Thank You,

Giuliano Millan

Chart

answered on 19 Aug 2024