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

0 votes


I’d like to enable AnnotationCreationListener with a toggle button pressed down, and disable it with the button released. It’s different from the Android sample code in Create Annotation Dynamically. I have a few questions when I’m trying to code. I’m not sure if my approach is on the right track. Please advise, thanks.

// insert button listener
    insertAnnotationButton = findViewById(;
    insertAnnotationButton.setOnClickListener(new View.OnClickListener() {
        public void onClick(View view) {
            // TODO: add chartmodifier/annotationCreationModifier when button pressed down
            if (insertAnnotationButton.isChecked()) {
                annotationCreationModifier.setAnnotationType(???); // how to set type to vertical line annotation?
                DefaultAnnotationFactory annotationFactory = new DefaultAnnotationFactory();
                annotationFactory.setFactoryForAnnotationType(DefaultAnnotationFactory.VERTICAL_LINE_ANNOTATION, new IAnnotationFactory() {
                    public IAnnotation createAnnotation(@NonNull ISciChartSurface parentSurface, int annotationType) {
                        return sciChartBuilder.newVerticalLineAnnotation().withIsEditable(true).withStroke(1, White).withVerticalGravity(Gravity.FILL_VERTICAL).build();
                annotationCreationModifier.setAnnotationCreationListener(new OnAnnotationCreatedListener() {
                    public void onAnnotationCreated(IAnnotation iAnnotation) {
                        // how to get X coordinate of the annotation and update my annotation variable

            } else {
                // how to remove annotationCreationModifier from ChartModifiers?
  • Gang Xu asked 7 hours ago
  • last active 3 hours ago
0 votes


I’m trying to figure out how to apply a consistent gradient to the areas underneath my line charts. For example, if I have chart with Y values 0-10, I might want the area corresponding to 0 to be white, and 10 to be black, regardless of what values are currently panned or zoomed onto the screen. From what I have seen so far, SciChart gradients are based on the current screen values, so if I were zoomed into an area that was only 0-5, it would should a white to black gradient (not what I want), whereas I need a white to grey variant (reserving the black for 10’s). I hope that makes sense.

Thank you.

  • C Bolton asked 11 hours ago
  • last active 2 hours ago
1 vote

Hi all,

Today, I follow the Tutorial 01, but I can not set up the SciChart.js project,
I am sure that I do the same step like Tutorial,
some one can help me to realize the error messages?
Thanks a lot.

PS:error messages is attached file



0 votes
0 answers

How to move date labels to the middle of the day ?

val xAxis = DateAxis(applicationContext).apply {
        drawLabels = true
        autoFitMarginalLabels = true
        axisTitle = "X Date Axis"
        axisAlignment = AxisAlignment.Bottom
        drawMajorBands = false
        drawMinorGridLines = false
        drawMajorGridLines = true
0 votes

Hi all —

I apologize if this is an inappropriate question, I only learned about SciChart yesterday; I do have some experience with .NET We have purchased a USB sensor from a small company. The sensor is top-notch, and we are very happy with its performance. However, the software offers no option to export the time series as CSV or any human-readable format. To add to the above, the software does not start unless one connects the instrument to the PC.

The software appears to be Sci-chart based; it displays measurements as time series and offers basic GUI which come with 2D SciChart objects. When saved, the data appears to get wrapped in a SciChart .Net object, dumped into a binary file, compressed. When the saved file is open, it’s uncompressed, SciChart objects get re-populated and displayed . We know about this b.c. we uncompressed one of the files and opened it with a hex editor. Most of the header was comprised of .NET and SciChart warnings, followed by what appears to be repeated patterns of numbers.. The time stamps appear to be in one of the “nanoseconds-since-the-creation-of-time” formats.

The company did not commit to provide a solution to export the time series as CSV, and we (understandably) do not have access to the source code. I understand that this is a long shot, but could there a method to deserialize data stored inside of a binary with a SciChart object? I do not know the structure, but i can save files with small N of data points (e.g. N=1), and I know what the data looks like when it’s open (although it’s rounded and re-processed, e.g. the nanoseconds since the creation of time). A file containing a single-timestamp measurement (8 channels) is about 4kB in size when uncompressed; most of it warnings and error messages.

Again, I very much apologize for this question, it may be inappropriate.

0 votes

Hi, on our data SciChart3DSurface seems a bit laggy while rotating camera, FPS is low. What are general way to improve SciChart3DSurface performance?

0 votes

Hi, how do I disable Visual Xccelerator Engine for SciChart3DSurface?
I tried with the following code

<s3D:SciChart3DSurface x:Name="View3D"  s:VisualXcceleratorEngine.IsEnabled="False"/>

But it gives compilation error:

Property ‘IsEnabled’ is not attachable to elements of type ‘SciChart3DSurface’.

So how do I generally enable/disable Visual Xccelerator Engine for SciChart3DSurface?

0 votes

I’m using both modifier for our SciChartSurface’s. RubberBandXyZoomModifierexecutes on ExecuteOn=”MouseLeftButton” and ZoomPanModifierand executes on ExecuteOn=”MouseRightButton” . For touch I want the opposite behavior. Is that possible?

0 votes


I’m trying to go through the “Your First App” tutorials

I’ve completed the first one:
“Creating your First SciChart Android App – Part 1”:

which seems fine.

I then go to
“Creating your First SciChart Android App – Part 2”:

Unfortunately, I don’t see the SciChart items in the Palette when I scroll down to the Custom section.

Could you point to how I can make SciChart available please?

Screen shots attached.

Thank you,

  • Ed Sykes asked 6 days ago
  • last active 5 days ago
0 votes
0 answers

1、How to fix the scale of the X axis into 360 scales
2、I want to put 360 degrees in the direction, how can I rotate the table 90 degrees to the left and 0 degrees upward
3、How to make the X axis show only 0,90,180,270

0 votes


I have a SciChartSurface with 193 series on it and my application needs to display a legend with 193 items. The requirement is that a legend should be located underneath the plot as a scrollable panel with items arranged in a wrap-panel fashion. The problem is that it takes a long time to render this many items because WrapPanel does not use Virtualization.

I found a 3-rd party control ( that implements virtualization in a WrapPanel. However, it is designed to work inside a ListBox/ListView and does not as an ItemPanelTemplate for SciChartLegend.

Is it possible to render LegendData in a custom control? I’ve noticed that LegendData is a ChartDataObject. However, when I bind its SeriesInfo property my ListBox is not populated.

Here is my XAML:

In my SciChartSurface I’ve added a modifier:

                        <!--  Turn this legend off because we've got a custom one below  -->
                        <s:LegendModifier GetLegendDataFor="AllSeries" ShowLegend="False" />
                        <local:ErrorBarExclusionLegendModifier x:Name="mwErrorBarExcluder" />
                        <s:TooltipModifier />
                        <local:MouseClickChartModifier RightClickPosition="{Binding RightClickPosition, Mode=OneWayToSource}" />

Then I declare a ListBox:

                ItemTemplate="{StaticResource SciChartLegendItemTemplate}"
                ItemsSource="{Binding LegendData, ElementName=mwErrorBarExcluder, Converter={StaticResource SeriesConv}}">
                        <wtk:VirtualizingWrapPanel Orientation="Horizontal" />

Since I can’t bind ItemsSource to ChartDataObject I wrote a simple converter that extracts the collection of SeriesInfo objects:

public object Convert(object aValue, Type aTargetType, object aParameter, CultureInfo aCulture)
    ChartDataObject fSource = aValue as ChartDataObject;

    return fSource?.SeriesInfo;

What am I doing wrong?

Thank you in advance for your suggestions.

0 votes


I just downloaded SciChart for Android. Trying to get the Example to work.

I’ve put my trial key in and tried to run.

Here are the errors (screen shot attached).

Thank you,

  • Ed Sykes asked 7 days ago
  • last active 5 days ago
0 votes

I have a few problems that I’m trying to address with y-axis labelling.

  1. I am including a y-axis on the left side of my graph but want the text of the labels to be right-aligned. Each label uses two lines of text. How can I do that?
  2. I want the margin of the text to be a specific width so that I can line up the y-axis of multiple scichart surfaces that are stacked vertically. How can I set each of my scichart surfaces to use a particular margin for the y-axis labelling?
  3. The y-axis label text will wrap when I don’t want it to (see attached image — The text of the label should be “1m \n Left” and I am currently seeing “1m \n Lef \n t”). How do I turn off the wrapping of text on the y-axis?


This is how I am currently implementing the y-axis:

NumericAxis(context).apply {
    drawLabels = true
    axisAlignment = AxisAlignment.Left
    this.labelProvider = labelProvider
    this.tickProvider = tickProvider
    drawMajorBands = false
    drawMajorTicks = false
    drawMinorTicks = false
    drawMajorGridLines = false
    drawMinorGridLines = false
    isLabelCullingEnabled = false
    visibleRange = DoubleRange(
    autoRange = AutoRange.Never
    tickLabelStyle = FontStyle(
            TypefaceManager.obtainTypeface(context, CustomTypeface.PROXIMA_NOVA_REG),
0 votes

App version

I am able to sync two charts and receive events between both charts.

However, I wanted to remove the shared y-axis panning between the charts.
I was able to get this working by setting the “withReceiveHandledEvents(false)” linked to the motion event group and setting the “.withYAxisDragModifier().withReceiveHandledEvents(false)”.

However, the current problem being faced, is that, the cursor is now no longer synced between the two charts as if I had “withReceiveHandledEvents(false)” on the motion event group.

I tried using the cursor modifier group, but this did not provide a syncing cursor between the charts.

Is there a way to sync the cursor between the charts without having the y-axis panning synced as well?

0 votes

I had recently integrated SciChart into my app, and faced some problems with chat appearance on trial mode which are described here:
Due to this problems I tried to run my app on an actual device, and got this build error from Xcode:

ld: building for iOS, but linking in dylib file (/Users/ruslansabirov/Library/Developer/Xcode/DerivedData/exinity-aupulhpegzsnlfcrnqfiwnvnljpj/Build/Products/Debug-iphoneos/SciChart.framework/SciChart) built for iOS Simulator, file ‘/Users/ruslansabirov/Library/Developer/Xcode/DerivedData/exinity-aupulhpegzsnlfcrnqfiwnvnljpj/Build/Products/Debug-iphoneos/SciChart.framework/SciChart’ for architecture arm64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
How can I fix this problem?

0 votes
0 answers

I was trying to test SciChart on simulator, but I have a problem: I added chart surface on my view, and after I launch an app, SciChart is showing me this text on the screen :
“Hardware rendering performance of SciChart in simulator is SLOW. Please use an actual device to feel the real-world performance”
How do I remove this text and test my charts on the simulator?

0 votes
0 answers

I want to create a custom modifier for a polar chart.
But I failed immediately!
First I wanted to add a simple 10×10 px ellipse.
But the ellipse doesn’t appear on the chart!

public override void OnModifierMouseDown(ModifierMouseArgs e)
    var translatedPont = ParentSurface.RootGrid.TranslatePoint(e.MousePoint, ParentSurface.ModifierSurface);

    var point = new Ellipse
        Width = 10,
        Height = 10,
        Stroke = Brushes.White,
        StrokeThickness = 1,
        Fill = Brushes.Gray



    var leftCoordinate = translatedPont.X - point.ActualWidth / 2;
    var topCoordinate = translatedPont.Y - point.ActualHeight / 2;

    Canvas.SetLeft(point, leftCoordinate);
    Canvas.SetTop(point, topCoordinate);
1 vote


I’d like to update the iOS version to the latest stable one (4.1.0), but after following the steps here:
Xcode keeps complaining:

framework not found SciChart.xcframework
clang: error: linker command failed with exit code 1

If I downgrade back to 3.1.1 everything works again. Any idea why the version 4.1.0 is not working? I’m using Pods to manage all dependencies.

0 votes

Is there a way to create a custom TooltipModifier.TooltipTemplate for Annotations?

I’m trying to find an example of one on the site or in the SciChart examples application but I’m not having any luck. Thanks!

I’d like to be able to pass an object to the tooltip’s metadata like with XySeriesInfo tooltip templates.


  • Greg Knox asked 2 weeks ago
  • last active 2 weeks ago
0 votes

I have a LineRenderableSeriesViewModel and I want to be able to select the chart using possibly a VerticialSliceModifier, double click it, and then find the limits of the peak centred around the VerticalSliceModifier and shade the region underneath the curve. Finding the limits of the curve is ok, but how would I shade the region in?
Any pointers would be really useful.

  • pburland asked 3 weeks ago
  • last active 2 weeks ago
0 votes


I get data from reading an URL so I save them (prepared) to a Arraylist (type PieSegment). How can I add the PieSegments from the Arraylist with (for example a loop) to my Piechart?

BR and thank you very much.

0 votes

Hi EveryBody,

I hope you are fine,

I am working on tablet windows with only one DataSerie vizualisation.

To increase the ergonomic of my application on DatapointSelection, I want to be able to click on any point in the scichart then the DataPoint corresponding to the X axes of my point click get Selected.

Is it possible? Can you help me please.

I sent a picture to explain you the needed functionnality.

Thank you very much,

Princy Andriampaniry

0 votes

Hi everyone,

I’m working on a 2D chart on Android that requires the distance between major axes to be exactly 5 millimetres. How do I configure the major axis delta/ticks or resize the chart to meet my need?

Thank you.

0 votes

Hello everybody,

I hope you are fine,

I am working with DatapointeselectionModifier on a tablet windows.

I want to be able to select multiple points without pressing Left Ctrl keyboard.
Can you help me please?

Thank you very much.

0 votes


I want to use the MultiplePieDonutChart. Like in the example, I want to have a touch tooltip.
I tried it with that code:

LinearLayout chartLayout = (LinearLayout) root.findViewById(;
SciChartLegend legend = root.findViewById(;



    final SciChartBuilder sciChartBuilder = SciChartBuilder.instance();

    final IPieRenderableSeries pieSeries = sciChartBuilder.newPieSeries().withSeriesName("HowPeopleTravel").withSegments(
            sciChartBuilder.newPieSegment().withValue(34).withTitle("Ecologic").withRadialGradientColors(0xff84BC3D, 0xff5B8829).build(),
            sciChartBuilder.newPieSegment().withValue(34.4).withTitle("Municipal").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
            sciChartBuilder.newPieSegment().withValue(31.6).withTitle("Personal").withRadialGradientColors(0xff4AB6C1, 0xff2182AD).build()
    final IPieRenderableSeries donutSeries = sciChartBuilder.newDonutSeries().withSeriesName("DetailedGroup").withSegments(
            sciChartBuilder.newPieSegment().withValue(28.8).withTitle("Walking").withRadialGradientColors(0xff84BC3D, 0xff5B8829).build(),
            sciChartBuilder.newPieSegment().withValue(5.2).withTitle("Bicycle").withRadialGradientColors(0xff84BC3D, 0xff5B8829).build(),
            sciChartBuilder.newPieSegment().withValue(12.3).withTitle("Metro").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
            sciChartBuilder.newPieSegment().withValue(3.5).withTitle("Tram").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
            sciChartBuilder.newPieSegment().withValue(5.9).withTitle("Rail").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
            sciChartBuilder.newPieSegment().withValue(9.7).withTitle("Bus").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
            sciChartBuilder.newPieSegment().withValue(3.0).withTitle("Taxi").withRadialGradientColors(0xffe04a2f, 0xffB7161B).build(),
            sciChartBuilder.newPieSegment().withValue(23.2).withTitle("Car").withRadialGradientColors(0xff4AB6C1, 0xff2182AD).build(),
            sciChartBuilder.newPieSegment().withValue(3.1).withTitle("Motorcycle").withRadialGradientColors(0xff4AB6C1, 0xff2182AD).build(),
            sciChartBuilder.newPieSegment().withValue(5.3).withTitle("Other").withRadialGradientColors(0xff4AB6C1, 0xff2182AD).build()

    Collections.addAll(surface.getRenderableSeries(), pieSeries, donutSeries);
    Collections.addAll(surface.getChartModifiers(), sciChartBuilder.newLegendModifier(legend).withShowCheckBoxes(false).withSourceSeries(pieSeries).build(), new PieChartTooltipModifier());

But if I touch on the chart I didn’t get the tooltip. As you see I have nearly copy all the code of the Example but I do not work. Where is my fault?

0 votes


I have a list of 12 items, but at the start I only want to see the last 6 items on the chart (stacked column chart). I want to be able to scroll / drag to reveal the first part of the list. I use the index of the list for the x-axis, so the list has indexes with range from [0, 11]

I’m having some weird behaviour implementing this.
When the data is loaded, i see the complete bars:

creenshot 2020-09-18 at 11.04.14.png

but when I start to scroll, i’m never able to reveal the complete bars anymore:
![Screenshot 2020-09-18 at 11.04.40.png][2]
![Screenshot 2020-09-18 at 11.04.59.png][3]

When i start scrolling to the end (although the chart is already at the end), the UI jumps and only shows half a bar. Also when i scroll to the beginning, it only shows half a bar.

How can I make sure I always see the complete bars?

This is the code, specific to the x axis & the scrolling:

val xAxis = sciChartBuilder.newNumericAxis()
            .withVisibleRange(5.5, 11.5)

using half values for the range seems to be the only way I can see the full bars. Once I start scrolling I only see half bars at the start & end

val surfaceChartModifiers: ChartModifierCollection = chart.chartModifiers
val dragModifier = XAxisDragModifier()
dragModifier.dragMode = AxisDragModifierBase.AxisDragMode.Pan

val zoomPanModifier = ZoomPanModifier()
zoomPanModifier.clipModeX = ClipMode.ClipAtExtents
zoomPanModifier.direction = Direction2D.XDirection
zoomPanModifier.zoomExtentsY = false
0 votes


I figure there is probably a way to do this, but I haven’t figured it out yet.

I would like remove (or maybe just make transparent?) my chart areas top and right borders, leaving the lefthand and bottom alone. I’ve attached an image with the borders circled that I would like to remove to make it clear.

Thank you.

  • C Bolton asked 1 month ago
  • last active 1 month ago
0 votes

While moving the rollover cursor, if the number of series under the cursor increases, the rollover cursor labels become wrongly positioned. This ViewController subclass Swift example reproduces the problem.

import UIKit
import SciChart

class ViewController: UIViewController {
    // Surface is added in Storyboard
    @IBOutlet weak var surface: SCIChartSurface!
    override func viewDidLoad() {

        let xAxis = SCINumericAxis()
        let yAxis = SCINumericAxis()
        xAxis.visibleRange = SCIDoubleRange(min: 0, max: 260)
        yAxis.visibleRange = SCIDoubleRange(min: -5, max:12)
        yAxis.autoRange = .never

        self.surface.chartModifiers.add(items: SCIRolloverModifier())
            renderableSeries( 10...50, 10, .red),
            renderableSeries(150...250, 8, .green),
            renderableSeries( 10...100, 2, .cyan),
            renderableSeries(200...250, 0, .orange),
            renderableSeries( 10...250, 5, .white)
    func renderableSeries(_ xValues:ClosedRange<Int>, _ yValue:Double, _ color:UIColor) -> SCIFastLineRenderableSeries {
        let series = SCIXyDataSeries(xType: .double, yType: .double)
        xValues.forEach { series.append(x: $0, y: yValue ) }
        let rSeries = SCIFastLineRenderableSeries()
        rSeries.dataSeries = series
        rSeries.strokeStyle = SCISolidPenStyle(color: color, thickness: 4)
        return rSeries
0 votes

I did deactivate license in my Windows 7 computer, then successfully activate on my Windows 10 computer. SciChart stop working.

Exception: Sorry! Your support subscription expired on 4/5/2017 12:00:00 AM. This license key is only valid on earlier versions of SciChart. Please contact if you would like to renew your subscription.:

My old Windows 7 computer have SciChart SDK V5.0.0.10963 Installed 12/07/2017
My new Windows 10 computer have SciChart SDK V5.0.0.10963 installed 08/24/2020

It is the same version on both computers. I do not want to renew subscription. I want to use my license. What I should do?


0 votes


I’m trying to colour individual points in what is a reasonably large scatter data set and when I enable the palette provider I get a System.AccessViolationException: ‘Attempted to read or write protected memory. This is often an indication that other memory is corrupt.’

I’ve managed to reproduce this in a test project. The code is provided below. The chart surface is set up pretty normally with these switches:

s:VisualXcceleratorEngine.FallbackType="{x:Type s:HighQualityRenderSurface}"
s:VisualXcceleratorEngine.EnableImpossibleMode="True" RenderPriority="Immediate" EnableMultiThreadedRendering="True"

Any ideas what is going on here or how I can fix it?

private int NUM_VALUES = 300000;
    public MainWindow()
        DataContext = this;

    private void CreateGraph()
        var series = new XyDataSeries<double, double>();

        Random rand = new Random();
        int index = 0;
        int numAppends = 10;
        for (int j = 0; j < numAppends; j++)
            double[] x = new double[NUM_VALUES/ numAppends];
            double[] y = new double[NUM_VALUES/ numAppends];
            PointMetadata[] m = new PointMetadata[NUM_VALUES/ numAppends];
            for (int i = 0; i < NUM_VALUES / numAppends; i++)
                x[i] = index*0.001;
                y[i] = rand.NextDouble() * 100;
                m[i] = new PointMetadata(Color.FromRgb((byte)(rand.NextDouble() * 255), (byte)(rand.NextDouble() * 255), (byte)(rand.NextDouble() * 255)));
            series.Append(x, y, m);

        scatterRenderSeries.DataSeries = series;

    private void EnablePalette(object sender, RoutedEventArgs e)
        scatterRenderSeries.PaletteProvider = new MainChartPaletteProvider();

public class MainChartPaletteProvider : IPointMarkerPaletteProvider
    private PointPaletteInfo pointPaletteOverride;
    public void OnBeginSeriesDraw(IRenderableSeries rSeries)

        pointPaletteOverride = new PointPaletteInfo();
        pointPaletteOverride.Fill = Colors.Red;

    public PointPaletteInfo? OverridePointMarker(IRenderableSeries rSeries, int index, IPointMetadata metadata)
        if (metadata == null)
            return pointPaletteOverride;
        pointPaletteOverride.Fill = (metadata as PointMetadata).Colour;
        return pointPaletteOverride;

public class PointMetadata : IPointMetadata
    public Color Colour { get; set; }

    public bool IsSelected { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;

    public PointMetadata(Color colour)
        Colour = colour;
0 votes
0 answers


I begin with Scichart, I am coding with binding program and I need to make Selection Point Markers. I can see the point Markers but when I activate the SelectedPointMarker then it doesn’t work. I want to ask how to adapt the exemple with a binding program, what to write in the “.cs”. I am sending you the wpf code and the interface. Can you help me please?

Thank you verry much.

0 votes
0 answers


I’ve been testing the CAD objects option in the 3D chart API recently, and been wondering if there’s a way to control some of the objects properties after it is loaded, for example changing it’s position or rotation to simulate movement. I’ve tried to set these properties for a certain object I’ve loaded in the code behind with a DispatcherTimer, but it did not affect any of the properties I’ve tried to modify in my Tick event handler. Is there a proper way to achieve it?

Thank you!

0 votes
0 answers


I need to create complicated candle stick, beside OHLC, I need to put point market inside candle to mark mean and 50% percentile, each with an individual point marker, is it possible to achieve this?



0 votes


I’ve been wondering. In SciChart’s current WPF version, is there any way to configure the default ViewportManager (or create a new customized one in a simple way) such that whenever I call its ZoomExtents method, the X and Y axes’ ranges will include any custom annotations I’ve added to the chart’s annotations collection?

My custom annotations are basically Images, with fixed Width and Height, and I set their X1 and Y1 properties to hold certain data points I have on the chart. The issue is, I need axes’ ranges to include the Image in it’s entirety, meaning I would have to somehow convert their Widths and Heights to “data point values”, since the new visible range should be in terms of data values, if I’m not mistaken.

Any good example to how this could be done?

  • Ilan Rozen asked 2 months ago
  • last active 2 months ago
0 votes
0 answers

I am trying to chart time series data with one X axis and multiple YAxis, as well as this i am using a vertical line and text box annotation to mark the timestamp when an event occurred. The problem i am having is that the milliseconds portion of the annotation timestamp is being ignored and the annotation is snapping to the the major grid line on the whole second which leads to an misinterpretation by users where the actual event occurred.

In the attached image the event timestamp is 18:13.496 but the annotation is drawn at 18:13.000 exactly. See the thin blue line with 420207 text above. The line should sit nearly at the right border of the chart.

the timestamp (defined as triggerTime) correctly includes the millisecond portion.

The annotations are added as such…

sciChartSurface.Annotations.Add(new TextAnnotation {
Text = EventCode,
FontSize = 10,
XAxisId = “DefaultXAxis”,
X1 = triggerTime,
Y1 = 9.0});

sciChartSurface.Annotations.Add(new VerticalLineAnnotation{
LabelPlacement = LabelPlacement.Auto,
Stroke = Brushes.CornflowerBlue,
XAxisId = “DefaultXAxis”,
X1 = triggerTime,
Y1 = 9.0,
StrokeThickness = 1,
IsEditable = false,
ShowLabel = false,
VerticalAlignment = VerticalAlignment.Bottom });

And my xaxis defined as…

var xAxis = new DateTimeAxis() {
Id = “DefaultXAxis”,
TextFormatting = “dd-MMM-yyyy HH:mm:ss.fff”,
SubDayTextFormatting = StringExtentions.TimeSpanToTextFormatting(last – start),
AutoRange = AutoRange.Once,
VisibleRange = new DateRange(start, end),
GrowBy = new DoubleRange(0.01,0.01),
AxisAlignment = AxisAlignment.Bottom,
AutoTicks = true,
MinorsPerMajor = 5,
IsPrimaryAxis = true,
AxisTitle = “Time,” };

When debugging and looking at the SciChartSurface.Annotations.X1 value, it contains the millisecond value.

Any assistance is greatly appreciated.
Best regards

1 vote

I’m trying to put together a chart that adds a bar at the bottom, to visualise Y values going over specific thresholds (in this example, below 20 is Green, 20 to 30 range is Yellow, and over 30 is Orange), as shown here:

The bar scales along with the line when zooming the chart

The version pictured builds the bar using box annotations, each defined as below:

new BoxAnnotationViewModel()
    X1 = currentXValue,
    X2 = currentXValue, + xValuesStepSize,
    Y1 = 0.96,
    Y2 = 1,
    Background = backgroundColor, //Colour calculated based on Y value
    AnnotationCanvas = AnnotationCanvas.AboveChart,
    CoordinateMode = AnnotationCoordinateMode.RelativeY

This implementation works, but the issue is that the bar is drawn inside the main chart area, and so covers some of the chart itself; if this could just be moved onto the X axis, rather than the chart canvas, then this would be exactly what I need.

I tried to just switch the canvas on the BoxAnnotations to use AnnotationCanvas.XAxis, but when doing this the annotations don’t seem to be getting the right X / Y coordinates for positioning – the width and height of each block looks correct, and the width scales when the chart is zoomed in, but every block appears to be positioned at 0,0 on the XAxis canvas (it looks like X1/Y1 values are ignored, so all blocks are stacked on top of each other in the same position rather than appearing alongside each other as a bar)
BoxAnnotationsOnAxis BoxAnnotationsOnAxisZoomed

With a bit of searching I found an old post ( stating that ‘AxisMarkerAnnotation’ is the only supported annotation for display on an axis canvas, so I tried using this instead, which does seem to respect the X1 position. Here though, the X2 value seems be be interpreted as just a static pixel width, and the width of the annotations does not scale when the chart is zoomed, so the blocks stay as whatever width is initially drawn and get moved further apart the more the chart is zoomed in.
AxisMarkerAnnotations AxisMarkerAnnotationsZoomed

I’m new to SciChart so hopefully I’m missing something obvious; is there any way of either getting the BoxAnnotation to work on an axis canvas, or of setting an AxisMarkerAnnotation’s width to be the width between two points on the X axis, scaling along with the chart when zooming?

I hope the above makes sense, thanks in advance for your help.

0 votes
0 answers


We have an issue where the graph grid lines and tick markers do not show on iOS 10. Everything works on iOS 11 and up. Any idea why this is happening?

0 votes


I’m trying to add a small image as an annotation to the chart, but I couldn’t make it work… most likely doing something wrong, but I can’t quite figure out how this should be done. This is the direction I went for:

public void AddIcon()
        Image image = new Image();
        BitmapImage icon= new BitmapImage();
        icon.UriSource = new Uri(@"D:\icon.png", UriKind.Absolute);

        image.Source = icon;

        var annotation = new CustomAnnotation()
            X1 = 0,
            Y1 = 0,
            Content = image,

What am I doing wrong? is there a proper and simple way to add image annotations to the chart in an MVVM manner?

Thank you!

  • Ilan Rozen asked 2 months ago
  • last active 4 weeks ago
0 votes

I used box annotation like pic
in a boxAnnotation I used

.withPosition(1,-2, 0, 2)

and i made a 2 box like pic

i use box for drag one side to make a box big or small

the first box which is left doesn’t move anywhere.
it just can only drag that i want
but the second box, the box moves when i drag after first touch
the left box never moves on but right box moves first drags
just move first time not sometimes

am i wrong something?

  • Justin Lee asked 2 months ago
  • last active 1 month ago
0 votes


I’m trying to add custom text to a rollover cursor that is dependent on its X and Y Values.

For instance, if the Y Value is 1, but the X value (date) is old, it should say “1 ft Observed”, but if it the date is in the future, it should say “1 ft Predicted”. I can format the cursor label via NumericLabelProvider, but it only provides me the Y value, and I need the corresponding X value as well to properly format the cursor label.

    class NumericLabelProviderEx() : NumericLabelProvider() {
        override fun formatCursorLabel(doubleValue: Double): CharSequence {
            val formatString = "%.1f %s\n%s"
            // Any way to get corresponding X value for this so I can change "Observed" to "Predicted" if this point is in the future?
            val s = String.format(formatString, doubleValue, "ft", "Observed")
            return s


Is there an alternative approach to accomplish this within SciChart?

Thank you.

  • C Bolton asked 2 months ago
  • last active 2 months ago
0 votes


I have made the chart vertical by changing X axis alignment to left and Y axis alignment to bottom. After changing like this, im not able to resize the box annotation using all four resize adorners. Only two working, other two resetting Y1 value. below is the code snippet.

         X1="{Binding TopDepth, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
         X2="{Binding BottomDepth, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"
         YAxisId="Top" />
         AxisTitle="Depth [ft]"
         FlipCoordinates="{Binding FlipYAxis}"
         TitleStyle="{StaticResource AxisTitleStyle}" />
         TitleStyle="{StaticResource AxisTitleStyle}" />

Can you please let me know what i’ve missed?


  • Sync Kumar asked 2 months ago
  • last active 4 weeks ago
0 votes
0 answers

Is it possible to use an image in a StackedColumn? I’d like to use a design in the columns instead of a solid color with Fill.

Edit: I figured out how…

So while you can’t assign an image directly to StackedColumn, per say, you can use various Brushes with Fill and one of those Brushes is the ImageBrush. It goes something like this:

stackedColumn.Fill =  = new ImageBrush(image: new BitmapImage(uriSource: new Uri(uriString: "Images/MyImage.png")));

I actually ended up using the LinearGradientBrush instead of ImageBrush for my needs and it works great!

  • Greg Knox asked 2 months ago
  • last active 2 months ago
0 votes

Newbie here…how would I fix the placement of the first and last tick label so that the tick label appears below the major grid line instead of left/right of it? Can’t seem to find an example that shows this.

For the shown graphs, the x-axis is actually a second static numeric axis while there is an additional time axis that is not shown.
So I believe changing the visible range of the visible axis is not an option as then it would no longer line up with hidden axis which has the points.

See attached image for illustration of problem.

0 votes

If an app generates multiple SciChartSurfaces, what happens when VisualXcceleratorEngine is enabled on one of them? Do other surfaces switch to the VisualXcceleratorEngine or remain in the software mode?

  • corvex asked 2 months ago
  • last active 2 months ago
0 votes


I’m trying to modifying Audio Analyzer Example.

This is scenario.

  1. Read wav file
  2. Calculate FFT (for all sample data of wav file)
  3. Display FFT result to FFT & Spectrogram chart.

The point is this : read all data at once and calulate FFT for dispaly in chart.

I already have FFT result with re[] and im[] type arrays.

  1. When I setting up X,Y axis of FFT chart, following code applied.
    Q. x,y axis and value setup is correct?

                // prepare fft input (dataF is float type sample data of wav file)
                double[] re = new double[dataF.length];
                double[] im = new double[dataF.length];
                double[] mag = new double[dataF.length];
                for(int ii=0; ii<dataF.length; ii++) {
                    re[ii] = (double)dataF[ii];
                    im[ii] = 0.0d;
                FFTf.transform(re, im);  // using Bluestein DFT algorithm.
                for(int nn=0; nn < re.length; nn++) {
                    mag[nn] = Math.sqrt(re[nn] * re[nn] + im[nn] * im[nn]);
                    if(nn <= 10 || re.length - 10 <= nn)
                // setup fft and x,y values
                for(int l=0; l < re.length/20; l++) {
                    fftDS.append((1.0*l*sampleRate/re.length), Math.sqrt(re[l] * re[l] + im[l] * im[l]));
  2. When I setting up X,Y axis of Spectrogram chart, following code applied.
    Q. x,y axis and value setup is correct?

                fftCount = dataProvider.getAudioDataByteSize() / 4096;
                spectrogramDS = new UniformHeatmapDataSeries<>(Long.class, Long.class, Double.class, re.length/20, fftCount);
                fftOffsetValueCount = (re.length/20)*fftCount - (re.length/20);
                spectrogramValues = new DoubleValues((re.length/20)*fftCount);
                // update spectrogram chart data
                for(int jj=0; jj < fftCount; jj += 4096) {
                    double[] spectrogramItems = spectrogramValues.getItemsArray();
                    double[] fftItems = getFrom(mag, 4096, jj);
                    System.arraycopy(spectrogramItems, re.length/20, spectrogramItems, 0, fftOffsetValueCount);
                    System.arraycopy(fftItems, 0, spectrogramItems, fftOffsetValueCount, re.length/20);

FFT chart is working but Spectrogram is not.

Thank you for your help!

0 votes

How do I know when user edited the text on TextAnnoation so the app can save it?
How to do the same for for Android and iOS version of SciChart?

0 votes

We recently upgraded from an old version of SciChart (3.1) and I’ve been updating our solution to use the latest binaries. Previously, we were setting the series source of a chart based on a trigger. However, after switching to the RenderableSeries=”{s:SeriesBinding …}” I discovered that we can’t use the SeriesBinding in a setter. Is there a way to do this with a trigger or do I need to do this in the code behind instead?

<Trigger Property="SelectedChannelSet" Value="0">
<Setter TargetName="DetailsChart" Property="SeriesSource" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ChartModel.ChannelOneAndTwoChartSeries}" />
<Trigger Property="SelectedChannelSet" Value="1">
<Setter TargetName="DetailsChart" Property="SeriesSource" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=ChartModel.ChannelThreeAndFourChartSeries}" />



0 votes


I am using in my chart a VerticalSliceModifer with a VerticalLineAnnotation.
It works as expected, but I would like to modify the aspect of my VerticalLineAnnotation by adding a marker on the axis on top of the line, exactly as in the attached picture (not a scichart).
Is there a way to do that ?

Best regards,
Jean-Charles Durand

0 votes


I’m trying to convert Java code to swift and I need the AnnotationLabel’s setAxisLabelStyle equivalent.

AnnotationLabel annotationLabel = new AnnotationLabel(getContext());

            annotationLabel.setAxisLabelStyle(new Action1<AnnotationLabel>()
                public void execute(AnnotationLabel annotationLabel)
                    annotationLabel.setFontStyle(new FontStyle(37.0f, Color.BLUE));

How can i apply this code in swift?

0 votes

I would like to create a polar heat map .

Is it possible to create one using the current types – I have looked a the examples and just don’t see an obvious choice.

I have attached an example of a polar heat map.

Showing 1 - 50 of 3k results