Pre loader

How to add border to chart

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

During migration from v3.1 to 6.5 I have noticed it no longer draws a border around the chart. How on earth do I add a border?
Applying a BorderBrush & BorderThickness to the ‘GridLinesPanel’ has no effect. Adding these to the SciChartSurface does produce a border, but it gets rendered on top of the series, obscuring values plotted along the very edge of the chart. I’ve attached an image showing what this looks like with and without a border (orange) applied to the SciChartSurface.

Version
6.5
Images
  • You must to post comments
0
0

Hi Andrew

Border to the chart? or to the axis which border the chart?

You can see our guidance here on templating and styling chart parts and example here

SciChartSurface.BorderThickness and BorderBrush seem to give the inner chart border that you are looking for

    <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" />
    </Style>

enter image description here

You can also individually style the borders of axis where they meet the chart. Have a look at the Multiple YAxis example which shows you how

  <s:NumericAxis AxisAlignment="Left"
                           AxisTitle="Left Axis 3"
                           BorderBrush="#FFFC9C29"
                           BorderThickness="0,0,1,0"
                           GrowBy="{StaticResource GrowBy2}"
                           Id="Left3"
                           TextFormatting="#.0"
                           TickTextBrush="#FFFC9C29" />

Will result in

enter image description here

Best regards,
Andrew

  • Andrew Stephens
    Thanks for the reply. Yes it’s the “inner” chart that I wanted the border on. I did find that setting the BorderThickness and BorderBrush on the SciChartSurface achieves this, but wasn’t sure if it was the “correct” solution as the border obscures any points that sit along the very edge of the chart, as per my screenshot (particularly if the series stroke thickness is 1 and antialiasing is disabled). In my screenshot the y-axis min is 0, and there are a number of points with y=0 that get obscured when the (orange) border is present. I’ve since found that adding a little transparency (alpha) to the border brush fixes this and is acceptable for my needs. I did look at applying borders to the axes, but there are so many scenarios and use cases for axes in our application that wouldn’t have been as simple as applying borders to a “global” style, while the SciChartSurface border approach could be applied in this way. I already have my work cut out with the 3.1 to 6.5 migration, so anything to speed up the move!).
  • Andrew Burnett-Thompson
    Fantastic, you can also try SnapsToDevicePixels and UseLayoutRounding which can solve subpixel issues. We’ve offered to assist the upgrade (but would be an hourly paid service) – our team knows SciChart better than anyone. Would this be a cost effective solution?
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies