LiveCharts: Draw Axis Line

Question

I'm using LiveCharts to draw a row diagram.

Xaml-Code:

<lvc:CartesianChart Grid.Column="0" Zoom="None" Margin="0,0,0,8" AnimationsSpeed="0" DataTooltip="{x:Null}">
    <lvc:CartesianChart.Resources>
        <Style TargetType="lvc:Separator">
            <Setter Property="Stroke" Value="CadetBlue" />
            <Setter Property="StrokeThickness" Value="0.4" />
        </Style>
    </lvc:CartesianChart.Resources>
    <lvc:CartesianChart.Series>
            <lvc:RowSeries Name="AlarmTypeSeries" Values="{Binding AlarmTypeHistogramValues}" Configuration="{Binding AlarmTypeHistogramMapper}" />
    </lvc:CartesianChart.Series>
    <lvc:CartesianChart.AxisX>
        <lvc:Axis Name="XAxis" MinValue="0" MaxValue="{Binding MaxXAxisValue}" FontSize="13.3" Title="Alarmanzahl"/>
    </lvc:CartesianChart.AxisX>
    <lvc:CartesianChart.AxisY>
        <lvc:Axis Name="YAxis" MinValue="-7" MaxValue="1" ShowLabels="False" />
    </lvc:CartesianChart.AxisY>
</lvc:CartesianChart>

The resulting graph is on the left in the image below.

resulting-graph

What I'd like to achieve is to draw the X-Axis, resulting in something like the graph on the right.

I would assume that the axis would be drawn automatically, but maybe I'm missing something.

Apparently there was a bug in LiveCharts that could explain this behavior, but it was reported in 2016: https://github.com/beto-rodriguez/Live-Charts/issues/142

I already tried to add a Section at the appropriate point of the Y axis (XAML-Code below) and the result looked ok, but the exact point would have to be determined dynamically.

<lvc:Axis.Sections>
    <lvc:AxisSection Value="-6.45" StrokeThickness="1"  Stroke="CadetBlue"/>
</lvc:Axis.Sections>

So all in all I'm a bit clueless on the best way to do this, and every help is appreciated.

score 1 · Answer 1 · answered Aug 08 '18 at 05:57

Hi I am also searching for the same answer. and even saw your post in the live chart forum. but still have not found any answer. Currently i am using a section to mark the axis lines. If any one needs. this is what i have used.

<LiveChart:Axis.Sections>
       <LiveChart:AxisSection Value="{Binding XAxisMinValue}" Stroke="Black" StrokeThickness="1"/>
</LiveChart:Axis.Sections>

Where the mini value is the minimum points where the p[loting starts for my charts. i tried on few trails and giving it as "0" works to draw a line on the axis's. Hopes helps someone.

score 0 · Answer 2 · answered Mar 09 '18 at 13:14

Not that it would be the nicest solution but what you can do is to use the Separator instead of Sections and set Step to a value that would ensure that the Separator is just at the top and bottom of the graph. But I understand its kind of similar to what you found.

<lvc:Axis.Separator>
    <lvc:Separator StrokeThickness="1" Stroke="CadetBlue" Step="100"/>
</lvc:Axis.Separator>

LiveCharts: Draw Axis Line

2 Answers2