Customize color of individual data in LiveChart

7.8k views Asked by At

Is possible and how to customize individual data color in LiveChart? Instead of having the same color scheme for a series in code behind, I like to programmatically and conditionally color an individual data column. I thought of, as a work around, to separate and overlay the series like having a Red Series {null,null,null,7.8,null} and a Green Series {2,3,2,null,4} but it is strongly typed and I cannot pass in null.

In short, how to I from left to the right:

enter image description here

[EDIT 1]

I read the suggested link but the mapper seems not working properly on LineSeries.

cvValues = new ChartValues<double>() { 1.01, 2.02, 3.03, 4.04, 1.01, 2.02, 3.03, 4.04, 1.01, 2.02 };
cvUSL = new ChartValues<double>() { 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5 };
cvLSL = new ChartValues<double>() { 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5, 1.5 };

DangerBrush = new SolidColorBrush(Colors.Red);

mapper1 = new CartesianMapper<double>()
        .X((value, index) => index + 1)
        .Y((value, index) => value)
        .Fill((value, index) => value > 3.5 ? DangerBrush : null)
        .Stroke((value, index) => value > 3.5 ? DangerBrush : null)
        .Fill((value, index) => value < 1.5 ? DangerBrush : null)
        .Stroke((value, index) => value < 1.5 ? DangerBrush : null);

DataContext = this; 

And here is my XAML (simply wanting the fill in red if a data goes out of upper or lower boundary)

<lvc:LineSeries x:Name="lsUSL"
                Values="{Binding cvUSL}" 
                PointGeometrySize="0"
                PointForeground="White"
                Stroke = "Turquoise"
                StrokeDashArray = "8"
                StrokeThickness = "0.8"
                Fill = "Transparent"
                Configuration="{Binding mapper1}"/>

<lvc:LineSeries x:Name="lsLSL"
                Values="{Binding cvLSL}" 
                PointGeometrySize="0"
                PointForeground="White"
                Stroke = "Turquoise"
                StrokeDashArray = "8"
                StrokeThickness = "0.8"
                Fill = "Transparent"
                Configuration="{Binding mapper1}"/>

<lvc:LineSeries x:Name="lsValues"
                Values="{Binding cvValues}" 
                PointGeometrySize="5"
                PointForeground="Green"
                Stroke = "Gray"
                StrokeThickness = "1"
                Fill = "Transparent"
                Configuration="{Binding mapper1}"/>
0

There are 0 answers