A few formatting questions regarding WPF LiveCharts HeatSeries

Question

I used LiveCharts' HeatSeries control to create a climate chart in my WPF application (using MVVM / Caliburn.Micro). The chart is populated in my ViewModel which is working as intended but I'm having a few issues formatting that I can't seem to resolve and both AI and their documentation haven't been helpful. I've highlighted the issues in the screenshot below.

1. How can I change the font size of the axis labels?
2. The chart includes a massive white space to its right. The next grid column starts at "Hello". How can this be fixed?
3. The lower part of the x-axis labels is cut off regardless of margins, row height and chart height.
4. How do I get rid of the colour legend?

XAML:

<lvc:CartesianChart Series="{Binding HeatMapSeries}" Grid.Column="1" Grid.Row="1" Margin="10" LegendLocation="None">
    <lvc:CartesianChart.AxisX>
        <lvc:Axis LabelFormatter="{Binding XAxisLabelFormatter}" >
            <lvc:Axis.Separator>
                <lvc:Separator Step="1" />
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisX>
    <lvc:CartesianChart.AxisY>
        <lvc:Axis Labels="{Binding YAxisLabels}"/>
    </lvc:CartesianChart.AxisY>
</lvc:CartesianChart>   

Answer 1

You can format the axis labels simply by adding font size, weight, etc properties within the label itself:

For Example:

<lvc:Axis Labels="{Binding SalesMan}" LabelsRotation="-15" FontSize="18" FontWeight="Bold">

I am not sure if there is a way to explicitly remove the gradient legend. There is a kind of hacky workaround by way of setting Margin="0,0,-17,0" to clip the gradient map legend out of view, where 17 is about the space I want to clip. Not great, but it does work. If I find another way, I will update the answer accordingly, but for now, it seems built-in.

<lvc:CartesianChart Series="{Binding HeatMapSeries}" Margin="0,0,-17,0" Padding="10" Grid.Column="1" Grid.Row="1" LegendLocation="None">

For your formatting issues (extra space and clipping), there is probably something wrong with your grid layout. It might be a good idea to try getting rid of the chart and using some Border Controls to get a sense for how things are laying out.

To help you get started there, here is a working example with the layout working correctly, which borrows heavily from the LiveCharts example code:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
        <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <Button Grid.Row="0" Click="ButtonBase_OnClick" Margin="10">Randomize</Button>
    <lvc:CartesianChart Grid.Row="1" DataTooltip="{x:Null}" LegendLocation="None" Margin="0,0,-17,0">
        <lvc:CartesianChart.Series>
            <lvc:HeatSeries Values="{Binding Values}" DataLabels="True" />
        </lvc:CartesianChart.Series>
        <lvc:CartesianChart.AxisX>
            <lvc:Axis Labels="{Binding SalesMan}" LabelsRotation="-45" FontSize="18" FontWeight="Bold">
                <lvc:Axis.Separator>
                    <lvc:Separator Step="1"></lvc:Separator>
                </lvc:Axis.Separator>
            </lvc:Axis>
        </lvc:CartesianChart.AxisX>
        <lvc:CartesianChart.AxisY>
            <lvc:Axis Labels="{Binding Days}" FontSize="18"></lvc:Axis>
        </lvc:CartesianChart.AxisY>
    </lvc:CartesianChart>

    <TextBlock Text="Hello" Grid.Column="1" Grid.Row="1" Background="White" />

    <TextBlock Text="More stuff down here...." Grid.ColumnSpan="2" Grid.Row="2" />
</Grid>