Telerik Forums
UI for WPF Forum
1 answer
23 views
Hello, how can I bind the color of the individual slices to my viewmodel?
Martin Ivanov
Telerik team
 answered on 10 Mar 2025
1 answer
23 views

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?

 

 

Stenly
Telerik team
 answered on 26 Feb 2025
0 answers
34 views

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.

Gerhard
Top achievements
Rank 1
Iron
Iron
 asked on 17 Dec 2024
0 answers
30 views

 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 :


Nesreen
Top achievements
Rank 1
 updated question on 22 Nov 2024
1 answer
49 views

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.

 

 

j
Top achievements
Rank 1
Iron
 answered on 31 Oct 2024
2 answers
37 views

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) **

<Style x:Key="ScatterPointStyle" TargetType="Path" >
            <Setter Property="Fill" Value="{Binding RelativeSource={RelativeSource Mode=Self}, Path=Tag.DataItem.PointColor}"/>
</Style>

 

  <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>
Stenly
Telerik team
 answered on 16 Oct 2024
1 answer
109 views

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?

 

Martin Ivanov
Telerik team
 answered on 13 Sep 2024
1 answer
54 views

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

Martin Ivanov
Telerik team
 answered on 09 Sep 2024
0 answers
63 views

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

Giuliano
Top achievements
Rank 1
Iron
 asked on 22 Aug 2024
1 answer
44 views

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

Stenly
Telerik team
 answered on 19 Aug 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?