CODEWITHSUNDEEP
c#wpflivecharts
Jonathan Tan
Jonathan Tan

Reputation: 129

How to display axis section tooltips and reposition data labels in LiveCharts

1) I wish to display tool tips for axis sections in LiveCharts but cannot seem to figure out how to do it. Below is my current code for using LiveCharts.

        <Grid Grid.Column="1" Margin="15, 15, 15, 15" MaxHeight="500">
        <Grid.OpacityMask>
            <VisualBrush Visual="{Binding ElementName=Border}" />
        </Grid.OpacityMask>
        <Grid.Resources>
            <Style TargetType="lvc:LineSeries">
                <Setter Property="Stroke" Value="Black"/>
                <Setter Property="LineSmoothness" Value="0"/>
                <Setter Property="Fill" Value="Transparent"/>
                <Setter Property="PointForeground" Value="White"/>
            </Style>
            <Style TargetType="lvc:Axis">
                <Setter Property="ShowLabels" Value="True"/>
                <Setter Property="Foreground" Value="White"/>
            </Style>
            <Style TargetType="lvc:Separator">
                <Setter Property="Stroke" Value="DimGray"/>
                <Setter Property="StrokeDashArray" Value="2"/>
                <Setter Property="IsEnabled" Value="True"/>
            </Style>
        </Grid.Resources>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <Border x:Name="Border" Grid.Row="0" Grid.RowSpan="3" CornerRadius="5" Background="Gray"/>
        <TextBlock Grid.Row="0" TextAlignment="Center" Padding="10, 10, 0, 5" Foreground="Black" FontSize="24" FontWeight="Bold">
                Process Capability
        </TextBlock>
        <TextBlock Grid.Row="1" TextAlignment="Center" Foreground="Black" Padding="0,0,0,20">Sample Values</TextBlock>
        <lvc:CartesianChart Series="{Binding SeriesCollection}" Grid.Row="2" Margin="0, 0, 0, 0" Foreground="Black" Zoom="X">
            <lvc:CartesianChart.AxisY>
                <lvc:Axis Name="Y" MinValue="{Binding MinimumY}" MaxValue="{Binding MaximumY}" LabelFormatter="{Binding Formatter}">
                    <lvc:Axis.Sections>
                        <lvc:AxisSection Value="{Binding LowerSpecificationLimit}" StrokeThickness="3" Stroke="Black" DataLabel="True" ToolTip="HELLOOOO" Panel.ZIndex="99"/>
                        <lvc:AxisSection Value="{Binding UpperSpecificationLimit}" StrokeThickness="3" Stroke="Black" DataLabel="True" ToolTip="{Binding LowerSpecificationLimitToolTip}"/>
                        <lvc:AxisSection Value="{Binding NominalConstraint}" StrokeThickness="1.5" Stroke="DarkGray" DataLabel="True" StrokeDashArray="5" ToolTip="{Binding LowerSpecificationLimitToolTip}"/>
                        <lvc:AxisSection Value="{Binding LowerTolerance}" StrokeThickness="1.5" Stroke="DarkGray" DataLabel="True" StrokeDashArray="5" ToolTip="{Binding LowerSpecificationLimitToolTip}"/>
                        <lvc:AxisSection Value="{Binding UpperTolerance}" StrokeThickness="1.5" Stroke="DarkGray" DataLabel="True" StrokeDashArray="5" ToolTip="{Binding LowerSpecificationLimitToolTip}"/>
                    </lvc:Axis.Sections>
                </lvc:Axis>
            </lvc:CartesianChart.AxisY>
        </lvc:CartesianChart>
    </Grid>

2) I would also like to be able to change the position of a DataLabel. In the picture below, you can see that the Axis Section data labels overlap the regular axis' data labels. To stop it from overlapping, I want to position the data label of the axis sections on the right side of the chart instead of the left. Image

Any help is appreciated. Thank you.

Upvotes: 0

Views: 3133

Answers (1)

Yvonnila
Yvonnila

Reputation: 646

For your second question, using Merged Axes may help. (Set Axis.IsMerged property to true.)

Ref: https://lvcharts.net/App/examples/v1/wpf/Axes

Upvotes: 1

Related Questions