I Would like to display the Predicted Bar and the display the Cold or warm value depending on the the value.
If the value is below 0 use cold if above use warm.
So the Warm or Cold Bar should overlap 50 % of the predicted bar.
At the Moment there are no overlapping and also when the number is positive and the green candle is rendered there is a gap where the red candle should be.
XAML for the UI:
<Window x:Class="TestCharts.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestCharts"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d"
Name="Window1"
Title="MainWindow" Height="450" Width="800">
<Grid>
<lvc:CartesianChart LegendLocation="Top" Hoverable="True"
Series="{Binding ChartData, ElementName=Window1}"
Margin="5,5,5,5">
<lvc:CartesianChart.Resources>
<Style TargetType="lvc:Separator">
<Setter Property="Stroke" Value="LightGray"></Setter>
</Style>
</lvc:CartesianChart.Resources>
<lvc:CartesianChart.AxisX>
<lvc:Axis Labels="{Binding Labels, ElementName=Window1}" FontSize="12" >
<lvc:Axis.Separator>
<lvc:Separator Step="1" IsEnabled="False"/>
</lvc:Axis.Separator>
</lvc:Axis>
</lvc:CartesianChart.AxisX>
</lvc:CartesianChart>
</Grid>
</Window>
CODE Behind:
using LiveCharts;
using LiveCharts.Configurations;
using LiveCharts.Wpf;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace TestCharts
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public class Fruit
{
public decimal Temperature { get; set; }
public decimal Predicted { get; set; }
}
public MainWindow()
{
SeriesCollection output = new SeriesCollection();
output.Add(new ColumnSeries()
{
Values = GetChartValues("Predicted"),
Title = "Predicted",
ToolTip = "",
Fill = new SolidColorBrush(System.Windows.Media.Colors.Gray),
});
output.Add(new ColumnSeries()
{
Values = GetChartValues("Cold"),
Title = "Cold",
ToolTip = "",
Fill = new SolidColorBrush(System.Windows.Media.Colors.Red),
});
CartesianMapper<double> mapper = Mappers.Xy<double>()
.X((value, index) => index)
.Y(value => value)
.Fill((value, index) => value > 0 ? Brushes.Purple : Brushes.Pink);
output.Add(new ColumnSeries()
{
Values = GetChartValues("Warm"),
Title = "Warm",
ToolTip = "",
Fill = new SolidColorBrush(System.Windows.Media.Colors.Green),
Configuration = mapper
});
ChartData = output;
InitializeComponent();
}
public List<Fruit> Fruits => new List<Fruit>() {
new Fruit() { Temperature = 4.5m, Predicted = -10m },
new Fruit() { Temperature = -4.5m, Predicted = 10m },
new Fruit() { Temperature = 9.5m , Predicted = -5m},
new Fruit() { Temperature = 3m, Predicted = -5m },
};
private ChartValues<decimal> GetChartValues(string propName)
{
var values = new ChartValues<decimal>();
foreach (Fruit? data in Fruits)
{
switch (propName)
{
case "Predicted":
values.Add((int)data.Predicted);
break;
case "Cold":
if (data.Temperature < 0)
values.Add(data.Temperature);
else
values.Add(0m);
break;
case "Warm":
if (data.Temperature > 0)
values.Add(data.Temperature);
else
values.Add(0m);
break;
default:
break;
}
}
return values;
}
public SeriesCollection ChartData
{
get => _chartData;
set { _chartData = value; }
}
private SeriesCollection _chartData;
private string[] myVar;
public string[] Labels
{
get { return myVar; }
set { myVar = value; }
}
}
}