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

How to style or show PointMark inside Chart

1 Answer 104 Views
Chart
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Petri
Top achievements
Rank 1
Petri asked on 08 Sep 2015, 10:56 AM

Hi,

I would like to have PointMark on the line chart or area Chart. How can I have it? Like attachment. And this is code of my chart.

                            <Chart:RadCartesianChart Height="225" VerticalAlignment="Bottom" Background="#FF3F5852" Name="cartesianChart" >
                                <Chart:RadCartesianChart.Resources>
                                    <Style x:Key="CustomAxisLineStyle" TargetType="Line">
                                        <Setter Property="Stroke" Value="Gray" />
                                        <Setter Property="StrokeThickness" Value="1" />
                                    </Style>
                                    <Style x:Key="ticks" TargetType="Rectangle">
                                        <Setter Property="Fill" Value="Green"/>
                                    </Style>

                                    <Style x:Key="CustomAxisLableStyle" TargetType="TextBlock">
                                        <Setter Property="FontSize" Value="14" />
                                        <Setter Property="Foreground" Value="White" />
                                    </Style>
                                </Chart:RadCartesianChart.Resources>
                                <Chart:RadCartesianChart.Behaviors>
                                    <Chart:ChartTrackBallBehavior  InfoMode="Multiple"/>
                                </Chart:RadCartesianChart.Behaviors>


                                <!-- Grid line inside chart -->
                                <Chart:RadCartesianChart.Grid>
                                    <Chart:CartesianChartGrid MajorLinesVisibility="XY" StripLinesVisibility="Y">
                                        <Chart:CartesianChartGrid.MajorXLineStyle>
                                            <Style TargetType="Line">
                                                <Setter Property="Stroke" Value="Gray"/>
                                                <Setter Property="StrokeThickness" Value="1" />
                                            </Style>
                                        </Chart:CartesianChartGrid.MajorXLineStyle>
                                        <Chart:CartesianChartGrid.MajorYLineStyle>
                                            <Style TargetType="Line">
                                                <Setter Property="Stroke" Value="Gray"/>
                                                <Setter Property="StrokeDashArray" Value="2,2"/>
                                            </Style>
                                        </Chart:CartesianChartGrid.MajorYLineStyle>
                                    </Chart:CartesianChartGrid>                                                              
                                </Chart:RadCartesianChart.Grid>
                                <Chart:RadCartesianChart.VerticalAxis>
                                    <Chart:LinearAxis LineStyle="{StaticResource CustomAxisLineStyle}" LabelStyle="{StaticResource CustomAxisLableStyle}"/>
                                </Chart:RadCartesianChart.VerticalAxis>
                                <Chart:RadCartesianChart.HorizontalAxis>
                                    <Chart:DateTimeContinuousAxis  MajorStep="10" GapLength="0.5"  MajorStepUnit="Week" LabelFitMode="MultiLine" LabelFormat="{}{0,0:MMM-yyyy}" LabelStyle="{StaticResource CustomAxisLableStyle}" />
                                </Chart:RadCartesianChart.HorizontalAxis>
                                <Chart:AreaSeries ItemsSource="{Binding values}" Stroke="#FFFFC800" StrokeThickness="2" IsVisibleInLegend="False" Fill="#B2788D88">
                                    <Chart:AreaSeries.CategoryBinding>
                                        <Chart:PropertyNameDataPointBinding PropertyName="date"/>
                                    </Chart:AreaSeries.CategoryBinding>
                                    <Chart:AreaSeries.ValueBinding>
                                        <Chart:PropertyNameDataPointBinding PropertyName="value"/>
                                    </Chart:AreaSeries.ValueBinding>
                                </Chart:AreaSeries>
                               
                            </Chart:RadCartesianChart>​

Thanks,
Trung.

1 Answer, 1 is accepted

Sort by
0
Ves
Telerik team
answered on 11 Sep 2015, 09:01 AM
Hi Petri,

You can take advantage of the PointTemplate property of the Series (LineSeries or AreaSeries). The value should be of type DataTemplate  and you can place anything in it. 

You can find a similar example in our quick start framework, installed with Telerik UI for Windows Universal, usually in this folder: C:\Program Files (x86)\Telerik\UI for Windows Universal Q2 2015\QSF. Look for the "Multiple Axes" example.

Best regards,
Ves
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Chart
Asked by
Petri
Top achievements
Rank 1
Answers by
Ves
Telerik team
Share this question
or