How to overlap bars in Live charts

67 Views Asked by At

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.

IMAGE of Before and expected

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; }
        }

    }
}
0

There are 0 best solutions below