How to change the boxplot width and etc.

Hi Jason,

We have a boxplot which have 4 series: General Solution, Optimal Solution, Base Case and 5 Star as shown on the attached image.

General Solution has 180 point, Optimal and Base case has only 1 point each and 5 star has 3 points.

Our problem is that the series which has one point is too wide and it hides the General Solution Series.

My questions are:

1. How to put up the maximum width for the box, so that when it only has one point, it will not be too wide like that?

2. Can we change the box background to be transparent or half transparent or any other color?

3. The symbol on the legend is just showing the box, can you make it to show the same symbol as in the graph? right now it looks like a check box on the legend which will confuse user.

Thanks a lot! Gordon

Hi Gordon,

Here is a modified version of the default style, you can modify this further and use it to set the BoxAndWhiskerStyle property of each series:

  <ms:ArithmeticConverter x:Key="Half" Multiplier="0.5" />
  <ms:DoubleToThicknessConverter x:Key="DoubleToThickness" IsTop="True" />
  <ms:DoubleToThicknessConverter x:Key="DoubleToThicknessRight" IsRight="True" />

  <ControlTemplate x:Key="VerticalBoxAndWhiskersTemplate" TargetType="ms:BoxAndWhiskers">
    <Grid Width="{Binding BoxWidth}">
      <Path Stroke="{TemplateBinding Background}" StrokeThickness="2" StrokeDashArray="3,3" Data="M 0 0 L 0 1" Stretch="Fill"
        Width="2" Height="{TemplateBinding MinimumPosition}" HorizontalAlignment="Center" />
      <Border Background="{TemplateBinding Background}" HorizontalAlignment="Center" Height="2"
          Width="{TemplateBinding BoxWidth, Converter={StaticResource Half}}" VerticalAlignment="Top" />
      <Border Background="{TemplateBinding Background}" HorizontalAlignment="Center" Height="2"
          Width="{TemplateBinding BoxWidth, Converter={StaticResource Half}}" VerticalAlignment="Bottom" />
      <Border Width="{TemplateBinding BoxWidth}" Height="{TemplateBinding BoxHeight}" BorderThickness="2" BorderBrush="{TemplateBinding Background}"
          VerticalAlignment="Top" HorizontalAlignment="Center" Background="Transparent"
          Margin="{Binding UpperQuartilePosition, Converter={StaticResource DoubleToThickness}, RelativeSource={RelativeSource TemplatedParent}}" />
      <Border Background="{TemplateBinding Background}" HorizontalAlignment="Center" Height="4"
          Width="{TemplateBinding BoxWidth}" VerticalAlignment="Top"
          Margin="{Binding MedianPosition, Converter={StaticResource DoubleToThickness}, RelativeSource={RelativeSource TemplatedParent}}">
        <Border.RenderTransform>
          <TranslateTransform Y="-2" />
        </Border.RenderTransform>
      </Border>
    </Grid>
  </ControlTemplate>

  <ControlTemplate x:Key="HorizontalBoxAndWhiskersTemplate" TargetType="ms:BoxAndWhiskers">
    <Grid Height="{Binding BoxWidth}">
      <Path Stroke="{TemplateBinding Background}" StrokeThickness="2" StrokeDashArray="3,3" Data="M 0 0 L 1 0" Stretch="Fill"
        Height="2" Width="{TemplateBinding MinimumPosition}" VerticalAlignment="Center" />
      <Border Background="{TemplateBinding Background}" VerticalAlignment="Center" Width="2"
          Height="{TemplateBinding BoxWidth, Converter={StaticResource Half}}" HorizontalAlignment="Right" />
      <Border Background="{TemplateBinding Background}" VerticalAlignment="Center" Width="2"
          Height="{TemplateBinding BoxWidth, Converter={StaticResource Half}}" HorizontalAlignment="Left" />
      <Border Height="{TemplateBinding BoxWidth}" Width="{TemplateBinding BoxHeight}" BorderThickness="2" BorderBrush="{TemplateBinding Background}"
          HorizontalAlignment="Right" VerticalAlignment="Center" Background="Transparent"
          Margin="{Binding UpperQuartilePosition, Converter={StaticResource DoubleToThicknessRight}, RelativeSource={RelativeSource TemplatedParent}}" />
      <Border Background="{TemplateBinding Background}" VerticalAlignment="Center" Width="4"
          Height="{TemplateBinding BoxWidth}" HorizontalAlignment="Right"
          Margin="{Binding MedianPosition, Converter={StaticResource DoubleToThicknessRight}, RelativeSource={RelativeSource TemplatedParent}}">
        <Border.RenderTransform>
          <TranslateTransform X="-2" />
        </Border.RenderTransform>
      </Border>
    </Grid>
  </ControlTemplate>

  <Style x:Key="BoxplotStyle" TargetType="ms:BoxAndWhiskers">
    <Setter Property="Template" Value="{StaticResource VerticalBoxAndWhiskersTemplate}" />
    <Style.Triggers>
      <DataTrigger Binding="{Binding Orientation, RelativeSource={RelativeSource Self}}" Value="Horizontal">
        <Setter Property="Template" Value="{StaticResource HorizontalBoxAndWhiskersTemplate}" />
      </DataTrigger>
    </Style.Triggers>
  </Style>

To answer your second question, the background of the box can be controlled within this style. This is normally White, but I've changed it to Transparent here. Note that this will mean you can see the dotted line go all the way through from the top to the bottom, so you may want to split this into 2 lines.

For your first question, you can set a MinWidth or MinHeight in the templates of this style to control the size. You may need to tweak the templates to make this easier for you. For example, some of the BoxWidth values are used with a converter which makes limiting the size a bit difficult. You may want to try set the BoxWidth on the outer Grid, and then anything that needs to use the width, binds to the ActualWidth of the Grid. Or an alternative would be creating your own "ArithmeticConverter" that includes a limit. I haven't tried these though. In any case, you have full power of modifying the template to provide any kind of look you want.

Good point about the default boxplot legend icon. Fortunately you can overwrite this by setting the LegendIconTemplate property of each series.

-Jason Fauchelle

Hi Jason,

Thanks for the reply. I did the following:

<ControlTemplate x:Key="VerticalBoxAndWhiskersTemplate" TargetType="ms:BoxAndWhiskers">
        <Grid Name="Grid"  *Width="10"*  >
            <Path Stroke="{TemplateBinding Background}" StrokeThickness="2" Data="M 0 0 L 0 1" Stretch="Fill"
        Width="2" Height="{TemplateBinding MinimumPosition}" HorizontalAlignment="Center" />
            <Border Background="{TemplateBinding Background}" HorizontalAlignment="Center" Height="2"
          Width="{Binding Width, ElementName=Grid}" VerticalAlignment="Top" />
            <Border Background="{TemplateBinding Background}" HorizontalAlignment="Center" Height="2"
          Width="{Binding Width, ElementName=Grid}" VerticalAlignment="Bottom" />
            <Border Width="{Binding Width, ElementName=Grid}" Height="{TemplateBinding BoxHeight}" BorderThickness="2" BorderBrush="{TemplateBinding Background}"
          VerticalAlignment="Top" HorizontalAlignment="Center" Background="Transparent"
          Margin="{Binding UpperQuartilePosition, Converter={StaticResource DoubleToThickness}, RelativeSource={RelativeSource TemplatedParent}}" />
            <Border Background="{TemplateBinding Background}" HorizontalAlignment="Center" Height="4"
          Width="{Binding Width, ElementName=Grid}" VerticalAlignment="Top"
          Margin="{Binding MedianPosition, Converter={StaticResource DoubleToThickness}, RelativeSource={RelativeSource TemplatedParent}}">
                <Border.RenderTransform>
                    <TranslateTransform Y="-2" />
                </Border.RenderTransform>
            </Border>
        </Grid>
    </ControlTemplate>

Binding the Borders' Width to ActualWidth of the outer Grid is not working well, so I bind it to the Grid's width.

The problem is that the width is fixed, and cannot change to different width easily/dynamically. Is it possible somehow we can binding the outer Grid width to BoxPlotSeries width like the scatter series or line series?

Thanks, Gordon

Hi Jason,

I found solution to my problem by binding Grid's width to Chart.Tag as:

<ControlTemplate x:Key="VerticalBoxAndWhiskersTemplate" TargetType="ms:BoxAndWhiskers">
        <Grid Name="Grid"  Width="{Binding Tag, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ms:Chart}}}"  >
            <Path Stroke="{TemplateBinding Background}" StrokeThickness="2" Data="M 0 0 L 0 1" Stretch="Fill"
        Width="2" Height="{TemplateBinding MinimumPosition}" HorizontalAlignment="Center" />
            <Border Background="{TemplateBinding Background}" HorizontalAlignment="Center" Height="2"
          Width="{Binding Width, ElementName=Grid}" VerticalAlignment="Top" />
            <Border Background="{TemplateBinding Background}" HorizontalAlignment="Center" Height="2"
          Width="{Binding Width, ElementName=Grid}" VerticalAlignment="Bottom" />
            <Border Width="{Binding Width, ElementName=Grid}" Height="{TemplateBinding BoxHeight}" BorderThickness="2" BorderBrush="{TemplateBinding Background}"
          VerticalAlignment="Top" HorizontalAlignment="Center" Background="Transparent"
          Margin="{Binding UpperQuartilePosition, Converter={StaticResource DoubleToThickness}, RelativeSource={RelativeSource TemplatedParent}}" />
            <Border Background="{TemplateBinding Background}" HorizontalAlignment="Center" Height="4"
          Width="{Binding Width, ElementName=Grid}" VerticalAlignment="Top"
          Margin="{Binding MedianPosition, Converter={StaticResource DoubleToThickness}, RelativeSource={RelativeSource TemplatedParent}}">
                <Border.RenderTransform>
                    <TranslateTransform Y="-2" />
                </Border.RenderTransform>
            </Border>
        </Grid>
    </ControlTemplate>

In the Chart FinishedPlottingData events handler I do enumeration on all the BoxPlotSeries and get the minimum one and set Tag value to this minimum.

Also, since I change the boxwidth then I need to change the Canvas.Left for each datapoint as:

foreach (var series in theChart.Series)
            {
                if (series is BoxplotSeries)
                {
                    BoxplotSeries theBoxPlotSeries = series as BoxplotSeries;

                    if (theBoxPlotSeries.DataPoints != null &&
                        theBoxPlotSeries.DataPoints.Count > 0)
                    {
                        foreach (var point in theBoxPlotSeries.DataPoints)
                        {
                            BoxAndWhiskers bawPoint = point as BoxAndWhiskers;
                            if (bawPoint != null)
                            {
                                double oldLeft = Canvas.GetLeft(bawPoint);
                                double oldWidth = bawPoint.BoxWidth;
                                double newLeft = oldLeft + (oldWidth - newWidth)/2.0;
                                Canvas.SetLeft(bawPoint, newLeft);
                            }
                        }
                    }
                }
            }

Even though it works, I think I need to do too much for these get fixed. Not like it.

Do you have better way to do it?

Thanks, Gordon

Hi Gordon,

I've found a better way to get the result you want. Here's example code for the vertical template:

  <ControlTemplate x:Key="VerticalBoxAndWhiskersTemplate" TargetType="ms:BoxAndWhiskers">
    <Grid Width="{TemplateBinding BoxWidth}">
      <Path Stroke="{TemplateBinding Background}" StrokeThickness="2" StrokeDashArray="3,3" Data="M 0 0 L 0 1" Stretch="Fill"
        Width="2" Height="{TemplateBinding MinimumPosition}" HorizontalAlignment="Center" />
      <Border Background="{TemplateBinding Background}" HorizontalAlignment="Center" Height="2" MaxWidth="13"
          Width="{TemplateBinding BoxWidth, Converter={StaticResource Half}}" VerticalAlignment="Top" />
      <Border Background="{TemplateBinding Background}" HorizontalAlignment="Center" Height="2"
          Width="{TemplateBinding BoxWidth, Converter={StaticResource Half}}" VerticalAlignment="Bottom" MaxWidth="13" />
      <Border Width="{TemplateBinding BoxWidth}" Height="{TemplateBinding BoxHeight}" BorderThickness="2" BorderBrush="{TemplateBinding Background}" MaxWidth="26"
          VerticalAlignment="Top" HorizontalAlignment="Center" Background="Transparent"
          Margin="{Binding UpperQuartilePosition, Converter={StaticResource DoubleToThickness}, RelativeSource={RelativeSource TemplatedParent}}" />
      <Border Background="{TemplateBinding Background}" HorizontalAlignment="Center" Height="4" MaxWidth="26"
          Width="{TemplateBinding BoxWidth}" VerticalAlignment="Top"
          Margin="{Binding MedianPosition, Converter={StaticResource DoubleToThickness}, RelativeSource={RelativeSource TemplatedParent}}">
        <Border.RenderTransform>
          <TranslateTransform Y="-2" />
        </Border.RenderTransform>
      </Border>
    </Grid>
  </ControlTemplate>

I left the outer grid alone, and instead, set the MaxWidth of all the internal visuals (except the central vertical dash line). Unlike what I said previously about creating a custom converter with a maximum option - all you need to do for the lines that are half the width (indicating the min and max points) you just set their MaxWidth to half the MaxWidth of what you set to everything else. In the example above, I'm setting the MaxWidth of most of the visuals to 26, and the MaxWidth of the min/max lines to 13.

Since each internal visual is centered within the outer grid, there is no need to mess around with adjusting the canvas position with the above code. Note that the outer Grid should use a TemplateBinding (like in the above code) rather than a plain Binding (like in the code I posted previously).

If you want a fixed width, rather than setting the MaxWidth property, you could change all the Width property values to be fixed, rather than using bindings. How you want to customize the template is totally up to what you want.

-Jason Fauchelle

Thanks for your suggestions.

1) Fixed the width will not work well when you zoom

2) Set Maximum width will not working if we want to have same width for all the box plot series

I guess I have to stick to my crappy solution...