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

1 vote

I am working on Android Application and I have a different requirement where I want to display all the values String array on XAxis, I don’t want to use DateAxis nor VisibleRange function, also no value should be hidden as we are not giving any zoom-in and out functionality in our app.

I would really appreciate if you can please assist with this


1 vote

I have some 3 dimension data that I have successfully generated a 3D surface mesh chart out from in WPF. However, I want to generate a 2D plot from the 3D chart given some parameters (e.g. a x-value, a y-value etc.). Can anyone advise on the best way to extract a 2D plot from a 3D chart?

  • Gil Owu asked 3 months ago
  • last active 2 months ago
1 vote
0 answers


I am working on an android application for the tablet view I need to write and show XAxis with the following information

  1. 1 Day => need to show 24 XAxis ticks with 1 hour each with a difference of 10 means e.g 10:10, 11:10, 12:10 and so on
  2. 3 Day => need to show 4 XAxis ticks like if that covers 72 hours by showing the date
  3. 1 Month => need to show 30 XAxis ticks with a date, 1 day each

the difficulty I m facing is that I m not finding any starting point to do the above things properly, I tried DateSeries but the date is showing dynamically and there is no how to define starting and endpoint


1 vote

I have a bunch of series (XyScatterSeries) that I am using to draw different markers (triangle, circle, cross) based on the data. I also have couple line series too in the chart.

The line series should be displayed in the LegendModifier, but not any of the scatter series.

I tried setting “includeSeries” function here but that didn’t work (typescript kept complaining about it but I kept it and while running the app it didn’t hide the series):

return new LegendModifier({
        showCheckboxes: true,
        orientation: ELegendOrientation.Vertical,
        placement: ELegendPlacement.TopRight,
        includeSeries: (series: IRenderableSeries, isIncluded: boolean): void => { return false; },

Then I created my own class “MyLegendModifier” deriving from LegendModifier, but that didn’t do anything either.

class MyLegendModifier extends LegendModifier {
    constructor(options?: ILegendModifierOptions) {

    includeSeries(series: IRenderableSeries, isIncluded: boolean) {
        if ('BUY:') ||'SELL:')) {
            isIncluded = false;
        super.includeSeries(series, isIncluded);

Any advise please.

1 vote

Hi there,

I have downloaded the examples from SciChart GitHub and I found error where most of the demos cannot be compiled. I run the following command which are “npm install” and “npm start”, at the end it says failed to compile. I have included one of the demos screenshot on what it shows. May I know why and how to resolve this issue ?

Thank you 🙂

0 votes
0 answers

Hi there

I’m using Column Chart with LogarithmicNumericAxis for the Y axis. I noticed a crazy thing that the baseline in my chart is set to 1*E-5 by default and not modifiable.

Is there any way to change this baseline?

0 votes

I have some FastLineRenderableSeries that display the user’s real time data.
I let the user set a trigger for a specific line and when the line crosses the trigger value the SciChartSurface freezes.
I would like to add that when this happens, the activated point will be highlighted or mark in a way the user will see exactly where it is…
Is there a simple way to do this?

(the orange line is the trigger…)

1 vote

I have a top chart that is a heatmap and there is another bottom chart that is a temperature map. I want the heatmap not show any y-axis labels but still keep the x-axis start aligned from the left side. I tried turning off the y-axis lables (which I do not need in the heatmap), but that moves the heatmap to the left and not kept aligned with the bottom chart.

const yAxis = new NumericAxis(wasmContext, {
autoRange: EAutoRange.Always,
labelFormat: ENumericFormat.Decimal,
labelPrecision: 2,
labelPostfix: "C",
drawLabels: false

The above code hides the y-axis labels but also removes the space on the left side so the x-axis of both graphs does not remained aligned. I need a way to somehow keep the start of x-axis aligned for both top and bottom graphs.

1 vote

I have a simple need to display a horizontal heatmap based on values along the x-axis. So if value on x-axis is 1, color shown on the heatmap should be orange, if the next value is 2, red color bar appears to next the previous orange etc. Something like this (see attached graphic also):

Heatmap: [=orange=red=green]
values along x-axis: [22.05, 24.00, 30.00 ]

So the code I am trying is as follows:

export async function renderHeatMap(element) 
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(element);

    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

    var heatMapData = zeroArray2D([1, 5]);
    heatMapData[0][0] = 22.05; //should appear as color1 in heatmap
    heatMapData[0][1] = 24.00; //...
    heatMapData[0][2] = 30.00; //should appear as color2 in heatmap
    heatMapData[0][3] = 26.75;
    heatMapData[0][4] = 30.00; //should appear as color3 in heatmap

    const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, 0, 1, 0, 1, heatMapData);

    const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
        dataSeries: heatmapDataSeries,
        colorMap: new HeatmapColorMap({
            minimum: 20, // min value in the zValues (data) to map to offset 0 in the colormap
            maximum: 30, // max value in the zValues (data) to map to offset 1 in the colormap
            gradientStops: [
                { offset: 0, color: "#00008B" },
                { offset: 0.3, color: "#7FFF00" },
                { offset: 0.7, color: "#FFFF00" },
                { offset: 1.0, color: "#FF0000" },


But this only displays an empty grid. I don’t see a heatmap. Anyone can point out what may be wrong? Not even the axis is showing up correctly.

0 votes

There are multiple Y axes in my chart. I am displaying grid lines only for the primary axis and I would like to change its color. Please let me know how it might be possible.
I have tried style and it works for X axis (single axes) but doesn’t for Y axes (multiple)

    <Style x:Key="MajorGridLineStyle" TargetType="Line">
        <Setter Property="Stroke" Value="Red"/>

            <s:NumericAxis AxisTitle="{Binding XAxisTitle}" DrawMajorBands="False" DrawMinorGridLines="False" DrawMinorTicks="False"
                           MajorGridLineStyle="{StaticResource MajorGridLineStyle}"/>

I have also tried majorgridlinebrush in my viewmodel but it doesn’t work. Some default color is show for the gridlines

        YAxes.Add(new NumericAxisViewModel
            DrawMajorBands = false,
            DrawMinorGridLines = false,
            DrawMinorTicks = false,
            MajorGridLinesBrush = new SolidColorBrush(Colors.Red)
1 vote

Sorry. My English is not good.

I have to mapping “Connector” image to 3D Cylindroid Chart.
But I do not know how.

Please let me know

1 vote

SelectedSeriesModifier gets applied only on click (i guess that sets the isselcted). I found the ExecutesOn property that work on MouseMove.

However, I am unable to bind the strokethickness (I cannot use static/hardcoded values as strokethickness is decided by the user and I need to increase it by 1 when user hovers over the series).

Binding evaluation throws following error and crashes – WPF ‘System.Windows.Data.Binding’ is not a valid value for property ‘StrokeThickness’

                        <s:SeriesSelectionModifier ExecuteOn="MouseMove">
                                <Style TargetType="s:BaseRenderableSeries">
                                    <Setter Property="StrokeThickness" Value="{Binding Path=StrokeThickness, diag:PresentationTraceSources.TraceLevel=High}"/>
1 vote

Please see attached chart that my users will be seeing.

Y axis range is from 0 to 100. Notice the axis labels, these are all aligned with other major grid lines but for the ones at the top and the bottom.

Please let us know if and how we can fix it.

1 vote

Hi There,

I’m new to SciChart, I have a question regarding DateTimeAxis that is it possible to display the date when plotting data based on hours for multiple days?

For example, I’m plotting data for Aug/07, Aug/06, and Aug/05, so I have 72 data points to display, but the problem is the user can see all the data based on hours however, they will not be able to see when the day has changed. Is there any way I can achieve this.

  • Umer Nawaz asked 4 months ago
  • last active 4 months ago
1 vote


I am using SciChart trial version to create a a simple line chart but when running an application for a while, I got this error in the dev console log – not sure what the root cause is but it seems to come from SciChart library


  • Atanai W. asked 4 months ago
  • last active 3 months ago
0 votes

Hello, I have the Boxplot working (in WPF) using Dates as X-Axis.

But if I try to use String values, I get the following exception:

‘La invocación del constructor del tipo ‘ReservoirAnalytics.Windows.Boxplots’ que coincide con las restricciones de enlace especificadas produjo una excepción.’ (número de línea: ’16’; posición de línea: ’10’).

Cannot create a DataDistributionCalculator for the type TX=System.String

Esta es la línea:
var boxDataSeries = new BoxPlotDataSeries<string, double>();

1 vote

I have the following (attached) scatter chart, which contains normalized positions in an ellipse shape.
Since my chart isn’t squared the x-Axis stretches longer than the y-axis, even though they both range from 0-1.
Is there any way to “squash” down the x-axis so the data will be display in their true circle shape?

0 votes


I have an issue with Rollover modifier line styling in sci chart using java script. we need the horizontal dashed line for the rollover modifier. How is it possible?

  • Ayana VS asked 4 months ago
  • last active 4 months ago
1 vote


I’ve had a request from the client of our app to set logarithmic axis to have their major ticks at powers of 10, for example 0.1|1|10|100|1000|10000 – they would be expressed as 1e-1|1e0|1e1|1e2|1e3|1e4…. etc.

Is this possible within the current implantation of the logarithmic axis?


  • Adam Stone asked 4 months ago
  • last active 3 months ago
1 vote


Is it possible to either rotate a TextAnnotation, not necessarily by user interaction but even just in code to have text going vertically?


  • Adam Stone asked 4 months ago
  • last active 4 months ago
1 vote


I would like to display the rollovermodifier line that must be parallel to the X axis and the Rollovermodifier line must be a dashed line. In the y axis I need to add a label annotation with svg .How can I fix the problem. Kindly provide me the solution.

This is the code I have given,

const horizontalline = new RolloverModifier({
IsEnabled: true,
DrawVerticalLine: true,
showTooltip: false,
rolloverLineStroke: “white”,
rolloverLineStrokeThickness : 1

  • Ayana VS asked 4 months ago
  • last active 4 months ago
1 vote

Hey everybody,
is it possible to create Charts like the one I’ve attached?
Basically I wanna show some statistics about my AI labeling data, and the rectangles shown are the bounding boxes
of said labeled data. The rectangles have to be stationary and not moveable (unlike rectangular annotations).
The data will be available in a normalized format.

0 votes


I would like to display all the hours of the day in X axis e.g 01 to 24 and I haven’t been able to achieve it yet, I tried use date delta but I couldn’t figure out how it really works, could you please share a code snippet or some example.


  • Anas Iqbal asked 4 months ago
  • last active 4 months ago
1 vote

Hello, we are developing a finance application that contains sciChart. Our main chart and optionally RSI, MACD etc. There are indicators. I want the user to screenshot and share the graph and the indicators, but I’m having trouble doing this. Although I tried more than one way for this, I encountered different problems in all of them.
First of all, I take a screenshot with the createBitmap and Canvas method of the Layout where my graphics are located, but the graphic contents are not visible in the screenshot content.
As the second method, I tried the exportToBitmap method in sciChart, but here I only take a screenshot of 1 chart, I cannot take a screenshot of a graph + RSI + MACD at the same time. As another problem, the opening, closing, high, etc. of the parity on the chart. The texts containing the data are not visible in the screenshot.

Below I will share the screenshots I took with both the first method and the second method, the image on the phone at that moment, and the codes I used.
What I wanted to use was to take a screenshot of more than one graph and the data on it at the same time as in the first method. How can I do that?

Method 1

Bitmap bitmap = Bitmap.createBitmap(view.getWidth(),
            view.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);

Method 2

0 votes

ShowLabel =TRUE does not take effect the first time

1 vote

Please answer.

When upgrading from to, an error now occurs.
This does not occur with

The error seems to occur just before drawing the graph.
The errors that occur are as follows.

Exception: System.AccessViolationException: Attempted to read or write
protected memory. This is often an indication that other memory is

SciChart.Drawing.Common.RenderSurfaceBase.hpy(object, System.Windows.SizeChangedEventArgs)
System.Windows.RoutedEventArgs.InvokeHandler(System.Delegate, object) at: RoutedEventArgs.cs
System.Windows.RoutedEventHandlerInfo.InvokeHandler(object, System.Windows.RoutedEventArgs) at: RoutedEventHandlerInfo.cs
System.Windows.EventRoute.InvokeHandlersImpl(object, System.Windows.RoutedEventArgs, bool) at: EventRoute.cs
System.Windows.RoutedEventArgs) at: UIElement.cs
at: FrameworkElement.cs
System.Windows.ContextLayoutManager.fireSizeChangedEvents() at: LayoutManager.cs
System.Windows.ContextLayoutManager.UpdateLayout() at: LayoutManager.cs

This does not happen if you reduce the amount of data displayed on the graph.

Even if the following processing was implemented just before the error occurred, it did not improve.

Would you like to teach me how to improve and the changes in the version upgrade?

0 votes
0 answers

I want to customise BrightSpark theme from scratch.

In the page below, there is SciChartv4Dark theme’ s xaml.

Can I get same thing for BrightSpark theme?

1 vote

There is a tabcontrol with two tabitems. Scichart control is in one tabitem, the xy line renderable series of scichart control count is about 5000, and each series has 2000 datas.
At the start, I load and show the scichart curves with loading icon, and it run normally. Then, change to the other tabitem. When I change back to the scichart tabitem , it will taken about 10 secends.
How to reduce the reshow time? Or is there any event occurs when reshow finished which I can used to show loading icon?

  • Shao Lin asked 4 months ago
  • last active 4 months ago
1 vote

Hello! This might be a silly question, but if I were to get a new MacBook running the M1-series processor, and ran Windows ARM preview in Parallels, do I have any chance of getting SciChart to work? I can see here that Visual Studio ARM will compile x86 and x64, but will SciChart work? I have no way to test this so hopefully someone else has!

1 vote

Currently I am trying to enable the default measurement (if present) or need to pass a custom measurement along with values to the axis to plot (if not default available). e.g. x-axis: 50V, y-axis: 50ft, z-axis: 50U

Is there any other possible way to do this in Scichart, If so, please let me know how to do?

Please refer the attached image for your reference.

Thanks in advance.

  • Barani G asked 4 months ago
  • last active 4 months ago
0 votes

Hi Team,

When we except this feature

1 vote

Is there any way Gantt Chart be plotted based on the dynamic data.
The example shows plotting Graph using predefined data loaded through constructor.
In the same example if a new item is added dynamically to the Item Collection in the View-Model it should reflect in the Graph.

Also how to plot the graph if a single project has multiple timeline.

  • Santhosh M asked 4 months ago
  • last active 4 months ago
1 vote

We are testing your Android Example application, andwe are trying to find out the capabilities of the 2d Heatmap chart.

I have found in your documentation that you have the “Heatmap Texture Filtering” feature, anyways I am not able to set it as true in the heatmap plot. (found on the [WPF Heatmap Chart documentation][1 )

Is this feature disabled in Android Charts?

I am trying to enable this filtering, but the modification on your example app does not compile.

I have already tried to modify other stuff on your heatmap example chart, and it works, but particularly in our application we need as a must this kind of feature. It will be finally something that helps us to decide if your SciChart library meet our requirement.

Thanks for your attention,

1 vote


We want to use your Android Chart library in our project. I’m getting familiar with it and I don’t totally gets how to implement Scrolling Realtime (FIFO) Line Chart.

What we want to do: our copmany wants an app that will represent the data on the line charts from their sensors. I need real-time (FIFO) representation from 1 to 16 charts in RecyclerView.

The guide here doesn’t cover the whole implementation (for example, we add data to XyDataSeries, but where to add these series to surface is not indicated). And link to github is not working also.

Do you have some example code or documentation regarding it?

1 vote


We are working on our Angular Dashboard again using the JS Chart component and one item we would like to tidy up is the Meta Data displayed in the Tool Tips against data points.

When the cursor is enabled and a data point is hovered over, tool tips with the meta data is displayed for all data points in the vertical line; please refer to the screenshot attached.

We would like the tool tip to only be shown when the cursor is on a specific data point. We are currently working with an offshore team and any help surrounding this would be appreciated.

Kind regards,

1 vote


I am running Ubuntu 22.04.
I have done the following:
1. Downloaded licensing tool AppImage
2. chmod +x SciChart-Licensing-Wizard.AppImage
3. ./SciChart-Licensing-Wizard.AppImage


./SciChart-Licensing-Wizard.AppImage: 9: Syntax error: newline unexpected

Please advise.


1 vote

Ran “pod update” this morning and got a 404 error with SciChart (see below)

So I changed my podspec to specify an earlier version of SciChart ( and ran update again and it was successful. This is just an FYI to report the problem, it is not blocking the team.

My environment: MacOS 12.4, Xcode 13.4, cocoapods 1.11.3

[!] Error installing SciChart
[!] /Users/mjc/opt/anaconda3/bin/curl -f -L -o /var/folders/mr/0skn4y5d1t99bcvzd09g_wdr0000gn/T/d20220713-25489-xbnbcz/ –create-dirs –netrc-optional –retry 2 -A ‘CocoaPods/1.11.3 cocoapods-downloader/1.5.1’

% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 9 0 0 0 0 0 0 –:–:– –:–:– –:–:– 0
curl: (22) The requested URL returned error: 404

-1 votes

why show incorrectly

  • YXJ YXJ asked 5 months ago
  • last active 5 months ago
1 vote

Hi, Support team.

I’m using MVVM pattern and trying to implement multi-chart which can insert Box Annotations at the same time into each chart .
So I’m testing in SciChart Example [“DigitalAnalyzerPerformanceDemo”] to know how to implement this.

But what i only got is just looping through and create annotation for each ChannelViewModels.

In the Demo, the VisibleRange ‘XRange’ is shared to all the ChannelViewModels by binding TwoWay-mode in ParentViewModel without looping for each ChildViewModels.
Like this, I wonder is there ways to apply BoxAnnotation all the ChannelViewModel at the same time by binding in ParentViewModel.

    <!-- BottomAxis -->
        <s:SciChartSurface Grid.Column="1">
                <s:NumericAxis Height="30"
                               VisibleRange="{Binding XRange, Mode=TwoWay}"                 
                               LabelProvider="{StaticResource TimeLabelProvider}"
                               MajorTickLineStyle="{StaticResource TimeAxisMajorTickLineStyle}"
                               MinorTickLineStyle="{StaticResource TimeAxisMinorTickLineStyle}"/>
                <s:NumericAxis Visibility="Collapsed"/>

    <!--  Create an X Axis with GrowBy  -->
           <s:NumericAxis Style="{StaticResource HiddenAxisStyle}"
                    VisibleRange="{Binding DataContext.XRange, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=ItemsControl, AncestorLevel=2}}"/>

I tried to bind annotation in ParentViewModel like XRange Binding method, But it doesn’t work.

This is View.xaml.

<Grid Grid.IsSharedSizeScope="True" IsEnabled="{Binding IsLoading, Converter={StaticResource InvertBooleanConverter}}">

    <!-- BottomAxis -->
        <s:SciChartSurface Grid.Column="1">
                <s:NumericAxis Height="30"
                               VisibleRange="{Binding XRange, Mode=TwoWay}"                 
                               LabelProvider="{StaticResource TimeLabelProvider}"
                               MajorTickLineStyle="{StaticResource TimeAxisMajorTickLineStyle}"
                               MinorTickLineStyle="{StaticResource TimeAxisMinorTickLineStyle}"/>
                <s:NumericAxis Visibility="Collapsed"/>

    <!-- Channels -->
        <ScrollViewer Background="#1C1C1E"

                <common:DigitalAnalyzerScrollBehavior ChannelHeightDelta="10" ChangeChannelHeightCommand="{Binding ChangeChannelHeightCommand}"/>

            <ItemsControl x:Name="chartItemsControl" ItemsSource="{Binding ChannelViewModels}">

                    <common:FocusedChannelScrollBehavior ScrollToFocusedChannel="False"/>

                    <DataTemplate DataType="{x:Type local:ChannelViewModel}">
                        <Grid Background="#2D2C32" Height="{Binding ChannelHeight, Mode=OneWay}" Focusable="False" UseLayoutRounding="False" >
                                <ColumnDefinition SharedSizeGroup="ChannelNames" />
                                <ColumnDefinition />

                            <Border BorderThickness="0,0,0,1" BorderBrush="#1C1C1E">
                                    <Border DockPanel.Dock="Left"     
                                            Background="{Binding ChannelColor, Mode=OneWay}" 

                                    <TextBlock DockPanel.Dock="Left"
                                               Text="{Binding ChannelName}"/>

                            <s:SciChartSurface x:Name="channelSurface" Grid.Column="1"
                                               RenderableSeries="{Binding RenderableSeries}"
                                               Annotations="{s:AnnotationsBinding  DataContext.Annotations, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=ItemsControl, AncestorLevel=2} }">

                                <!--  Create an X Axis with GrowBy  -->
                                    <s:NumericAxis Style="{StaticResource HiddenAxisStyle}"
                                                   VisibleRange="{Binding DataContext.XRange, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=ItemsControl, AncestorLevel=2}}"/>

                                <!--  Create a Y Axis with GrowBy. Optional bands give a cool look and feel for minimal performance impact  -->
                                    <s:NumericAxis Style="{StaticResource HiddenAxisStyle}"
                                                   VisibleRange="{Binding YRange, Mode=OneWay}"/>

                                    <s:ModifierGroup s:MouseManager.MouseEventGroup="ChannelModifierGroup">
                                        <s:RubberBandXyZoomModifier IsAnimated="False" IsXAxisOnly="True" ZoomExtentsY="False" ReceiveHandledEvents="True" IsEnabled="{Binding IsChecked, Mode=OneWay, ElementName=IsZoomEnabled}"/>
                                        <s:ZoomPanModifier ZoomExtentsY="False" XyDirection="XDirection" IsEnabled="{Binding IsChecked, Mode=OneWay, ElementName=IsPanEnabled}"/>
                                        <s:ZoomExtentsModifier XyDirection="XDirection" IsAnimated="False" />
                                        <s:MouseWheelZoomModifier XyDirection="XDirection" />

                            <Border Grid.Column="1"


This is ViewModel.cs

public class DigitalAnalyzerExampleViewModel : BaseViewModel
    private bool _isLoading;
    private DoubleRange _xRange;

    public DigitalAnalyzerExampleViewModel()
        ChannelViewModels = new ObservableCollection<ChannelViewModel>();
        Annotations = new ObservableCollection<IAnnotationViewModel>();
        Annotations.Add(new BoxAnnotationViewModel() { X1 = 0, X2 = 1000, Y1 = 0, Y2 = 1 }); //I want to implement sharing annotation like this.

        SelectedChannelType = "Digital";
        SelectedChannelCount = 32;
        SelectedPointCount = 1000000;
        SelectedResamplingPrecision =ResamplingPrecision.Default;
        SelectedStrokeThickness = 1;

        ChangeChannelHeightCommand = new ActionCommand<object>((d) =>
            var delta = (double)d;
            foreach (var channelViewModel in ChannelViewModels)

        AddChannelCommand = new ActionCommand(async () =>
            IsLoading = true;

            var isDigital = SelectedChannelType == "Digital";
            await AddChannels(isDigital ? 1 : 0, isDigital ? 0 : 1);

            IsLoading = false;

        LoadChannelsCommand = new ActionCommand(async () =>
            IsLoading = true;

            // Clear ViewModels
            foreach (var channelVm in ChannelViewModels)
            XRange = null;

            // Create a bunch of Digital channels
            await AddChannels(SelectedChannelCount, 0);

            XRange = new DoubleRange(0, SelectedPointCount);
            IsLoading = false;


    public ObservableCollection<ChannelViewModel> ChannelViewModels { get; private set; }
    public ObservableCollection<IAnnotationViewModel> Annotations { get; private set; }

    public string SelectedChannelType { get; set; }

    public ResamplingPrecision SelectedResamplingPrecision { get; set; }

    public int SelectedChannelCount { get; set; }

    public ActionCommand<object> ChangeChannelHeightCommand { get; }

    public ActionCommand AddChannelCommand { get; }

    public ActionCommand LoadChannelsCommand { get; }

    public long TotalPoints => ChannelViewModels.Sum(c => (long)c.DataCount);

    public bool IsLoading
        get => _isLoading;
            _isLoading = value;

    public bool IsEmpty => ChannelViewModels.Count <= 0;

    public DoubleRange XRange
        get => _xRange;
            _xRange = value;

+Attached image below is what i want to implement.
++I also attached tried code in .zip .

1 vote

I spent all day on this one and was reluctant to ask but despite all my efforts here I am asking this question in the forum. This started with an undesirable behavior when showing/hiding the point markers on my series. When my series is being displayed on the legend AFTER the legend is already visible the point marker is “sort of displayed”, meaning you can see a small missing piece of the series line in the legend as if a point marker is there. But, it is not. If I select another series on my chart after I have elected to show the legend and point markers this problem doesn’t exist. I’d prefer not to get into the depths of the view model for which I am binding my series to the SciChart and instead focus on why I am unable to access information in the s:SeriesInfo that I assume should be available.

Basically I want to build my own custom legend and it’s simply not working as I would expect. The only thing that is binding with success is the SeriesName. See the following example.

<DataTemplate DataType="{x:Type s:SeriesInfo}">
    <StackPanel Orientation="Horizontal">

        <Rectangle Height="2" Width="120" Fill="{Binding RenderableSeries.Stroke}" />

        <Ellipse Width="10" Height="10">
                <Style TargetType="{x:Type Ellipse}">
                    <Setter Property="Stroke" Value="{Binding RenderableSeries.Stroke}" />
                    <Setter Property="Fill" Value="{Binding RenderableSeries.PointMarker.Fill}" />
                    <Setter Property="StrokeThickness" Value="1" />
                    <Setter Property="Margin" Value="10,0,10,0" />
                    <Setter Property="Visibility" Value="Visible" />
                        <DataTrigger Binding="{Binding Path=ShowPoints, Mode=TwoWay}" Value="True">
                            <Setter Property="Visibility" Value="Visible" />

        <TextBlock Text="{Binding RenderableSeries.DataSeries.SeriesName}" />


Nothing. Despite reading pages and articles/posts on SciChart’s website I have run into a wall and decided to ask for help.

0 votes

Recently a customer asked us on a support ticket:

We are trying to free the memory used by SciChart but it seems like
there is a large amount of memory still held somewhere in the code.

Bug scenario:

  1. Run the 50-Channel EEG Example
  2. Start the UI, With task manager memory usage is around 40 MB.
  3. Press Run, memory usage increase to ~130 MB.
  4. Press Stop, memory usage remains the same (around 130 MB).
  5. Call the garbage collector manually, on the second call of the garbage collector the memory stays above 100 MB.

How can we release the memory allocated by a DataSeries in SciChart WPF?

1 vote

As shown below, I want to fill different colors between the two lines according to my own rules,

I first adopted scheme 1: use FastBandRenderableSeries, but it has default rules, according to the size of Y1 and Y2, fill between Y1 and Y2 Predefined FillY1 and FillY2; 
I can't change this behavior by implementing IFillPaletteProvider. 
So I switched to Scenario 2: Use two FastLineRenderableSeries to form the band, but I don't know how to fill the color between the two FastLineRenderableSeries.
Does scichart support filling color between two lines according to custom rules?   my scichart version is 
Please give me some help or advice.

thanks very much.

1 vote

What languages are wrappers for the licensing server in? Where can I get information on what c++ functions to call?

  • Ryan Campo asked 5 months ago
  • last active 5 months ago
1 vote

Hello I have been having a difficult time getting the correct time displayed on my xAxis and labels.

Passing in an xValue to an OHLC data series of 60 and the setting cursorLabelFormat: ENumericFormat.Date_DDMMHHMM this should produce a label “01/01 00:01” With the year as 1970.

When the computers timezone is set to UTC + 0 this behaves as expected.

However when the computers timezone is set to anything negative (UTC – 7) the label is formatted as “31/12 00:01” with the year 1969. If scichart is trying to convert to local time I would expect a reading of “31/12 17:01” 1969.

And when the timezone is set to anything positive (UTC + 7) the label is formatted as it is UTC +0 “01/01 00:01” 1970 again I would expect the hour to corrispond to the UTC offset if scichart is trying to convert to local time.

Looking at the later case I would assume that no time conversion is taking place which is what I would prefer. But looking at the former case (UTC -X) there appears to be some manipulation happening somewhere, I just have not been able to find any documentation explaining this. Am I missing something to get this to work properly out of the box without a custom label provider?

Thank you,


I do not want to worry about timezones. I want sciChart to plot the time that I give it. Again this is acting as expected when the computer timezone is in anything greater than UTC 0. But when the computer timezone is less than UTC 0 the label and axes are showing a date 24 hours prior to what I give it.

See attached images for the error. Note the only change that is happening is changing the computer timezone from UTC – 4 to UTC + 4.

See below for code setting up the chart.

Why is changing the computer timezone affecting the data labels?

export async function example(element) {
    let { sciChartSurface, wasmContext } = chartInstances.hasOwnProperty( && chartInstances[];

    // initialize sciChart and add created chart to chartInstances
    if (sciChartSurface === undefined) {
        const newContext = await SciChartSurface.create(;
        sciChartSurface = newContext.sciChartSurface;
        wasmContext = newContext.wasmContext;
        chartInstances[] = { sciChartSurface, wasmContext };

    //create and add xAxis
    let xAxis = new CategoryAxis(wasmContext, {
        drawLabels: true,
        drawMajorTickLines: true,
        drawMinorTickLines: true,
        axisAlignment: EAxisAlignment.Bottom,
        autoRange: EAutoRange.Once,
        cursorLabelFormat: ENumericFormat.Date_DDMMHHMM,
        labelFormat: ENumericFormat.Date_DDMMYYYY,


    //create and add yAxis
    let yAxis = new NumericAxis(wasmContext, {
        maxAutoTicks: 5,
        autoRange: EAutoRange.Always,
        growBy: new NumberRange(0.3, 0.11),
        axisAlignment: EAxisAlignment.Right,
        labelPrecision: 4

    //add chart modifiers
    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new RolloverModifier({ modifierGroup: "first", showTooltip: false }));
    sciChartSurface.chartModifiers.add(new CursorModifier(
            crosshairStroke: "#9598a1",
            crosshairStrokeDashArray: [10, 5],

    //apply desired theme
    sciChartSurface.applyTheme(new SciChartJSDarkTheme());

    //create three bars 
    _ohlcDataSeries = new OhlcDataSeries(wasmContext, {
        xValues: [60,120,180], //1 min, 2 min, 3 min post epoch
        openValues: [10,10,10],
        highValues: [15,15,15],
        lowValues: [5,5,5],
        closeValues: [11,11,11],
        dataSeriesName: "PriceDataSeries"

    //create and style fastCandRendSeries
    const fcRendSeries = new FastCandlestickRenderableSeries(wasmContext,
            dataSeries: _ohlcDataSeries,
            strokeThickness: 1,
            dataPointWidth: 0.5,
            brushUp: "#50ff50B2",
            brushDown: "#ff5050B2",
            strokeUp: "#50ff50",
            strokeDown: "#ff5050",
            animation: new WaveAnimation({ fadeEffect: true, duration: 800 })
  • Leland asked 5 months ago
  • last active 5 months ago
0 votes

edit – please disregard. I checked the SciTraderView demo source code and found that it is required to recalculate data manually

0 votes
0 answers

Using scichart in wpf, set AcceptsUnsortedData = true, there is a dashed line indicating the direction of the data, I want to know, how to hide it, does affect the normal display of the chart.

0 votes
0 answers

When I ran the sample “iOS & macOS Audio, Radio frequency and Spectrum Analyzer” of “SciChart.iOS.Examples-SciChart_v4_Release”,
HeatMap graphs are not displayed on 5th generation iPads.

For iPads of generations higher than the 5th generation, the HeatMap graph is displayed.
Does SchiCharts_v4 not support 5th generation iPads?

The environment is as follows.
IOS 15.2

0 votes
0 answers

How to setup SciChart in React native frame work?

0 votes

I am trying to create a new FastUniformHeatMap at runtime and bind it to a dataset, everything needs to be done in the code behind and I am not using MVVM.
I can create the HeatMap in the code behind with:

        SciChartSurface g2d = new SciChartSurface();
        FastUniformHeatmapRenderableSeries fuhrs = new FastUniformHeatmapRenderableSeries();
        HeatmapColorPalette hcp = new HeatmapColorPalette();
        NumericAxis xaxis = new NumericAxis();
        NumericAxis yaxis = new NumericAxis();
        g2d.RenderableSeries = new ObservableCollection<IRenderableSeries>() { fuhrs };
        g2d.XAxis = xaxis;
        g2d.YAxis = yaxis;

I can set the DataSeries with:

       g2d.RenderableSeries[0].DataSeries = myDataSeries;

(Where myDataSeries is a property returning a UniformHeatMapDataSeries object)

and I get my image, however, it is not bound to the property and if myDataSeries changes the image will not change.

How do I bind the DataSeries instead of just setting it, in this case?

I can make it work easily from the Xaml:

< sciChart:FastUniformHeatmapRenderableSeries DataSeries=”{Binding Path=myDataSeries, Mode=OneWay}” />

but I cannot figure out how to do it from the code behind.

1 vote


I am attempting to get SciChart working in a Blazor Server app.

I have followed the examples here:

I have the following line in my “_Layout.cshtml” file in the head section:

<script src="" crossorigin="anonymous"></script>

In my scichart js I have:

export async function initSciChart() {

However when I call this over JSInterop i get the following error:

Error: Microsoft.JSInterop.JSException: SciChart.SciChartSurface.useWasmFromCDN is not a function
TypeError: SciChart.SciChartSurface.useWasmFromCDN is not a function
at Module.initSciChart (https://localhost:7195/Pages/Strategy/StrategyMain.razor.js:33:30)
at https://localhost:7195/_framework/blazor.server.js:1:3501
at new Promise ()
at kt.beginInvokeJSFromDotNet (https://localhost:7195/_framework/blazor.server.js:1:3475)
at https://localhost:7195/_framework/blazor.server.js:1:72001
at Array.forEach ()
at kt._invokeClientMethod (https://localhost:7195/_framework/blazor.server.js:1:71987)
at kt._processIncomingData (https://localhost:7195/_framework/blazor.server.js:1:70029)
at connection.onreceive (https://localhost:7195/_framework/blazor.server.js:1:64432)
at o.onmessage (https://localhost:7195/_framework/blazor.server.js:1:48766)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
at TradeLogicBS.Web.Pages.Strategy.StrategyMain.OnAfterRenderAsync(Boolean firstRender) in D:\Repos\TradeLogicBS\TradeLogicBS\TradeLogicBS.Web\Pages\Strategy\StrategyMain.razor:line 63
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

How do we set this up properly to access the scichart modules in a blazor server application?

Thank you,

  • Leland asked 5 months ago
  • last active 1 month ago
Showing 51 - 100 of 4k results