Jump to content
Software FX Community

Bar + Line chart with series offsets


Recommended Posts

I want to create a chart with bars and lines.

I want to show the line chart at an X-offset to the bar chart. I do not want the line point to show until AFTER every bar chart has been drawn.

This whiteboard chart shows what I want.

  • Bars represent % change for a single period
  • Lines represent the cumulative value of these percent changes as time goes on.

Posted Image

Is it possible to add this "offset"? I think I can do it if I manually track the points for the 2 separate series collections (bars and lines), but I am wondering if there is an easier way.

Thank you,



Link to comment
Share on other sites

Note that not only you want your lines to be offset but there are 4 values plotted for the bars but 5 for the lines. To achieve this you need something like this

Data Layer

  public class PercentChange


  public string Period { get; set; }

  public double YourPortfolio { get; set; }

  public double DJIA { get; set; }


  public class Growth


  public double YourPortfolio { get; set; }

  public double DJIA { get; set; }


  public static List<Growth> BuildGrowthTable (List<PercentChange> percentChanges, double startingValue)


  List<Growth> growth = new List<Growth>();

  double yourPortfolio = startingValue;

  double djia = startingValue;

  growth.Add(new Growth() { YourPortfolio = yourPortfolio, DJIA = djia });

  foreach (PercentChange percentChange in percentChanges) {

  yourPortfolio += (percentChange.YourPortfolio * yourPortfolio);

  djia += (percentChange.DJIA * djia);

  growth.Add(new Growth() { YourPortfolio = yourPortfolio, DJIA = djia });


  return growth;



Chart Code 


  List<PercentChange> percentChanges = new List<PercentChange>();

  percentChanges.Add(new PercentChange() { Period = "1Q08", YourPortfolio = 0.034, DJIA = 0.05 });

  percentChanges.Add(new PercentChange() { Period = "2Q09", YourPortfolio = 0.062, DJIA = 0.035 });

  percentChanges.Add(new PercentChange() { Period = "3Q09", YourPortfolio = -0.021, DJIA = 0.03 });

  percentChanges.Add(new PercentChange() { Period = "4Q09", YourPortfolio = 0.095, DJIA = 0.07 });


  chart1.Series.Add(new SeriesAttributes("YourPortfolio"));

  chart1.Series.Add(new SeriesAttributes("DJIA"));

  chart1.AxisX.Labels.BindingPath = "Period";

  chart1.AxisY.Labels.Format = AxisFormat.Percentage;

  chart1.AxisY.Position = AxisPosition.Far;

  chart1.AxisY.Grids.Major.Visibility = Visibility.Collapsed;

  chart1.ItemsSource = percentChanges;

  // Growth

  List<Growth> growth = Growth.BuildGrowthTable(percentChanges, 10000);


  Axis axisXGrowth = new Axis();

  axisXGrowth.Visibility = Visibility.Collapsed;

  axisXGrowth.AxisStyle |= AxisStyles.StartAtAxis;


  Axis axisYGrowth = new Axis();

  axisYGrowth.ForceZero = false;

  axisYGrowth.Min = 5000;

  axisYGrowth.Max = 20000;

  axisYGrowth.Step = 5000;

  axisYGrowth.Labels.Format = AxisFormat.Currency;

  axisYGrowth.Position = AxisPosition.Near;

  axisYGrowth.Grids.Major.Visibility = Visibility.Collapsed;

  axisYGrowth.Grids.Minor.TickMark = TickMark.None;


  BuildSeriesGrowth("YourPortfolio", axisXGrowth, axisYGrowth, growth, chart1.Series[0]);

  BuildSeriesGrowth("DJIA", axisXGrowth, axisYGrowth, growth, chart1.Series[1]);

  chart1.Style = ChartFX.WPF.Motifs.Basic.Style;


private SeriesAttributes BuildSeriesGrowth (string name, Axis axisX, Axis axisY, IEnumerable itemsSource, SeriesAttributes seriesModel)


  SeriesAttributes seriesGrowth = new SeriesAttributes(name);

  seriesGrowth.AxisX = axisX;

  seriesGrowth.AxisY = axisY;

  seriesGrowth.ItemsSource = itemsSource;

  seriesGrowth.Gallery = Gallery.Line;

  seriesGrowth.StrokeThickness = 2;

  seriesGrowth.Marker.Size = 10;

  // Make sure we use the same attributes as percent series

  seriesGrowth.Fill = seriesModel.Fill;

  seriesGrowth.Stroke = seriesModel.Stroke;

  seriesGrowth.Marker.Fill = seriesModel.Fill;

  seriesGrowth.Marker.Stroke = seriesModel.Stroke;

  // Hide this series from the legend box

  int seriesGrowthIndex = chart1.Series.Count;

  chart1.LegendBox.ItemAttributes[chart1.Series, seriesGrowthIndex].Visibility = Visibility.Collapsed;


  return seriesGrowth;


The only major difference between the chart generated by this code and your screenshot is that the 0 value for both axes will not be aligned, I will post later sample code on how to achieve this


Link to comment
Share on other sites

  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...