This is a migrated thread and some comments may be shown as answers.

RadPolarChart Problem with Grid and Gradient

4 Answers 120 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Daniela
Top achievements
Rank 1
Daniela asked on 22 Jun 2012, 07:59 AM
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

4 Answers, 1 is accepted

Sort by
0
Daniela
Top achievements
Rank 1
answered on 26 Jun 2012, 08:42 AM
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?
0
Accepted
Evgenia
Telerik team
answered on 26 Jun 2012, 12:44 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
0
Daniela
Top achievements
Rank 1
answered on 26 Jun 2012, 01:06 PM
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.
0
Evgenia
Telerik team
answered on 29 Jun 2012, 11:17 AM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Tags
ChartView
Asked by
Daniela
Top achievements
Rank 1
Answers by
Daniela
Top achievements
Rank 1
Evgenia
Telerik team
Share this question
or