Chart Without Any Padding Filling Up Grid's Content Area

7 posts, 0 answers
  1. Bardi
    Bardi avatar
    5 posts
    Member since:
    Dec 2013

    Posted 14 Dec 2013 Link to this post

    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
  2. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 17 Dec 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Bardi
    Bardi avatar
    5 posts
    Member since:
    Dec 2013

    Posted 17 Dec 2013 Link to this post

    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.
  5. Victor
    Admin
    Victor avatar
    1351 posts

    Posted 20 Dec 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  6. Bardi
    Bardi avatar
    5 posts
    Member since:
    Dec 2013

    Posted 20 Dec 2013 Link to this post

    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
  7. Todor
    Admin
    Todor avatar
    778 posts

    Posted 27 Dec 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  8. Bardi
    Bardi avatar
    5 posts
    Member since:
    Dec 2013

    Posted 29 Dec 2013 Link to this post

    Thanks so much for that. Just what I was looking for!
Back to Top
DevCraft banner