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

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.

0 votes

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

0 votes

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 week ago
  • last active 7 days 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.

0 votes


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 3 weeks ago
  • last active 7 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 3 weeks ago
  • last active 3 weeks 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 3 weeks ago
  • last active 3 weeks 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 3 weeks ago
  • last active 3 weeks 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(


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?

0 votes

Hello, I was using version 4.2 before but I updated to version 4.4 last week. I am using candlestick chart in my project and show the chart in various time frames. These time periods include 1 day, 1 hour, 15 minutes, 1 minute and so on. Before the update to v4.4, when 1 time zone was selected, the example would show 09:00, 10:00, and on the 5 minute graph it would show as 09:00, 09:05, 09:10. After updating, it shows 09:00 instead of 09:05 when 5 minutes is selected, and 09:00 instead of 09:19 when 1 minute is selected. I want the date data that I added to the chart to be displayed as it is. I am also attaching screenshots for better understanding.
How can I fix this error I got? There is no problem with the data I have shown in the chart, it sounds as I want, but when I transfer it to the chart, it does not show as I want.

0 votes
0 answers

Hi all,

When we enable the rollover modifier and drag the chart, we can see the tooltip.
However, when I release the finger, the tooltip also disappears.
Is there a way to keep the tooltip showing when releasing the finger?
The problem we want to solve is user will use their finger to mark a critical point, then we will take a screenshot of the chart to generate a report.
Not sure if there is any good way to make the tooltip keeps showing to achieve this requirement?

0 votes


In my application I am hiding some of the line chart by changing the visibility. When changing the visibility the markers is not hiding from the chart. Its happening only the mouse pointer is inside the chart before the visibility change. I have created a sample application and created the video recording also. Please check the attached file for example code and video. On the video you can saw that 2 line visibility is changed and line are hidden from the chart and the markers not hiding from the chart.

0 votes

We are trying to add an image annotation to a View Model. We have closely followed Tutorial 07b – Adding Annotations with MVVM, as well as the Custom Annotations – Adding a WaterMark to a Chart example, but we are not having luck getting anything to show up.
We would like to have something that allows us to pass in the pathway to an image, and then lets us display it on our chart. Depending on different circumstances, we would want to display different images. Is there an example of this type of image annotation somewhere?
Thank you!

0 votes

Hi. I’m trying to add 3DChart to my vue project. And I have a question about the configuration. Can I download .data and .wasm files from the CDN.

For 2D charts , I’ve used recomendation of your release v.2.2:
It works for me. How I can use CDN for SciChart3DSurface?

0 votes

Hey, how would I go about adding a custom template for the cursor axis labels using the Javascript 2D chart API?

I’d like the x-axis to not just have a date in MM/DD/YYYY format but a date and time displayed. The current implementation is below, and below that is the desired implementation.



I have looked through the documentation but I may have missed something. If I have, please point me in the right direction, thanks!

0 votes

Hello, I was using version 4.2 before, but today I updated to version 4.4. I was using the updateCurrentPoint function in the CustomRolloverModifier in my project, but this function has changed in version 4.3. How can I use the updateCurrentPoint function in version 4.4?

0 votes

Please let me know, it is possible or not.

I want change MajorTickLineStyle.Stroke value in code behind and runtime by user.

i was try to changed style, it is sealed.

Please help me!!

  • SSW PS asked 1 month ago
  • last active 1 month ago
0 votes

Hello, I am a new developer who continues to develop scichart. In the currentPoint (or its name may be different) created after clicking in the developed application, the changes made on the graphic (changing the data, changing the graphic type, zooming in or out of the graphic, etc.), leaving these points where they are, breaks the graphic. In these cases, I need to either remove the point or make it move with the graph. how can I do that? I am developing with java. I uploaded the problem I encountered as a gif, you can understand it more clearly when you watch it.

0 votes


I am facing a issue with RolloverModifier. I have multiple charts in single window. For some points the lines over the chart are missing.

Please find the attached images for some examples and the code for reproduce the issue. on the attachment you can see that the line on some chart is missing when mouse on left and right corner area of the chart.

Posting again because on latest version also the same issue not resolved.

0 votes


I have a BlazorWASM app. I am wondering how to sync the x values of different renderable series that have different number of data points.

In a simple form, I am passing in the data for a moving average to be rendered on the chart that has already been populated with data. The moving average data has already been calculated and has the correct date timestamps. But when I add this series to the chart it is starting at index 0 of where the the price data started instead of where the xAxis date of this renderable series has.

I prefer not to use the filters api to regenerate this data as some will be complex and have already been calculated by study or pulled from a database. I have seen the article to offset a series but this seems unnecessary since I already have the x axis coordinate that I want each point of the new line series to be rendered.

Is there somewhere in the docs that I missed how to get these renderable series to line up properly to their own x data points?

Thank you

  • Leland asked 1 month ago
  • last active 1 month ago
0 votes


I am using SciCharts for a data viewer of IQ data from a spectrum analyzer, sampling at 80MS/s.

What is the limit of the XyDataSeries, as i am getting an “Array dimensions exceeded supported range.”

With StackTrace of:
at eel1.set_ufk(Int32 value)
at eel
1.esy(Int32 tdw)
at eel1.InsertRange(Int32 index, IEnumerable1 collection)
at SciChart.Charting.Model.DataSeries.XyDataSeries2.InsertRange(Int32 startIndex, IEnumerable1 x, IEnumerable1 y, IEnumerable1 metadata)
at SciChart.Charting.Model.DataSeries.XyDataSeries2.InsertRange(Int32 startIndex, IEnumerable1 x, IEnumerable`1 y)
at XXX

The count of the dataseries is 134,217,728, and I am trying to append another 524,288 records to it.

I have compiled the application using 64bit and have tried with multiple versions of scicharts up to the latest one on nuget, all of which appear to show the same issue.

If this is a limit of the XyDataSeries, is there any other mechanisms to load the FastLineRenderableSeries that would be able to handle more data?

Thanks for any help in this matter,


  • Daniel asked 1 month ago
  • last active 1 month ago
0 votes

Hi. For example, I set yAxis VisibleRange(-100, 100), but I need to see only 3 gridlines: -100, 0 and 100. I cannot find how to remove other gridlines.

0 votes

I have combed through KB articles and other documentations and samples here and SO, but I am not able to fix the issue. I am desperate for any help.

I have a react app that shows the chart, but at the top of the page, I have a header section and the remaining height is filled with Chart. All the samples and answers that I have seen thus far has no header section on the page. So the chart is 100% filled within it’s container. But, in my case the chart does not fit its container width & height and I end up with a scroll-bar. This is especially evident when you maximize the page (Chrome maximize window).

I am on Windows 10.

I have attached the code and a screen-shot of what the resulting page in Chrome. I have tried with and without CSS and it made no difference in terms of chart filling its container.

React Code:

import { useCallback, useEffect, useState } from ‘react’;
import { createRoot } from ‘react-dom/client’;
import ‘./Chart-styles.scss’;
import { SciChartSurface } from ‘scichart/Charting/Visuals/SciChartSurface’;
import { NumericAxis } from ‘scichart/Charting/Visuals/Axis/NumericAxis’;
import { getSciChartLicense } from ‘../common/chartUtils’;

const Chart = () => {
const [chartId] = useState(‘line-chart’);

const initChartAsync = useCallback(async () => {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(chartId);

    const xAxis = new NumericAxis(wasmContext);
    const yAxis = new NumericAxis(wasmContext);
}, []);

useEffect(() => {
        .catch(error => {
            console.error('ChartRenderer | useEffect | initChartAsync failed!', error);
}, [chartId]);

return (
    <div className="App">
        <div className='App-header'>
            <h2>Chart Header</h2>
            <h3>Chart Sub-Header</h3>
            style={{width: '100%', height: '100%'}}


const container = document.getElementById(‘app’);
const root = createRoot(container!);


app {

display: flex;
flex-flow: column nowrap;
margin: 0;
padding: 0;


.App {
flex: 1 1 auto;
display: flex;
flex-flow: column nowrap;
text-align: center;

.App-header {
flex: 0 1 auto;
display: flex;
flex-flow: column nowrap;
background-color: #855b24;
color: white;
h2 {
background-color: #2e2e2d;
flex: 0 1 auto;
margin: 0;
padding: 2px;
h3 {
background-color: #5c5c5b;
flex: 0 1 auto;
margin: 0;
padding: 2px;

line-chart {

flex: 1 1 auto;


0 votes
0 answers

Hello SciChart team,
we have a problem with column series in 2D. At certain values in the X-axis, the bars in the chart overlap.

We found that the bar width is calculated incorrectly only from a certain distance between the values on the X-axis. There seems to be a bug in the calculation of the minimum bar width.

I’ve already seen issues related to a similar problem with the non-equidistant axis values and have already tried the “UseUniformWidth” property. Unfortunately without success. In principle, however, it seems to work with the non-equidistant axis values (ColumnChart1.png). As soon as the value is changed from 16 to 18, the bars overlap (ColumnChart2.png). In the application we need the width at 100%.

I’ve also attached an example project that can be used to reproduce the error.

Best regards

0 votes

Hello, I am running scichart in a blazorwasm app. On updating from 1.x to 2.2.2351 I am getting an uncaught error for a missing module on app startup before I make any calls to scichart to initialize.

The error is:
Uncaught Error: Cannot find module ‘../Charting/Model/Filters/HlcScaleOffsetFilter’
at webpackMissingModule (buildDataSeries.js:15:94)
at eval (buildDataSeries.js:15:215)
at Object../node_modules/scichart/Builder/buildDataSeries.js (strategyChart.js:133:1)
at webpack_require (strategyChart.js:21:30)
at eval (chartBuilder.js:45:25)
at Object../node_modules/scichart/Builder/chartBuilder.js (strategyChart.js:181:1)
at webpack_require (strategyChart.js:21:30)
at eval (SciChartSurface.js:30:22)
at Object../node_modules/scichart/Charting/Visuals/SciChartSurface.js (strategyChart.js:3253:1)
at webpack_require (strategyChart.js:21:30)

My webpack is:

 const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
module.exports = {
    mode: "development",
    entry: {
        strategyChart: './src/strategyChart.js'
    module: {
        rules: []
    resolve: {
        extensions: [".js"]
    output: {
        path: path.resolve(__dirname, '../wwwroot'),
        filename: "[name].js",
        library: "[name]"
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: "node_modules/scichart/_wasm/", to: "" },
                { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
        new webpack.IgnorePlugin(/(fs)/)
  • Leland asked 2 months ago
  • last active 2 months ago
0 votes
0 answers


I have a collection of IAxisViewModel that I would like to be bound to the XAxes or YAxes of the chart. I don’t use the AxisBiding markup, everything is code behind.

For example, the following must be bound to the ScichartSurface.XAxes :

 public ReadOnlyObservableCollection<IAxisViewModel> XAxes;

Unfortunately Scichart.XAxes is waiting a type of AxisCollection but the only way to read a collection of IAxisViewModel is to use your AxesSourceCollection.

At first I thought that this would be possible :

public ReadOnlyObservableCollection<IAxisViewModel> XAxes;

    var xAxesSourceCollection = new AxesSourceCollection(ViewModel.XAxes);
    sciChartSurface.XAxes = xAxesSourceCollection ;

But it is not.
The last resort is to bind the created xAxesSourceCollection. Using ReactiveUI bindings, it is possible to do the following :

                    .OnItemAdded(x => sciChartSurface.XAxes.Add(x))
                    .OnItemRemoved(x => sciChartSurface.XAxes.Remove(x))

Meaning that I subscribe to the changes of the created xAxesSourceCollection and when a new axis is added/removed, I add/remove it from the XAxes collection of the scichart surface. See image “Without numericAxis”

Everything works fine when I remove an axis but things do not work when I add an axis. The axis is well added in the scichartSurface collection but the axis is not displayed (the major bands/minor bands are). If I use a singleton view model and refresh the whole control, the axes are visible meaning that something inside the scichart surface with the NumericAxisForMVVM is broken.

Even more, if I replace the previous code by this one :

                    .OnItemAdded(x => sciChartSurface.XAxes.Add(new NumericAxis() 
                        IsPrimaryAxis = x.IsPrimaryAxis,
                        Id = x.Id,
                        AxisTitle = x.AxisTitle
                    .OnItemRemoved(x => sciChartSurface.XAxes.Remove(x))

It works as expected because I have replaced the NumericAxisForMVVM by a NumericAxis breaking the link between the view model and the view. See image “With numericAxis”

How can I fix the following ?

Two images are below

0 votes
0 answers


When I create several axes using NumericAxisViewModel, scichart automatically creates corresponding IAxis into its Axes collection.

I have seen that if I change something on the NumericAxisViewModel, the IAxis will have the changes but if I change a property from the IAxis (let’s say AxisTitle), the corresponding NumericAxisViewModel.AxisTitle will not have the change.

The flow works from AxisViewModel to IAxis but not from IAxis to AxisViewModel.

Is it something that was intended from your side ?

0 votes


I have a Blazor WASM app running Scichart JS. In attempting to get any of the filters working listed in the Filters API docs I am unable to build my application and get thrown an error.

As listed in Moving Average Filter Docs I import the XyMovingAverageFilter:

import { XyMovingAverageFilter } from ‘scichart/Charting/Model/Filters/XyMovingAverageFilter’;

Run npm install and build the application and I get the error:
Module not found: Error: Can’t resolve ‘scichart/Charting/Model/Filters/XyMovingAverageFilter’ in …

So far I have not run into any issues getting any of the Scichart JS APIs working in this manner.

  • Leland asked 2 months ago
  • last active 2 months ago
1 vote

I was following the tutorial for building my first Chart for adroid.
I Download the newes version SciChart_ Android_v4.4.* and copy the lib in my FIles.
Since this went way to quick i opend the lib and it was empty, no .aar files.
I downloadet the adroid .zip again and still no .aar files in lib.
Then i downloadet the 4.3 version and there they are: aar files!

My Question: how do i get those files of the latest version?

0 votes
0 answers

Hi, I would like to always show the tick label of the start and end of the visible range. Are there any ways to implement this in iOS?

0 votes

I would like to create an arc annotation as shown in the attached image in Scichart JavaScript.
Please guide me on what will be the best way.

1 vote


I am facing a issue with RolloverModifier. I have multiple charts in single window. For some points the lines over the chart are missing.

Please find the attached images for some examples and the code for reproduce the issue. on the attachment you can see that the line on some chart is missing when mouse on left and right corner area of the chart

1 vote
0 answers

Is it possible to add color gradients to part of the mesh on an ObjectModel3D? We would love to use SciChart exclusively for our charts because they are easy to work with and almost all of the other charts in our software are SciChart charts.

Currently, we use LightningCharts for our 3D heads and the have a method call UpdateFill which applies a color gradient to part of the mesh. This shading is done using the geometry data generated from LightningCharts after the head is rendered. I didn’t see a similar method in SciChart but I don’t know that it is necessary because the geometry will be the same ever time the chart is rendered so we can just use the data generated from LightningCharts.

I’ve included a screenshot showing what I’ve been able to create with SciChart and a screenshot showing what the chart looks like currently with LightningCharts. The brain is a .obj file (along with the scalp and face but those are separate and don’t require any shading). The sensor locations (Fp1, Fp2, O1, and O2) are added using the ScatterRenderableSeries3D (I haven’t added annotations for the locations yet).



0 votes

@TypeScriptError Getting an 800A0404 error when opening any javascript file. This is happening in the Windows Script Host panel. Telling me that I have bad code, that’s not bad. This has been happening since upgrading my Java Version.

0 votes

Hi, I’ve found that there is no example of using SciChart in SwiftUI, the swift examples are using storyboard.

I’ve tried that, using SciChart in SwiftUI, and it worked. But I have some confusions about axis update and data update.

in SwiftUI, first I create a chartview struct as NSViewRepresentable, and in func makeNSView(context: Context) -> SCIChartSurface{} to initialize the chartview as any supported SciChart view type.

second, in func updateNSView(_ nsView: SCIChartSurface, context: Context){} to update the data and axis.

When updating axis(like visiablerange), every time I need call nsView.xAxes.clear() to remove axis first and then add axis again.

When updating data, every time I need to call nsView.renderableSeries.clear() to clear current plot data first and then call nsView.renderableSeries.add() to update the data.

My confusion is that is this the right way to do that? It seems not quite efficient.

  • Keyu Yan asked 2 months ago
  • last active 2 months ago
0 votes


This question is related to this discussion :

I want to export a chart as XPS and have the HeatmapColorMap on the XPS. I put the HeatmapColorMap inside a CustomAnnotation. I had an issue with the ticks and labels not appearing on the printed XPS so I was advised to use a workaround :

public class SciChartSurfaceEx : SciChartSurface
    protected override SciChartSurfaceBase CreateCloneOfSurfaceInMemory(Size newSize)
        // Grab custom annotation that stores HeatmapColormap on a real chart
        var originalColormapAnnotation = (CustomAnnotation)this.Annotations.Where(x => x.GetType() == typeof(CustomAnnotation)).FirstOrDefault();
        var originalColorMap = originalColormapAnnotation.Content as HeatmapColorMap;

        // Perform exporting functionality(serializing\deserializing)
        var cloned = (SciChartSurface)base.CreateCloneOfSurfaceInMemory(newSize);

        var newWindow = new Window();
        newWindow.Content = cloned;

        return cloned;

Opening a new window is a workaround to prevent the HeatmapColorMap from disappearing after exporting, because it disappears otherwise.
This works fine when exporting a PNG at non-default size but it does not work when exporting as XPS. I get the following exception :

System.InvalidOperationException: ‘Specified element is already the logical child of another element. Disconnect it first.’

Why do I have this exception ? Is there any way around it ?
There are quite a few bugs when exporting charts, it would be nice to have them fixed.

Thank you in advance !

0 votes

I have a DataTemplate defined in my xaml file that I’d like to access from my ViewModel that I use to manage the layout and look of the chart legend

Here is the DataTemplate I have defined:

<DataTemplate x:Key="CustomLegendTemplate"
        <Grid HorizontalAlignment="Right"
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="Auto" />

            <!--  Series icon, binds to SeriesInfo.Stroke  -->
            <Ellipse Grid.Column="0"
                     Margin="2 2 8 0"
                     Fill="{Binding Stroke,
                                    Converter={StaticResource ColorToBrushConverter}}" />

              <!--Series name (SeriesInfo.SeriesName)-->  
            <TextBlock Grid.Column="1"
                           Text="{Binding SeriesName}" />

            <!--  Show or hide the 'Visibility Checkboxes'  -->
            <Grid Grid.Column="1"
                  Visibility="{Binding DataContext.ShowVisibilityCheckboxes,
                                       Converter={StaticResource BooleanToVisibilityConverter}}">

                <!--  Binds to SeriesInfo.IsVisible to show and hide the series  -->
                <CheckBox Width="16"
                          Foreground="{Binding Stroke,
                                               Converter={StaticResource ColorToBrushConverter}}"
                          IsChecked="{Binding IsVisible,
                        <ScaleTransform ScaleX="0.7" ScaleY="0.7" />

Now I’d like to access this template from my ViewModel to help manipulate my Legend the ViewModel code I have :

ModifierGroup legendInfo = new ModifierGroup(new LegendModifier()
                ShowLegend = true,
                Orientation = Orientation.Vertical,
                Margin = new Thickness(0, 0, 0, 0),
                LegendPlacement = LegendPlacement.Inside,
                GetLegendDataFor = SourceMode.AllSeries,
                ShowVisibilityCheckboxes = true,
                FontSize = 8,
                Background = (Brush)AxisColor.ConvertFromString("Transparent"),
                ShowSeriesMarkers = true

Then I add this to a ChartModifier = new ModifierGroup(XAxisDrag, YAxisDrag, ZoomExtents, RubberBandZoom, PanModifier, Rollover, legendInfo);

It is all working beautifully, but how can I reach for the xaml DataTemplate I have defined ?

Thank you for the excellent support

0 votes

Hello SciChart-Team,
we had the requirement to show the zero line when there are negative values ​​in the chart.
We noticed the following things, especially in connection with the main grid lines.
There are some side effects at certain sizes of the window:
When the gridlines are on(see screenshot 1):
1. Grid line and tick are not on the same level (Only for certain sizes)
2. The grid line and horizontal annotation line (green) are not aligned either (Only at certain sizes)
3. The axis line (defined via BorderThickness) is also not aligned with the grid line (regardless of the size of the control).And the bottom tick is never aligned with the major grid line

If the major grid lines are switched off, the zero annotation line is not aligned to the ticks for certain sizes of the control (see screenshot 2)

It looks like different algorithms were used to calculate the line position of the ticks, grid lines and line annotations.

The problem was detected on the monitor with 100% scaling. On a 4K monitor with scaling > 100%, the problem became even more apparent

Do you have any suggestion how to solve the problem?

I’ve attached a modified example project in which the behavior can be reproduced.

Silvester Schneidt

0 votes
0 answers

I have a SciChartLegend below my chart that was using the default item template in v6.4, and I could change the color of my legend labels simply by setting the Foreground property of the SciChartLegend. However, when I updated to SciChart 6.5.1, the font of my legend labels changed to all black. If I investigate my UI using Snoop, I see the following Binding error on the TextBlock.Foreground property for one of my legend items:

System.Windows.Data Error: 4 : Cannot find source for binding with reference ‘RelativeSource FindAncestor, AncestorType=’SciChart.Charting.Visuals.RenderableSeries.LegendPlaceholder’, AncestorLevel=’1”. BindingExpression:Path=Foreground; DataItem=null; target element is ‘TextBlock’ (Name=”); target property is ‘Foreground’ (type ‘Brush’)

I also tried v6.5.0, and this behavior did not occur – it is new in v6.5.1

Below is the definition of my legend.

<s:SciChartLegend x:Name="legend"
                  LegendData="{Binding ElementName=LegendModifier, Path=LegendData}"
            <chartUtils:UniformWrapPanel Orientation="Horizontal"/>
0 votes
0 answers

Hello Andrew & Co.

I need some guidance in an attempt to add some required functionality to my SciChart application.

A requirement has been brought to my attention where a user wants to do a graph over lay from a different time snap shot . This is useful for comparison reasons, where the engineer wants to compare a previous successful execution of a process with a current running one.

  • One part of the solution is to save the dataseries info from a finite
    time period in the past.
  • Second part is that the overlaid trend (dataseries) need to be time
    XAxis independent but YAxis relative.

I am looking at two different scenarios let me see what you guys think:

  1. Overlaid historic static trend on existing chart surface
  2. Historic static trend in a new chart surface (smaller format) on the
    bottom of the current chart surface being displayed

How should I best approach such an implementation ? The application is using the MVVM pattern. I have adhered to the pattern pretty religiously so far

Hopefully that makes sense to describe what I am trying to accomplish.
Appreciate your support and expert guidance in this matter


0 votes

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

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

0 votes

Do you have Fibonacci Arcs and Retracements in JavaScript charts? If yes could you please provide a sample to build them.

Showing 1 - 50 of 4k results