Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
I have read too many post in this subject, but none seam to address the issue I am having.

I am using the following:
XML
App.xaml:
<Application x:Class="xxxxx.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
             xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    StartupUri="MainWindow.xaml">
    
    <Application.Resources>

        <Style x:Key="MyToolTipStyle" TargetType="Control">
            <Setter Property="BorderBrush" Value="Gray"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="Width" Value="8" />
            <Setter Property="Height" Value="8" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate x:Name="myNewDataPoint" TargetType="charting:LineDataPoint">
                        <Grid x:Name="Root" Opacity="0">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.1"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
                                                <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFFDF00"/>
                                            </ColorAnimationUsingKeyFrames>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.24"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.1"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Unselected"/>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.18"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="RevealStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.5"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Shown">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Hidden">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ToolTipService.ToolTip>
                                <StackPanel Margin="2">
                                    <ContentControl Content="{TemplateBinding FormattedIndependentValue}" FontSize="12" />
                                    <ContentControl Content="{TemplateBinding FormattedDependentValue}" FontSize="12"  />
                                </StackPanel>
                            </ToolTipService.ToolTip>
                            <Ellipse Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}"/>
                            <Ellipse RenderTransformOrigin="0.661,0.321">
                                <Ellipse.Fill>
                                    <RadialGradientBrush GradientOrigin="0.681,0.308">
                                        <GradientStop Color="#00FFFFFF"/>
                                        <GradientStop Color="#FF3D3A3A" Offset="1"/>
                                    </RadialGradientBrush>
                                </Ellipse.Fill>
                            </Ellipse>
                            <Ellipse x:Name="SelectionHighlight" Opacity="0" Fill="Red"/>
                            <Ellipse x:Name="MouseOverHighlight" Opacity="0" Fill="White"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <datavis:ResourceDictionaryCollection x:Key="ChartPaletteWithNoDataPoints">
            <!-- Blue -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="Blue"/>
                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Background" Value="{StaticResource Background}" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
            <!-- Red -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="Red"/>
                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Width" Value="1" />
                    <Setter Property="Height" Value="1" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
            <!-- Dark Turquoise -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="DarkTurquoise"/>

                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Background" Value="{StaticResource Background}" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
            <!-- Firebrick -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="Firebrick"/>
                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Background" Value="{StaticResource Background}" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
            <!-- Indigo -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="Indigo"/>
                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Background" Value="{StaticResource Background}" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
            <!-- Magenta -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="Magenta"/>
                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Background" Value="{StaticResource Background}" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
            <!-- Dark Green -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="DarkGreen"/>
                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Background" Value="{StaticResource Background}" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
            <!-- Purple -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="Purple"/>
                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Background" Value="{StaticResource Background}" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
            <!-- Dark Blue -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="DarkBlue"/>
                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Background" Value="{StaticResource Background}" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
            <!-- Brown -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="Brown"/>
                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Background" Value="{StaticResource Background}" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
            <!-- Cyan -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="Cyan"/>
                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Background" Value="{StaticResource Background}" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
            <!-- Black -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="Black"/>
                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Background" Value="{StaticResource Background}" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
            <!-- Gray -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="Gray"/>
                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Background" Value="{StaticResource Background}" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
            <!-- Tomato -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="Tomato"/>
                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Background" Value="{StaticResource Background}" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
            <!-- Orange -->
            <ResourceDictionary>
                <SolidColorBrush  x:Key="Background" Color="Orange"/>
                <Style x:Key="DataPointStyle" TargetType="charting:LineDataPoint" BasedOn="{StaticResource MyToolTipStyle}">
                    <Setter Property="Background" Value="{StaticResource Background}" />
                </Style>
                <Style x:Key="DataShapeStyle" TargetType="Shape">
                    <Setter Property="Stroke" Value="{StaticResource Background}" />
                    <Setter Property="StrokeThickness" Value="2" />
                    <Setter Property="StrokeMiterLimit" Value="1" />
                    <Setter Property="Fill" Value="{StaticResource Background}" />
                </Style>
            </ResourceDictionary>
        </datavis:ResourceDictionaryCollection>


    </Application.Resources>
</Application>

 With Chart

<Window x:Class="xxxxx.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:xxxxxx"
        xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        xmlns:chartingprimitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"     
        Title="xxxxx" Height="610" Width="750" WindowState="Maximized" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded" Closing="On_Closing" ContentRendered="OnContentRendered">

    <Window.Resources>
        
        <local:FormattingConverter x:Key="FormattingConverter"/>

        <!-- Remove the X-axis labels -->
        <Style x:Key="HiddenAxisStyle" TargetType="chartingToolkit:AxisLabel">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="chartingToolkit:AxisLabel">
                        <TextBlock Text="{TemplateBinding FormattedContent}" Visibility="Hidden">
                        </TextBlock>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="PlotAreaStyle" TargetType="Grid">
            <Setter Property="Background">
                <Setter.Value>
                    <LinearGradientBrush EndPoint="0.457,0.296" StartPoint="0.459,1.296">
                        <GradientStop Color="#FFCBCBCB"/>
                        <GradientStop Color="#FFFFFFFF" Offset="1"/>
                    </LinearGradientBrush>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style x:Key="GridLineStyle" TargetType="Line">
            <Setter Property="Stroke" Value="LightGray"/>
        </Style>
        
        <Style x:Key="CrosshairStyle" TargetType="Line">
            <Setter Property="Stroke" Value="Black"/>
            <Setter Property="StrokeThickness" Value="1"/>
        </Style>

        <Style x:Key="LocationLegendStyle" TargetType="Border">
            <Setter Property="Background" Value="White"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Top"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="BorderBrush" Value="DarkGray"/>
            <Setter Property="CornerRadius" Value="5"/>
            <Setter Property="Margin" Value="5"/>
        </Style>
        
        <!-- Remove the Title and Legend altogether and resize the chart space -->
        <Style TargetType="chartingToolkit:Chart">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="chartingToolkit:Chart">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>

                            <!-- Title and Legend Removed from here -->

                            <!-- Use a nested Grid to avoid possible clipping behavior resulting from ColumnSpan+Width=Auto -->
                            <Grid Grid.Row="1" Margin="5,15,0,15">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>

                                <chartingprimitives:EdgePanel x:Name="ChartArea" Style="{TemplateBinding ChartAreaStyle}">
                                    <Grid x:Name="PlotArea" Canvas.ZIndex="-1" Style="{TemplateBinding PlotAreaStyle}" />
                                    <Border Canvas.ZIndex="10" BorderBrush="Transparent" BorderThickness="1" />

                                    <!-- a location crosshair -->
                                    <Grid Name="CrosshairContainer" Canvas.ZIndex="1" removed="Transparent" MouseMove="CrosshairContainer_MouseMove" MouseEnter="CrosshairContainer_MouseEnter" MouseLeave="CrosshairContainer_MouseLeave" >
                                        <Grid Name="Crosshair">
                                            <Line Name="Vertical" X1="{Binding Path=X}" Y1="0" X2="{Binding Path=X}" Y2="4000" Stroke="Black"/>
                                            <Line Name="Horizontal" X1="0" Y1="{Binding Path=Y}" X2="4000" Y2="{Binding Path=Y}" Stroke="Black"/>
                                        </Grid>
                                    </Grid>

                                    <!-- a location 'legend' -->
                                    <Border Canvas.ZIndex="2" Name="LocationIndicator" Visibility="Collapsed" Style="{StaticResource LocationLegendStyle}">
                                        <StackPanel Orientation="Horizontal" Margin="5">
                                            <TextBlock Text="Location: " FontWeight="Bold"/>
                                            <TextBlock Text="{Binding Path=Key, Converter={StaticResource FormattingConverter}, ConverterParameter=0.00}"/>
                                            <TextBlock Text="   "/>
                                            <TextBlock Text="{Binding Path=Value, Converter={StaticResource FormattingConverter}, ConverterParameter=0.00}"/>
                                        </StackPanel>
                                    </Border>

                                </chartingprimitives:EdgePanel>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Name="chartSelectionDropDown" Height="35"></RowDefinition>
            <RowDefinition Name="rowChartDataSummary" Height="90"></RowDefinition>
            <RowDefinition Name="rowChartSeriesSelection" Height="25"></RowDefinition>
            <RowDefinition Name="rowChartRangeSelection" Height="25"></RowDefinition>
            <RowDefinition Name="rowChart" Height="*"></RowDefinition>
        </Grid.RowDefinitions>

        <Grid.Resources>
            <Style x:Key="HyperlinkButton" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <ContentPresenter/>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            
            <Style x:Key="CustomComboBox"  TargetType="{x:Type ComboBox}">
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="VerticalAlignment" Value="Center"/>
                <Setter Property="MinWidth" Value="200"/>
                <Setter Property="UIElement.SnapsToDevicePixels" Value="True"/>
                <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
                <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
                <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
                <Setter Property="TextElement.Foreground" Value="Black"/>
                <Setter Property="FrameworkElement.FocusVisualStyle" Value="{x:Null}"/>
                <Setter Property="BorderBrush" Value="White"/>
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Background" Value="White" />
                <Setter Property="FontSize" Value="20" />
                <Setter Property="FontWeight" Value="Bold" />
            </Style>
        </Grid.Resources>
        
        <!-- DO NOT RENAME, ADD OR DELETE COMBOBOX ITEMS WITHOUT LOOKING AT THE CODE BEHIND -->
        <ComboBox Name="chartSelectionComboBox" Grid.Row="0" Height="35" Style="{StaticResource CustomComboBox}" SelectionChanged="chartSelectionComboBox_SelectionChanged"
                  SelectedValuePath="Content">
            <ComboBoxItem>Extruded Pounds</ComboBoxItem>
            <ComboBoxItem>Price/Pound</ComboBoxItem>
            <ComboBoxItem>Shipped Pounds</ComboBoxItem>
            <ComboBoxItem>Sold Pounds</ComboBoxItem>
            <ComboBoxItem>Warehouse Transfers</ComboBoxItem>
        </ComboBox>

        <StackPanel Name="headingsStackedPanel" Margin="20,0,20,0" Grid.Row="1" Orientation="Vertical">
            <StackPanel Orientation="Horizontal">
                <Label FontSize="16" FontWeight="ExtraBold">Current Values:</Label>
                <Label Name="currentValueZeroLabel" Margin="10,0,20,0" FontSize="16" FontWeight="ExtraBold">442.66</Label>
                <Label Name="currentValueOneLabel" Margin="10,0,20,0" FontSize="16" FontWeight="ExtraBold">442.66</Label>
                <Label Name="currentValueTwoLabel" Margin="10,0,20,0" FontSize="16" FontWeight="ExtraBold">442.66</Label>
                <Label Name="currentValueThreeLabel" Margin="10,0,20,0" FontSize="16" FontWeight="ExtraBold">442.66</Label>
                <Label Name="currentValueFourLabel" Margin="10,0,20,0" FontSize="16" FontWeight="ExtraBold">442.66</Label>
                <Label Name="currentValueFiveLabel" Margin="10,0,20,0" FontSize="16" FontWeight="ExtraBold">442.66</Label>
                <Label Name="currentValueSixLabel" Margin="10,0,20,0" FontSize="16" FontWeight="ExtraBold">442.66</Label>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Label FontSize="14" FontWeight="Bold">Current Date:</Label>
                <Label Name="currrentDateLabel" FontSize="14" FontWeight="DemiBold">March 28, 2013</Label>
                <Label FontSize="14" Margin="50,0,0,0" FontWeight="Bold">Range:</Label>
                <Label Name="minRangeLabel" Margin="10,0,0,0" FontSize="14" FontWeight="DemiBold">440.42</Label>
                <Label Name="maxRangeLabel" Margin="10,0,0,0" FontSize="14" FontWeight="DemiBold">441.62</Label>
            </StackPanel>
            <StackPanel Orientation="Horizontal">
                <Label FontSize="14" FontWeight="Bold">Units:</Label>
                <Label Name="unitsLabel" Margin="20,0,0,0" FontSize="14" FontWeight="DemiBold">USD/Pound</Label>
            </StackPanel>
        </StackPanel>
        
        <StackPanel  Name="chartSeriesCheckBoxStackedPanel" Grid.Row="2" Orientation="Horizontal">
            <Label Name="seriesSelectionLabel" Margin="20,0,20,0" Content="Series Selection:" FontWeight="Bold"/>
            <CheckBox Name="chartSeriesZeroCheckBox" Margin="20,0,20,0" Checked="SeriesZeroCheckBox_Checked" Unchecked="SeriesZeroCheckBox_UnChecked" FontWeight="Bold" >Zeroth Series Selector</CheckBox>
            <CheckBox Name="chartSeriesOneCheckBox" Margin="20,0,20,0" Checked="SeriesOneCheckBox_Checked" Unchecked="SeriesOneCheckBox_UnChecked"  FontWeight="Bold" >First Series Selector</CheckBox>
            <CheckBox Name="chartSeriesTwoCheckBox" Margin="20,0,20,0" Checked="SeriesTwoCheckBox_Checked" Unchecked="SeriesTwoCheckBox_UnChecked"  FontWeight="Bold" >Second Series Selector</CheckBox>
            <CheckBox Name="chartSeriesThreeCheckBox" Margin="20,0,20,0" Checked="SeriesThreeCheckBox_Checked" Unchecked="SeriesThreeCheckBox_UnChecked"  FontWeight="Bold" >Third Series Selector</CheckBox>
            <CheckBox Name="chartSeriesFourCheckBox" Margin="20,0,20,0" Checked="SeriesFourCheckBox_Checked" Unchecked="SeriesFourCheckBox_UnChecked"  FontWeight="Bold" >Fourth Series Selector</CheckBox>
            <CheckBox Name="chartSeriesFiveCheckBox" Margin="20,0,20,0" Checked="SeriesFiveCheckBox_Checked" Unchecked="SeriesFiveCheckBox_UnChecked"  FontWeight="Bold" >Fifth Series Selector</CheckBox>
            <CheckBox Name="chartSeriesSixCheckBox" Margin="20,0,20,0" Checked="SeriesSixCheckBox_Checked" Unchecked="SeriesSixCheckBox_UnChecked"  FontWeight="Bold" >Sixth Series Selector</CheckBox>
        </StackPanel>

        <StackPanel  Name="zoomSelectorStackedPanel" Grid.Row="3" Orientation="Horizontal">
            <Label Name="zoomLabel" Margin="20,0,20,0" Content="Zoom:" FontWeight="Bold"/>
            <Button Name="oneMonthDateRange" Margin="20,0,20,0" Style="{StaticResource HyperlinkButton}" Click="oneMonthDateRange_Click" Focusable="False">
                <TextBlock>
                    <Hyperlink x:Name="oneMonthLink" Focusable="False">1 Month</Hyperlink>
                </TextBlock>
            </Button>
            <Button Name="threeMonthDateRange" Margin="20,0,20,0" Style="{StaticResource HyperlinkButton}"  Focusable="False" Click="threeMonthDateRange_Click">
                <TextBlock>
                    <Hyperlink x:Name="threeMonthLink" Focusable="False">3 Months</Hyperlink>
                </TextBlock>
            </Button>
            <Button Name="sixMonthDateRange" Margin="20,0,20,0" Style="{StaticResource HyperlinkButton}"  Focusable="False" Click="sixMonthDateRange_Click">
                <TextBlock>
                    <Hyperlink x:Name="sixMonthLink" Focusable="False">6 Months</Hyperlink>
                </TextBlock>
            </Button>
            <Button Name="oneYearDateRange" Margin="20,0,20,0" Style="{StaticResource HyperlinkButton}"  Focusable="False" Click="oneYearDateRange_Click">
                <TextBlock>
                    <Hyperlink x:Name="yearLink" Focusable="False">1 Year</Hyperlink>
                </TextBlock>
            </Button>
            <Button Name="yearToDateDateRange" Margin="20,0,20,0" Style="{StaticResource HyperlinkButton}"  Focusable="False" Click="yearToDateDateRange_Click">
                <TextBlock>
                    <Hyperlink x:Name="ytdLink" Focusable="False">YTD</Hyperlink>
                </TextBlock>
            </Button>
        </StackPanel>

        <DockPanel Name="mainChartDockPanel" Grid.Row="4">
            <chartingToolkit:Chart Margin="5" Name="mainChart" Foreground="Black" PlotAreaStyle="{StaticResource PlotAreaStyle}" Palette="{StaticResource ChartPaletteWithNoDataPoints}" >

                <chartingToolkit:LineSeries Name="seriesZero" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [0]}" />
                    
                <chartingToolkit:LineSeries Name="seriesOne" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [1]}" />
                   
                <chartingToolkit:LineSeries Name="seriesTwo" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [2]}" />

                <chartingToolkit:LineSeries Name="seriesThree" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [3]}" />

                <chartingToolkit:LineSeries Name="seriesFour" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [4]}" />

                <chartingToolkit:LineSeries Name="seriesFive" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [5]}" />

                <chartingToolkit:LineSeries Name="seriesSix" DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding [6]}" />

                <chartingToolkit:Chart.Axes>
                    <chartingToolkit:LinearAxis Orientation="Y" ShowGridLines="True" GridLineStyle="{StaticResource GridLineStyle}"/>
                    <chartingToolkit:CategoryAxis Orientation="X" ShowGridLines="True" AxisLabelStyle="{StaticResource HiddenAxisStyle}" GridLineStyle="{StaticResource GridLineStyle}"/>
                </chartingToolkit:Chart.Axes>
                        
            </chartingToolkit:Chart>
        </DockPanel>
    </Grid>
</Window>

Can anyone help me to get the Tooltip to display? I know there are many modifications to the default chart. I am trying to desing something similar to Google Finance.


Thanks
Posted
Updated 15-May-13 5:20am
v2
Comments
Richard C Bishop 15-May-13 11:24am    
I can tell you right now that noone is going to go through all that code. You have not described a problem. However, someone will probably suggest using the development tools in whatever browser you are using to help identify the issue. Once you narrow down where it might be coming from, you can reduce the code to that relevant portion to make it easier to read.

Solved Myself,

The ZIndex for the Crosshair was higher than the ZIndex for the Chart's Plot Area Grid.

Once that was changed all worked.

Thanks
 
Share this answer
 
I changed a lot about the standard chart tool. I am trying to create a Google Finiance Type chart. My question is: Why does the ToolTip not show up on the Chart?

Here is the minimum code to still see what I am doing:

XML
App.xaml:

<application x:class="xxxxx.App" xmlns:x="#unknown">
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:charting="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
             xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
    StartupUri="MainWindow.xaml">
    
    <application.resources>
 
        <style x:key="MyToolTipStyle" targettype="Control">
            <setter property="BorderBrush" value="Gray" />
            <setter property="BorderThickness" value="1" />
            <setter property="IsTabStop" value="False" />
            <setter property="Width" value="8" />
            <setter property="Height" value="8" />
            <setter property="Template">
                <setter.value>
                    <controltemplate x:name="myNewDataPoint" targettype="charting:LineDataPoint">
                        <grid x:name="Root" opacity="0">
                            <visualstatemanager.visualstategroups>
                                <visualstategroup x:name="CommonStates">
                                    <visualstategroup.transitions>
                                        <visualtransition generatedduration="0:0:0.1" />
                                    </visualstategroup.transitions>
                                    <visualstate x:name="Normal" />
                                    <visualstate x:name="MouseOver">
                                        <storyboard>
                                            <coloranimationusingkeyframes begintime="00:00:00" duration="00:00:00.0010000" storyboard.targetname="MouseOverHighlight" storyboard.targetproperty="(Shape.Fill).(SolidColorBrush.Color)">
                                                <splinecolorkeyframe keytime="00:00:00" value="#FFFFDF00" />
                                            </coloranimationusingkeyframes>
                                            <doubleanimationusingkeyframes begintime="00:00:00" duration="00:00:00.0010000" storyboard.targetname="MouseOverHighlight" storyboard.targetproperty="(UIElement.Opacity)">
                                                <splinedoublekeyframe keytime="00:00:00" value="0.24" />
                                            </doubleanimationusingkeyframes>
                                        </storyboard>
                                    </visualstate>
                                </visualstategroup>
                                <visualstategroup x:name="SelectionStates">
                                    <visualstategroup.transitions>
                                        <visualtransition generatedduration="0:0:0.1" />
                                    </visualstategroup.transitions>
                                    <visualstate x:name="Unselected" />
                                    <visualstate x:name="Selected">
                                        <storyboard>
                                            <doubleanimationusingkeyframes begintime="00:00:00" duration="00:00:00.0010000" storyboard.targetname="SelectionHighlight" storyboard.targetproperty="(UIElement.Opacity)">
                                                <splinedoublekeyframe keytime="00:00:00" value="0.18" />
                                            </doubleanimationusingkeyframes>
                                        </storyboard>
                                    </visualstate>
                                </visualstategroup>
                                <visualstategroup x:name="RevealStates">
                                    <visualstategroup.transitions>
                                        <visualtransition generatedduration="0:0:0.5" />
                                    </visualstategroup.transitions>
                                    <visualstate x:name="Shown">
                                        <storyboard>
                                            <doubleanimation duration="0" storyboard.targetname="Root" storyboard.targetproperty="Opacity" to="1" />
                                        </storyboard>
                                    </visualstate>
                                    <visualstate x:name="Hidden">
                                        <storyboard>
                                            <doubleanimation duration="0" storyboard.targetname="Root" storyboard.targetproperty="Opacity" to="0" />
                                        </storyboard>
                                    </visualstate>
                                </visualstategroup>
                            </visualstatemanager.visualstategroups>
                            <tooltipservice.tooltip>
                                <stackpanel margin="2">
                                    <contentcontrol content="{TemplateBinding FormattedIndependentValue}" fontsize="12" />
                                    <contentcontrol content="{TemplateBinding FormattedDependentValue}" fontsize="12" />
                                </stackpanel>
                            </tooltipservice.tooltip>
                            <ellipse stroke="{TemplateBinding BorderBrush}" fill="{TemplateBinding Background}" />
                            <ellipse rendertransformorigin="0.661,0.321">
                                <ellipse.fill>
                                    <radialgradientbrush gradientorigin="0.681,0.308">
                                        <gradientstop color="#00FFFFFF" />
                                        <gradientstop color="#FF3D3A3A" offset="1" />
                                    </radialgradientbrush>
                                </ellipse.fill>
                            </ellipse>
                            <ellipse x:name="SelectionHighlight" opacity="0" fill="Red" />
                            <ellipse x:name="MouseOverHighlight" opacity="0" fill="White" />
                        </grid>
                    </controltemplate>
                </setter.value>
            </setter>
        </style>
 

        <datavis:resourcedictionarycollection x:key="ChartPaletteWithNoDataPoints" xmlns:datavis="#unknown">
            <!-- Blue -->
            <resourcedictionary>
                <solidcolorbrush x:key="Background" color="Blue" />
                <style x:key="DataPointStyle" targettype="charting:LineDataPoint" basedon="{StaticResource MyToolTipStyle}">
                    <setter property="Background" value="{StaticResource Background}" />
                </style>
                <style x:key="DataShapeStyle" targettype="Shape">
                    <setter property="Stroke" value="{StaticResource Background}" />
                    <setter property="StrokeThickness" value="2" />
                    <setter property="StrokeMiterLimit" value="1" />
                    <setter property="Fill" value="{StaticResource Background}" />
                </style>
            </resourcedictionary>
            <!-- Red -->
            <resourcedictionary>
                <solidcolorbrush x:key="Background" color="Red" />
                <style x:key="DataPointStyle" targettype="charting:LineDataPoint" basedon="{StaticResource MyToolTipStyle}">
                    <setter property="Width" value="1" />
                    <setter property="Height" value="1" />
                </style>
                <style x:key="DataShapeStyle" targettype="Shape">
                    <setter property="Stroke" value="{StaticResource Background}" />
                    <setter property="StrokeThickness" value="2" />
                    <setter property="StrokeMiterLimit" value="1" />
                    <setter property="Fill" value="{StaticResource Background}" />
                </style>
            </resourcedictionary>

<!-- Other Colors Removed to minimize code -->

        </datavis:resourcedictionarycollection>
 

    </application.resources>
</application>
 

<!-- Chart Window -->

 
<window x:class="xxxxx.MainWindow" xmlns:x="#unknown">
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:xxxxxx"
        xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        xmlns:chartingprimitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit"
        xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"     
        Title="xxxxx" Height="610" Width="750" WindowState="Maximized" WindowStartupLocation="CenterScreen" Loaded="Window_Loaded" Closing="On_Closing" ContentRendered="OnContentRendered">
 
    <window.resources>
        
        <local:formattingconverter x:key="FormattingConverter" xmlns:local="#unknown" />
 
        <!-- Remove the X-axis labels -->
        <style x:key="HiddenAxisStyle" targettype="chartingToolkit:AxisLabel">
            <setter property="Template">
                <setter.value>
                    <controltemplate targettype="chartingToolkit:AxisLabel">
                        <textblock text="{TemplateBinding FormattedContent}" visibility="Hidden">
                        </textblock>
                    </controltemplate>
                </setter.value>
            </setter>
        </style>
 
        <style x:key="PlotAreaStyle" targettype="Grid">
            <setter property="Background">
                <setter.value>
                    <lineargradientbrush endpoint="0.457,0.296" startpoint="0.459,1.296">
                        <gradientstop color="#FFCBCBCB" />
                        <gradientstop color="#FFFFFFFF" offset="1" />
                    </lineargradientbrush>
                </setter.value>
            </setter>
        </style>
        
        <style x:key="GridLineStyle" targettype="Line">
            <setter property="Stroke" value="LightGray" />
        </style>
        
        <style x:key="CrosshairStyle" targettype="Line">
            <setter property="Stroke" value="Black" />
            <setter property="StrokeThickness" value="1" />
        </style>
 
        <style x:key="LocationLegendStyle" targettype="Border">
            <setter property="Background" value="White" />
            <setter property="HorizontalAlignment" value="Left" />
            <setter property="VerticalAlignment" value="Top" />
            <setter property="BorderThickness" value="1" />
            <setter property="BorderBrush" value="DarkGray" />
            <setter property="CornerRadius" value="5" />
            <setter property="Margin" value="5" />
        </style>
        
        <!-- Remove the Title and Legend altogether and resize the chart space -->
        <style targettype="chartingToolkit:Chart">
            <setter property="Template">
                <setter.value>
                    <controltemplate targettype="chartingToolkit:Chart">
                        <grid>
                            <grid.rowdefinitions>
                                <rowdefinition height="Auto" />
                                <rowdefinition height="*" />
                            </grid.rowdefinitions>
 
                            <!-- Title and Legend Removed from here -->
 
                            <!-- Use a nested Grid to avoid possible clipping behavior resulting from ColumnSpan+Width=Auto -->
                            <grid grid.row="1" margin="5,15,0,15">
                                <grid.columndefinitions>
                                    <columndefinition width="*" />
                                    <columndefinition width="Auto" />
                                </grid.columndefinitions>
 
                                <chartingprimitives:edgepanel x:name="ChartArea" style="{TemplateBinding ChartAreaStyle}" xmlns:chartingprimitives="#unknown">
                                    <grid x:name="PlotArea" canvas.zindex="-1" style="{TemplateBinding PlotAreaStyle}" />
                                    <border canvas.zindex="10" borderbrush="Transparent" borderthickness="1" />
 
                                    <!-- a location crosshair -->
                                    <grid name="CrosshairContainer" canvas.zindex="1" removed="Transparent" mousemove="CrosshairContainer_MouseMove" mouseenter="CrosshairContainer_MouseEnter" mouseleave="CrosshairContainer_MouseLeave">
                                        <grid name="Crosshair">
                                            <line name="Vertical" x1="{Binding Path=X}" y1="0" x2="{Binding Path=X}" y2="4000" stroke="Black" />
                                            <line name="Horizontal" x1="0" y1="{Binding Path=Y}" x2="4000" y2="{Binding Path=Y}" stroke="Black" />
                                        </grid>
                                    </grid>
 
                                    <!-- a location 'legend' -->
                                    <border canvas.zindex="2" name="LocationIndicator" visibility="Collapsed" style="{StaticResource LocationLegendStyle}">
                                        <stackpanel orientation="Horizontal" margin="5">
                                            <textblock text="Location: " fontweight="Bold" />
                                            <textblock text="{Binding Path=Key, Converter={StaticResource FormattingConverter}, ConverterParameter=0.00}" />
                                            <textblock text="   " />
                                            <textblock text="{Binding Path=Value, Converter={StaticResource FormattingConverter}, ConverterParameter=0.00}" />
                                        </stackpanel>
                                    </border>
 
                                </chartingprimitives:edgepanel>
                            </grid>
                        </grid>
                    </controltemplate>
                </setter.value>
            </setter>
        </style>
 
    </window.resources>
    
    
<!-- Other Grid entities removed -->
        
 
        <dockpanel name="mainChartDockPanel" grid.row="4">
            <chartingtoolkit:chart margin="5" name="mainChart" foreground="Black" plotareastyle="{StaticResource PlotAreaStyle}" palette="{StaticResource ChartPaletteWithNoDataPoints}" xmlns:chartingtoolkit="#unknown">
 
                <chartingtoolkit:lineseries name="seriesZero" dependentvaluepath="Value" independentvaluepath="Key" itemssource="{Binding [0]}" />
                    
                
                <chartingtoolkit:chart.axes>
                    <chartingtoolkit:linearaxis orientation="Y" showgridlines="True" gridlinestyle="{StaticResource GridLineStyle}" />
                    <chartingtoolkit:categoryaxis orientation="X" showgridlines="True" axislabelstyle="{StaticResource HiddenAxisStyle}" gridlinestyle="{StaticResource GridLineStyle}" />
                </chartingtoolkit:chart.axes>
                        
            </chartingtoolkit:chart>
        </dockpanel>
    
</window> 
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900