Range Overlap Bar Chart

Question

I am creating a Range Overlap Bar Chart that should display multi-value in a single bar and should change the color. In order to make what I want say clear I made a draw:

Answer 1

Style MyExpenseBarDataPointStyle = (Style)this.FindResource("MyExpenseBarDataPointStyle");
Style MyBudgetBarDataPointStyle = (Style)this.FindResource("MyBudgetBarDataPointStyle");
BarSeries barSeriesExpense = new BarSeries();
barSeriesExpense.Name = Name.Replace(" ", "");
BarSeries barSeriesBudget = new BarSeries();
barSeriesBudget.Title = "Budget";
barSeriesBudget.Name = Name.Replace(" ", "");
barSeriesExpense.Title = "Dépense";
barSeriesExpense.DataPointStyle = MyExpenseBarDataPointStyle;
barSeriesBudget.DataPointStyle = MyBudgetBarDataPointStyle;


barSeriesExpense.IndependentValueBinding = new Binding("Key"); //date  l'axe des X
barSeriesExpense.DependentValueBinding = new Binding("Value"); //money l'axe des Y
barSeriesBudget.IndependentValueBinding = new Binding("Key"); //date  l'axe des X
barSeriesBudget.DependentValueBinding = new Binding("Value"); //money l'axe des Y
barSeriesExpense.ItemsSource = dataSource;
barSeriesBudget.ItemsSource = dataSourceMax;
LineChart.Series.Add(barSeriesBudget);
LineChart.Series.Add(barSeriesExpense);

Answer 2

<UserControl x:Class="Budget.Summary.UserCtrlChartCategories"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         
         xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit"
         xmlns:local="clr-namespace:Budget.Summary"
         mc:Ignorable="d" x:Name="userCtrl"
         d:DesignHeight="450" d:DesignWidth="800" 
         Loaded="UserControl_Loaded" 
         Unloaded="UserControl_Unloaded" >
<UserControl.Resources>
    <Style x:Key="MyExpenseBarDataPointStyle" TargetType="{x:Type chartingToolkit:BarDataPoint}">
        <Setter Property="Height" Value="20" />
        <Setter Property="Background" Value="Red" />
        <Setter Property="BorderBrush"  Value="Black" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="RenderTransformOrigin" Value="0.5, 0.5"/>
        <Setter Property="RenderTransform" >
            <Setter.Value>
                <TransformGroup>
                    <ScaleTransform ScaleY="1.0"/>
                    <TranslateTransform  Y="{Binding Path=ActualHeight, RelativeSource={RelativeSource AncestorType=chartingToolkit:BarDataPoint},Converter={StaticResource NegativeValueConverter}}" />
                </TransformGroup>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:BarDataPoint}">
                    <Border x:Name="Root"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}">
                        <Border.ToolTip>
                            <ContentControl Content="{TemplateBinding FormattedDependentValue}" />
                        </Border.ToolTip>
                        <Grid Background="{TemplateBinding Background}">
                            <Rectangle>
                                <Rectangle.Fill>
                                    <LinearGradientBrush>
                                        <GradientStop Color="#77FFFFFF"  Offset="0" />
                                        <GradientStop Color="Transparent" Offset="1" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Border BorderBrush="#CCFFFFFF"  BorderThickness="1">
                                <Border BorderBrush="#77FFFFFF"  BorderThickness="1" />
                            </Border>
                            <Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0" />
                            <Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="MyBudgetBarDataPointStyle"
     TargetType="{x:Type chartingToolkit:BarDataPoint}">
        <Setter Property="Background" Value="Green" />
        <Setter Property="BorderBrush"  Value="Black" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:BarDataPoint}">
                    <Border x:Name="Root"
                          BorderBrush="{TemplateBinding BorderBrush}"
                          BorderThickness="{TemplateBinding BorderThickness}">
                        <Border.ToolTip>
                            <ContentControl Content="{TemplateBinding FormattedDependentValue}" />
                        </Border.ToolTip>
                        <Grid Background="{TemplateBinding Background}">
                            <Rectangle>
                                <Rectangle.Fill>
                                    <LinearGradientBrush>
                                        <GradientStop Color="#77FFFFFF"  Offset="0" />
                                        <GradientStop Color="Transparent" Offset="1" />
                                    </LinearGradientBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <Border BorderBrush="#CCFFFFFF"  BorderThickness="1">
                                <Border BorderBrush="#77FFFFFF"  BorderThickness="1" />
                            </Border>
                            <Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0" />
                            <Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0" />
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>


<Grid>
    <Grid >
        <!--https://www.c-sharpcorner.com/UploadFile/mahesh/bar-chart-in-wpf/-->
        <chartingToolkit:Chart x:Name="LineChart"  
            Title="{Binding Title,RelativeSource={RelativeSource AncestorType=UserControl}}" Margin="10,10,10,0" 
               Background="LightBlue" >
            <chartingToolkit:Chart.Resources>
            </chartingToolkit:Chart.Resources>

            <chartingToolkit:Chart.Axes>
                <chartingToolkit:LinearAxis  Orientation="X" />
            </chartingToolkit:Chart.Axes>
        </chartingToolkit:Chart>
    </Grid>
</Grid>

Answer 3

You can use Microsoft Chart Controls in Visual Studio toolbox. You will have to create multiple series as you want to show an overlap chart. This link will help you.

Here is some code...

DataSet dataSet;
ConnectionClass.GetInstance().connection_string = Properties.Settings.Default.MindMuscleConnectionString;
ConnectionClass.GetInstance().Sql = "Select Count(MemberInfo.memberName) as 'Members', CompetitionName as 'Competition' FROM MemberInfo, MemberBodyInfo, Competition WHERE MemberInfo.memberID = MemberBodyInfo.memberID AND MemberBodyInfo.weight >= Competition.CompetitionCategory and MemberBodyInfo.weight <= Competition.CompetitionCategory + 5 group by CompetitionName;";
dataSet = ConnectionClass.GetInstance().GetConnection;
chart1.Series["Series1"].Name = "Members";
chart1.Series["Members"].YValueMembers = "Members";
chart1.Series["Members"].XValueMember = "Competition";
chart1.Series.Add("Members2");
chart1.Series["Members2"].ChartType = SeriesChartType.StackedColumn;
chart1.Series["Members2"].IsValueShownAsLabel = true;
chart1.Series["Members2"].YValueMembers = "Members";
chart1.Series["Members2"].XValueMember = "Competition";
this.chart1.Titles.Add("Competition Participants");   // Set the chart title
chart1.Series["Members"].ChartType = SeriesChartType.StackedColumn;
chart1.Series["Members"].IsValueShownAsLabel = true;  // To show chart value 
chart1.DataSource = dataSet;
chart1.DataBind();

It will look like:

I have not actually created a new series from some different data... Both series are same here but I have just showed you an example. You will have to populate your series using your data.

Now if you change

chart1.Series["Members2"].ChartType = SeriesChartType.StackedColumn;
chart1.Series["Members"].ChartType = SeriesChartType.StackedColumn;

to

chart1.Series["Members2"].ChartType = SeriesChartType.StackedBar;
chart1.Series["Members"].ChartType = SeriesChartType.StackedBar;

The chart will look like exactly your drawing: