Category: JavaScript

Greetings,
i have three Series in a SciChart.js (Community-Version) Surface.
The Legend i added shows me all three of them and their names and checkboxes do hide or show the series.

Here is my problem: Is there a way to hide one Series (a FastCandlestickRenderableSeries) from the Legend? I only want to show the other two Series (FastLinerenderableSeries).

Somethin like a Parameter “showInLegend: false,”? I did not find something like this in the documentation(https://www.scichart.com/documentation/js/current/typedoc/classes/legendmodifier.html).

Thank you

Hi, I want to color the axis label by its value,

eg.
value < 0 -> show red color
value = 0 -> show gray color
value > 0 -> show green color

similar to this question, but in javascript platform, it seems the LabelProvider has function related to the value(string) formatting only. Is there any ways to styling the label? Thanks!

Hello,

Is there a way to render textbox as an annotation in the chart ? The workaround i could think of is to use CustomAnnotation and supply SVG (svgString) with HTML input tag enclosed. Please let me know if there is a better way to perform this.

I have a real time updated chart with very large data size and I am facing the slow client problem. i.e. The data sending speed is faster than the data receiving and handling speed which causes memory growing up issue. I am trying to use Web Workers to increase the data handling speed in frontend. I have found a related post:

https://www.scichart.com/questions/wpf/is-xydataseries-safe-to-being-changed-in-a-separate-thread

It seems possible to update XyDataSeries in the background thread with WPF. My UI is built with NextJS. I tried to use Web Workers to implement multiple threads. But I found that it can’t pass the SciChartSurface or XyDataSeries to the worker thread. Could you show me an example on how to update XyDataSeries in the worker thread with Web Workers?

I need help to make the SciChart surface grid to always look like squares instead of rectangles(like in the screenshot attached).
Does anyone have solved this yet ?

I am implementing a heatmap chart and would like to allow users to adjust the color mapping of the heatmap by adding sliders to the heatmap legend (Please refer to the attached screenshot). Does SciChart support color slider for HeatmapLegend?

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

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

I am on Windows 10.

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

React Code:

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

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

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

    const xAxis = new NumericAxis(wasmContext);
    const yAxis = new NumericAxis(wasmContext);
    sciChartSurface.xAxes.add(xAxis);
    sciChartSurface.yAxes.add(yAxis);
}, []);

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

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

const container = document.getElementById('app');
const root = createRoot(container!);
root.render(<Chart/>);

Chart-Style.scss

#app {
    display: flex;
    flex-flow: column nowrap;
    margin: 0;
    padding: 0;
}

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

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

#line-chart {
    flex: 1 1 auto;
}

Hi,

Is it possible to either rotate a TextAnnotation, not necessarily by user interaction but even just in code to have text going vertically?

Cheers,

Hi,

I have a uniform heatmap with multiple ’tiles’ of data loaded in, by using multiple UniformHeatmapDataSeries / UniformHeatmapRenderableSeries.

The user is allowed to pan around/zoom around the heatmap.

I want to build two charts to display the ‘visible heatmap average’, one for each axis. For example, I would display a line chart underneath the heatmap. The first point on this line chart would represent the average value of all cells in the first column of the heatmap – I need this to take into account all of the UniformHeatmapDataSeries that are currently in the viewport, treating them as a singular heatmap.

I’ve seen the NumericAxis.getCurrentCoordinateCalculator(), which looks promising, but I’ve not yet worked out if that can do what I need.

Any thoughts on the best approach?

Thanks
Joe

Dear Andrew,

As mentioned in the previous question. we are getting ready to implement a comprehensive annotation and labeling functionality to our application. Although I know how to add scalable custom-annotations (your team guided us with the implementation in the past), an important part of of annotation functionality is. ability to edit the annotations. But I am having trouble accessing and interacting the the annotations.

How can I access the svg polygon nodes from the custom annotation and drag and move them? I have attched a video to show the existing functionality.

https://youtu.be/AkysJ2R3TyE1

Best,
Pramod

Hi,

In my application I am using two charts for represent different values. I am using LegendModifier on the first chart. Is it possible when i uncheck the series on first chart and the same color series on second chart also need to hide from the second chart. Any event callback function available in LegendModifier ?

The scichart y axis is displayed as undefined after updating the data in timed interval. The y axis initially shows the value,but after the data is appended to the source, the y axis is shown as undefined in the chart.

I have attached the final scichart image with yaxis as undefined.

I have a simple need to display a horizontal heatmap based on values along the x-axis. So if value on x-axis is 1, color shown on the heatmap should be orange, if the next value is 2, red color bar appears to next the previous orange etc. Something like this (see attached graphic also):

Heatmap: [=orange=red=green]
values along x-axis: [22.05, 24.00, 30.00 ]

So the code I am trying is as follows:

export async function renderHeatMap(element) 
{
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(element);

    sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

    var heatMapData = zeroArray2D([1, 5]);
    heatMapData[0][0] = 22.05; //should appear as color1 in heatmap
    heatMapData[0][1] = 24.00; //...
    heatMapData[0][2] = 30.00; //should appear as color2 in heatmap
    heatMapData[0][3] = 26.75;
    heatMapData[0][4] = 30.00; //should appear as color3 in heatmap

    const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, 0, 1, 0, 1, heatMapData);

    const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
        dataSeries: heatmapDataSeries,
        colorMap: new HeatmapColorMap({
            minimum: 20, // min value in the zValues (data) to map to offset 0 in the colormap
            maximum: 30, // max value in the zValues (data) to map to offset 1 in the colormap
            gradientStops: [
                { offset: 0, color: "#00008B" },
                { offset: 0.3, color: "#7FFF00" },
                { offset: 0.7, color: "#FFFF00" },
                { offset: 1.0, color: "#FF0000" },
            ],
        }),
    });

    sciChartSurface.renderableSeries.add(heatmapSeries);
}

But this only displays an empty grid. I don’t see a heatmap. Anyone can point out what may be wrong? Not even the axis is showing up correctly.

Hello!

Tell me what I’m doing wrong?
Here’s the code

import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { EllipsePointMarker } from "scichart/Charting/Visuals/PointMarkers/EllipsePointMarker";
import { RolloverModifier, TRolloverTooltipDataTemplate } from "scichart/Charting/ChartModifiers/RolloverModifier";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { SciChartSurface } from "scichart";
import { parseColorToUIntArgb } from "scichart/utils/parseColor";
import {  XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { CategoryAxis } from "scichart/Charting/Visuals/Axis/CategoryAxis";
import { TextLabelProvider } from "scichart/Charting/Visuals/Axis/LabelProvider/TextLabelProvider";
import { Thickness } from "scichart/Core/Thickness";
import { ELabelAlignment } from "scichart/types/LabelAlignment";

const dataData=[
  "2022-10-22 00:09:41",
  "2022-10-22 00:19:37",
  "2022-10-22 00:29:16",
  "2022-10-22 00:38:51",
  "2022-10-22 00:49:49",
  "2022-10-22 00:59:37",
  "2022-10-22 01:09:25",
  "2022-10-22 01:19:26",
  "2022-10-22 01:28:35",
  "2022-10-22 01:38:47",
  "2022-10-22 01:48:29",
  "2022-10-22 01:58:30",
  "2022-10-22 02:09:11",
  "2022-10-22 02:18:45",
  "2022-10-22 02:28:41",
  "2022-10-22 02:38:38",
  "2022-10-22 02:48:53",
  "2022-10-22 02:59:39",
  "2022-10-22 03:08:51",
  "2022-10-22 03:19:00",
  "2022-10-22 03:28:30",
  "2022-10-22 03:38:51",
  "2022-10-22 03:49:01",
  "2022-10-22 03:58:35",
  "2022-10-22 04:08:47",
  "2022-10-22 04:19:11",
  "2022-10-22 04:29:05",
  "2022-10-22 04:38:39",
  "2022-10-22 04:48:46",
  "2022-10-22 04:58:57",
  "2022-10-22 05:08:22",
  "2022-10-22 05:18:30",
  "2022-10-22 05:29:09",
  "2022-10-22 05:38:56",
  "2022-10-22 05:48:35",
  "2022-10-22 05:58:34",
  "2022-10-22 06:08:26",
  "2022-10-22 06:18:58",
  "2022-10-22 06:28:33",
  "2022-10-22 06:38:56",
  "2022-10-22 06:48:42",
  "2022-10-22 06:58:55",
  "2022-10-22 07:08:59",
  "2022-10-22 07:19:03",
  "2022-10-22 07:28:28",
  "2022-10-22 07:38:18",
  "2022-10-22 07:48:35",
  "2022-10-22 07:58:18",
  "2022-10-22 08:08:22",
  "2022-10-22 08:18:43",
  "2022-10-22 08:29:01",
  "2022-10-22 08:38:59",
  "2022-10-22 08:49:16",
  "2022-10-22 08:59:13",
  "2022-10-22 09:09:24",
  "2022-10-22 09:18:36",
  "2022-10-22 09:28:56",
  "2022-10-22 09:39:13",
  "2022-10-22 09:48:35",
  "2022-10-22 09:59:14",
  "2022-10-22 10:09:18",
  "2022-10-22 10:19:04",
  "2022-10-22 10:29:34",
  "2022-10-22 10:39:14",
  "2022-10-22 10:48:53",
  "2022-10-22 10:58:40",
  "2022-10-22 11:08:58",
  "2022-10-22 11:18:47",
  "2022-10-22 11:28:39",
  "2022-10-22 11:39:13",
  "2022-10-22 11:49:00",
  "2022-10-22 11:59:13",
  "2022-10-22 14:20:05",
  "2022-10-22 14:29:37",
  "2022-10-22 14:39:49",
  "2022-10-22 14:49:41",
  "2022-10-22 15:00:10",
  "2022-10-22 15:09:27",
  "2022-10-22 15:19:49",
  "2022-10-22 15:29:41",
  "2022-10-22 15:39:16",
  "2022-10-22 15:49:48",
  "2022-10-22 15:59:52",
  "2022-10-22 16:09:29",
  "2022-10-22 16:19:48",
  "2022-10-22 16:29:40",
  "2022-10-22 16:39:20",
  "2022-10-22 16:49:57",
  "2022-10-22 16:59:11",
  "2022-10-22 17:09:37",
  "2022-10-22 17:19:00",
  "2022-10-22 17:29:21",
  "2022-10-22 17:39:52",
  "2022-10-22 17:49:44",
  "2022-10-22 17:59:50",
  "2022-10-22 18:09:38",
  "2022-10-22 18:19:24",
  "2022-10-22 18:29:13",
  "2022-10-22 18:39:05",
  "2022-10-22 18:49:09",
  "2022-10-22 18:59:13",
  "2022-10-22 19:09:17",
  "2022-10-22 19:19:06",
  "2022-10-22 19:29:37",
  "2022-10-22 19:40:11",
  "2022-10-22 19:49:33",
  "2022-10-22 19:59:14",
  "2022-10-22 20:09:07",
  "2022-10-22 20:20:02",
  "2022-10-22 20:29:19",
  "2022-10-22 20:39:13",
  "2022-10-22 20:49:43",
  "2022-10-22 20:59:28",
  "2022-10-22 21:08:59",
  "2022-10-22 21:19:03",
  "2022-10-22 21:29:14",
  "2022-10-22 21:39:19",
  "2022-10-22 21:49:40",
  "2022-10-22 21:59:04",
  "2022-10-22 22:09:33",
  "2022-10-22 22:20:00",
  "2022-10-22 22:30:25",
  "2022-10-22 22:39:43",
  "2022-10-22 22:49:13",
  "2022-10-22 22:58:58",
  "2022-10-22 23:09:05",
  "2022-10-22 23:19:12",
  "2022-10-22 23:29:49",
  "2022-10-22 23:38:55",
  "2022-10-22 23:49:41",
  "2022-10-22 23:59:32",
  "2022-10-23 00:08:34",
  "2022-10-23 00:18:43",
  "2022-10-23 00:29:20",
  "2022-10-23 00:39:13",
  "2022-10-23 00:48:30",
  "2022-10-23 00:59:44",
  "2022-10-23 01:08:49",
  "2022-10-23 01:19:00",
  "2022-10-23 01:29:22",
  "2022-10-23 01:39:06",
  "2022-10-23 01:49:08",
  "2022-10-23 01:59:19",
  "2022-10-23 02:09:28",
  "2022-10-23 02:18:57",
  "2022-10-23 02:28:53",
  "2022-10-23 02:38:44",
  "2022-10-23 02:49:12",
  "2022-10-23 02:58:41",
  "2022-10-23 03:09:04",
  "2022-10-23 03:19:28",
  "2022-10-23 03:29:23",
  "2022-10-23 03:38:38",
  "2022-10-23 03:49:00",
  "2022-10-23 03:59:16",
  "2022-10-23 04:09:13",
  "2022-10-23 04:18:54",
  "2022-10-23 04:29:43",
  "2022-10-23 04:39:27",
  "2022-10-23 04:49:12",
  "2022-10-23 04:59:07",
  "2022-10-23 05:09:04",
  "2022-10-23 05:18:50",
  "2022-10-23 05:29:20",
  "2022-10-23 05:39:06",
  "2022-10-23 05:49:17",
  "2022-10-23 05:58:48",
  "2022-10-23 06:08:46",
  "2022-10-23 06:18:36",
  "2022-10-23 06:29:15",
  "2022-10-23 06:38:57",
  "2022-10-23 06:49:23",
  "2022-10-23 06:58:55",
  "2022-10-23 07:09:06",
  "2022-10-23 07:19:01",
  "2022-10-23 07:29:09",
  "2022-10-23 07:39:10",
  "2022-10-23 07:49:06",
  "2022-10-23 07:59:06",
  "2022-10-23 08:09:07",
  "2022-10-23 08:19:23",
  "2022-10-24 14:19:20",
  "2022-10-24 14:30:23",
  "2022-10-25 11:10:12",
  "2022-10-25 11:20:56",
  "2022-10-28 19:19:35",
  "2022-10-28 19:30:53",
  "2022-10-28 19:49:34"
]
const divElementId = "scichart-root"
class MyMetadata {
    static create(title, previousValue, isSelected) {
      const md = new MyMetadata()
      md.title = title
      md.previousValue = previousValue ?? md.previousValue
      md.isSelected = isSelected ?? md.isSelected
      return md
    }
  isSelected = false
  palettedStrokeRed = parseColorToUIntArgb("red")
  palettedStrokeGreen = parseColorToUIntArgb("green")
  constructor() {}
}

const tooltipDataTemplateRS = seriesInfo => {
    const valuesWithLabels = []
    // Line Series
    const xySeriesInfo = seriesInfo
    if (seriesInfo.pointMetadata) {
      const testMd = seriesInfo.pointMetadata
      valuesWithLabels.push(
        testMd.title + " Previous: " + testMd.previousValue.toFixed(1)
      )
    }
    valuesWithLabels.push(
      "X: " + xySeriesInfo.formattedXValue + " Y: " + xySeriesInfo.formattedYValue
    )
    return valuesWithLabels
  }

const color = "#368BC1"
const drawExample = async () => {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    divElementId
  )
  const xAxis = new CategoryAxis(wasmContext);
  const labelProvider = new TextLabelProvider({
     // When passed as an array, labels will be used in order
     labels: dataData,
     maxLength: 188
 });
 xAxis.labelProvider = labelProvider;
 xAxis.labelStyle.alignment = ELabelAlignment.Center;
 xAxis.labelStyle.padding = new Thickness(2,1,2,1);
 xAxis.axisRenderer.hideOverlappingLabels = false;
 xAxis.axisRenderer.keepLabelsWithinAxis = false;    
  sciChartSurface.xAxes.add(xAxis)
  const yAxis = new NumericAxis(wasmContext)
  sciChartSurface.yAxes.add(yAxis)
  for (let seriesIndex = 0; seriesIndex < 5; seriesIndex++) {
    const firstSeriesData = createDataSeries(wasmContext, seriesIndex, {
      dataSeriesName: "Sinewave"+seriesIndex
    })
    const renderableSeries1 = new FastLineRenderableSeries(wasmContext, {
      stroke: color,
      strokeThickness: 3,
      dataSeries: firstSeriesData,
      pointMarker: new EllipsePointMarker(wasmContext, {
        width: 5,
        height: 5,
        strokeThickness: 2,
        fill: "white",
        stroke: color
      })
    })
    renderableSeries1.rolloverModifierProps.markerColor = color
    renderableSeries1.rolloverModifierProps.tooltipColor = color
    sciChartSurface.renderableSeries.add(renderableSeries1)
    renderableSeries1.rolloverModifierProps.tooltipDataTemplate = tooltipDataTemplateRS
  }
  sciChartSurface.chartModifiers.add(new RolloverModifier())
  sciChartSurface.chartModifiers.add(new ZoomPanModifier())
  sciChartSurface.chartModifiers.add(new ZoomExtentsModifier())
  sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier())
  sciChartSurface.zoomExtents()
  return { sciChartSurface, wasmContext }
}
// Generate some data, including metadata
const createDataSeries = (wasmContext, index, options) => {
  const sigma = Math.pow(0.6, index)
  const dataSeries = new XyDataSeries(wasmContext, options)
  let prev = 0
  for (let i = 0; i < 188; i++) {
    const grow = 1 + i / 99
    const metadata =i > 0 ? MyMetadata.create("Metadata " + i.toString(), prev) : undefined
    const y = Math.sin((Math.PI * i) / 15) * grow * sigma
    // metadata is an optional parameter on all data manipulation methods on dataseries,
    // so it can also be added as an array eg dataSeries.appendRange(xValues, yValues, metadataArray);
    dataSeries.append(i+1, y, metadata)
    prev = y
  }
  return dataSeries
}
drawExample()

I am facing a little hurdle in plotting the date value to the chart.

How to add the date to chart x axis and numeric value to the y axis?
Please provide a example to add the date in x axis and numeric value in the y axis.

Please provide a example with one series in the y axis.

I have a requirement to plot the patient vital signs, the date value in x axis and vital signs in y axis.
x – Date when the vital sign is captured
y1, y2, y3, y4, y5 – BP, Heart rate & other vital signs

The model data looks like below.

{“x”:”29-Nov-2022 04:37″,”y1″:”119″,”y2″:”80″,”y3″:”15″,”y4″:”23.6″,”y5″:”86″},
{“x”:”29-Nov-2022 04:38″,”y1″:”119″,”y2″:”80″,”y3″:”15″,”y4″:”23.6″,”y5″:”87″},
{“x”:”29-Nov-2022 04:39″,”y1″:”119″,”y2″:”80″,”y3″:”15″,”y4″:”23.6″,”y5″:”86″}

Hi –

I could not find an example in the various examples your provide

I have several charts in different components

When a component is closed I want to ensure the chart is destroyed and there is not potential for memory leak

What is this best way of doing this?

Thanks

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

Thank you!

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.

Hello,

How can i convert my data to Y coordinate value in OhlsSeries?

Please advise. Thanks.

I am considering applying server-side licensing for my javerScript application.

In the document below, there is a phrase “Our server-side licensing component is written in C++.”
(https://support.scichart.com/index.php?/Knowledgebase/Article/View/17256/42/)

However, there is only asp.net sample code on the provided github.
(https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-dotnet-server-licensing)

I wonder if there is a sample code implemented in C++ for server-side licensing.

Can you provide c++ sample code?
Also, are there any examples to run on Ubuntu?

Hi,

I would like to display the rollovermodifier line that must be parallel to the X axis and the Rollovermodifier line must be a dashed line. In the y axis I need to add a label annotation with svg .How can I fix the problem. Kindly provide me the solution.

This is the code I have given,

const horizontalline = new RolloverModifier({
IsEnabled: true,
DrawVerticalLine: true,
showTooltip: false,
rolloverLineStroke: “white”,
rolloverLineStrokeThickness : 1
})
sciChartSurface.chartModifiers.add(horizontalline);

I have a real time updated chart and users can add annotation to the chart. The position of the annotation will be updated with the chart data. I would like to stop updating the annotation position while user dragging the annotation. So I added a flag (e.g. isDragging) to the annotation dragStarted and dragEnded events. The isDragging flag will be set to true in dragStarted and then set to false in dragEnded. I will check this flag before updating the annotation position.

Here’s the problem, the annotation dragStarted event will be triggered when users do panning in the chart. But the dragEnded will not be triggered in this case. It breaks my plan to stop updating the annotation position as the isDragging will be incorrect. Is it a bug that the annotation dragStarted event (but not the dragEnded event) triggered when panning?

This is my first time in this forum, and I am analyzing SCIChart. I am planning to use it in my software, but there are some questions I haven’t been able to answer yet.
My software is similar to an IDE, where the user can build their custom applications and run on windows environment, but we also provide an option to save all the interface in html and javascript. Since SCIChart provides not only WPF Charts but also javascript Charts, I would like to know the following:

1- Does the javascript charts have the same functionalities as the wpf charts? XY Charts or Pie charts for example, will they have the same functionalities in WPF and Javascript ?

2- Does the appearence of the charts in WPF and Javascript are the same? Do they look exatcly the same?

I believe these are my biggest doubts so far. Thanks in advance !!

Imagine I have a chart with a RolloverModifier, such that I see the point marker, and also a CursorModifier so I see the axis labels with the exact value I’m hovering.
This chart has the axis title hidden, and also the labels hidden, so I can really only see them trough the CursorModifier axis labels.
Since the axis title and labels are hidden, the axis labels spawn inside the chart, and the point marker from the RolloverModifier may be drawn on top of the labels.

I’d like to properly control drawing order here, so my axis labels get prioritised.
Is there a way to do so?

Codepen example: https://codepen.io/jrfv/full/VwqVBdo

I have a live updating chart with multiple traces. After updated SciChart to v3.0.280, I got “Uncaught (in promise) RangeError: Maximum call stack size exceeded” error sometimes when I call XyDataSeries.appendRange(). This error will not be triggered if just initialize the chart and keeps updating the chart data. It seems happening after I modified the visibleRange of x-axis or y-axis. But the error is triggered on the line calling appendRange(). I have no clue for this issue. My codes didn’t change and only updated the SciChart version. Could you find the possible cause of my problem? Please refer to the attached screenshots.

Codes to update the chart data:

    UpdateSuspender.using(sciChartSurfaceRef.current, () => {
        console.time("Time - Update series");
        for (tnum=0; tnum<MAX_TRACE; tnum++) {
            traceObj = tracesInfoObj.current[tnum];
            if (traceSeries.current[tnum] && traceObj.status === "Active") {
                traceSeries.current[tnum]["xyDataSeries"].clear();
                switch (traceObj.type) {
                    case 0:
                        traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, newSpecData);
                        break;
                    case 1:
                        traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, newMaxHoldData);
                        break;
                    case 2:
                        traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, newMinHoldData);
                        break;
                    case 3:
                        traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, averageData);
                        break;
                }   
            }
        };
        console.timeEnd("Time - Update series");
    });