Chart Without Any Padding Filling Up Grid's Content Area

[Bardi]

Hi there,

I'm using a RadCartesianChart (using an AreaSeries) inside of a Grid. The problem I have is that I cannot make the chart fill the entire content area of the Grid's row that it is contained in. There is left/right padding. This can be seen in the attached "ontickspadded.png" where the PlotMode for the HorizontalAxis is "OnTicksPadded". When I change it to "BetweenTicks", it will have similar results.

I get rid of the left padding if I change the PlotMode to "OnTicks" but there are a few issues with this: 1) first data point is cut off, 2) first x-axis label is cut off and 3) there is still right padding. This can be seen in the attached "onticks.png".

What I'd like is for the chart to start and end without any padding on either side. I've roughly mocked up how I would like it to look on Paint in attached "idea.png".

This is the xaml for the chart:

<chart:RadCartesianChart x:Name="chart" Padding="0">

    <chart:RadCartesianChart.HorizontalAxis>
        <chart:CategoricalAxis FontSize="10" TickThickness="0" LineThickness="0" LabelFitMode="Rotate"  PlotMode="OnTicksPadded" />
    </chart:RadCartesianChart.HorizontalAxis>

    <chart:RadCartesianChart.VerticalAxis>
        <chart:LinearAxis Maximum="{Binding Location.Daily.Data[0].TemperatureMax}" Minimum="{Binding Location.Daily.Data[0].TemperatureMin}" Visibility="Collapsed"/>
    </chart:RadCartesianChart.VerticalAxis>

    <chart:RadCartesianChart.Series>
        <chart:AreaSeries Fill="Crimson" ShowLabels="True" StrokeMode="None">
            <chart:AreaSeries.PointTemplate>
                <DataTemplate>
                    <Ellipse Width="8" Height="8" Fill="White"/>
                </DataTemplate>
            </chart:AreaSeries.PointTemplate>
            <chart:AreaSeries.DataPoints>
            </chart:AreaSeries.DataPoints>

            <chart:AreaSeries.LabelDefinitions>
                <chart:ChartSeriesLabelDefinition HorizontalAlignment="Center" VerticalAlignment="Top">
                    <chart:ChartSeriesLabelDefinition.Template>
                        <DataTemplate>
                            <TextBlock Text="{Binding DataItem.LabelProperty}" Foreground="White" Margin="10,0,0,0" FontWeight="Bold" FontSize="12"/>
                        </DataTemplate>
                    </chart:ChartSeriesLabelDefinition.Template>
            </chart:ChartSeriesLabelDefinition>

            <chart:ChartSeriesLabelDefinition HorizontalAlignment="Center" VerticalAlignment="Top">
                <chart:ChartSeriesLabelDefinition.Template>
                    <DataTemplate>
                        <!--<TextBlock Text="{Binding DataItem.Value}" Foreground="Yellow" Margin="10,0,0,0"/>-->
                    </DataTemplate>
                </chart:ChartSeriesLabelDefinition.Template>
                </chart:ChartSeriesLabelDefinition>
            </chart:AreaSeries.LabelDefinitions>

            <chart:AreaSeries.CategoryBinding>
                <chart:PropertyNameDataPointBinding PropertyName="Category"/>
            </chart:AreaSeries.CategoryBinding>
            <chart:AreaSeries.ValueBinding>
                <chart:PropertyNameDataPointBinding PropertyName="Value"/>
            </chart:AreaSeries.ValueBinding>

        </chart:AreaSeries>
    </chart:RadCartesianChart.Series>
</chart:RadCartesianChart>

Any guidance would be much appreciated.

Many thanks.

Bardi

[Victor]

Hello Bardi,

Thanks for writing.
You can set the LastLabelVisibility property of your horizontal axis to Clip. This way the chart will not consider the last label size when calculating its layout.
Please write again if you have other questions.

Regards,
Victor
Telerik

[Bardi]

Thanks for the reply Victor.

Unfortunately adding LastLabelVisibility=Clip to the HorizontalAxis doesn't appear to have made a difference - there is still padding to the left/right of the graph.

[Victor]

Hi Bardi,

Please have a look at the attached app. Is this what you are looking for?
Please write again if you need further assistance.

Regards,
Victor
Telerik

[Bardi]

Thanks Victor for the sample code.

I ran it on 720p Emulator. The graph doesn't have any left/right padding, which is what I want. But the left and right-most x-axis labels are cutoff. I've attached a screenshot.

Bardi

[Todor]

Hello Bardi,

I have modified the sample to include a custom style for the TextBlock which contains the labels. You can modify the margins of the custom style in order to achieve the desired location of the labels.

I hope this information helps.

Regards,
Todor
Telerik

[Bardi]

Thanks so much for that. Just what I was looking for!