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

0 votes
0 answers
1 view

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]
x-axis: [1, 2, 3 ]

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] = 1; //should appear as color1 in heatmap
heatMapData[0][1] = 2; //...
heatMapData[0][2] = 3; //should appear as color2 in heatmap
heatMapData[0][3] = 4;
heatMapData[0][4] = 5; //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: 1, // min value in the zValues (data) to map to offset 0 in the colormap
        maximum: 5, // 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?

0 votes
0 answers

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)
0 votes
0 answers

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 5 days ago
  • last active 18 hours 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 5 days ago
  • last active 22 hours 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 1 week ago
  • last active 1 week 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?


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 2 weeks ago
  • last active 1 week 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 2 weeks ago
  • last active 1 week 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 2 weeks ago
  • last active 2 weeks 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 3 weeks ago
  • last active 3 weeks 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 3 weeks ago
  • last active 3 weeks 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 weeks ago
  • last active 4 weeks 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 1 month ago
  • last active 1 month 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 1 month ago
  • last active 1 month 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 1 month ago
  • last active 1 month 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 2 months ago
  • last active 6 days ago
0 votes


according to your Limitations and Terms:

When your subscription expires unfortunately we have to remove your access. You can still get a zip of the latest version you are entitled to even after support expiry.

My licence is already expired. But how exactly I can get the repository zip?

Mi Licence and GitHub account is submited.

  • Daniel asked 2 months ago
  • last active 2 months ago
0 votes
0 answers

I followed the example swiftui-helper-functions to use SciChart in SwiftUI.It works fine.
But when I try to setup majorDelta according to the max data of data series which is from view model, the chart is hang up.
And the preview of Xcode show this error “PreviewUpdateTimedOutError: Updating took more than 5 seconds”.

Here is part of my code , is there something wrong?

private var yAxis: ISCIAxis {
    let yAxis = SCINumericAxis()
    yAxis.autoRange = .always
    yAxis.growBy = SCIDoubleRange(min: 0, max: 0.1)
    yAxis.axisAlignment = .left
    yAxis.visibleRange = SCIDoubleRange(min: 0, max: viewModel.powerChartModel.powerDataSeries.yMax.toDouble() + PowerView.addVisibleRangeValue)
    yAxis.drawMajorBands = false
    yAxis.drawMajorGridLines = false
    yAxis.drawMinorGridLines = false
    yAxis.drawMinorTicks = false
    yAxis.autoTicks = false
    yAxis.majorDelta = NSNumber(value: round(viewModel.powerChartModel.powerDataSeries.yMax.toDouble() + PowerView.addVisibleRangeValue) * 0.2)
    yAxis.minorDelta = NSNumber(value: 1.0)

    return yAxis
  • zhou quan asked 2 months ago
  • last active 2 months ago
0 votes

Hi, I would like to know if it is possible to do half-pie (as in the photo) with SciChartDonutSurface and if so how? Thanks!

  • mike laor asked 2 months ago
  • last active 2 months ago
0 votes

Hi Guys,

I am implementing the column chart, but the xAxis value is duplicate when I scroll the chart. Please see the images attachment.

Here are the piece of code, and wandering what cause this, thx!


import android.content.Context
import android.util.AttributeSet
import android.view.Gravity
import android.widget.FrameLayout
import androidx.core.content.ContextCompat
import androidx.core.content.res.ResourcesCompat

import com.scichart.charting.ClipMode
import com.scichart.charting.Direction2D
import com.scichart.charting.model.ChartModifierCollection
import com.scichart.charting.model.dataSeries.IXyDataSeries
import com.scichart.charting.modifiers.AxisDragModifierBase
import com.scichart.charting.modifiers.XAxisDragModifier
import com.scichart.charting.modifiers.ZoomPanModifier
import com.scichart.charting.numerics.labelProviders.NumericLabelFormatter
import com.scichart.charting.numerics.labelProviders.NumericLabelProvider
import com.scichart.charting.numerics.tickProviders.NumericTickProvider
import com.scichart.charting.visuals.SciChartSurface
import com.scichart.charting.visuals.axes.AutoRange
import com.scichart.charting.visuals.axes.AxisTickLabelStyle
import com.scichart.charting.visuals.axes.IAxis
import com.scichart.charting.visuals.renderableSeries.IRenderableSeries
import com.scichart.charting.visuals.renderableSeries.StackedColumnRenderableSeries
import com.scichart.charting.visuals.renderableSeries.VerticallyStackedColumnsCollection
import com.scichart.core.framework.UpdateSuspender
import com.scichart.core.model.DoubleValues
import com.scichart.core.model.IntegerValues
import com.scichart.drawing.canvas.RenderSurface
import com.scichart.drawing.common.FontStyle
import com.scichart.drawing.common.PenStyle
import com.scichart.drawing.common.SolidPenStyle
import timber.log.Timber
import java.util.*
import kotlin.math.roundToInt

private const val GROW_BY: Double = 0.0

private const val MAX_VISIBLE_COLUMNS = 11
private const val MIN_VISIBLE = -0.5

class StackColumnChartView @JvmOverloads constructor(
context: Context,
attrs: AttributeSet?,
defStyleAttr: Int = 0,
defStyleRes: Int = 0
) : FrameLayout(context, attrs, defStyleAttr, defStyleRes) {

private val chart = SciChartSurface(context)

private val typefaceSemibold =
    ResourcesCompat.getFont(context, R.font.proxima_nova_fin_semibold)

private val tickFontStyle = FontStyle(
    getColorFromAttrOrDefault(R.attr.chartAxisTextColor, R.color.dove_grey),

private val majorGridLineAndTickStyle: PenStyle = SolidPenStyle(
    getColorFromAttrOrDefault(R.attr.cardViewItemDividerBackground, R.color.desert_storm_50),

var xAxisLabelList = emptyList<String>()
var yAxisLabelList = mutableListOf("0%", "20%", "40%", "60%", "80%", "100%")
var dataList: List<List<Double>> = emptyList()
private lateinit var xAxisData: List<Double>

init {
    chart.renderSurface = RenderSurface(context)
    val params = LayoutParams(
    chart.layoutParams = params

    chart.theme =

fun buildChart() {
    Timber.tag("CHART").d("CURVE CHART View build chart")
    val sciChartBuilder: SciChartBuilder = SciChartBuilder.instance()
    xAxisData = xAxisLabelList.mapIndexed { index, _ ->
    val xAxis = initXAxis(sciChartBuilder)
    val yAxis = initYAxis(sciChartBuilder)
    val dataSeries = initDataSeries(context, sciChartBuilder)

    val surfaceChartModifiers: ChartModifierCollection = chart.chartModifiers
    val zoomPanModifier = ZoomPanModifier()
    zoomPanModifier.direction = Direction2D.XDirection
    zoomPanModifier.clipModeX = ClipMode.ClipAtExtents
    zoomPanModifier.clipModeY = ClipMode.None
    zoomPanModifier.zoomExtentsY = false

    val dragModifier = XAxisDragModifier()
    dragModifier.dragMode = AxisDragModifierBase.AxisDragMode.Pan

    UpdateSuspender.using(chart) {

        Collections.addAll(chart.xAxes, xAxis)
        Collections.addAll(chart.yAxes, yAxis)
        Collections.addAll(chart.renderableSeries, dataSeries)

        Collections.addAll(chart.chartModifiers, zoomPanModifier)
        Collections.addAll(chart.chartModifiers, dragModifier)

fun clearChart() {
    UpdateSuspender.using(chart) {

private fun initDataSeries(
    context: Context, sciChartBuilder: SciChartBuilder
): IRenderableSeries {

    val verticalCollection = VerticallyStackedColumnsCollection()

    val seriesList = dataList.mapIndexed { _, xValue ->
        val series: IXyDataSeries<Double, Double> = sciChartBuilder.newXyDataSeries(
        for (i in xAxisData.indices) {
            series.append(xAxisData[i], xValue[i])

    val result = seriesList.mapIndexed { index, series ->
        val color: Int = if (index < colorList.size) {
            ContextCompat.getColor(context, colorList[index])
        } else {
            ContextCompat.getColor(context, colorList[index % colorList.size])
        val stack: StackedColumnRenderableSeries =
                        context, R.color.chatline_white
                    ), 0.2F

    verticalCollection.dataPointWidth = 0.4
    verticalCollection.isOneHundredPercent = true
    return verticalCollection

private fun initXAxis(
    sciChartBuilder: SciChartBuilder
): IAxis {

    val horizontalAxisTickLabelStyle = AxisTickLabelStyle(
    val visibleMin = if (xAxisLabelList.size > MAX_VISIBLE_COLUMNS) {
        (xAxisLabelList.size - MAX_VISIBLE_COLUMNS).toDouble()
    } else {
    val xVisibleRange = DoubleRange(visibleMin, (xAxisLabelList.size + MIN_VISIBLE))
    return sciChartBuilder
        .apply {
            axisTickLabelStyle = horizontalAxisTickLabelStyle
            tickLabelStyle = tickFontStyle
            drawMinorGridLines = false
            drawMinorTicks = false
            drawMajorTicks = false
            drawMajorBands = false
            drawMajorGridLines = false
            autoFitMarginalLabels = true
            visibleRange = xVisibleRange

// tickProvider = XTickProvider(xAxisData)
labelProvider =
growBy = DoubleRange(GROW_BY, GROW_BY)
maxAutoTicks = xAxisLabelList.size

private fun initYAxis(
    sciChartBuilder: SciChartBuilder
): IAxis {
    val verticalAxisTickLabelStyle = AxisTickLabelStyle(

    return sciChartBuilder
        .apply {
            axisTickLabelStyle = verticalAxisTickLabelStyle
            drawMajorGridLines = true
            minimalZoomConstrain = 0.0
            tickLabelStyle = tickFontStyle
            majorTickLineStyle = majorGridLineAndTickStyle
            majorGridLineStyle = majorGridLineAndTickStyle
            labelProvider = FirmProfileYAxisLabelProvider(yAxisLabelList)
            autoRange = AutoRange.Always
            maxAutoTicks = yAxisLabelList.size
            growBy = DoubleRange(GROW_BY, GROW_BY)

fun dispose() {

class XTickProvider(private val xAxisData: List<Double>) : NumericTickProvider() {
    override fun updateCullingPriorities(
        cullingPriorities: IntegerValues?,
        majorTicks: DoubleValues?
    ) {
        super.updateCullingPriorities(cullingPriorities, majorTicks)
    override fun updateTicks(minorTicks: DoubleValues?, majorTicks: DoubleValues?) {

// super.updateTicks(minorTicks, majorTicks)
xAxisData.forEach {

    override fun getMajorTickIndex(tick: Double): Int {
        return super.getMajorTickIndex(tick)

    override fun shouldUpdateTicks(): Boolean {
       val should = super.shouldUpdateTicks()
        return should

    override fun isFirstMajorTickEven(majorTicks: DoubleValues?): Boolean {
        return super.isFirstMajorTickEven(majorTicks)

class FirmProfileDateAxisLabelFormatter(private val labelTitles: List<String>) :
    NumericLabelFormatter() {

    private var lastFormatLabel = ""

    override fun formatLabel(p0: Double): CharSequence {
        if (labelTitles[p0.toInt()] == lastFormatLabel) {
            return ""
        return labelTitles[p0.toInt()]

    override fun formatCursorLabel(p0: Double): CharSequence {

        return formatLabel(p0)


class FirmProfileYAxisLabelProvider(private val labelList: List<String>) :
    NumericLabelProvider() {
    var index = 0
    override fun formatLabel(p0: Double): CharSequence {
        if (labelList.isEmpty()) {
            return ""
        val title = labelList[index]
        index += 1
        index = if (index < labelList.size) {
        } else {
        return title

    override fun formatCursorLabel(p0: Double): CharSequence {
        return formatLabel(p0)

companion object {
    val colorList = mutableListOf(


  • Steve Shan asked 2 months ago
  • last active 1 month ago
0 votes
0 answers

Hi All,
Im trying to kind of reproduce trademarkers example, but i cant get the datacontext of Annotation bound to show the tooltip data.

this is the way im doing things:

first i let the user select an area to place a box annotation via SimpleSelectionModifier


s:SciChartSurface x:Name="_chart" Annotations="{s:AnnotationsBinding Annotations}"
   <!-- axis not showed for legibility !--
          mods:SimpleSelectionModifier IsEnabled="{Binding EnableAnnotation}"
                                i:EventTrigger EventName="RangeSelected"  
                                                            SourceObject="{Binding RelativeSource={RelativeSource  AncestorType={x:Type 
                                                                                            mods:SimpleSelectionModifier }}}"
                                    prism:InvokeCommandAction Command="{Binding RangeSelectedEvent}"  TriggerParameterPath="Coordinates"/

On the VieModel side i’ve got this property to save CustomAnnotationViewmodels , bound to the scichart.Annotations property

private ObservableCollection<IAnnotationViewModel _annotations = new   ObservableCollection<IAnnotationViewModel>();
public ObservableCollection<IAnnotationViewModel> Annotations
    get { return _annotations; }
    set { SetProperty(ref _annotations, value); }

and this Command executed on the rangeSelectedEvent when i create the annotation on the coordinates selected by the user viewmodel and add some custom ddata

   void ExecuteRangeSelectedEvent(Coordinates parameter)
            var annotation = new CustomAnnotationViewModel
                IsEditable = true,
                CanEditText = true,

                X1 = parameter.X1,
                X2 = parameter.X2,
                Y1 = parameter.Y1,
                Y2 = parameter.Y2,
                Data = new Data("test", "text tooltip", DataType.CoolData)
            EnableAnnotation = false;

The CustomAnnotationViewModel is based on the BuyMarkerAnnotationViewModel of the tradeMarkers Example.

and interface to support Data management and CustomAnnottionVIewModel that implementado the interface

public interface ISupportData : IAnnotationViewModel
    Data Data { get; set; }

 public class CustomAnnotationViewModel : CompositeAnnotationViewModel,  ISupportData
    private Wave _data;

    public Wave Data
        get { return _data; }
            _data = value;

    public override Type ViewType
        get { return typeof(CustomAnnotation); }

and finally de XAML on CustomAnnotation where everything should be bound

 s:CompositeAnnotation x:Class="CustomAnnotation"
                           X1="{Binding X1, Mode=TwoWay}"
                           Y1="{Binding Y1, Mode=TwoWay}"
                           X2="{Binding X2, Mode=TwoWay}"
                           Y2="{Binding Y2, Mode=TwoWay}"

            s:BoxAnnotation Background="Coral"
                             Y2="1" /
            s:LineArrowAnnotation CoordinateMode="Relative"
                                   Y2="0.5" /
            s:LineArrowAnnotation CoordinateMode="Relative"
                                   Y2="1" /
            s:TextAnnotation x:Name="MeasureText"

                    ToolTip Foreground="#222"
                        Grid Margin="6" DataContext="{**Binding Data**}"
                                RowDefinition Height="Auto" /
                                RowDefinition Height="Auto" /

                                ColumnDefinition Width="Auto" /
                                ColumnDefinition Width="Auto" /
                                ColumnDefinition Width="Auto" /
                            TextBlock Grid.Row="0" Grid.Column="0" Text="Type: " /
                            TextBlock Grid.Row="1" Grid.Column="0" Text="Text: " /
                            TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Type}" Foreground="#FF00B400"/
                            TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding LabelText}" /


I dont mind if everything is shown on tooltip or other way. but when oi run it a get this binding error.

Data is not found on ViewModel

Any ideas? Can anybody see where im making a mistake?
any help would be very appreciated.

0 votes
0 answers

Hello, I am developing a finance application and I am using candlestick chart here. I also use moving average and various indicators together with the chart. As the data I have shown in the chart is updated, I reflect them on the screen. My chart and indicators are updated as new data comes in, but I cannot update the value and name data that I have shown on the top left side of the chart for the indicator. Every time the data is updated, I want to take the last value of the indicator along with my graph and indicators and update it in the top left part. How can I do that? I will share with you the code of the indicator creation and indicator creation parts that I have used for the moving average. At the same time, this problem exists not only for indicators, but also for graphs. The open, close, high, low data of the chart are not updated when they should be updated every time the data comes in. I’ve added a screenshot to better explain the problem.

0 votes

How to associate a SciChartOverview with multiple SciChartSurfaces? Is there a demo?

0 votes
0 answers

Hello all,

I was trying to export my SciChartSurface to bitmap, to save in a pdf.

First I tried ExportToBitmapSource(true/false, wantedSize) method. It leaded to StackOverflowException.
Then I tried to set explicitly the Height and Width and call the parameterless ExportToBitmapSource() method. It works fine, saves fine, but for a second I see the modified Height and Width and axes.
I tried them sync and async calls too.

Have you ever met these kind of functioning, or is the failure in me?

On my SciChart almost everything has predefined Style. Maybe that’s why the ExportToBitmapSource(true/false, wantedSize) dies while cloning the chart inside?

Showing 1 - 50 of 4k results