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

0 votes


Is there any way to Create an image (as png) of an scichart surface and store it in Clipboard for later use in javascript?

0 votes

such as,
SciChartSurface didn’t render, because an exception was thrown:
Message: Object reference not set to an instance of an object.

Stack Trace: at System.Array.Copy(Array sourceArray, Int32 sourceIndex, Array destinationArray, Int32 destinationIndex, Int32 length, Boolean reliable)
at System.Array.Copy(Array sourceArray, Int32 sourceIndex, Array destinationArray, Int32 destinationIndex, Int32 length)
at SciChart.Data.Model.Values1.qui(Int32 tht)
at jrj.ResampleInternal(Values
1 resampledXValues, Values1 resampledYValues, Vectori resampledIndices, Double[] xValues, Double[] yValues, ResamplingArgs args)
at SciChart.Data.Numerics.PointResamplers.ExtremeResamplerBase
2.dlq(IList1 hxl, IList1 hxm, IPointSeries hxn, ResamplingArgs hxo, DoubleRange hxp)
at SciChart.Data.Numerics.PointResamplers.ExtremeResamplerBase2.Execute(IList1 xColumn, IList1 yColumn, ResamplingParams resamplingParams, ResamplingMode resamplingMode, IPointSeries lastPointSeries)
at SciChart.Charting.Model.DataSeries.XyDataSeries
2.ToPointSeriesInternal(ResamplingParams resamplingParams, ResamplingMode resamplingMode, IPointResamplerFactory factory, IPointSeries lastPointSeries)
at SciChart.Charting.Model.DataSeries.DataSeries`2.ToPointSeries(ResamplingParams resamplingParams, ResamplingMode resamplingMode, IPointResamplerFactory factory, IPointSeries lastPointSeries)
at jfw.dxn(AxisCollection cax, IRenderableSeries cay, RenderPassInfo caz, IPointResamplerFactory cba, Boolean cbb, IDataSeries& cbc, IndexRange& cbd, IPointSeries& cbe, Int32& cbf)
at jfw.dxl(ISciChartSurface cat, Size cau, Boolean cav)
at jfw.RenderLoop(IRenderContext2D renderContext)
at SciChart.Charting.Visuals.SciChartSurface.DoDrawingLoop()

  • YXJ YXJ asked 5 hours ago
  • last active 3 hours ago
0 votes

I recently upgraded from to 1.7x, and the ‘powered by scichart’ footer now appears on my charts. How do I remove this?

  • tpayton asked 8 years ago
  • last active 1 day ago
0 votes

Scenario: user selects an area of a heatmap chart using a box annotation via a mouse drag.

I have created a custom modifier to draw the box annotation. I’ve used this as the basis: SimpleDataPointSelectionModifier.ts

My question is: how to I get the X axis start + end values and the Y axis start + end values based on the area of the annotation/mouse coordinates.


1 vote

It’s possible to implements something like WPF ‘s SciChartOverview in SciChart JS ?

0 votes

Hello there. At the beginning of the program, I define the workspace as w=10 and h=10 units. I set the new workspace to 5×5 in a button event. The new workspace is created but the old 10×10 volume remains on the screen. When I create the new workspace I want the old one to disappear. Thank you in advance for your help. Good work.

My button event.

btnSetNewWH.setOnClickListener(new View.OnClickListener() {
    public void onClick(View view) {
w = 5;
h = 5;
ds3d = new UniformGridDataSeries3D<>(Double.class, Double.class, Double.class, w, h);      

rs1 = sciChart3DBuilder.newSurfaceMeshSeries3D()
        .withMeshColorPalette(new GradientColorPalette(colors, stops))

0 votes

Hello, I`d like to ask u about cursor view. As default cursor I want use crosshair and as move grabbing as showed in attachment. How can I do that ?

0 votes

Hi sir,

We would like to build a real time updated stackedcolumn chart in mvvm mode.
Is that possible? (x-axis on the left side)(y-axis on the bottom side which can keep update with only 10mins range)

I wonder can I use the StackedColumnRenderableSeriesForMvvm?
I found out this control but have no idea how to use it…

  • Wade Yao asked 4 days ago
  • last active 3 days ago
0 votes
0 answers

After moving from version: 1.4.1575 to version: 1.4.1611 we are seeing the the Cursor modifier replicating across all the charts in our dashboard. Obviously this is not desirable. I’ve attached screenshots to show this.

Please could you advise?

0 votes
0 answers


I am having an issue with the SciChart graphs. I have attached an image – SciChartIssue.png, here which shows the issue. Our SciChart graph contains 8 channels of dataseries for EEG / EMG signals. By default the first channel is selected. When we select/deselect additional channels, they start showing up on the graph accordingly. The issue happens when a channel is de-selected. i.e. when any channel is de-selected, we are clearing that particular channel dataseries, while the other series is being appended and rendered using SuspendUpdates(). But on the graph, the waveform tends to move towards the extreme end of the chart (as seen from the image attached). we were initially using version 5.4 of Scichart. but i later updated it to v6.3, but still have the same issue.
If you are aware or have come across such an issue, then I would appreciate any help or advice from you. Since this is a vast and secure project, I am not able to share the entire code with you at this moment. However, I have attached a xaml & .cs file used to render the graph, If it helps.


1 vote

How do I insert gaps in a heatmap series? At the moment null values seem to show as either the max value colour or the min value colour.

0 votes
0 answers

I added the data to each BoxPlotDataSeriesas shown in the code below.
Boxplot widths are not the same as the image below.
Please let me know can we change the size of the box plot chart.

IEnumerable<BoxPoint> boxData = GetBoxPlotData().ToArray();

RenderableSeriesViewModels = new ObservableCollection<IRenderableSeriesViewModel>();
foreach (var data in boxData)
    var boxDataSeries = new BoxPlotDataSeries<double, double>();
    boxDataSeries.Append(data.XValue, data.Median, data.Minimum, data.LowerQuartile, data.UpperQuartile, data.Maximum);

    var boxplotViewModel = new BoxPlotRenderableSeriesViewModel { DataSeries = boxDataSeries };

Same issue :

  • Isol Gwon asked 6 days ago
  • last active 5 days ago
0 votes

Just trying to run the demo using these instructions:

It doesn’t work I’m getting “Failed to emit precompiled header” and “SciChart/SciChart.h file not found”

0 votes

We want to create loop graph in android wrap data

0 votes

I’m trying to use AvaloniaUI with .NET Core 3.1 to create an application using SciChart, but I get XAMLIL error when trying to add a SciChartSurface following the code from the tutorial. I used a standard Avalonia MVVM Application template when creating the project.

This is the code:

<UserControl xmlns=""
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"

        <!-- Bind to ChartViewModel.ChartTitle etc -->
        <s:SciChartSurface ChartTitle="{Binding ChartTitle}">
                <s:NumericAxis AxisTitle="{Binding XAxisTitle}"/>
                <s:NumericAxis AxisTitle="{Binding YAxisTitle}"/>

And the error I get is:
“XAMLIL: Unable to resolve type SciChartSurface from namespace Line 27, position 4″
which is the first s:SciChartSurface entry.

Any ideas what might be wrong? Does SciChart not work with any framework regardless of using .NET Core 3.0?
I have tried changing between Core 3.0 and 3.1, which does nothing.

0 votes
0 answers

Good afternoon,

I wanted to synchronize the mouse events between graphs, but based on the value of the X axis, not on the position within the graph. In the photo attached below, it is seen that the mouse events are synchronized, and the rollover appears in both graphs. However, what I want is that if, for example, in the graph on the left, the mouse is at time 00: 15: 00.000, in the graph on the right, the rollover also appears at position X 00: 15: 00.000, regardless the width of each graph. Until now I have not been able to get it, as seen when on the left it is at the time 00: 22: 37.00 on the right it appears at the point 00: 10: 23.750.

I would need a way to achieve this with code behind, since I create the graphics programmatically and without MVVM.

As extra information, all charts have the same range of X axis values (they all go from the same start time to the same end time)

Thanks a lot!

0 votes
0 answers

I’m using a candlestick series in a slightly unconventional use case, essentially to show a range at a given data point, screenshot below.
enter image description here

This works fine if the number of the data points and window size stays the same, but if I resize the window, the bars shrink accordingly, which I want to avoid.
enter image description here

So basically what I need is some kind of rendering mode that takes in a pixel width for the bars.
I’ve attempted to update the DataPointWidth on the series using a combination of the screen width and the number of points, but it’s extremely messy since the change needed isn’t linear.
enter image description here

0 votes

Would there be a straight-forward way to put the SciChart Legend from a LegendModifier inside a WPF Expander control, to show or hide the legend?

Would ScichartSurface need to be subclassed in order to accomplish this visual?

<s:LegendModifier ShowLegend="{Binding ShowLegend}" 
    LegendPlacement ="Right"/>
0 votes


Is it possible to display distinct labels for Y, and Y1 on BandRenderableSeriesViewModel using RollerOverModifier?

I have tried using following code snippet for RolloverModifier.TooltipTemplate, additionally tried using TooltipContainerStyle with a custom template. With these, same tooltip appears on both the lines. Is it possible to
1- Either display tooltip on only one line (e.g. on the red line), and point markers on both lines.
2- Or display a single label with current point markers’s value on each line i.e. Y on Red, and Y1 on green?
3- Set point marker colors to same as line’s as circled on the screenshot?

<DataTemplate x:Key="BandTooltipTemplate" DataType="s:XyySeriesInfo">
    <StackPanel Orientation="Vertical">
        <TextBlock Foreground="White">
            <Run Text="Series: "/>
            <Run Text="{Binding SeriesName, StringFormat='{}{0}:', Mode=OneWay}"/>
        <TextBlock Foreground="White">
            <Run Text="Top: "/>
            <Run Text="{Binding FormattedYValue, Mode=OneWay}"/>
        <TextBlock Foreground="White">
            <Run Text="Bottom: "/>
            <Run Text="{Binding FormattedY1Value, Mode=OneWay}"/>

Existing result screenshot attached.

Thanks, Roger.

0 votes

i have been working on line charts and i need to show date as well as time on the axis( 21 june 08 05:30:PM like this).I’ve tried with date axis and numeric axis ,but it doesn’t helps.Do we have any suggestions or samples which could help me

0 votes


I have several vertical line annotations placed on my chart.

(1.) id=9136 at location 1229.8065
(2.) id=8572 at location 1230.0483
(3.) id=8570 at location 1230.1089

At a certain level, the annotations are at the good locations. Before 1230 for (1.) and after, for both next (see image GoodLocation.png).
If I zoom out, (1.)(2.)(3.) labels are shifted to the right (see WrongLocation.png) and the tooltip on (1.) correspond at tooltip (2.)

Can you help me?
In advance thank you for your support

0 votes

Is it possible to vary the zsize and xsize of a WaterfallDataSeries3D series at runtime?

0 votes
0 answers

I opened a page in my app, this page just have a chart control and displaying data. it throw exception: “VXccelEngine2D.dll is either not run on Windows or it contains an error, try installing again.”

did someone encounter this issue? who can help me out? thanks much.

                Grid.Column="1" x:Name="DCVChart" sc:ThemeManager.Theme="BrightSpark" RenderPriority="Low" 
                RenderableSeries="{Binding DataSeries}" Annotations="{sc:AnnotationsBinding AnnotationViewModels}">
                    <sc:TimeSpanAxis VisibleRange="{Binding XAxisRange, Mode=TwoWay}" AxisTitle="Time(s)"/>
                    <sc:NumericAxis AxisAlignment="Left" VisibleRange="{Binding YAxisRange, Mode=TwoWay}" AxisTitle="Data" DrawMajorBands="True" GrowBy="0.1, 0.1"/>
                        <cm:SimpleXyZoomModifier Source="DCV"  IsEnabled="True" IsXAxisOnly="False"/>
                        <cm:SimpleZoomExtentsModifier Source="DCV" ReceiveHandledEvents="True"/>
                        <cm:ZoomPanModifierEx ExecuteOn="MouseRightButton" ClipModeX="None" ReceiveHandledEvents="True"/>
                        <sc:MouseWheelZoomModifier ReceiveHandledEvents="True"/>
                        <sc:RolloverModifier x:Name="rolloverModifier" ReceiveHandledEvents="True" ShowAxisLabels="True" ShowTooltipOn="Always" TooltipUsageMode="Popup"/>
  • Xiaowei asked 4 weeks ago
  • last active 2 weeks ago
0 votes

Unsorted xValues is possible on SCI Chart? I tried with dataIsSortedInX: false and isSorted: false on dataSeries, But its not showing the correct range.


 new XyDataSeries(wasmContext, {
        dataSeriesName: "Line Series",
        xValues: [0,10,20,13,54,15,26,17,18,19],
        yValues: [0,1,5,1,20,5,1,8,9,3],
    dataIsSortedInX: false
0 votes

I see in the documentation that I need to set the boolean to true/false. But my question is how do I do this after the series has been rendered? I am using a custom legend and need to be able to toggle visibility.

  export default function Chart() {
  const [sciChartSurface, setSciChartSurface] = React.useState<SciChartSurface>();
  const [wasmContext, setWasmContext] = React.useState<TSciChart>();

  const dataSeriesMapRef = React.useRef<Map<keyof typeof chartData, XyDataSeries>>();

  React.useEffect(() => {
    (async () => {
      const { sciChartSurface, wasmContext } = await drawChart(theme, chartType);

    dataSeriesMapRef.current = new Map<keyof typeof chartData, XyDataSeries>();

    return () => sciChartSurface?.delete();
  }, [chartType]); // make sure the chart is initialized only once

  React.useEffect(() => {
    if (dataSeriesMapRef.current && sciChartSurface && wasmContext && !isLoading) {
      // const currentSeries = sciChartSurface.renderableSeries.asArray();
      // if (currentSeries) sciChartSurface.renderableSeries.clear();
      updateChartWithData(dataSeriesMapRef.current, theme, wasmContext, sciChartSurface, chartData, chartType);
  }, [theme, chartData, wasmContext, sciChartSurface, isLoading]);

  return (
    <div id="chart-container">
        dataSeriesMap={dataSeriesMapRef.current as Map<keyof typeof chartData, XyDataSeries>}
        sciChartSurface={sciChartSurface as SciChartSurface}
        wasmContext={wasmContext as TSciChart}
      <div id={DIVID} style={{ width: windowWidth, height: windowHeight }} />
      <ControlsBottom />


    export default async (theme: ExtendedTheme, chartType: string) => {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(DIVID);
  const isLightTheme = theme.palette.type === 'light';

  const xAxis = new NumericAxis(wasmContext);
  const yAxis = new NumericAxis(wasmContext);

  xAxis.labelProvider.formatLabel = (unixTimestamp: number) => {
    return new Date(unixTimestamp * 1000).toLocaleDateString('en-us', {
      month: 'short',
      year: 'numeric',
      day: 'numeric',

  yAxis.labelProvider = new CustomLabelProvider();


  if (chartType !== 'stack') sciChartSurface.chartModifiers.add(new RolloverModifier({ showRolloverLine: false }));
  sciChartSurface.chartModifiers.add(new ZoomPanModifier());
  sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
  sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
  sciChartSurface.chartModifiers.add(new PinchZoomModifier());

  const rubberBandXyZoomModifier = new RubberBandXyZoomModifier({
    isAnimated: true,
    animationDuration: 400,
    easingFunction: easing.outExpo,
    fill: '#FFFFFF33',
    stroke: '#FFFFFF77',
    strokeThickness: 1,


  if (isLightTheme) sciChartSurface.applyTheme(new SciChartJSLightTheme());
  else sciChartSurface.applyTheme(new SciChartJSDarkTheme());
  return { sciChartSurface, wasmContext };


    export const updateChartWithData = (
  dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>,
  theme: ExtendedTheme,
  wasmContext: TSciChart,
  sciChartSurface: SciChartSurface,
  chartData: ChartData,
  chartType: string
) => {
  const streamIds = Object.keys(chartData);
  const isLightTheme = theme.palette.type === 'light';

  if (isLightTheme) sciChartSurface.applyTheme(new SciChartJSLightTheme());
  else sciChartSurface.applyTheme(new SciChartJSDarkTheme());


  const stackedColumns: any[] = [];
  streamIds.forEach((s) => {
    const streamId = Number(s) as keyof ChartData;
    const streamSelectorId = streamId as keyof typeof chartData;
    if (dataSeriesMap.has(streamSelectorId)) {
      const xyDataSeries = dataSeriesMap.get(streamSelectorId);
      chartData[streamId].data.forEach((value) => {
        xyDataSeries?.append(value.timestamp, value.value);
    } else if (chartType === 'scatter') {
      const lineSeries = LineChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);

    } else if (chartType === 'bar') {
      const lineSeries = BarChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);
    } else {
      const lineSeries = StackedChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);


    export default (
  dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>,
  theme: ExtendedTheme,
  wasmContext: TSciChart,
  chartData: ChartData,
  streamSelectorId: keyof typeof chartData,
  streamId: keyof ChartData
) => {
  const xyDataSeries = new XyDataSeries(wasmContext);
  dataSeriesMap.set(streamSelectorId, xyDataSeries);

  const obj = chartData[streamSelectorId];
  const stroke = obj.stroke as string;
  xyDataSeries.dataSeriesName = obj.label as string;

  chartData[streamId].data.forEach((value) => {
    xyDataSeries.append(value.timestamp, value.value);

  const lineSeries = new FastLineRenderableSeries(wasmContext, {
    strokeThickness: obj.strokeThickness,
    strokeDashArray: obj.strokeDashArray,
    dataSeries: xyDataSeries,
    animation: new WaveAnimation({ zeroLine: -1, pointDurationFraction: 0.5, duration: 1000 }),

  lineSeries.rolloverModifierProps.tooltipColor = theme.palette.background.paper;
  lineSeries.rolloverModifierProps.tooltipTextColor = theme.palette.getContrastText(stroke);
  lineSeries.rolloverModifierProps.markerColor = stroke;
  lineSeries.rolloverModifierProps.tooltipTemplate = (
    id: string,
    tooltipProps: RolloverModifierRenderableSeriesProps,
    seriesInfo: SeriesInfo,
    updateSize: (width: number, height: number) => void
  ) => {
    const { tooltipColor, tooltipTextColor, markerColor } = tooltipProps;
    const { formattedXValue, yValue, seriesName } = seriesInfo;
    const width = 192;
    const height = 60;

    updateSize(width, height);
    return `<svg width='${width}' height='${height}' class="root">
        <rect width="100%" height="100%" fill='${tooltipColor}' stroke='${markerColor}' stroke-width='2' />
         <svg width='100%'>
           <text dy="0" fill='${tooltipTextColor}'>
            <tspan x="15" y="20" class="title">${formattedXValue}</tspan>
             <tspan x="15" y="45" class="value">
              ${seriesName} | ${yValue.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
  return lineSeries;


    let _chartData: any[] = [];
export default ({
}: {
  dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>;
  theme: ExtendedTheme;
  wasmContext: TSciChart;
  sciChartSurface: SciChartSurface;
  chartData: ChartData;
}) => {
  const classes = useStyles();

  const chartRef = React.useRef<any>([]);
  const [legendData, setLegendData] = React.useState<any[]>([]);

  // _chartData = [..._chartData, ...values(chartData)];
  _chartData = values(chartData);
  _chartData = uniqby(_chartData, 'groupId');
  _chartData = uniqby(_chartData, 'streamId');

  React.useEffect(() => {
    if (_chartData.length > 0 && !isEqual(chartRef.current, _chartData)) {
      chartRef.current = _chartData;
  }, [_chartData]);

  const onClick = React.useCallback(
    (item) => {
      // const xyDataSeries = dataSeriesMap.get(160);
      const _legendData = => {
        if (x.groupId === item.groupId) x.isVisible = !x.isVisible;
        return x;


  return (
    <div className={classes.root}>
      <Paper variant="outlined" square>
        { any) => (
          <div className={classes.listItem} key={item.streamId}>
              onClick={() => onClick(item)}
              style={{ color: item.stroke }}
              {item.isVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}

Inside the onClick function is where I was trying to change visibility for both series. I’ve tried multiple things without any luck. I assumed it would be as simple as getting the correct series, setting the visible property and maybe a re-render if that is even needed? Like I said any advice on a better way of handling this is welcome

0 votes


I have a valid license key for development. But occasionally the charts show the message below and I have to restart the app to avoid that. May I ask is there a reason for that and how to fix it?

"Sorry! You have not set a License Key. You can request a free trial key from or purchase at"


  • Gang Xu asked 3 weeks ago
  • last active 2 weeks ago
0 votes

Hi there,

I need to display a horizontal column chart so I followed the example for rotating charts:

<s:NumericAxis BorderBrush="Black" BorderThickness="1,0,0,0" x:Name="xAxis" AxisAlignment="Left" Margin="0,20"/>
<s:NumericAxis BorderBrush="Black" BorderThickness="0,0,0,1" AxisAlignment="Top"  FlipCoordinates="True" x:Name="yAxis"  />

And it works as expected.
Now the Problem: I want to be able to move my x-Axis to any given value. For “normal”(y-axis vertical and x-axis horizontal) I use the shifted axis example, but for that to work the axis need to be center axis (or am I missing something?) and with center axis set to true the entire thing looks like in the picture I attached.

Any help would be appreciated.
Thanks in advance.

4 votes


I’ve got the following scenario that I need to implement and it would be very nice if you could give me a jump-start. I need to bind the x-axes values represented by 2 vertical lines and the y-axis values represented by 2 horizontal lines to a viewmodel, so that the values inside the viewmodel change when moving the lines per mouse on the screen and the other way around (see mockup for how it should look like). I think the rollover modifier could be usable for this, but I need some pseudo code or an example app on how to bind the rollover modifiers value to the viewmodel and how to display 4 rollover modifiers on the chart surface.


1 vote

Hi Scichart Team,
RenderableSeries Hit-Test still having some issues. I saw that the bug on your board is already closed state and my last comments are missed on the bug. So i am adding the same here.

Can you please check the video and the code. Only change i have done on the Example is the data values are updated. On the video you can saw the clicking outside for some area Hit is showing, some area miss is showing, and clicking on the lines or point also showing the same. Let me know you need any more inputs from my side.

0 votes


I am getting console error and page is crashing and reloading the page.

0 votes

I was just going through the tutorial and had my project initializing the graph and drawing a few datapoints. Out of the blue after recently building with no new changes, I’ve been getting hit with the attached message. I’ve even tried deleting the scichart sub-folder within node_modules and reinstalling scichart via npm to no avail.

0 votes

Hi there,

I would like to use a column chart with labels. Our client tends to use really long names for these labels, so I was wondering if it is possible that these labels wrap. I could find no property in the docs or source that achieves this. The attached screenshot shows the current (and undesired) rendering.

The current behavior seems to be that labels in between are hidden when longer labels overlap them. Is this a configurable property? In our case, the labels may never be hidden.

Kind regards,
Tim Havinga

0 votes


How can I add a geometry to a 3D chart in MVVM?

Best regards

0 votes

RenderableSeries Hit-Test is not working as expected. Some bugs on the the RenderableSeries Hit-Test. Distance between two points are less then its working most of the time and getting the isHit variable getting true. But the distance is high then the lines near to the point only getting the isHit true. I am attaching the image when the red marked area is working fine and the blue marked area not working.

0 votes
0 answers

I want show min and max only. for y axis.
how to succeed this problem.
Please support my problem. thank you. sorry my english.

0 votes

Hey Guys,

On a SciChart surface (CandleStickChart), how could I add LineAnnotation, BoxAnnotation, and TextBox annotation using TradingAnnotationCreationModifierMvvm (available under
ChartAnnotations/Trade Annotations sample). I have recreated a sample, based on the example.

Following is my XAML code,

Chart Surface: Modifiers.

<s:TradingAnnotationCreationModifierMvvm AnnotationViewModelType="{Binding DataContext.AnnotationCreationVM.AnnotationType, Source={StaticResource ROOT_OHLC_CHART_SPY}}"
                                                         AnnotationViewModelsCollection="{Binding LAnnotations}"
                                                         IsEnabled="{Binding DataContext.AnnotationCreationVM.IsAnnotationCreationEnable, Source={StaticResource ROOT_OHLC_CHART_SPY}, Mode=TwoWay}"
                                <ext:EventToCommandBehavior Command="{Binding DataContext.AnnotationCreationVM.AnnotationCreatedCommand, Source={StaticResource ROOT_OHLC_CHART_SPY}}"
                                                    PassArguments="True" />

ParentView Buttons,

<ToggleButton Width="Auto" HorizontalAlignment="Stretch" Content="Line" 
                                  Style="{StaticResource ChartToggleButton}" 
                                  IsChecked="{Binding AnnotationCreationVM.Line}" 
                                  CommandParameter="{x:Type s:LineAnnotationViewModel}"/>
                    <ToggleButton Width="Auto" HorizontalAlignment="Stretch" Content="Elliot Wave"  Grid.Row="1"
                                  Style="{StaticResource ChartToggleButton}" 
                                  IsChecked="{Binding AnnotationCreationVM.EllioteWave}" 
                                  CommandParameter="{x:Type dt:ElliotWaveAnnotationViewModel}"/>
                    <ToggleButton Width="Auto" HorizontalAlignment="Stretch" Content="Pitch Fork" Grid.Row="2" 
                                  Style="{StaticResource ChartToggleButton}" 
                                  IsChecked="{Binding AnnotationCreationVM.PitchFork}" 
                                  CommandParameter="{x:Type dt:PitchforkAnnotationViewModel}"/>
                    <ToggleButton Width="Auto" HorizontalAlignment="Stretch" Content="Xabcd" Grid.Row="3" 
                                  Style="{StaticResource ChartToggleButton}" 
                                  IsChecked="{Binding AnnotationCreationVM.Xabcd}" 
                                  CommandParameter="{x:Type dt:XabcdAnnotationViewModel}"/>
                    <ToggleButton Width="Auto" HorizontalAlignment="Stretch" Content="Head N Shoulders" Grid.Row="4" 
                                  Style="{StaticResource ChartToggleButton}" 
                                  IsChecked="{Binding AnnotationCreationVM.Hns}" 
                                  CommandParameter="{x:Type dt:HeadAndShouldersAnnotationViewModel}"/>
                    <ToggleButton Width="Auto" HorizontalAlignment="Stretch" Content="Fibonacci Extension" Grid.Row="5" 
                                  Style="{StaticResource ChartToggleButton}" 
                                  IsChecked="{Binding AnnotationCreationVM.FibExt}" 
                                  CommandParameter="{x:Type dt:FibonacciExtensionAnnotationViewModel}"/>
                    <ToggleButton Width="Auto" HorizontalAlignment="Stretch" Content="Fibonacci Retracement" Grid.Row="6"
                                  Style="{StaticResource ChartToggleButton}" 
                                  IsChecked="{Binding AnnotationCreationVM.FibRetr}" 
                                  CommandParameter="{x:Type dt:FibonacciRetracementAnnotationViewModel}"/>

ParentView view model,

public ICommand AnnotationCreatedCommand => new ActionCommand<AnnotationCreationMVVMArgs>(e =>
            var annotation = e.NewAnnotationViewModel;
            if (annotation != null)
                if (annotation is ITradingAnnotationViewModel tradingAnnotation)
                    ((AnnotationBase)tradingAnnotation.Annotation).Selected += OnAnnotationSelectionChanged;
                    ((AnnotationBase)tradingAnnotation.Annotation).Unselected += OnAnnotationSelectionChanged;
                annotation.IsEditable = true;
                annotation.CanEditText = true;
                annotation.IsSelected = true;

                FibRetr = false;
                FibExt = false;
                Hns = false;
                Xabcd = false;
                PitchFork = false;
                EllioteWave = false;
                Line = false;

            IsAnnotationCreationEnable = false;
            IsAnnotationDrawn = false;

        catch { }

    private void OnAnnotationSelectionChanged(object sender, EventArgs eventArgs)
            var parent = ((System.Windows.FrameworkElement)((System.Windows.FrameworkElement)sender).Parent).TemplatedParent;
            if(parent is SciChartSurface)
                var surface = parent as SciChartSurface;
                if(null != surface)
                    OHLCVChart chart = surface.DataContext as OHLCVChart;
                    Annotations = chart.LAnnotations;
                    SelectedAnnotation = Annotations.FirstOrDefault(x => x.IsSelected);
        catch { }        

If there is any other way to club all Trading related annotations + TextBox, Line, TrendLine Annotations creation dynamically using any other modiefier, that will do. We are tying to build Trading charts: with Ability to add annotations.


0 votes

Hi all,

I am trying to create a vertex selection modifier for a 3D chart that would allow me to select everything within two points on an axis. I have inherited from ChartModifierBase and created overrides for the OnModifierMouse events but I need a way to calculate the world or data coordinate of my axis. I know that CameraController has a ScreenToWorldSpace method but this is not exposed on the Camera3D class. Currently I have resorted to calling the TSRCamera’s TransformIntoWorldCoordinates method but would prefer a less roundabout solution. Is there an easier way to calculate screen to world/data coordinates or a way to get the position on my axis from screen coordniates?


0 votes

I’ve been trying to implement the scichart js blazor wrapper in a serverside application. The chart starts to load, but gives the following error:
Failed to load resource: the server responded with a status of 404 () :5001/

it looks like is in the wrong place, but as far as I can tell it’s where it should be (in wwwroot).

is there something special I need to do in sever side? I can get it working fine in webAssembly Blazor

0 votes

SplineLineRenderableSeries doesn’t render curved graph line properly in Swift , it renders stepped line for the data series .For reference please check the Screenshot attached ,ECG line(Green) rendered as stepped line (Marked by rectangle). Let me know anything I need to update in my code

Please find below the code for initialisation go the graph and updating the graph same. I am updating graph realtime with same DataSeries.

  1. Graph initialisation code

    func init_ECG_Chart()
    //Remove Theme From Chart By Apply & Remove & Change Border color
    SCIThemeManager.applyTheme(to: self.ecg_Chart_Surface, withThemeKey: SCIChart_Bright_SparkStyleKey)
    SCIThemeManager.removeTheme(byThemeKey: SCIChart_Bright_SparkStyleKey)

    self.ecg_Chart_Surface.isOpaque = false
    self.ecg_Chart_Surface.backgroundColor = .clear
    self.ecg_Chart_Surface.renderableSeriesAreaBorderStyle = SCISolidPenStyle(color: .clear, thickness: 0)
    let lineSeries = SCISplineLineRenderableSeries()
    lineSeries.strokeStyle = SCISolidPenStyle(color: ecgSelectedColor, thickness: 2.0)
    lineSeries.dataSeries = ecgLineDataSeries

    // lineSeries.resamplingMode = SCIResamplingMode_None //Resampling off
    // lineSeries.resamplingMode = SCIResamplingMode_Auto //Resampling off

    let xAxis = SCINumericAxis()
    xAxis.axisAlignment = .bottom
    xAxis.drawLabels = false
    xAxis.drawMajorGridLines = false
    xAxis.drawMinorGridLines = false
    xAxis.drawMajorTicks = false
    xAxis.drawMinorTicks = false
    let yAxis = SCINumericAxis()
    yAxis.axisAlignment = .left
    yAxis.drawLabels = false
    yAxis.drawMajorGridLines = false
    yAxis.drawMinorGridLines = false
    yAxis.drawMajorTicks = false
    yAxis.drawMinorTicks = false
    yAxis.autoRange = .never   //Stop auto ranging axis
    yAxis.visibleRange = SCIDoubleRange(min: -32, max: 96)

    // yAxis.visibleRangeLimit = SCIDoubleRange(min: -32, max: 96)

    yAxis.growBy = SCIDoubleRange(min: 0.2, max: 0.2)
    SCIUpdateSuspender.usingWith(self.ecg_Chart_Surface) {
        self.ecg_Chart_Surface.xAxes.add(items: xAxis)
        self.ecg_Chart_Surface.yAxes.add(items: yAxis)
        self.ecg_Chart_Surface.renderableSeries.add(items: lineSeries)
        //self.ecg_Chart_Surface.chartModifiers.add(items: SCIZoomExtentsModifier(),SCIPinchZoomModifier())

    } //Init ECG

  2. Graph updation code

    func update_ECG_Chart(xValues:SCIDoubleValues,yValues:SCIDoubleValues)

    SCIUpdateSuspender.usingWith(self.ecg_Chart_Surface) {
        self.ecgLineDataSeries.append(x: xValues, y: yValues)
      //  self.ecg_Chart_Surface.zoomExtents()

    } //Update ECG

0 votes

We’re using Xamarin.Forms. We were using iOS build 5019 and Android build 4441 and we had a custom DatelabelProvider set on our X axis in both platforms which worked fine.

However after updating to latest builds (5022 and 4459), the provider’s FormatLabel (FormatLabelFormatted on Android) isn’t being called and the default label formatting is applied.

0 votes

Hi all,
I am using the iOS SciCharts version to implement a heatmap series in my application. I am testing out the heatmap by providing a test series of random 100 zValues that range from 1-200. The Heatmap with the stops below just appears blue (see image). My suspicion is that either I am not updating the zValues correctly or the andStops is too low. Can anyone provide insights on what could be the issue?

//Test zValues
let SpectTestArray: [Double] = [ 12,  14, 68, 137, 164, 124, 124, 122, 162, 128, 45, 129,  40,  91,  53, 159,  77,  59,   0,  91, 92,  73,  77,  67, 163,  69, 149, 115,  17,  85, 119, 129, 186,  93,  80,  34, 159, 115,  65, 181, 159,  67, 152,  29,   6, 162,  51, 196, 186, 122, 114, 171, 159, 116,  20, 102,   4, 174, 144, 160, 89,  51,  89, 130, 172, 186,  40, 174,  20, 120, 88, 151, 127, 167,  10,  49, 198,  67, 184, 197, 152, 193, 196, 163,  18,  77,  17, 143, 124, 115, 1, 115, 126,  22,  35,   6,  58, 121,  77,   5]

let colors = [UIColor.fromARGBColorCode(0xFF00008B)!, UIColor.fromARGBColorCode(0xFF6495ED)!, UIColor.fromARGBColorCode(0xFF006400)!, UIColor.fromARGBColorCode(0xFF7FFF00)!, UIColor.yellow,]

CH1HeatMapRenderableSeries = SCIFastUniformHeatmapRenderableSeries()
        CH1HeatMapRenderableSeries.dataSeries = CH1SpectDataSeries
        CH1HeatMapRenderableSeries.minimum = 0.0
        CH1HeatMapRenderableSeries.maximum = 200.0
        CH1HeatMapRenderableSeries.colorMap = SCIColorMap(colors: colors, andStops: [0.0, 0.2, 0.4, 0.6, 0.8, 1.0])

        var Spectvalues = SCIDoubleValues(capacity: 100)

        for n in 0...SpectTestArray.count-1 {
//        print(Spectvalues)
        CH1SpectDataSeries.update(z: Spectvalues)
0 votes

Hi everyone!

I have a candlestick chart that uses SCIZoomPanModifier() so i can zoom and pan in the chart. I added a SCITooltipModifier() so i can inspect the individual data points. I noticed that by adding the toolTipModifier, that my pan and zoom stops working. I can’t figure out why. Would really appreciate if someone could tell me why or if i am missing some variable i need to set

0 votes

Hi guys,

I just started using SCICHART. I am working my way through the provided tutorials and i noticed that when i add a SCITooltipModifier to the chart, all my other modifiers (zoom and pan and pinchzoom) stopped working. Is this normal? Because i want my chart to have zoom functions and show what datapoints are touched by a user.

Thanks in advance!

0 votes

I’m trying to implement sciChart to flutter app (Android). It gets pretty confusing when trying to make it work. Anyone have examples how to make SciChart to work on Flutter? Adding the license works just fine. Only need for ECG chart for now. Thanks.

0 votes


How can we turn the light off and on in 3D drawings in Android studio?

Best regards…

3 votes


I am trying to allow my user to hide/show annotations by binding the visibility property, but I can’t seem to get it to work. Actually when I manually set visibility to Hidden it’s still there. Is that just not implemented?


0 votes
0 answers

On RubberBandXyZoomModifier i am using the YDirection zoom. When i click and drag out side the area of sci chart and leave the mouse click. Then again click inside the scichart, it showing the selection area and not disappear after new selection of zoom or pan the chart. the selected area is still showing as selected.

0 votes


I want to draw small circle and label to identify of accident position on the chart like as sell point on the sample picture.
But I don’t know how can I implement this on the code.

Please help me!

  • Bruce Juli asked 2 months ago
  • last active 1 month ago
0 votes

I was used fifo(scrolling) chart in wpf scichart.


I could not found fifo option in js scichart.

Maybe because there is no fifo option, if there is a lot of data accumulated, the chart is slow and cannot be used.

Can I use fifo(scrolling) chart in js scichart?

  • 동윤 이 asked 1 month ago
  • last active 1 month ago
0 votes

I have a line chart and need to implement textAlign: left property for tickLabel on yAxis. I have found some way to do it on the forum, but it does not work in my case:
xAxis.setAxisTickLabelStyle(new AxisTickLabelStyle(Gravity.CENTER, Layout.Alignment.ALIGN_CENTER, 5, 0, 5, 0));
I get the error:
Alignment cannot be converted to int
But according documentation AxisTickLabelStyle class get 5 int arguments. Can you help me please how to solve it!

Showing 1 - 50 of 3k results