Pre loader

Forums

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

1 vote
5k views

Greetings! I see you have support Xamarin.iOS and Xamarin.Android, however, I’m not sure about support status: do you support .NET 7 iOS and Android?

1 vote
2k views

Hello,
tell me please, how can I add such indicators on yAxis. Maybe you have some example on sandbox for JS.

Thank you!

1 vote
0 answers
5k views

Hello, help me please.

I have situations when all panels with different graphs are updated and after that all graphs are not displayed. The containers are not equivalent to the previous ones and I need to set up new divs. How can i do this?

1 vote
5k views

I created a simple .NET6 WPF application and added the SciChart assembly references. I call SciChartSurface.SetRuntimeLicenseKey(…) in App constructor and run the application. I get the following exception:

*System.TypeInitializationException: The type initializer for ‘njm’ threw an exception. Source=SciChart.Core

Inner Exception 1:
InvalidOperationException: babel m0 7238858: Method not found: ‘System.Reflection.Emit.AssemblyBuilder System.AppDomain.DefineDynamicAssembly(System.Reflection.AssemblyName, System.Reflection.Emit.AssemblyBuilderAccess)’.

Inner Exception 2:
MissingMethodException: Method not found: ‘System.Reflection.Emit.AssemblyBuilder System.AppDomain.DefineDynamicAssembly(System.Reflection.AssemblyName, System.Reflection.Emit.AssemblyBuilderAccess)’.*

Everything works well if I use SciChart in a .NET4.8 WPF application. How can I fix this? Thanks.

1 vote
5k views

Hello, i want to customize tooltip in graph (SplineBandRenderableSeries), i can change the tooltip content but if i return svg like your example ( return <svg width="${width}" height="${height}">
<circle cx="50%" cy="50%" r="50%" fill="${tooltipColor}"/>
<svg width="100%">
<text y="40" font-size="13" font-family="Verdana" dy="0" fill="${tooltipTextColor}">
<tspan x="15" dy="1.2em">${tooltipTitle}</tspan>
<tspan x="15" dy="1.2em">x: ${seriesInfo.formattedXValue} y: ${seriesInfo.formattedYValue}</tspan>
</text>
</svg>
</svg>
))
It doesn’t work. I have this error in console: Error from chart in div band0 TypeError: valuesWithLabels.reduce is not a function
and
Error from chart in div band0 DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.
at RolloverTooltipSvgAnnotation.delete …

My graph has 3 renderableSeries (1 XyDataSeries and 2 XyyDataSeries)

Please can you send me an example in (javascript) for modify tooltip styling ?

Thanks.

1 vote
2k views

We’re working on a Nyquist plot using the latest SciChart SDK for WPF.
We have quite a MVVM dependent structure already in place.

We are working with 3D frequency based Complex data. The Nyquist plot would have 2 axes – Y for Imaginary values and X axis for Real values. We apply some averaging and post-processing of the 3D data to put in 2D form and show it in the Nyquist plot.

However, we’d like to be able to scroll the data at certain frequency ranges without showing the actual frequency graph in the plot. Is there a possibility to implement an independent scrollbar containing a averaged magnitude graph (similar idea to the processing of the Nyquist data) over a frequency range? We’d like to scroll this frequency range and on selected range changed to recalculate data in the Nyquist plot.

We have quite an extensive graphing structure implemented already. The main issue I’m currently facing is that the scrollbar is bound to the SciChartSurface and I cannot seem to figure out how to build it more like a “sexy” frequency range selector while staying within the SciChart library? Is there any possibility to not be bound to the SciChartSurface? And of course, the axes are quite different – in the Nyquist we have linear real and imaginary values (-2 to +2, for example) whereas the frequency range would extend much further data-wise (0 – 3000 Hz, for example).

Any help would be appreciated. Feel free to ask for more details.

1 vote
8k views

Hello,

Python with Matplotlib allows us to draw a line series that has multiple color depending on something else as shown below (https://matplotlib.org/3.3.0/gallery/lines_bars_and_markers/multicolored_line.html):
enter image description here

Is it possible with SciChart (WPF version)?

1 vote
8k views

Is there any way to write data labels in Android? I know it exists in JavaScript, but I can’t find a way to do it in Android.

  • yeana jun asked 10 months ago
  • last active 10 months ago
1 vote
0 answers
8k views

Hello.

In my project, I am trying to display four SciChartSurfaces with a single legend. Furthermore, I want the Visibility changes of each series in the legend checkbox to be reflected in all SciChartSurfaces.

The following code achieves this, but I am not confident that it is the best solution. Is there a more Smart way to accomplish this?

MainWindow.xaml

<Window x:Class="SurveyFleetVisionChartLegend.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:SurveyFleetVisionChartLegend"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
    Title="MainWindow"
    Width="800"
    Height="550"
    d:DataContext="{d:DesignInstance {x:Type local:MainWindowViewModel}}"
    mc:Ignorable="d">

<Window.DataContext>
    <local:MainWindowViewModel />
</Window.DataContext>
<Window.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Window.Resources>
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition />
        <RowDefinition Height="auto" />
    </Grid.RowDefinitions>

    <s:SciChartSurface Grid.Row="0"
                       Margin="5"
                       VerticalAlignment="Stretch"
                       Background="WhiteSmoke"
                       CacheMode="{x:Null}"
                       ChartTitle="SciChartSurface1"
                       RenderableSeries="{s:SeriesBinding GraphSeriess1.Value,
                                                          Mode=OneWay,
                                                          UpdateSourceTrigger=PropertyChanged}">

        <s:SciChartSurface.XAxis>
            <s:NumericAxis DrawLabels="False"
                           GrowBy="0.1, 0.1" />
        </s:SciChartSurface.XAxis>

        <s:SciChartSurface.YAxis>
            <s:NumericAxis HorizontalContentAlignment="Left"
                           DrawLabels="False"
                           GrowBy="0.1, 0.1" />
        </s:SciChartSurface.YAxis>
        <s:SciChartSurface.ChartModifier>
            <s:ModifierGroup>
                <s:LegendModifier x:Name="TrendChartLegendModifier"
                                  ShowLegend="False"
                                  Visibility="Visible" />
            </s:ModifierGroup>
        </s:SciChartSurface.ChartModifier>
    </s:SciChartSurface>
    <s:SciChartSurface Grid.Row="1"
                       Margin="5"
                       VerticalAlignment="Stretch"
                       Background="WhiteSmoke"
                       ChartTitle="SciChartSurface2"
                       RenderableSeries="{s:SeriesBinding GraphSeriess2.Value,
                                                          UpdateSourceTrigger=PropertyChanged}">

        <s:SciChartSurface.XAxis>
            <s:NumericAxis DrawLabels="False"
                           GrowBy="0.1, 0.1" />
        </s:SciChartSurface.XAxis>

        <s:SciChartSurface.YAxis>
            <s:NumericAxis HorizontalContentAlignment="Left"
                           DrawLabels="False"
                           GrowBy="0.1, 0.1" />
        </s:SciChartSurface.YAxis>
    </s:SciChartSurface>
    <s:SciChartSurface Grid.Row="2"
                       Margin="5"
                       VerticalAlignment="Stretch"
                       Background="WhiteSmoke"
                       ChartTitle="SciChartSurface3"
                       RenderableSeries="{s:SeriesBinding GraphSeriess3.Value}">

        <s:SciChartSurface.XAxis>
            <s:NumericAxis DrawLabels="False"
                           GrowBy="0.1, 0.1" />
        </s:SciChartSurface.XAxis>

        <s:SciChartSurface.YAxis>
            <s:NumericAxis HorizontalContentAlignment="Left"
                           DrawLabels="False"
                           GrowBy="0.1, 0.1" />
        </s:SciChartSurface.YAxis>
    </s:SciChartSurface>
    <s:SciChartSurface Grid.Row="3"
                       Margin="5"
                       VerticalAlignment="Stretch"
                       Background="WhiteSmoke"
                       ChartTitle="SciChartSurface4"
                       RenderableSeries="{s:SeriesBinding GraphSeriess4.Value}">

        <s:SciChartSurface.XAxis>
            <s:NumericAxis DrawLabels="False"
                           GrowBy="0.1, 0.1"
                           VisibleRangeLimitMode="MinMax" />
        </s:SciChartSurface.XAxis>

        <s:SciChartSurface.YAxis>
            <s:NumericAxis HorizontalContentAlignment="Left"
                           DrawLabels="False"
                           GrowBy="0.1, 0.1" />
        </s:SciChartSurface.YAxis>
    </s:SciChartSurface>

        <!--  Display the legend for Chart1.  -->
        <!--  Synchronization of Visiblity of each series of each SciChartSurface is performed on the ViwModel side.  -->
        <s:SciChartLegend Grid.Row="4"
                          Grid.Column="1"
                          HorizontalAlignment="Stretch"
                          HorizontalContentAlignment="Center"
                          LegendData="{Binding LegendData,
                                               ElementName=TrendChartLegendModifier}"
                          Orientation="Vertical"
                          ScrollViewer.VerticalScrollBarVisibility="Auto"
                          ShowVisibilityCheckboxes="True" />
    </Grid>
</Window>

MainWindowViewModel.cs

    using Reactive.Bindings;
using Reactive.Bindings.Extensions;
using SciChart.Charting.Common.Extensions;
using SciChart.Charting.Model.ChartData;
using SciChart.Charting.Model.ChartSeries;
using SciChart.Charting.Model.DataSeries;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Reactive.Disposables;
using System.Reactive.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Documents;
using System.Windows.Media;
using System.Xml.Linq;

namespace SurveyFleetVisionChartLegend
{
    public class MainWindowViewModel
    {
        public ReactivePropertySlim<List<IRenderableSeriesViewModel>> GraphSeriess1 { get; set; } = new ReactivePropertySlim<List<IRenderableSeriesViewModel>>();
        public ReactivePropertySlim<List<IRenderableSeriesViewModel>> GraphSeriess2 { get; set; } = new ReactivePropertySlim<List<IRenderableSeriesViewModel>>();
        public ReactivePropertySlim<List<IRenderableSeriesViewModel>> GraphSeriess3 { get; set; } = new ReactivePropertySlim<List<IRenderableSeriesViewModel>>();
        public ReactivePropertySlim<List<IRenderableSeriesViewModel>> GraphSeriess4 { get; set; } = new ReactivePropertySlim<List<IRenderableSeriesViewModel>>();

        public ReactiveCommand RecreateCommand { get; set; }

        private List<string> chartNames;
        private Dictionary<string, bool> seriesVisibles { get; set; }
        private Random random = new Random();

        public MainWindowViewModel()
        {
            chartNames = new List<string>() { "Chart1", "Chart2", "Chart3" };
            seriesVisibles = new Dictionary<string, bool>();
            chartNames.ForEach(a => seriesVisibles.Add(a, true));

            GraphSeriess1.Value = createGraphSeriess("Chart");
            GraphSeriess2.Value = createGraphSeriess("Chart");
            GraphSeriess3.Value = createGraphSeriess("Chart");
            GraphSeriess4.Value = createGraphSeriess("Chart");

            // If the legend changes the Visibility of each series in GraphSeriess1,
            // Vary the Visibility of each series in other GraphSeriess.
            GraphSeriess1.Subscribe(s=> {
                if(s != null)
                    s.ForEach(a =>
                    {
                        a.ObserveProperty(b => b.IsVisible).Subscribe(_ =>
                        {
                            if (GraphSeriess2.Value != null)
                                GraphSeriess2.Value.First(c => c.DataSeries.SeriesName == a.DataSeries.SeriesName).IsVisible = a.IsVisible;
                            if (GraphSeriess3.Value != null)
                                GraphSeriess3.Value.First(c => c.DataSeries.SeriesName == a.DataSeries.SeriesName).IsVisible = a.IsVisible;
                            if (GraphSeriess4.Value != null)
                                GraphSeriess4.Value.First(c => c.DataSeries.SeriesName == a.DataSeries.SeriesName).IsVisible = a.IsVisible;
                            seriesVisibles[a.DataSeries.SeriesName] = a.IsVisible;
                        });
                    });
            });
        }

        private List<IRenderableSeriesViewModel> createGraphSeriess(string name)
        {
            return chartNames.Select((x,a) => createGraphSeries(x, a)).ToList();
        }

        private IRenderableSeriesViewModel createGraphSeries(string name, int index)
        {
            var dataSeries = new XyDataSeries<double>() { SeriesName = name};

            for (var i = 0; i < 5; i++)
            {
                dataSeries.Append(i, random.Next(100));
            }

            return new LineRenderableSeriesViewModel()
            {
                DataSeries = dataSeries,
                IsVisible = seriesVisibles[dataSeries.SeriesName],
                Stroke = Color.FromRgb((byte)(index * 200), (byte)(index * 100), (byte)(index * 100))
            };
        }
    }
}

That is all. Best regards.

1 vote
5k views

I must be missing something here.
I’ve followed the tooltips and hit test 3d chart examples.
All I need is the X, Y, Z coordinates that you get with the tooltip.
The only example I’ve found is for scatter points using VertexSelectionModifier3D and OnScatterDataChanged event.
But I cant figure out how to do something similar with GridDataSeries (Uniform or non-uniform).
I’ve tried the “ToolTipOpening” event but it doesn’t trigger when the tooltip opens.
This is the last thing I need before I commit to a licence.
The chart is working fine for my use case otherwise.
Thanks!

  • Blaz Majcen asked 10 months ago
  • last active 10 months ago
1 vote
8k views

I build a .net6.0 project, and add an scichart, when I set the min of visible range of Axis to a bit less than 0, for example -1, the first tick will be zero ,but will show as -0, which is very weird.

And the situation occurs on demo of Scichart, too.

  • Hugo Chu asked 10 months ago
  • last active 10 months ago
1 vote
5k views

Please tell me, is it possible to make sure that there is no empty space between records on those days when there is no trading on the stock exchange? It appears that the X-axis is linear and not transactional. How can I make it transactional?

1 vote
4k views

https://www.scichart.com/questions/wpf/i-want-to-bind-selectedpointmarkers-of-datapointselectionmodifier

Hello.
Referring to the link above, we have modified the ViewModel side to maintain the selection state of chart points.

It works fine for a single chart, but when I have multiple charts, the selection points are interlocked between charts. I would like them to be independent of each other.

I wasn’t sure if there was a problem with my code or with the DataPointSelectionModifier, so does anyone know?

I have attached a code sample and a GIF of a working image.

※To reproduce this, click the three points in order from the top while holding down the control key on “Chart1” to make the three points selected. The color of the points will change from blue to red.
Next, while holding down the control key in “Chart2,” click on the bottom point. Then, in “Chart2,” four points are selected, even though only one point is pressed in total.

That is all. Best regards.

1 vote
7k views

Tell me, please, how best to organize the graph in the case when on the time axis we can have more than 100-1000 records within 1 second. The problem seems to be that the X value must be accurate to at least 1 second? How to make records with even greater accuracy. and at the same time the time on the axis was shown correctly for this kind of data?

1 vote
4k views

I work on a SwiftUI project that has integrated SciCharts.

What I’ve noticed is that while there are SwiftUI examples available, they are rather basic and when I replicate the example code over in my project, it does not run as we expect and in some cases does not run at all.

Currently there seems to be issues with the SwiftUI run loop, SwiftUI’s use of structs, and SciCharts use of pointers that make building complex charts within complex user interfaces rather challenging.

I needed to do a lot of work to get the SwiftUI example code to work in my project, and we’re still facing some challenges. Can we expect better SwiftUI support in the future, such as SwiftUI views included in the SDK or if this work has been done can the documentation be linked?

1 vote
4k views

I need to set range for stock chart from some records(first today’s record, first record of day before yesterday, etc for week, month, start of current year and the first record of chart) to last record.

To set the range i need to get indexes of this rows. Tell me please how can i do this for stock xValues. May be i can mark some records to find if faster or i need to check every records from 0 to MAX and then select the range?

Thank you!

0 votes
11k views

We have a sciChart surface in a fragment that has a scrollable view. We enabled tooltips using custom cursor modifier on the sci chart to show the values as the selection (touching a point in the chart object).

When we are moving the selection on x-axis tooltip sometimes it works fine and disappears when the selection is taken out. But sometimes it get freezed. At the same time, if we touch and move the selection in a vertical axis, tooltip box gets stuck and does not disappear even when the selection is taken out.

Tried so far:
We tried to replicate the issue in landscape mode and it works fine.
If we make the chart object to the whole page view, tool tips appears and disappears as expected.
But when the same used in portrait mode as a part of fragment (50% of screen) , problem arises

Steps to reproduce:
Have a chart object in a scrollable view.
Make sure the chart object doesnot appear on the fully screen without scrolling.
Now scroll to see the chart object.
Try to see the tooltip and move the selection in vertical axis.

  • Krish J asked 10 months ago
  • last active 10 months ago
-1 votes
0 answers
8k views

When we move the cursor fast in Sci Chart surface, Sometimes its making customized tooltip (cursor Modifier) to freeze. We are not having this issue in landscape mode. we have this issue only when we use it in half of fragment.

View hierarchy:
swipe refresh>
nested Scrollview>
constraint layout>
view> –50% of screen
Sci Graphview> –50% of screen
/ constraint layout>
/nested Scrollview>
/swipe refresh>

1 vote
8k views

Hi,
I’m trying to add Data Point Selection in 3D Surface. I followed this example (https://www.scichart.com/example/wpf-chart/wpf-3d-chart-example-simple-select-scatter-point-3d-chart/) but it didn’t work.

Point MetaData is added for each point:

 _model = new ScatterRenderableSeries3DViewModel()
 {
      DataSeries = _dataSeries,
      StyleKey = "ScatterSeries",
      PaletteProvider = new PointCloudPaletteProvider(),
      PointMarker = marker
 };

 RenderableSeries = new ObservableCollection<IRenderableSeries3DViewModel>()
 {
      _model
 };
public void AppendPositionData(double x, double y, double z)
{
    var vertex = new PointMetadata3D(Colors.Coral, 10);
    _dataSeries.Append(x, y, z, vertex);
}

Vertex Selection Modifier is added to group

        <s3D:SciChart3DSurface.ChartModifier>
                <s3D:ModifierGroup3D>
                    <s3D:FreeLookModifier3D ExecuteOn="MouseLeftButton" ExecuteWhen="Shift" />
                    <s3D:OrbitModifier3D ExecuteOn="MouseLeftButton" />
                    <s3D:VertexSelectionModifier3D ExecuteOn="MouseLeftButton" ExecuteWhen="None" />
                    <s3D:MouseWheelZoomModifier3D />
                    <s3D:ZoomExtentsModifier3D AnimateDurationMs="500"
                                               ResetPosition="300,300,200"
                                               ResetTarget="0,0,0" />
                </s3D:ModifierGroup3D>
            </s3D:SciChart3DSurface.ChartModifier>
        </s3D:SciChart3DSurface>

Now, when click to a point on the surface, IsSelected property seems not be set.
Please suggest a way to fix this issue! Thanks.

1 vote
8k views

I am using ImpulseSeries3Dgraph in some positions labels are overlapping on the graph, is there any way to increase the space between axis labels and the graph? please look into the attached image.

  • Ammar Khan asked 11 months ago
  • last active 11 months ago
1 vote
8k views

Hello,

I’m Using the FastMountainRenderableSeries to fill the area under/over the Data points with a color gradient.

However, the gradient always seems to adapt to the currently shown data values and uses the maximal and minimal value of the displayed data as the “poles” for the coloring.

In the attached image, Data is displayed with a maximal value of 2 and a minimal value of -2. The gradient (from white to black) uses these values to map the color. -2 corresponds to white and 2 corresponds to black, and the room between is interpolated.

If I were to change the displayed data to have a different max/min value, the gradient would adapt accordingly.

Here is the relevant code I’m using:

FastMountainRenderableSeries m_graph = new FastMountainRenderableSeries();
m_graph.ZeroLineY = 0;
m_graph.AntiAliasing = true;
m_graph.Fill = new LinearGradientBrush(Colors.Black, Colors.White, 90);

…adding datapoints…

My question is, is there is a way to gain more control over the way the colors of the gradient are mapped onto the area under/over the data points?

For example, maybe I want the black->white gradient only to go from 2->1 and everything above 2 is black and everything below 1 is white, no matter what range the displayed values currently have.

Ideally it would be possible to create/overwrite a “color-mapping”-function that accepts double values and returns colors to fill the are under/over the data points.

Thank you.

1 vote
5k views

Hello support team,

I’m using a SciChartSurface Chart with a CategoryDateTimeAxis (xAxis).
The chart should contain three stacked bar columns and Annotations between the columns.

How can I place the Annotations exactly between the columns with consideration of the dynamic width of chart surface? I haven’t found the exactly property or solution for this particular case.

Thanks for your support in advanced!

1 vote
2k views

Hello there,

I am new to SciChart and trying to implement custom SCICursorModifiers tooltip,

It’s almost done, except one issue, i.e I am not able to hide the X axis (or) Horizontal line which is in green colour, it is showing up in the background whenever I am trying to use the tooltip.

The line which needs to be hidden

I tried with following below code but it is not working

extension SCIChartTheme {
    static let berryBlue: SCIChartTheme = SCIChartTheme(rawValue: "SciChart_SciChartv4DarkStyle")
}

SCIThemeManager.addTheme(.berryBlue, from: Bundle.main)

Is there any way to achieve this

Thanks in Advance

1 vote
0 answers
8k views

I uploaded a test code that dynamically loads multiple charts when selecting different items in the ListBox, and if you toggle options in the ListBox, the previously created charts won’t be released, resulting in a memory leak

  • hundun wds asked 11 months ago
  • last active 11 months ago
1 vote
5k views

I have a scatterplot with different series of points and I need to figure out a way to draw each point separately in a different Z order. This will acheive “layering” of the points based on some metadata criteria.

The main issue to solve here is as follows. Each series can have “highlighted” points (outlined in blue on the chart, uses SciChart point selection) and “selected” points (denoted by a star point marker) which are tied to a selection in a grid. Any point in any of the series can be Highlighted and/or Selected. I need the the non-selected and non-highlighted points to be drawn first, then the selected points, then the highlighted points. This would guarantee that the highlighted points are always drawn on top of all others, and the selected points drawn on top of all but the highlighted.

My attempt has been to create a custom chart modifier and override OnParentSurfaceRendered. In that method I build dictionaries of points based on the metadata grouping criteria, then start with the lowest Z index group (the non-highlighted and non-selected points) draw those points, and continue up to the highest Z order group (the highlighted points).

Is there a simpler way to achieve this point layering functionality across data series?

Thanks.

0 votes
5k views

Hi Support Team.

I’m working on SciChart with React 16.9 . Licensed by EOG Resouces.

Can you guys please let me know how to custom tooltip/legend on SciChart (JS)?

My custom function is below. Thank all

export async function initSciChart(
  chartDiv: string,
  chartData: Array<{ x: Array<number>; y: Array<number> }>,
  handleMouseMove?: (args: ModifierMouseArgs) => void,
) {
  // Create the SciChartSurface in the div 'scichart-root'

  const theme = {
    ...new SciChartJSDarkv2Theme(),
    sciChartBackground: '#191F26',
  };

  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    chartDiv,
    { theme },
  );
  const legend = new LegendModifier({
    orientation: ELegendOrientation.Horizontal,
    // placementDivId: 'legend-div-id',
    showSeriesMarkers: true,
    showLegend: false,

    showCheckboxes: false,
    isCheckedChangedCallback: (series, isChecked) => {
      // isChecked callback only works if showCheckboxes=true
      console.log(
        `Option 1: Legend item ${series.type} isChecked=${isChecked}`,
      );
    },
  });

  sciChartSurface.chartModifiers.add(
    // new ZoomPanModifier(),
    new RolloverModifier({ placementDivId: 'legend-div-id' }), // enable tooltip
    new RubberBandXyZoomModifier(),
    new MouseWheelZoomModifier(),
    new ZoomExtentsModifier(),
    new XAxisDragModifier(),
    new YAxisDragModifier(),
    legend,
    new CursorModifier({
      //placementDivId: 'legend-div-id',
      //tooltipDataTemplate: customTemplate,
      //tooltipLegendTemplate: getTooltipLegendTemplate,
      // tooltipSvgTemplate: tooltipSvgTemplate,
    }), // enable cursor - yValue and xValue
  );

  sciChartSurface.xAxes.add(
    new NumericAxis(wasmContext, {
      drawMajorGridLines: false,
      drawMinorGridLines: false,
      drawMajorBands: false,
      visibleRangeLimit: new NumberRange(
        Math.min(...chartData[0].x),
        Math.max(...chartData[0].x),
      ),
    }),
  );
  sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
      drawMajorGridLines: false,
      drawMinorGridLines: false,
      drawMajorBands: false,

      zoomExtentsToInitialRange: false,
      autoRange: EAutoRange.Always,
    }),
  );

  chartData.forEach((seriesData, index) => {
    const lineSeries = new FastLineRenderableSeries(wasmContext, {
      stroke: AUTO_COLOR,

      strokeThickness: index % 2 === 0 ? 3 : 1,
      dataSeries: new XyDataSeries(wasmContext, {
        xValues: seriesData.x,
        yValues: seriesData.y,
        dataSeriesName: `series-${index}`,
      }),
    });

    lineSeries.rolloverModifierProps.tooltipLegendTemplate = (
      tooltipProps: RolloverModifierRenderableSeriesProps,
      seriesInfo: SeriesInfo,
    ) => {
      return `<svg width="340" height="25">
          <rect width="100%" height="100%" fill="#000000DD" stroke="grey" stroke-width="2" />
          <svg width="100%">
              <text x="8" y="16" font-size="13" font-family="Verdana" fill="red">Custom Legend Tooltip</text>
              <text x="180" y="16" font-size="13" font-family="Verdana" fill="lightblue">X: ${seriesInfo.formattedXValue}</text>
              <text x="260" y="16" font-size="13" font-family="Verdana" fill="green">Y: ${seriesInfo.formattedYValue}</text>
          </svg>
      </svg>`;
    };

    sciChartSurface.renderableSeries.add(lineSeries);

    //Custom event on chart
    if (sciChartSurface && handleMouseMove) {
      const customModifider = new FacilityBalanceChartModifier();
      sciChartSurface.chartModifiers.add(customModifider);
      customModifider.modifierMouseMove = handleMouseMove;
    }
  });
  return { sciChartSurface, wasmContext };
}
  • TRUONG LE asked 11 months ago
  • last active 10 months ago
0 votes
2k views

Hello,

I have a WPF .Net 6 application running on Window 11 that monitors data coming from the network.
The app has five tab controls, each tab has four FIFO line charts.
I have another app (the “sender”) that sends simulated data to feed and test the “main” app.
Everything works beautifully when:
– The sender app is not running
– then, first navigate through all tabs, seeing an empty chart (expected)
– Launch the sender app.
– Navigate through tabs, watching them updating in near real time…

But…
If I do not initially navigate through all tabs, only the visible tab gets updated.

I suspect/speculate that SciChart code is doing some “critical” initializations on the OnLoaded event that are missed if tabs do not get loaded before setup.

We want the charts to get populated even if they are hidden at startup.

Any suggestions to fix the issue? Or am I doing anything wrong ?

Thank you

1 vote
2k views

I’m using the ZoomHistoryManager in my application which works great!

But how can I add my own entry to the undo/redo stack?

On my viewmodel I have

 /// <summary>
/// XAxisRange
/// </summary>
public DoubleRange? XAxisRange
{
    get => _xAxisRange;
    set => SetProperty(ref _xAxisRange, value);
}

private DoubleRange? _xAxisRange = null;

/// <summary>
/// YAxisRange
/// </summary>
public DoubleRange? YAxisRange
{
    get => _yAxisRange;
    set => SetProperty(ref _yAxisRange, value);
}

private DoubleRange? _yAxisRange = null;

and I want to implement something like :

 public void CustomRangeUpdate()
{
    if (RenderableSeries.Count > 0)
    {

        XAxisRange = new DoubleRange(x1, x2);
        YAxisRange = new DoubleRange(y1, y2);

        ZoomHistoryManager.SaveLatestRange(new AxisKey("DefaultAxisId", true), XAxisRange);
        ZoomHistoryManager.SaveLatestRange(new AxisKey("YAxis", false), YAxisRange);
        ZoomHistoryManager.PushAll();
    }
}

But it looks like I am using it incorrectly as it doesn’t add any entries. I’ve also tried Push() with no luck

  • forl forl asked 11 months ago
  • last active 11 months ago
1 vote
2k views

We have been testing different limits of data types we are aiming to draw to the chart, and have found that if all of the values in a series are the same, very near 0, float value, then the line isn’t drawn. We do, however, get the value showing up on the vertical line annotation.

Though we are not using the latest version of SciChart in our production app (Net 4.6.1 requirement, but upgrading that soon), I have managed to reproduce the same in a very simplified .Net7 app using the latest version (7.0.2.27161). I have attached both the test app (with my runtime key removed) and a screenshot of the app.

Here is the code we are using to generate the sample series in the code behind of MainWindow.xaml:

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
        this.Loaded += OnLoaded;
    }

    private void OnLoaded(object sender, RoutedEventArgs routedEventArgs)
    {
        var floatData = new XyDataSeries<double, float>();

        for (var i = 0; i < 1000; i++)
        {
            floatData.Append(i, float.Parse(Math.Pow(2, -126).ToString("E")));
        }

        this.FloatSeries.DataSeries = floatData;
    }
}

MainWindow.xaml contains just a SciChart Surface, as follows:

<s:SciChartSurface x:Name="Surface">
            <s:SciChartSurface.RenderableSeries>
                <s:FastLineRenderableSeries x:Name="FloatSeries" 
                                            Stroke="#FF4083B7"/>
            </s:SciChartSurface.RenderableSeries>

            <s:SciChartSurface.XAxis>
                <s:NumericAxis AutoRange="Always"/>
            </s:SciChartSurface.XAxis>

            <s:SciChartSurface.YAxis>
                <s:NumericAxis AutoRange="Always"/>
            </s:SciChartSurface.YAxis>

            <s:SciChartSurface.ChartModifier>
                <s:ModifierGroup>
                    <s:RubberBandXyZoomModifier />
                    <s:ZoomExtentsModifier />

                    <s:VerticalSliceModifier>
                        <s:VerticalSliceModifier.VerticalLines>
                            <s:VerticalLineAnnotation X1="500" 
                                                      IsEditable="True"
                                                      LabelTextFormatting="E"
                                                      Stroke="White" />
                        </s:VerticalSliceModifier.VerticalLines>
                    </s:VerticalSliceModifier>
                </s:ModifierGroup>
            </s:SciChartSurface.ChartModifier>

            <s:SciChartSurface.Annotations>
                <s:TextAnnotation Text="Test app highlighting problem when all x values are floats with the same scientific value"
                                  CoordinateMode="Relative"
                                  X1="0" 
                                  Y1="0"
                                  Margin="2"/>
            </s:SciChartSurface.Annotations>
        </s:SciChartSurface>

Adding another value to the series with result in the line being drawn, as long as it is sufficiently different to the others.

What would be the best way to get this data showing to the users? Whilst highly unlikely the user is going to use such values, we cannot discount this. Would extending the ViewportManager to provide our own range be the best approach? If it impacts on the suggestions, due to our implementation requirements our production app will only show up to two series per surface (with the same data type), but we could be showing upwards of 256 charts (with one of 12 data types as their y-axis type). All of our charts are linked to a common TimeSpanAxis for the x axis.

1 vote
0 answers
5k views

I’m using SciChartSurface to draw XyDataSeries on XyScatterRendurableSeries.
XyDataSeries changes values at certain times and requires updates.
However, it takes too long to update multiple SciChartSurfaces.
I’ve tried the SuspendUpdates method, but it doesn’t work.
Please let me know if there is a good way.
Thank you in advance.

1 vote
2k views

Hello,

I’m experiencing a strange phenomenon in which the (in-)visibility of the MajorGridLines of the X-and Y-Axis is only realized in the GUI after the SciChartSurface containing the Axis has been manually resized.

The SciChartSurface is embedded in our GUI like any ordinary WPF-element.

The visibility of the MajorGridLines is controlled via a C#-property:

public virtual bool BackgroundGridVisibility       
   {
              get {
                  return m_yAxis.DrawMajorGridLines;
              }
              set {       
                  m_xAxis.DrawMajorGridLines = m_yAxis.DrawMajorGridLines = value;
                  NotifyPropertyChanged();
              }       
   }
  

I tried various application of the UpdateLayout-Funktion after setting the visibility, but did not observe positive change.

Is there some other kind of “repaint”-function that can be used to update the visibility of the GridLines?

Thank you

0 votes
2k views

I’m trying to create a chart with a single FastLineRenderableSeries, that will have one Y axis, and two X axes.
The first X axis will be a simple NumericAxis, but I want the second X axis to show a string value plotted for each point in the series.

For example, if I have a line series with 3 points
[x:0, y:10]
[x:10, y:20]
[x:20, y:10]

I want the first X axis to show a simple 0-20 range, but I want the second X axis to have “Point1” at x=0, “Point2” at x=10 and “Point3” at x=20.

I have tried with AxisMarkerAnnotation, but this appears to always rotate the text vertically (I need the text horizontal like on a normal Axis)

The second problem is that when you zoom out, the axes go out of sync? I have tried to resolved this using

 private void XNumericAxis_VisibleRangeChanged(object sender, Charting.Visuals.Events.VisibleRangeChangedEventArgs e)
    {
        XNameAxis.VisibleRange = XNumericAxis.VisibleRange;
        XNameAxis.GrowBy = XNumericAxis.GrowBy;
        XNameAxis.MajorDelta = XNumericAxis.MajorDelta;
    }

but it still goes out of sync (see attached images).

Full code :

 <s:SciChartSurface x:Name="sciChart"
                   GridLinesPanelStyle="{StaticResource GridLinesPanelStyle}"
                   Style="{StaticResource SciChartSurfaceStyle}">

    <s:SciChartSurface.RenderableSeries>
        <s:FastLineRenderableSeries x:Name="lineSeries"
                                    Stroke="Plum"
                                    StrokeThickness="3">
            <s:FastLineRenderableSeries.SeriesAnimation>
                <s:FadeAnimation AnimationDelay="0:0:0.2"
                                 Duration="0:0:1" />
            </s:FastLineRenderableSeries.SeriesAnimation>
        </s:FastLineRenderableSeries>
    </s:SciChartSurface.RenderableSeries>

    <s:SciChartSurface.XAxes>
        <s:NumericAxis Style="{StaticResource XAxisStyle}"
                       AxisBandsProvider="{Binding XAxisBands}"
                       VisibleRangeChanged="XNumericAxis_VisibleRangeChanged"
                       x:Name="XNumericAxis" />
        <s:NumericAxis Style="{StaticResource XAxisStyle}"
                       LabelProvider="{Binding XAxisLabels}"
                       AutoRange="Never"
                       x:Name="XNameAxis"
                       Id="NameAxis" />
    </s:SciChartSurface.XAxes>

    <s:SciChartSurface.YAxes>
        <s:NumericAxis Style="{StaticResource YAxisStyle}"
                       AxisAlignment="Left" />
    </s:SciChartSurface.YAxes>
    <s:SciChartSurface.ChartModifier>
        <s:ModifierGroup>
            <s:ZoomPanModifier />
            <s:ZoomExtentsModifier />
            <s:MouseWheelZoomModifier />
        </s:ModifierGroup>
    </s:SciChartSurface.ChartModifier>

    <s:SciChartSurface.Annotations>

        <s:AxisMarkerAnnotation X1="0"
                                XAxisId="NameAxis"
                                AnnotationCanvas="XAxis">
            <s:AxisMarkerAnnotation.PointerTemplate>
                <DataTemplate  DataType="{x:Type s:AxisInfo}">

                </DataTemplate>
            </s:AxisMarkerAnnotation.PointerTemplate>
            <s:AxisMarkerAnnotation.LabelTemplate>
                <DataTemplate  DataType="{x:Type s:AxisInfo}">
                    <TextBlock Text="Point 1"
                               Foreground="Black"
                               FontWeight="Normal" />
                </DataTemplate>
            </s:AxisMarkerAnnotation.LabelTemplate>
        </s:AxisMarkerAnnotation>

        <s:AxisMarkerAnnotation X1="10"
                                XAxisId="NameAxis"
                                AnnotationCanvas="XAxis">
            <s:AxisMarkerAnnotation.PointerTemplate>
                <DataTemplate  DataType="{x:Type s:AxisInfo}">

                </DataTemplate>
            </s:AxisMarkerAnnotation.PointerTemplate>
            <s:AxisMarkerAnnotation.LabelTemplate>
                <DataTemplate  DataType="{x:Type s:AxisInfo}">
                    <TextBlock Text="Point 2" />
                </DataTemplate>
            </s:AxisMarkerAnnotation.LabelTemplate>
        </s:AxisMarkerAnnotation>

        <s:AxisMarkerAnnotation X1="20"
                                XAxisId="NameAxis"
                                AnnotationCanvas="XAxis">
            <s:AxisMarkerAnnotation.PointerTemplate>
                <DataTemplate  DataType="{x:Type s:AxisInfo}">

                </DataTemplate>
            </s:AxisMarkerAnnotation.PointerTemplate>
            <s:AxisMarkerAnnotation.LabelTemplate>
                <DataTemplate  DataType="{x:Type s:AxisInfo}">
                    <TextBlock Text="P3" />
                </DataTemplate>
            </s:AxisMarkerAnnotation.LabelTemplate>
        </s:AxisMarkerAnnotation>

    </s:SciChartSurface.Annotations>
</s:SciChartSurface>
  • forl forl asked 11 months ago
  • last active 11 months ago
1 vote
2k views

Hi there,

Wow this library has come along way in ten years. My question is related to interaction between RS and the legend that is rendered by the chartmodifier.

I declare the legend something like this during the initial bootstrapping of the plot view:

        const legend = new LegendModifier({placementDivId: "legend-goes-here", id:"legend"});
        sciChartSurface.chartModifiers.add(legend);

After that, I have a custom interface available for users to change things, which eventually results in visibility or color changes, updating an RS something like this:

        const thisRs = surface.renderableSeries.getById(`${s.fileId}-${s.name}`);
        if (thisRs) {
            thisRs.isVisible = s.isVisible;
            thisRs.stroke = s.visualInfo?.colorCode ?? "#FFFFFF";
        } 

These changes do not appear to be propagated to the legend despite the series on the plot changing. I guess my questions are:

1) What’s the expected behavior/is there something obvious I’m missing about the model?
2) Any suggestions?

It may very well be somewhere lost in my fairly complex React app, but I first wanted to confirm that I’m not missing something in the api.

Thanks!
Dan

1 vote
2k views

Hello,

When annotations and the rollover modifiers are displayed on the very left side of a chart they align with the center of the candlesticks on the chart. However, as they get displayed toward the right side of the chart they get more and more offset to the right side of the candlestick.

Can anyone point me in the right direction to figure out how to fix this issue seemingly with my xAxis?

See attached screenshots,

  • Leland asked 11 months ago
  • last active 11 months ago
1 vote
2k views

Hi,

In the interface IRenderableSeriesViewModel an IncludeLegend property would be helpful (analogous to LegendModifier.IncludeSeriesProperty). Otherwise you have to override the LegendModifier.GetSeriesInfo method and implement the logic yourself.

regard
Tobias

  • Tobias asked 11 months ago
  • last active 11 months ago
1 vote
2k views

Hello,

We have a heatmap where we can zoom in using the MouseWheelZoomModifier. Essentially we want to stop zooming at a certain visibleRange level and we cannot achieve it. Currently we have a heatmap that’s about 1500 pixels in width (with 1500 datapoints, 1-to-1), but the user can zoom so far you essentially see just 1 data point spread over the 1500 pixels.

We want to be able to zoom, but up to a certain limit, let’s say 100 datapoints visible. When visibleRange.max – visibleRange.min <= 100 we want to stop zooming.

We’ve tried suspendUpdates() and manually setting the visibleRange, but this doesn’t produce the desired results because suspendUpdates stops everything (including zooming out again) and resetting visibleRange solves it for a second, but the user is able to zoom in again. We also tried a custom mouseWheelModifier class and just removing the zoom in functionality at the treshold but that does not seem to work because scichart gives an error of having different mouseWheelModifiers.

I hope that this problem was expressed sufficiently. Please let us know if you have any questions.

  • Zino As asked 11 months ago
  • last active 11 months ago
1 vote
5k views

We would like to add an sphere on a 3D surface graph between steps. We are using a SurfaceMeshRenderableSeries3D and we have the X and Y indices of the point. Is there a way to do this out of the box?

Or is there a way to get the interpolated point using the data series and the indices?

If that is not possible, is there an algorithm we could get from you to do the calculation ourselves?

Currently we are using a XyzDataSeries3D and adding the point to that, but our interpolation algorithm must not be the same as yours, as the point does not stay on the surface of the graph in between points.

  • Doug Witt asked 11 months ago
  • last active 11 months ago
1 vote
2k views

Hello,

I have a chart currently working. (See attached Chart_Current.png for what I have now)

I’d like to add concentric color-filled zones to the chart, to indicate when the already existing line series enters and exits particular zones of interest. My zones are elliptical, and I need to be able to define them as such (so I do not think the “Bubble” stuff will work). I need to color in the space inside my zones, with some opacity, such that the original renderable series can still be seen. (See attached Chart_Goal.png for a crude MS Paint drawing of what I am trying to achieve.)

I have explored the WPF Examples App and seen several promising chart / series types, but I am still not sure how to proceed. It seems the HeatMap stuff will probably be useful, but I am not sure how to define my HeatMap zones elliptically.

Any tips on how to proceed would be greatly appreciated. I am just trying to get pointed in the right direction.

Thank you!

Kurt

1 vote
2k views

Following the “How to Template the Axis Title” sample and using a simple TextBlock with TextWrapping=”Wrap” I am seeing strange resizing of the main chart elements especially with a scrollbar.

The attached image shows an example app (code available).

The first chart is normal (title clipped).
The second chart has the wrapping textblock and a scrollbar. The scrollbar is off the edge, the chart view area is off the edge. The entire axis label is still not visible (“Lorem ipsum dolor sit amet, consectetur”)
The third chart has no scrollbar so fits elements on the window, but still does not show all text.

The components creeping offscreen is the big problem I cannot figure out how to fix. Please

Note also happens in v7

1 vote
2k views

Hello All,

Is there a way to have a cursor modifier display on a mouse left/center/right click instead of automatically showing when the mouse is over the chart? I tried setting the ExecuteOn property but had no effect.

Thanks in advance,
Sergio.

1 vote
5k views

Suppose I have an XYSeries dataset. For this example, Y is a temperature value in Celsius.

The XYSeries without modification I will call raw space. I assume that there is some matrix stack that transforms my “raw space” data series to screen space (the actual pixel on the screen).

Basic Point Transform assumption from my limited Graphics experience:
(Raw Space -> View Space (axis transforms etc) -> Culled Space (culled and interpolated points) -> Screen Space (positioned properly on the screen))

Now all is well if I am just running this graph in Celsius, but perhaps my user wants to change the Y axis to Fahrenheit. For maximum speed I want to generate a transform to edit the dataset, creating an extra space which I will call “Transformed Space”

(Raw Space -> Transformed Space -> View Space -> Culled Space -> Screen Space)

The matrix transform to Fahrenheit (Transformed Space) would be:

| 1   0    0 | | x |  
| 0  1.8  32 | | y |
| 0   0    1 | | 1 |

Is it possible to build transforms like this in Scichart or a partial matrices approach like in WPF? Or do I need to loop through and change my raw series every time the units change?

Thank You,
Nicholas Louks

1 vote
2k views

Hi,

The axis labels are not always showing when zoomed in/out.
Is there a way/workaround to persist the end labels and also make it editable?

Please see attached pic

Thanks
Pramesh

0 votes
0 answers
8k views

Hello! I want to create an AxisMarkerAnnotation but the padding doesn’t match the position of the text on the axis – I would like to align it and what is the way to do it? couldn’t find the right settings

1 vote
5k views

Hi SciChart team,

first of all I want to say that I still think SciChart is great! However, I am quite frustrated at the moment. In small applications, the chart and its annotations work very well (yes “Annotations are Easy!”), but in large industrial applications with many views and millions of lines of code, there are from time to time difficult complications with the chart. This is also the case now with the Annotation Creation Modifier. As far as I can see, the AnnotationCreationModifier.OnModifierMouseUp method uses the annotation’s IsSelected state to determine whether to create a new annotation or complete one. With custom composite annotation it can happen that a mouse click first selects the annotation and only then AnnotationCreationModifier.OnModifierMouseUp is called (see attached screenshots).
Sometimes it works, sometimes it doesn’t, depending on where the mouse is.
The AnnotationCreationModifier should not use the annotation’s IsSelected state to complete its internal “edit mode” and call “OnAnnotationCreated”.
Or is there already a solution for this?

regards,
Tobias

  • Tobias asked 11 months ago
  • last active 11 months ago
1 vote
2k views

Currently, I am creating a line chart and appending a lot of fetched data to the data series. The problem is that I have to recreate the chart when I move to another page that is using the same chart from the previous page. Therefore, I have to fetch the data and append it to the chart data series again.

Is there any way to reuse the chart itself without recreating the whole chart on another page?

  • info vcanus asked 11 months ago
  • last active 11 months ago
1 vote
5k views

Hi, I’m struggling to reduce times for loading draw (5,000Series x 5,000points) x 10 charts
which is in Scichart example ‘Load 500Seriesx500points’.

  1. Present, Loading (5,000Series x 5,000points) x 10 charts consumes about 1 minutes.
    How can i load and draw this more faster?

  2. And While in loading, how can i generate and show a Progress bar?

  • Hyunji Jeon asked 11 months ago
  • last active 11 months ago
1 vote
7k views

I am using a axis line chart from the js scichart. I want to change the font size of a legend. How do I change the font size of a legend?

  • info vcanus asked 11 months ago
  • last active 11 months ago
0 votes
5k views

I have a screen with multiple chart surfaces stacked on top of each other within a ScrollView. I can’t use a single chart surface because each of the charts is combined with other types of views to display extra information about the data in the charts.

I have a few issues I’m trying to solve:

  1. Each of the charts uses the same x-axis range. When a user pinches to zoom or drags to pan on a chart, I want all the charts to be synchronized to zoom and pan at the same time. How can I do this?

  2. Because the charts are embedded in a ScrollView, when I use the following modifiers it is very difficult to smoothly zoom and pan without the ScrollView being activated to scroll up and down. How can I make it so that the ScrollView is deactivated from moving while the user is attempting to zoom or pan a chart

surface.chartModifiers.add(
XAxisDragModifier().apply {
dragMode = AxisDragModifierBase.AxisDragMode.Pan
minTouchArea = 1000.0f
}
)
surface.chartModifiers.add(
PinchZoomModifier().apply {
direction = Direction2D.XDirection
}
)

1 vote
5k views

I wanted to experiment with adding a tooltip to the SciChart_ScatterChartPerformanceDemo.

I extended the xaml with

 <s:SciChartSurface.ChartModifier>
            <s:ModifierGroup>
                <s:MouseWheelZoomModifier/>
                <s:TooltipModifier />
            </s:ModifierGroup>
        </s:SciChartSurface.ChartModifier>

However, I have noticed that the tooltip doesn’t seem to react properly to the geometry under the cursor. The tooltip will often show up when the cursor is outside the geometry.

If you use a SquarePointMarker with a width and height of 25, the tooltip pops up even when you’re a fair distance away from the geometry.

The hit detection doesn’t appear to be working correctly?

Edit : Also, it appears I am unable to answer questions here, when I add an answer, it accepts it, but doesn’t show anything?

  • forl forl asked 11 months ago
  • last active 10 months ago
1 vote
2k views

Hi~
I am trying to create a plot that animates ODS (Operating Deflection Shape) using FRF (Frequency Response Function) data. Is ODS animation possible using scichart’s gemoetry 3D plot?
Thanks.

  • kim2 kim asked 11 months ago
  • last active 11 months ago
Showing 251 - 300 of 4k results