Area chart question

Hello Jason,

I have a question on Area Chart. Is there is a possibility to display area series between Min and Max Lines? (In provided sample all area series are displayed between Line and Axis X)

Example:

Thanks, Pavel

Hi Pavel,

Unfortunately we don't currently have Range charts, and don't have plans to add them in the near future. However, you would be able to create this type of chart by using a couple of StackedAreaSeries. The first StackAreaSeries that you add to the chart would provide the bottom line of data. Then set the AreaStyle and LineStyle of this series to be styles that make the Fill and Stroke of the Path transparent. Then the second StackAreaSeries that you add to the chart will automatically sit on top of the first series and create the range-area chart like in your sample image.

To manage the data for this, I would recommend creating a custom class that contains X, Y1 and Y2 properties. Then you can have a single collection of data that both series bind to. Then you can set the XBinding and YBinding properties of each series to point to the appropriate properties to get the plotting data.

I hope this solution works well for you, please let me know if you have any questions about this.

-Jason Fauchelle

Thank you for the quick response.

Before I asked the question, I tried this workaround on provided samples ;) I added two StackAreaSeries and set Series Brush of one of them to be transparent. I got some difference in colors between chart background and StackAreaSeries (that have transparent series brush).

Example:

<ms:Chart Title="Product sales in top 3 countries (Year 2008)">
  <ms:StackedAreaSeries ItemsSource="{Binding Data1}" SeriesBrush="Transparent" Title="America" />
  <ms:StackedAreaSeries ItemsSource="{Binding Data2}" SeriesBrush="{Binding Palette[1]}" Title="Germany" />
  <ms:Chart.BackgroundElements>
    <ms:ChartGrid MinorHorizontalGridLineBrush="#AAAAAA" MinorHorizontalDashArray="2,2" />
  </ms:Chart.BackgroundElements>
  <ms:Chart.XAxis>
    <ms:ChartAxis Title="Date" LabelFormat="{}{0:dd/MMM}" ValueConverter="{StaticResource DateTimeScale}" Style="{StaticResource AxisStyle}" />
  </ms:Chart.XAxis>
  <ms:Chart.YAxis>
    <ms:ChartAxis Title="Sales (Thousands)" MinorTickMarkVisibility="Visible" LabelFormat="{}{0:$0.00}"
                  Style="{StaticResource AxisStyle}" />
  </ms:Chart.YAxis>
</ms:Chart>

How can I overcome this problem? (I understand that for the full solution I need set the AreaStyle and LineStyle of this series to be styles that make the Fill and Stroke of the Path transparent, instead of set Series brush to be transparent)

Thanks, Pavel

Hi Pavel,

Your understanding of the solution is spot on! Here is a code example of the transparent area style:

<Style x:Key="HiddenAreaStyle" TargetType="Path">
  <Setter Property="Fill" Value="Transparent" />
</Style>

Set this resource to the AreaStyle property of the first stacked area series. Setting the SeriesBrush to transparent is enough to make the border line disappear. Alternatively, you may want to set the SeriesBrush (or possibly the LineStyle) of the first series to be the same as the second series to give the second series an solid outline along the bottom edge of the area. Totally up to your requirements for the visual display of the chart.

Additionally, you'll probably want to set IsShownInLegend to false on the first series to remove it from the legend.

Let me know if you have further questions about setting this up.

-Jason Fauchelle