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


Is there a recommended way to add a border to a chart’s surface (not the entire chart)? In v3.x the chart surface rendered its own “built-in” border, but after upgrading to v6.x it no longer does this.
In our products we usually disable all grid lines and bands too, so there is no “visual style” to help differentiate the chart surface from the surrounding page/window, hence the need for a border around it.

I’ve tried adding a border to the GridLinesPanelStyle but this has no effect. I can add a border to the SciChartSurface, but this gets rendered “on top”, obscuring any points or lines that sit on the very edge of the surface, e.g. in a line chart where several of the points might be Y=0, resulting in them being hidden behind the border’s bottom edge. Although this can be mitigated by adding a “GrowBy”, it’s not always practical/desirable.

  • You must to post comments

Hi Andrew

Our documentation & Examples on styling should cover this. Please take a look here:

SciChart WPF: Templating and Styling Chart Parts

<!--  Define styles for the GridLinesPanel  -->
<Style x:Key="GridLinesPanelStyle" TargetType="s:GridLinesPanel">
       <Setter Property="Background" Value="Pink"/>

<!-- Defines style for the SciChartSurface -->
<Style x:Key="SciChartSurfaceStyle" TargetType="s:SciChartSurface">
      <Setter Property="Background" Value="Orange"/
      <Setter Property="Padding" Value="20"/>
      <Setter Property="Foreground" Value="DarkOrchid"/>
      <Setter Property="FontSize" Value="20"/>
      <Setter Property="FontFamily" Value="Arial Black"/>
      <Setter Property="FontWeight" Value="Bold"/>
      <!-- Displays a border on the inner SciChartSurface -->
      <Setter Property="BorderThickness" Value="2"/>
      <Setter Property="BorderBrush" Value="SteelBlue"/>

<!-- Where xmlns:s="" -->
<s:SciChartSurface GridLinesPanelStyle="{StaticResource GridLinesPanelStyle}" Style="{StaticResource SciChartSurfaceStyle}">

This also links to the WPF Chart Xaml Styling example which has garish colours to show you how to style each individual chart part.

enter image description here

Please let me know if this helps

Best regards

  • Andrew Stephens
    Thanks for the quick reply. As mentioned in the original question, applying a border to GridLinesPanelStyle (as in the above example code) has no effect, although setting the b/g *does* work. I’ve just created a small standalone project (with none of my other SciChart styling, in case something here was interfering) and I see the same happen here.
  • Andrew Burnett-Thompson
    Hi Andrew, you’re absolutely right, the documentation is out of date, but the example is up to date. I’ve updated my code sample above. Setting SciChartSurface.BorderBrush and BorderThickness will now show the inner border inside the SciChartSurface. See the Blue line in the example referenced above.
  • Andrew Stephens
    Thanks again. This is how I had been applying the border since upgrading to 6.5, but as previously mentioned this border gets rendered “on top”, obscuring any series points/lines at the very edges of the chart surface.
  • Andrew Stephens
    Just to add, I’ve found that I can “re-template” the GridLinesPanel by assigning a ControlTemplate to the Template property within GridLinesPanelStyle. The ControlTemplate just contains a Border with required thickness and brush, and does render as I’d like (i.e. behind the series). Just wondering if there are any downsides to doing this though, i.e. will it break any other charting functionality or prevent other things from rendering properly (e.g. annotations)?
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.