Adjust Size of Gauge Chart

Aug 26, 2014 at 8:57 PM
Hey all!

I'm brand new to WPF so I might be missing something simple, but I can't figure out how to change the size of a Gauge Chart. I tried changing the width/height of the chart but that makes no difference. Now, I am trying to change it through styling the ChartArea, but I can't get it to work either. I've inserted my Resources section below. Thanks for any help!
<Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="/De.TorstenMandelkow.MetroChart;component/Themes/Generic.xaml"/>
            </ResourceDictionary.MergedDictionaries>

            <Style x:Key="MinimalChartAreaStyle" TargetType="chart:ChartArea" BasedOn="{StaticResource RadialGaugeChartChartAreaStyle}">
                <Setter Property="Width" Value="50"/>
                <Setter Property="Height" Value="50"/>
            </Style>
            <Style x:Key="MinimalChartStyle" TargetType="chart:ChartBase">
                <Setter Property="Width" Value="200"/>
                <Setter Property="Height" Value="200"/>
                <Setter Property="ChartAreaStyle" Value="{StaticResource MinimalChartAreaStyle}"/>
            </Style>
        </ResourceDictionary>
    </Application.Resources>
Aug 28, 2014 at 11:51 AM
Edited Aug 28, 2014 at 12:53 PM
This is an example how you can change the size of the Pie Chart, I hope that it is a starting point:
<chart:PieChart Grid.Row="1" Margin="0,0,0,0" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"
        ChartTitle="Minimal Pie Chart"
        ChartSubTitle="Rendimientos"
        SelectedItem="{Binding Path=SelectedItem, Mode=TwoWay}" >
            <chart:PieChart.Series>
                <chart:ChartSeries
                    VerticalContentAlignment="Top"
                    HorizontalContentAlignment="Right"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Top"
                    Background="Aquamarine"
                SeriesTitle="Rendimientos"
                DisplayMember="Category"
                ValueMember="Number"
                ItemsSource="{Binding Path=OrigenDatos}"/>
            </chart:PieChart.Series>
        </chart:PieChart>
OFF TOPIC:

could you show me your code to larne how you insert a gauge chart?



Thanks.
Aug 28, 2014 at 1:45 PM
I'm using this to insert the Radial Gauge Chart. Let me know if it doesn't work.
<chart:RadialGaugeChart Grid.Row="0" ChartTitle="Gauge Chart" ChartSubTitle="" Style="{StaticResource MinimalChartStyle}">
            <chart:RadialGaugeChart.Series>
                <chart:ChartSeries SeriesTitle="Errors" DisplayMember="Category" ValueMember="Number" ItemsSource="{Binding Path=Errors}"/>
            </chart:RadialGaugeChart.Series>
</chart:RadialGaugeChart>
Aug 28, 2014 at 2:47 PM
Edited Aug 28, 2014 at 3:11 PM
Thank you so much.

I am trying to modify the size of the charts. For example, I have the half right side of the screen for 4 gauge charts, but I only can see all of the in full screen, but if I change the size of the window then I can olny see one gauge chart.

I would like that the size of the four gauge charts adjust to the space of the control, the half right side of the window, and show all the charts.



Thanks.
Sep 2, 2014 at 10:19 PM
Hello Again,

I figured out that the RadialGaugeChart size is based on the ClientWidth & ClientHeight of the RadialGaugePiece, but I cannot figure out a clean way to style it, meaning for each size I would need to have an individual copy of style template for the PlotterArea. Does anyone know a better way to do this?

Thank you for any help!
Sep 29, 2014 at 5:22 AM
Hi,

Hope you get some guidance from this chart page!

Kind regards,
Ivy Miller
Oct 9, 2014 at 8:01 PM
Hi friend,

try this in your Generic.xaml,
<Style x:Key="RadialGaugeChartChartAreaStyle" TargetType="chart:ChartArea">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="chart:ChartArea">
                    <Grid>
                        <Viewbox Height="Auto" Width="Auto">
                            <ContentControl Content="{TemplateBinding Content}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" />
                        </Viewbox>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
Regards,
Francisco J. N. Jr
Oct 16, 2014 at 4:01 PM
@franciscojunior: That worked great, thanks!