SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and iOS Chart & Android Chart Components

0
0

Hello!

I am trying to render a HeatMap and align labels next to squares (see the attached image). However, I am running into two issues.

Firstly, I am using RenderTransform to shift labels so that they are aligned with the squares instead of being on the borders between them. It works, but does not look good as I resize the control.

Second, the axes render the last label outside the view. I tried setting VisualRange and VisualRangeLimit but it did not help. It hides the last data column (or row) and still displays the last label.

Any suggestions on how I can solve it?

I am attaching a sample project.

Thank you in advance!

Version
5.4.0.12119
Images
  • You must to post comments
0
0

Hi Alex,

I don’t think this is a good idea. Firstly, you’ve taken 10 elements of data and now there are 9 labels and you end up with this fence-post problem:

enter image description here

However, if you really wanted to remove the 9th value you’d have to set the ClipToBounds property to TRUE on the TickLabelsAxisCanvas by modifying the axis control template.

Have a look at the template code below

<!--  AxisBase  -->
<ControlTemplate x:Key="AxisBaseTemplate" TargetType="axes:AxisBase">
    <Border
        ap:Device.SnapsToDevicePixels="True"
        Background="{TemplateBinding Background}"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}">

        <StackPanel
            x:Name="PART_AxisContainer"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            ap:Device.SnapsToDevicePixels="True"
            apc:AxisLayoutHelper.AxisAlignment="{Binding AxisAlignment, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
            Orientation="{Binding AxisAlignment, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay, Converter={StaticResource AxisAlignmentToAxisOrientationConverter}, ConverterParameter=Inverse}">

            <Grid
                HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"
                ap:Device.SnapsToDevicePixels="True"
                apc:AxisLayoutHelper.IsInsideItem="True"
                Canvas.ZIndex="1">

                <themes:AxisPanel
                    x:Name="PART_AxisCanvas"
                    ap:Device.SnapsToDevicePixels="True"
                    AxisAlignment="{TemplateBinding AxisAlignment}"
                    Background="Transparent"
                    DrawLabels="{TemplateBinding DrawLabels}"
                    DrawMajorTicks="{TemplateBinding DrawMajorTicks}"
                    DrawMinorTicks="{TemplateBinding DrawMinorTicks}"
                    IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}"
                    MajorTickLineStyle="{TemplateBinding MajorTickLineStyle}"
                    MinorTickLineStyle="{TemplateBinding MinorTickLineStyle}">

                    <Image
                        x:Name="PART_AxisBitmapImage"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        ap:Device.SnapsToDevicePixels="True"
                        Stretch="Fill" />


                    <Grid x:Name="PART_LabelsCanvas" Margin="{Binding LabelToTickIndent, RelativeSource={RelativeSource FindAncestor, AncestorType=themes:AxisPanel}, Mode=OneWay}">
                        <themes:TickLabelAxisCanvas
                            ap:Device.SnapsToDevicePixels="True"
                            AutoFitMarginalLabels="{TemplateBinding AutoFitMarginalLabels}"
                            Background="Transparent"
                            ClipToBounds="False" <!-- HERE IS HERE THE CLIPTOBOUNDS IS--> 
                            IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}" />
                        <themes:TickLabelAxisCanvas
                            ap:Device.SnapsToDevicePixels="True"
                            AutoFitMarginalLabels="{TemplateBinding AutoFitMarginalLabels}"
                            Background="Transparent"
                            ClipToBounds="False" <!-- AND HERE --> 
                            IsLabelCullingEnabled="{TemplateBinding IsLabelCullingEnabled}"
                            Visibility="Collapsed" />
                    </Grid>

                    <labelProviders:AxisTitle
                        Orientation="{TemplateBinding Orientation}"
                        Style="{TemplateBinding TitleStyle}"
                        Visibility="{Binding Content, RelativeSource={RelativeSource Self}, Converter={StaticResource CollapseIfNullOrEmptyStringConverter}}" />
                </themes:AxisPanel>

                <themes:ModifierAxisCanvas
                    x:Name="PART_ModifierAxisCanvas"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"
                    ap:Device.SnapsToDevicePixels="True" />
            </Grid>

            <ContentPresenter apc:AxisLayoutHelper.IsOutsideItem="True" Content="{TemplateBinding Scrollbar}" />
        </StackPanel>
    </Border>
</ControlTemplate>

If that doesn’t work or is unaccessible, you can think about the TickProvider Api to ensure that you are not outputting cell number 10 (or the last value).

Best regards,
Andrew

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

SciChart WPF v6 BETA released! Note pricing/licensing changes are coming. Contact us to beat the rise!Read more
+