Search code examples
c#wpfxamllivecharts

In the vertical chart of Live Charts, is there a way to make the starting point of the X axis to the right?


I draw vertical line chart using LiveCharts.
I want 0 on the X axis to the right. What is the method to achieve this ?
(Now 0 is on the left and the maximum is on the right)

I am not very good at English, So look at the figure below.

/*
Y:Index, X:Value

@Now

   300|
      |
      |
      |
      |
     0|--------->
      0       65535

@ I want this!!

   300|
      |
      |
      |
      |
     0|--------->
    65535       0

*/

XAML

<lvc:CartesianChart Name="VChart" Background="#222" DisableAnimations="True" Hoverable="False" DataTooltip="{x:Null}" UpdaterState="{Binding ChartUpdaterState}" UseLayoutRounding="True">
    <lvc:CartesianChart.Series>
        <lvc:VerticalLineSeries Values="{Binding VerticalLineChartValues}" StrokeThickness="1" Configuration="{Binding VerticalLineChartConfig}"
                        Stroke="Khaki" Fill="Transparent" LineSmoothness="0" PointGeometry="{x:Null}" />
    </lvc:CartesianChart.Series>
    <lvc:CartesianChart.AxisX>
        <lvc:Axis IsMerged="True">
            <lvc:Axis.Separator>
                <lvc:Separator StrokeThickness="1" StrokeDashArray="2">
                    <lvc:Separator.Stroke>
                        <SolidColorBrush Color="#404F56" />
                    </lvc:Separator.Stroke>
                </lvc:Separator>
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisX>
    <lvc:CartesianChart.AxisY>
        <lvc:Axis IsMerged="True" Position="LeftBottom">
            <lvc:Axis.Separator>
                <lvc:Separator StrokeThickness="1" StrokeDashArray="4">
                    <lvc:Separator.Stroke>
                        <SolidColorBrush Color="#404F56" />
                    </lvc:Separator.Stroke>
                </lvc:Separator>
            </lvc:Axis.Separator>
        </lvc:Axis>
    </lvc:CartesianChart.AxisY>
</lvc:CartesianChart>

ViewModel.cs

        // Create config
        var vChartConfig = new CartesianMapper<int>();
        vChartConfig.X((value, index) => value);
        vChartConfig.Y((value, index) => index);
        VerticalLineChartConfig = vChartConfig;

Thank you.


Solution

  • There was an answer here.

    c# How to invert Y Axis with Live Charts

    In my case did this.

    VChart.AxisX[0].LabelFormatter = x => (x * -1).ToString(CultureInfo.InvariantCulture);
    
    // Flip values
    for (var i = 0; i < values.Count; i++)
        values[i] = values[i] * -1;
    
    VerticalLineChartValues.AddRange(values);