Questions

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

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

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

Thanks

We want to create loop graph in android wrap data

Just trying to run the demo using these instructions: https://github.com/abtsoftware/scichart.ios.examples.

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

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

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

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

    var boxplotViewModel = new BoxPlotRenderableSeriesViewModel { DataSeries = boxDataSeries };
    RenderableSeriesViewModels.Add(boxplotViewModel);
}

Same issue : https://www.scichart.com/questions/wpf/box-plot-width-setting

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

My button event.

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

rs1 = sciChart3DBuilder.newSurfaceMeshSeries3D()
        .withDataSeries(ds3d)               
        .withDrawMeshAs(DrawMeshAs.SolidWireframe)
        .withStroke(0xFFE0E0E0)
        .withStrokeThicknes(1f)
        .withMaximum(5000)
        .withDrawSkirt(false)
        .withMeshColorPalette(new GradientColorPalette(colors, stops))
        .withOpacity(1.0f)
        .build();

surface3d.setTheme(R.style.SciChart_ElectricStyle);
surface3d.setCamera(camera);
surface3d.setXAxis(xAxis);
surface3d.setYAxis(yAxis);
surface3d.setIsFpsCounterVisible(false);
surface3d.setZAxis(zAxis);
surface3d.getRenderableSeries().add(rs1);
surface3d.getChartModifiers().add(sciChart3DBuilder.newModifierGroupWithDefaultModifiers().build());
    }
});

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

This is the code:

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:s="http://schemas.abtsoftware.co.uk/scichart"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="FF_DataVis_Avalonia_MVVM.Views.TabControlView">

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

And the error I get is:
“XAMLIL: Unable to resolve type SciChartSurface from namespace http://schemas.abtsoftware.co.uk/scichart Line 27, position 4″
which is the first s:SciChartSurface entry.

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

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

Hi,

I have several vertical line annotations placed on my chart.

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

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

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

Hello,

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

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

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

Existing result screenshot attached.

Thanks, Roger.

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

Hi there,

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

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

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

Any help would be appreciated.
Thanks in advance.

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

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

<s:LegendModifier ShowLegend="{Binding ShowLegend}" 
    Orientation="Vertical" 
    VerticalAlignment="Center" 
    HorizontalAlignment="Left"
    LegendPlacement ="Right"/>

Hi,

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

"Sorry! You have not set a License Key. You can request a free trial key from www.scichart.com/licensing-scichart-android or purchase at store.scichart.com."

Thanks,
Gang

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

eg:

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

Hey Guys,

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

Following is my XAML code,

Chart Surface: Modifiers.

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

ParentView Buttons,

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

ParentView view model,

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

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

            IsAnnotationCreationEnable = false;
            IsAnnotationDrawn = false;

            OnPropertyChanged("IsAnnotationDrawn");
        }
        catch { }
    });

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

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

Thanks.

Hi,

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

Best regards

Hi there,

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

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

Kind regards,
Tim Havinga

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

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

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

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

Hi all,

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

Thanks

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

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

But.

I could not found fifo option in js scichart.

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

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

Hi,

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

With fifocapacity(XyDataSeries), memory behaves like an image. (Repeat ups and downs)
Is this due to fifocapacity(XyDataSeries)?

Capture : x = minutes , y = MB

Is there a way to show the axes as a line while not drawing the grid? (right now I have a white surface and white gridlines in the custom theme, but with that the axes are now just the ticks)
To clarify the Y-Axis is a middle axis so a border would not work.

I need to set the style of the ellipse on my VerticalSliceModifier (and make it a custom color etc)

                <s:VerticalSliceModifier ShowTooltipOn="Never" Foreground="White" Name="sliceModifier">
                    <s:VerticalSliceModifier.VerticalLines>
                        <s:VerticalLineAnnotation X1="{Binding Number}" Style="{StaticResource sliceStyle}" />
                    </s:VerticalSliceModifier.VerticalLines>
                </s:VerticalSliceModifier>

However my series is created in code as a MountainRenderableSeriesViewModel and bound to the chart via SeriesBinding

    <s:SciChartSurface
        Grid.Row="1"
        Background="Transparent"
        BorderThickness="0"
        RenderableSeries="{s:SeriesBinding Series}"
        Annotations="{s:AnnotationsBinding Annotations}">

All the examples I’ve seen use the RolloverMarkerTemplate and define it under as a child node under BaseRenderableSeries or FastLineRenderableSeries, but I cannot find how to assign this to a series when it is defined in a ViewModel and assigned as above.

I’m new to SciChart and any help on this would be great.
Thanks

Hi

I want to make an dot horizontal line in the chart surface.
How can I make this with HorizontalLineAnnotation?

Please help me

Hi,

Currently when we scroll the mouse pointer the zoom level is increasing/decreasing and when we click and drag the pan the chart. I want is when we scroll the chart should change the visible range (Pan chart), and clicking and selecting the area need to zoom like RubberBandXyZoomModifier. But I need to zoom only the X axis. Y axis should be the same as before zoom. Is this possible with SCI chart??

Good evening!
I wrote a test program with your library, the following situation arose:
On Windows 10 everything works fine, and on Windows 7 the following error (for 3D Charts)

XamlParseException: The invocation of the constructor on type 'SciChart.Charting3D.SciChart3DSurface' that matches the specified binding constraints threw an exception.
-------------------------------------------

Stack Trace:
   at System.Windows.Markup.WpfXamlLoader.Load (XamlReader xamlReader, IXamlObjectWriterFactory writerFactory, Boolean skipJournaledProperties, Object rootObject, XamlObjectWriterSettings settings, Uri baseUri)
   at System.Windows.Markup.WpfXamlLoader.LoadBaml (XamlReader xamlReader, Boolean skipJournaledProperties, Object rootObject, XamlAccessLevel accessLevel, Uri baseUri)
   at System.Windows.Markup.XamlReader.LoadBaml (Stream stream, ParserContext parserContext, Object parent, Boolean closeStream)
   at System.Windows.Application.LoadBamlStreamWithSyncInfo (Stream stream, ParserContext pc)
   at MS.Internal.AppModel.AppModelKnownContentFactory.BamlConverter (Stream stream, Uri baseUri, Boolean canUseTopLevelBrowser, Boolean sandboxExternalContent, Boolean allowAsync, Boolean isJournalNavigation, XamlReader & asynterObjectConver)
   at MS.Internal.AppModel.MimeObjectFactory.GetObjectAndCloseStream (Stream s, ContentType contentType, Uri baseUri, Boolean canUseTopLevelBrowser, Boolean sandboxExternalContent, Boolean allowAsync, Boolean isJournalNavigation & asamlOjectConstruction)
   at System.Windows.Navigation.NavigationService.GetObjectFromResponse (WebRequest request, WebResponse response, Uri destinationUri, Object navState)
   at System.Windows.Navigation.NavigationService.DoNavigate (Uri source, NavigationMode f, Object navState)
   at System.Windows.Navigation.NavigateQueueItem.Dispatch (Object obj)
   at System.Windows.Threading.ExceptionWrapper.InternalRealCall (Delegate callback, Object args, Int32 numArgs)
   at MS.Internal.Threading.ExceptionFilterHelper.TryCatchWhen (Object source, Delegate method, Object args, Int32 numArgs, Delegate catchHandler)

AccessViolationException: Attempted to read or write protected memory. This is often an indication that other memory is corrupt.
-------------------------------------------

Stack Trace:
   at A.QBB.DJ (UInt32 D, Boolean I, Boolean J)
   at SciChart.Charting3D.Interop.SCRTWPFInterop.TwisterInitEngine (UInt32 multiSampleAntiAliasing, Boolean _bUseDirectX9, Boolean _bD3D11UseLowerFeaturesLevel)
   at SciChart.Charting3D.Viewport3D.QB (Boolean D)
   at SciChart.Charting3D.SciChart3DSurface.KYB ()
   at A.VDB.BB (Action D, String I)
   at SciChart.Charting3D.SciChart3DSurface..ctor ()

I ran the SciChart WPF Examples Suite program and saw the same message.

Please tell me what to do (preferably without a new version, I read that only SciCharts 5 work stably for Windows 8 and below)

System Information:
Windows 7 64-bit, 8GB RAM, 1TB SSD, .NET Framework 4.5.2
SciCharts: Version 5.4.0.12119

UPD:
in version 6.3.0.13476 the situation is similar

Hi everyone!

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

Hi, I’m looking for some pointers on how to implement the following:

• User draws a selection on the chart (similar to rubber band modifier)
• Annotation is drawn on the chart conforming to the users selection
• Annotation is fixed relative to the data point (e.g. will scroll is the chart is panned etc)

Many thanks

We are using NumericAxis for the y-axis and x-axis of a bar chart. The x-axis uses a LabelProvider (to convert integers to strings) and a TickLabelStyle (to rotate the label by 270 degrees so it is vertical going from the bottom to the top). We find that sometimes the y-axis is not drawn (however, it will be drawn if the chart is resized or re-painted).

The work-around to the problem is adding spaces to the front of the shorter labels so all of the labels are all the same length. However, this work-around does not work for every case.

Have you seen this issue before and is there a better solution? Thanks!

Hi,
I want to draw a spectrogram in WPF application and after searching I found your control. I downloaded your demo (trial version) and I would want to check if it completely meets my requirements. As starting I try to make zoom-in in your demo and I didn’t succeed.
Maybe you can tell me if it’s supported?
Thank you very much!

We use WPF’s lineChart component to load a huge file. This file may contain a lot of curves, each curve contains 32M points. The point is of type float.
We found that the loading curve of the line chart is relatively slow. Through performance analysis, I think it is caused by XYDataSeries.Append(IEnumber x,IEnumber y).
Excuse me, how can I optimize. It would be better if there is a code example.
Looking forward to your reply.

Hi guys,

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

Thanks in advance!

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

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

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

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

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

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

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

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

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

drawChart.js

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

  console.log('createChart');
  const xAxis = new NumericAxis(wasmContext);
  const yAxis = new NumericAxis(wasmContext);

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

  yAxis.labelProvider = new CustomLabelProvider();

  sciChartSurface.yAxes.add(yAxis);
  sciChartSurface.xAxes.add(xAxis);

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

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

  sciChartSurface.zoomExtents();

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

updateChartWithData.js

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

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

  sciChartSurface.invalidateElement();
  console.log('updateChartWithData');
  console.log(chartData);

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

      sciChartSurface.renderableSeries.add(lineSeries);
      sciChartSurface.zoomExtents();
    } else if (chartType === 'bar') {
      const lineSeries = BarChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);
      sciChartSurface.renderableSeries.add(lineSeries);
      sciChartSurface.zoomExtents();
    } else {
      const lineSeries = StackedChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);
      stackedColumns.push(lineSeries);
    }
  });
};

“LineChart.js”

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

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

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

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

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

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

lengend.js

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

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

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

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

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

      setLegendData(_legendData);
    },
    [legendData]
  );

  return (
    <div className={classes.root}>
      <Paper variant="outlined" square>
        {legendData.map((item: any) => (
          <div className={classes.listItem} key={item.streamId}>
            <IconButton
              onClick={() => onClick(item)}
              style={{ color: item.stroke }}
              size="small"
              aria-label={item.label}
            >
              {item.isVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
            </IconButton>
            <div>{item.label}</div>
          </div>
        ))}
      </Paper>
    </div>
  );
};

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