Pre loader

Tag: Style

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

1 vote

Hello, how do I remove the shadow from tooltips, generated by the VerticalSliceModifier?


1 vote

I am working on a proof of concept for our company to move some of our desktop apps to the web. We use SciChart WPF in our desktop apps so we are going with SciChart.JS for the web apps. Is it possible to stack the FastLineRenderableSeries in SciChart.JS like we do in WPF?

Edit: Found the answer just after I posted this question.

sciChartSurface.layoutManager.leftOuterAxesLayoutStrategy = new LeftAlignedOuterVerticallyStackedAxisLayoutStrategy();

Screenshot of WPF Chart

0 votes

I want to use my custom image as a background for SciChart js.
I tried to put background-image to body of the page.
Then I enabled transparent background via:

sciChartSurface.backgroundCompletelyTransparentEnabled = true;

But it doesn’t work. It does nothing.
Then I tried to put transparent background to SciChart:

sciChartSurface.background = "#00000000";

But it doesn’t work as well. Chart completely disappears in this case.

How can I put my image as a background for SciChart?

  • Roman Zye asked 3 years ago
  • last active 3 years ago
0 votes

Hello Scichart team,

it’s possible to rotate yAxis (and put them horizontally), and adding some break lines if I have more than 1 word? Like:

Waiting for feedback.

Many thanks,

Pedro Cruz

1 vote

I am trying to modify the 3D Charts > Tooltips and Hit Test 3D Charts > Series Tooltips 3D Chart example to change the colour of the tooltip crosshairs to red. By crosshairs I mean the green lines in the image attached.

Green Crosshairs

I modified SeriesTooltips3DChart.xaml by adding:

        <Style x:Key="MyCrosshairOverlayStyle" TargetType="Line">
            <Setter Property="Stroke" Value="Red" />
            <Setter Property="StrokeThickness" Value="2" />
        <Style x:Key="MyCrosshairProjectionStyle" TargetType="t3D:CrosshairLines">
            <Setter Property="CrosshairOverlayStyle" Value="{StaticResource MyCrosshairOverlayStyle}" />
            <Setter Property="ProjectionMode" Value="Crosshair" />

and modifying the TooltipModifier3D element:

<t3D:TooltipModifier3D CrosshairMode="Lines" CrosshairPlanesFill="#33FF6600" CrosshairProjectionStyle="{StaticResource MyCrosshairProjectionStyle}" />

I expected this to apply the coloured lines but it did not. What have I misunderstood?

0 votes


I have created some ChartModifiers in a ModifierGroup in my ViewModel class (using Caliburn.Micro as MVVM framework, not code behind) and bound the group to my SciChartSurface in xaml. Now I want to apply some styles to my modfiers in xaml. Just creating styles with the specific target types don’t work so how do I do this?

  • Roland D asked 5 years ago
  • last active 5 years ago
0 votes

How can I apply my style and template to my axes if I created the axes as NumericAxisViewModel in code and bound them to my SciChartSurface in my xaml view?


  • Roland D asked 5 years ago
  • last active 2 years ago
0 votes

This might need to be two separate questions, but is there a way to select a point in a line series. or, can I style a pointMarker differently for each data point?

I would prefer to not have to do this with annotations.

0 votes


i’d like to style my major and minor grid lines so that they are not visible over the whole width of the chart but only in the center.
I tried to asign them a LinearGradientBrush, but that did not show the Gridline at all, clipping did not change anything on the visual appearance of the Gridlines. Are these stylings not supported for grid lines?

My styling of grid lines and axes look as the following:

<Setter Property="MajorGridLineStyle">
        <Style TargetType="{x:Type Line}">
            <Setter Property="Stroke" Value="DarkRed" />
            <Setter Property="StrokeThickness" Value="1" />
<Setter Property="MinorGridLineStyle">
        <Style TargetType="{x:Type Line}">
            <Setter Property="Stroke" Value="Gray" />
            <Setter Property="StrokeThickness" Value="1" />
            <s:NumericAxis VisibleRange="{Binding ScaleBarRange}"
                           Style="{StaticResource ScaleStyle}">
            <s:NumericAxis Visibility="Collapsed"
                           DrawMajorGridLines="False" />

I attached an image that shows approximately how i’d like it to be and i already have a workaround using two surfaces overlayed over each other, but that one i’d really like to get rid of.
I’d be thankful for a hint that allows me to individually crop/clip grid lines.


0 votes

Looking at the documentation I’ve figured out how to style the content of the tooltip. But I can’t seem to figure out how to style the container.

You can see in the attached image the automatic blue background that matches the series. I would like to style it with our own style which is the dark background and then BorderBrush that matches the series color.

<DataTemplate x:Key="DigitalToolTipTemplate" DataType="s:XySeriesInfo">
                    <Border Style="{StaticResource BorderStyle}" BorderBrush="{Binding Stroke}">
                        <TextBlock Text="{Binding SeriesName, StringFormat='{}{0}'}" />

This seems to style only the inner contents of the tooltip but not the whole tooltip.

Also note the BorderBrush binding (not sure if this is correct to get the series color).

Now using the following code (which is working) — Now the only thing I need to figure out is what to bind for the stroke to get the series color as the border stroke.

<Style x:Key="DigitalToolTipStyle" TargetType="s:TooltipControl">
                    <Setter Property="Template">
                            <ControlTemplate TargetType="s:TooltipControl">
                                <Border Style="{StaticResource BorderStyle}" BorderBrush="{Binding Stroke}">
                                    <ContentPresenter Content="{TemplateBinding DataContext}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
0 votes
0 answers


I like to display the SciChart in the extra content of a PropertyItem from a PropertyGrid. But the axes and line series are not visible because the styles are not loaded. This problem happens only if I display the SciChart inside a PropertyGrid and only with SciChart. All other controls can be displayed inside the PropetyGrid easy…

How to load the SciChart style?

I am using SciChart. with .NET 4.5.1 and the PropertyGrid from Extended WPF Toolkit

Best regards

0 votes


I want to style the splitter between panes of the SciCharGroup, like changing its height and color.

By using snoop, I can see that the splitter actually is a Thumb control, and SciChart applies a ControlTemplate on it(maybe I’m wrong).
But I still have no idea how to style it.

I need your help.

  • Yuhang Ji asked 8 years ago
  • last active 8 years ago
0 votes

I have a YAxis(NumericAxis) that indicates price, now I want to set different color to the label text(please see the uploaded image):

I’ve seen the ILabelProvider, but it seems to set string format.
How should I do?

  • Yuhang Ji asked 8 years ago
  • last active 8 years ago
1 vote

Have a good day!
Is there any method to make ticks go inside the chart? And how can I change length of tick line?

I’ve attached an image of desired result below.
Thanks in advance

  • Egor asked 9 years ago
  • last active 9 years ago
Showing 14 results

Try SciChart Today

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

Start TrialCase Studies