RadPolarChart Problem with Grid and Gradient

[Daniela]

Hi!
I'm using a RadPolarChart to show Risks of a Project as you can see in the attached Screenshot. Now I want to bring the Grid to the top, so that the grid lines are displayed on the top of the Series. I tried to achieve it in setting the ZIndex to a higher number than the Series but it had no effect. Here is my chart code:
 
<telerik:RadPolarChart MinWidth="1000" MinHeight="500" x:Name="polarchart">
                                <telerik:RadPolarChart.Grid>
                                    <telerik:PolarChartGrid StripesVisibility="Both" BorderThickness="2" GridLineVisibility="Both" Foreground="Black" ZIndex="1" />
                                </telerik:RadPolarChart.Grid>
                                <telerik:RadPolarChart.RadialAxis>
                                    <telerik:CategoricalRadialAxis LineThickness="2" LabelFitMode="MultiLine" ZIndex="1" LineStroke="Black" LabelTemplateSelector="{StaticResource MyRadPolarChartTemplateSelector}"  />
                                </telerik:RadPolarChart.RadialAxis>
                                <telerik:RadPolarChart.PolarAxis>
                                    <telerik:PolarAxis ZIndex="1" LineStroke="Black" LineThickness="2" Maximum="6" MajorStep="1"LastLabelVisibility="Hidden"/>
                                </telerik:RadPolarChart.PolarAxis>
                                <telerik:RadarAreaSeries Stroke="Red" StrokeThickness="2" ZIndex="-1" ItemsSource="{Binding PolarChartDataPoints}" CategoryBinding="Category" ValueBinding="Value" >
                                    <telerik:RadarAreaSeries.PointTemplate>
                                        <DataTemplate>
                                            <Ellipse Fill="Red" Height="10" Width="10" />
                                        </DataTemplate>
                                    </telerik:RadarAreaSeries.PointTemplate>
                                    <telerik:RadarAreaSeries.Fill>
                                        <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradientOrigin="0.5,0.5">
                                            <GradientStop Color="GreenYellow" Offset="0.1" />
                                            <GradientStop Color="Yellow" Offset="0.4"></GradientStop>
                                            <GradientStop Color="Orange" Offset="0.7"></GradientStop>
                                            <GradientStop Color="Red" Offset="1"></GradientStop>
                                        </RadialGradientBrush>
                                    </telerik:RadarAreaSeries.Fill>
                                </telerik:RadarAreaSeries>
                            </telerik:RadPolarChart>
I have another problem with the GradientBrush on the Series. I want to have the center of the gradient in the 0,0 Point of the PolarChart not in the center of mass of the Series. Is there a way to achieve this?

Best regards for any answers :-)
Daniela

[Daniela]

Hi, once more me,

I have another problem regarding the labels.
As one can see in the attached screenshot they are overlapping. Are there any properties that I can set to avoid this behaviour?

[Evgenia]

Hello Daniela,

 Onto your questions:
To be able to have the grid appear on top, you should set its ZIndex to 102 or higher value. Here's why - the RadarSeries ZIndex is calculated by accumulating the default ZIndex of the ChartElementPresenter which is -1 to the default series ZIndex which is 100.

Having the center of the gradient to appear in the center of mass of the Series is absolutely normal and expected since you set the GradientBrush as Fill to the Series. Could you please send us a sample image demonstrating how do you want your PolarChart to look like and we'll do our best to help you achieve it?

As for the labels - currently LabelFitMode property works with CartesianChart series only. What I can suggest to make your labels readable is that you wrap their text with the following style:

<Style x:Key="RadarAxisLabelStyle" TargetType="TextBlock">
           <Setter Property="Width" Value="40" />
           <Setter Property="TextWrapping" Value="Wrap" />
</Style>

 
The style can be applied like this:

  <chart:RadPolarChart.RadialAxis>
                <chartView:CategoricalRadialAxis LabelStyle="{StaticResource RadarAxisLabelStyle}" />
</chart:RadPolarChart.RadialAxis>

Regards,
Evgenia
the Telerik team

[Daniela]

Hi!
Thanks a lot for the help!

The problems with the ZIndex and the labels are solved.

Attached you find a image which represents a radarchart where the center of the gradient is in the center point of the radar chart. This is what I want to achieve.

Is there a possibility to change the rotation angle of the PolarAxis, I want to start with it at the center and let it point to the top instead of the right side. (in other words the axis should be rotated 45 Degree counterclockwise) The labels should also begin at the top instead of the right side.

[Evgenia]

Hello Daniela,

 Currently we don't have a built-in support for such coloring of the Radar series. However you can try on your own and set the most appropriate Center and Offset for the RadialGradientBrush.

Unfortunately there is no way that you can change the rotation angle of the Polar Axis. We'll consider providing such functionality for one of our future releases, but I can't provide you with any concrete timeframe for it now.

Greetings,
Evgenia
the Telerik team