title: Customize color of individual data in LiveChart
body: <p>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.</p>
  
  <p>In short, how to I from left to the right:</p>
  
  <p><a href="https://i.stack.imgur.com/ubLX5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ubLX5.png" alt="enter image description here"></a></p>
  
  <p>[EDIT 1]</p>
  
  <p>I read the suggested link but the mapper seems not working properly on LineSeries.</p>
  
  <pre><code>cvValues = new ChartValues&lt;double&gt;() { 1.01, 2.02, 3.03, 4.04, 1.01, 2.02, 3.03, 4.04, 1.01, 2.02 };
  cvUSL = new ChartValues&lt;double&gt;() { 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5 };
  cvLSL = new ChartValues&lt;double&gt;() { 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&lt;double&gt;()
          .X((value, index) =&gt; index + 1)
          .Y((value, index) =&gt; value)
          .Fill((value, index) =&gt; value &gt; 3.5 ? DangerBrush : null)
          .Stroke((value, index) =&gt; value &gt; 3.5 ? DangerBrush : null)
          .Fill((value, index) =&gt; value &lt; 1.5 ? DangerBrush : null)
          .Stroke((value, index) =&gt; value &lt; 1.5 ? DangerBrush : null);
  
  DataContext = this; 
  </code></pre>
  
  <p>And here is my XAML (simply wanting the fill in red if a data goes out of upper or lower boundary)</p>
  
  <pre><code>&lt;lvc:LineSeries x:Name="lsUSL"
                  Values="{Binding cvUSL}" 
                  PointGeometrySize="0"
                  PointForeground="White"
                  Stroke = "Turquoise"
                  StrokeDashArray = "8"
                  StrokeThickness = "0.8"
                  Fill = "Transparent"
                  Configuration="{Binding mapper1}"/&gt;
  
  &lt;lvc:LineSeries x:Name="lsLSL"
                  Values="{Binding cvLSL}" 
                  PointGeometrySize="0"
                  PointForeground="White"
                  Stroke = "Turquoise"
                  StrokeDashArray = "8"
                  StrokeThickness = "0.8"
                  Fill = "Transparent"
                  Configuration="{Binding mapper1}"/&gt;
  
  &lt;lvc:LineSeries x:Name="lsValues"
                  Values="{Binding cvValues}" 
                  PointGeometrySize="5"
                  PointForeground="Green"
                  Stroke = "Gray"
                  StrokeThickness = "1"
                  Fill = "Transparent"
                  Configuration="{Binding mapper1}"/&gt;
  </code></pre>