I have a bar series. I use the default setting. Now I want to customize the margins. See the expected image.
Do not worry about the bar color. I only need to set the margins. I have no idea to do it.
If you could post a sample project, that would be great. Thanks.
8 Answers, 1 is accepted
To customize the margins of the axes you can set their Margin properties. For example:
<telerik:RadCartesianChart.VerticalAxis> <telerik:LinearAxis Margin="0 0 20 0" /></telerik:RadCartesianChart.VerticalAxis><telerik:RadCartesianChart.HorizontalAxis> <telerik:CategoricalAxis Margin="0 20 0 0"/></telerik:RadCartesianChart.HorizontalAxis>To customize the distance between the axis and its labels you can use the LabelStyle property of the axis and set the Margin of the label's TextBlock.
<telerik:LinearAxis.LabelStyle> <Style TargetType="TextBlock"> <Setter Property="Margin" Value="0 0 10 0" /> </Style></telerik:LinearAxis.LabelStyle>I also attached a small example showing this approach.
Regards,
Martin Ivanov
Progress Telerik
Can you tell me what you mean by that the theory failed? What went wrong? I tested my project with LineSeries but everything worked as expected.
Note that setting a Margin to the series also will work but this will offset the data points from their original positions which will lead to wrong data visualization. So, I wouldn't recommend that.
Regards,
Martin Ivanov
Progress Telerik
Rank 1
The small circle of the first point only shows the right half. It means the left half of the circle is cut off. And if possible, would you please post your sample project of line-series so I can compare with mine?
Many thanks.
By default the chart series are clipped in the plot area bounds. I will guess this is why the points in the beginning of the series are cut off on your side. To resolve this you can set the ClipToPlotArea property of the series to False.
<telerik:LineSeries ClipToPlotArea="False"/>Regards,
Martin Ivanov
Progress Telerik
Rank 1
Rank 1
I just realized that there is a little difference. If you look at my expected image carefully, the line starts from margin 10 px(margin 10pc on the left), and the circle starts from 30 px(10+20).
In my expected image, I used PointTemplate
<telerik:LineSeries.TooltipTemplate> <DataTemplate> <Elilipse Width="10" Height="10" /> </DataTemplate></telerik:LineSeries.TooltipTemplate>But in your demo they all start from 10 px. Sorry for my vague image. How to fix it?
BTW, your bar chart is correct. The line starts from 10 px, the bar starts from 30 px. I hope that the Line series has the same result.
Rank 1