Chart - Scatter Series Styling

See the screenshot below. I have a chart with 2 Bar Series. The Bar Series represent a number of "sales". What I need to do is to display the "target". I thought I could display the targets as 2 Scatter Series. These are displayed as the circles. As you can see the scatter series circles are displayed above each other (both in the centre of the X axis value.

What I need to be able to do is to have the scatter series circle be centred above the corresponding bar. Is there any way I can style the Scatter series to get this effect?

I guess actually the first prize is for me to be able to display a [red] line across the Bar that denotes the target value if there are any suggestions you could make to further style/replace the scatter series.

note: currently using v6.0.2509.23016 of WPF Elements

Hello David

The final outcome you want is possible, but can not be done with scatter series because the logic for putting bars side-by-side is specific to bar series and is not exposed. We can however use another set of BarSeries which is fortunate because this also happens to be the easiest way style [red] lines.

If you were to add more bar series however, they would end up being rendered side-by-side the existing bars which is not right. We want the new bar series to overlap the existing bars. To achieve this, I've made a small change to bar series so that they will only be side-by-side if the share the same X-axis. So first, make sure to get the next nightly build. Once you have this, add a new ChartAxis to your chart as shown below. Set the height to 0 as we don't need it to be displayed:

<ms:Chart.AlternativeXAxes>
  <ms:ChartAxis Title="SecondX" Height="0" />
</ms:Chart.AlternativeXAxes>

Next add 2 more bar series to the chart. These will replace the ScatterSeries you are currently using but will still use the same data. Also, set the XAxisTitle property of them to be the same title as the new axis added in the previous step ("SecondX" is what I've used). This will cause the 2 new bar series to have a different X-axis to your existing bar series. As a result the 2 sets of bars series will overlap each other.

Finally, you can create a Bar style as follows which only renders the top line rather than the whole rectange. Use this to set the BarStyle property of the 2 new bar series.

<Style x:Key="BarLineStyle" TargetType="ms:Bar">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate>
        <Border BorderThickness="0,2,0,0" BorderBrush="Red" />
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

I know this solution is a little odd, but it is the easiest solution I have so far. Let me know if you need help with this.

Jason Fauchelle

Jason,

This works perfectly - exactly as you described. Thank you for taking the time to provide a working alternative to my problem.

David