SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components



I’m currently reviewing the demo of SciCharts and have come across an issue with using CategoryDateTimeAxis with the stacked side-by-side bar chart.  Basically, there doesn’t appear to be a way that I can put two stacked bars next to each other for the exact same date.

If I use a true X,Y axis for X, such as DateTimeAxis or NumericAxis then I can bodge this by incrementing the DateTime by 1ms or something, but with CategoryDateTimeAxis, all DateTime differences have the same spacing so the bars will be far apart.

Here’s a modified version of the sample to demonstrate the issue:

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
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;
using Abt.Controls.SciChart.Model.DataSeries;
using Abt.Controls.SciChart.Visuals.RenderableSeries;

namespace Abt.Controls.SciChart.Example.Examples.IWantTo.CreateSimpleChart
    /// <summary>
    /// Interaction logic for StackedColumnChartSideBySideExampleView.xaml
    /// </summary>
    public partial class StackedColumnChartSideBySideExampleView : UserControl
        public StackedColumnChartSideBySideExampleView()

            var dataSeries = Enumerable.Range(1, 4).Select(i =>
                new XyDataSeries<DateTime, double> {SeriesName = string.Format("data{0}", i)})

            var rnd = new Random();
            foreach (var i in Enumerable.Range(0,30))
                var date = DateTime.Now.AddDays(i);
                foreach(var dataseries in dataSeries)
                    dataseries.Append(date, rnd.NextDouble());

            var stackedSeries = dataSeries
                    (series, i) =>
                        new StackedColumnRenderableSeries
                            StackedGroupId = i%2 == 0 ? "Primary" : "Secondary",
                            YAxisId = i%2 == 0 ? "Primary" : "Secondary",
                            SeriesColor = Color.FromRgb((byte)(rnd.Next() & 0xFF), (byte)(rnd.Next() & 0xFF), (byte)(rnd.Next() & 0xFF)),
                            DataSeries = series,

            using (this.sciChart.SuspendUpdates())
                this.sciChart.RenderableSeries = new ObservableCollection<IRenderableSeries>(stackedSeries);

And then the XAML:

<UserControl x:Class="Abt.Controls.SciChart.Example.Examples.IWantTo.CreateSimpleChart.StackedColumnChartSideBySideExampleView"
        <!--  Create the chart surface  -->
        <SciChart:SciChartSurface Name="sciChart">

            <!--  Create an X Axis  -->
                <SciChart:CategoryDateTimeAxis AxisTitle="Dates" />

            <!--  Create a Y Axis with GrowBy  -->
              <SciChart:NumericAxis AxisTitle="Primary Y-Axis" AxisAlignment="Left" GrowBy="0,0.1" Id="Primary" />
              <SciChart:NumericAxis AxisTitle="Secondary Y-Axis" GrowBy="0,0.1" Id="Secondary" />

So basically, you should see that all the bars are overlapped for one day when really, for each day, I’d like two bars side-by-side.

Am I missing something? Any help/pointers would be great 🙂

Many thanks!

  • You must to post comments

Hi Seb,

I’m suspecting its a bug, but I’m going to hand this over to Yuriy as my plate is full at the moment! I’ve pinged him and email to ask him to pick it up tomorrow.

Kind regards,

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.