Forums

Hello,

I am trying out SciCharts and am looking to recreate the example 3D uniform surface mesh chart example and don’t have a good hold on the architecture yet. I don’t see directions as to which file to paste the example code into. I’m looking at the code example where it creates a “final camera3D camera – schiChart3DBuilder.newCamera3D().build();” and goes from there. (…/webframe.html#The%20Surface%20Mesh%203E%20Chart%20Type.html)

I have the 3D surface created and rendering. I just need to get started to go from there. Thank you.

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?

Good afternoon. My team and I are looking at your library to create a depth chart, like here, but have run into a few problems:
1. if we have, for example, a “buySeries” array larger than the “sellSeries” array, the graph is not drawn very nicely.
2. the labels are not drawn correctly when we have too small numbers, I tried to solve the problem with xAxis.textFormatting = ‘0.#####’ or ‘0.00###’, but that doesn’t work for some reason.
3. If we want to add labels while hovering over the chart with showLabel = true , then we get 4 labels, two on yAxis. is it possible to make the buySeries label appear only on the left, for example, and the sellSeries label only on the right? (second screenshot)

Hello,

Can you show this example(https://codepen.io/PodaRocheK/pen/yLGxGEL?editors=0011) and tell me, why metadata labels are not displayed in some cases? May be you can tell me how to do it correctly? A have similar chart with a lot of datapoints and can’t understand why labels show only in some time(20s or > 1m after start the chart)

Thank you!

Hi,

I’ve been trying to customize the RolloverModifier tooltip content with a vertical chart but am at a loss to try to get the format I need. I’d like to take in all the series info and display them in a tooltip together with a small icon and the y-value next to this.

I was able to do this in the CursorModifier content but unable to do so in the RolloverModifier which is what I really want to use.

I’ve included a CodeSandbox link below showing the custom SVG template and output on the CursorModifier I’d like to use for the RolloverModifier. Is this type of output template possible?

Thanks in advance!

Implementation scenario: multiple polylines are displayed. After clicking the polyline, the name of the polyline is displayed in the icon.

Question: I can get the Series Name through the SeriesSelectionModifier now, but I don’t know how to display the Series Name in the chart when the user clicks a polyline. Is there a corresponding API?

When hardware acceleration is not enabled from the client side i am getting the follwong error in the console and the chart becomes empty.
Can we have a caetain fallback ui for this error so that when hardware acceleration is disabled we can show some error in the client side instead of frozen screen

Hello everyone,

I have 2 HorizontalLineAnnotations on the chart as price indicators. Sometimes i need to add to some label more data on the second line of the text. You can see example of correct annotation’s label. How can i add ‘\n’ or ‘
‘ to the text for such result?

Thank you a lot!

Hello I have been having a difficult time getting the correct time displayed on my xAxis and labels.

Passing in an xValue to an OHLC data series of 60 and the setting cursorLabelFormat: ENumericFormat.Date_DDMMHHMM this should produce a label “01/01 00:01” With the year as 1970.

When the computers timezone is set to UTC + 0 this behaves as expected.

However when the computers timezone is set to anything negative (UTC – 7) the label is formatted as “31/12 00:01” with the year 1969. If scichart is trying to convert to local time I would expect a reading of “31/12 17:01” 1969.

And when the timezone is set to anything positive (UTC + 7) the label is formatted as it is UTC +0 “01/01 00:01” 1970 again I would expect the hour to corrispond to the UTC offset if scichart is trying to convert to local time.

Looking at the later case I would assume that no time conversion is taking place which is what I would prefer. But looking at the former case (UTC -X) there appears to be some manipulation happening somewhere, I just have not been able to find any documentation explaining this. Am I missing something to get this to work properly out of the box without a custom label provider?

Thank you,

Update:

I do not want to worry about timezones. I want sciChart to plot the time that I give it. Again this is acting as expected when the computer timezone is in anything greater than UTC 0. But when the computer timezone is less than UTC 0 the label and axes are showing a date 24 hours prior to what I give it.

See attached images for the error. Note the only change that is happening is changing the computer timezone from UTC – 4 to UTC + 4.

See below for code setting up the chart.

Why is changing the computer timezone affecting the data labels?

export async function example(element) {
    let { sciChartSurface, wasmContext } = chartInstances.hasOwnProperty(element.id) && chartInstances[element.id];

    // initialize sciChart and add created chart to chartInstances
    if (sciChartSurface === undefined) {
        const newContext = await SciChartSurface.create(element.id);
        sciChartSurface = newContext.sciChartSurface;
        wasmContext = newContext.wasmContext;
        chartInstances[element.id] = { sciChartSurface, wasmContext };
    }

    //create and add xAxis
    let xAxis = new CategoryAxis(wasmContext, {
        drawLabels: true,
        drawMajorTickLines: true,
        drawMinorTickLines: true,
        axisAlignment: EAxisAlignment.Bottom,
        autoRange: EAutoRange.Once,
        cursorLabelFormat: ENumericFormat.Date_DDMMHHMM,
        labelFormat: ENumericFormat.Date_DDMMYYYY,
    });

    sciChartSurface.xAxes.add(xAxis);

    //create and add yAxis
    let yAxis = new NumericAxis(wasmContext, {
        maxAutoTicks: 5,
        autoRange: EAutoRange.Always,
        growBy: new NumberRange(0.3, 0.11),
        axisAlignment: EAxisAlignment.Right,
        labelPrecision: 4
    });
    sciChartSurface.yAxes.add(yAxis);

    //add chart modifiers
    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new RolloverModifier({ modifierGroup: "first", showTooltip: false }));
    sciChartSurface.chartModifiers.add(new CursorModifier(
        {
            crosshairStroke: "#9598a1",
            crosshairStrokeDashArray: [10, 5],
        }));

    //apply desired theme
    sciChartSurface.applyTheme(new SciChartJSDarkTheme());

    //create three bars 
    _ohlcDataSeries = new OhlcDataSeries(wasmContext, {
        xValues: [60,120,180], //1 min, 2 min, 3 min post epoch
        openValues: [10,10,10],
        highValues: [15,15,15],
        lowValues: [5,5,5],
        closeValues: [11,11,11],
        dataSeriesName: "PriceDataSeries"
    });

    //create and style fastCandRendSeries
    const fcRendSeries = new FastCandlestickRenderableSeries(wasmContext,
        {
            dataSeries: _ohlcDataSeries,
            strokeThickness: 1,
            dataPointWidth: 0.5,
            brushUp: "#50ff50B2",
            brushDown: "#ff5050B2",
            strokeUp: "#50ff50",
            strokeDown: "#ff5050",
            animation: new WaveAnimation({ fadeEffect: true, duration: 800 })
        });
    sciChartSurface.renderableSeries.add(fcRendSeries);
}

Hi,
the Tooltip from the rolloverModifier shows for the Open-Values the Label “Open”.

I would like to be able to change that. There might be serveral reasons for that. Maybe the shown data are not “openValues” or the word “open” needs to be translated into another language.

I managed to edit the title of a FastCandlestickRenderableSeries by setting a title and get it into the variable like this:

rolloverTitle = newtitle;
renderableSeries0.rolloverModifierProps.tooltipTitle = rolloverTitle;

unfortunately i did not find a way to set the name/label for the open-,low-,close-, or high-values of this Series.

Can someone give ma a hint how to do this?

A client responded that the line diagram drawn by scient.js on the mobile phone could not be seen.
We follow the user’s log and find that there is such content

2022/09/21 07:02:27.981 exception thrown: RuntimeError: function signature mismatch,RuntimeError: function signature mismatch
            at <anonymous>:wasm-function[2101]:0x5fc72
            at <anonymous>:wasm-function[1355]:0x2a029
            at <anonymous>:wasm-function[2409]:0x7ef3a
            at Ch (<anonymous>:wasm-function[4028]:0x12f27f)
            at r._main (<anonymous>:16:687711)
            at Object.Ma [as callMain] (<anonymous>:16:688823)
            at <anonymous>:16:565075

2022/09/21 07:02:27.981 Could not load SciChart WebAssembly module.
            Check your build process and ensure that your scichart2d.wasm, scichart2d.data and scichart2d.js files are from the same version

.
We try to reproduce many different devices. At present, it seems that only the device will happen. The following is the information of the device

I have two charts in my app. Is there a way that I can make a rollover tooltip on a heatmap chart and the x visible range updates accordingly on another chart when the cursor moving around on the heatmap?

I had this function in Android version with the method InternalUpdate from CustomHeatmapTooltip which extended from UniformHeatmapTooltip. I wonder if there’s a listener for the tooltip.

Thanks.

Is there a way to get discreet colormap for the heatmap? currently no matter how many or how few colors are defined in the colormap table it always adds a gradient. how can we get a discreet ranges for colormap?

Thanks

How can I rotate the axis titles in SciChat JS?

We want the the titles Fp1 and Fp2 to be rotated so they are horizontal on the screen instead of vertical.

Hello, I need to use tooltips to display information to users. However, after using the tooltip, there will be a jam after the tooltip appears and when zooming. How can I optimize the performance.

The following is the code. I use the js example: “Load 500 Series x 500 Points Performance Demo” for transformation

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 {
  IXyDataSeriesOptions,
  XyDataSeries
} from "scichart/Charting/Model/XyDataSeries";
import { NumberRange } from "scichart/Core/NumberRange";
import { EAutoRange } from "scichart/types/AutoRange";
import { convertRgbToHexColor } from "scichart/utils/convertColor";
// eslint-disable-next-line
SciChartSurface.useWasmFromCDN();

const divElementId = "scichart-root";

const color = "#368BC1";

const SERIES = 1500;
const POINTS = 188;


const drawExample = async (updateTimeSpans) => {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    divElementId,{ widthAspect: 3, heightAspect: 2}
  );
  const xAxis = new NumericAxis(wasmContext, {
    visibleRange: new NumberRange(0, POINTS),
    autoRange: EAutoRange.Never
});
sciChartSurface.xAxes.add(xAxis);
const dataSeriesArray= new Array(SERIES);;
const rendSeriesArray=new Array(SERIES);
const yAxis = new NumericAxis(wasmContext, {
    visibleRange: new NumberRange(-5000, 5000),
    autoRange: EAutoRange.Never
});
// yAxis.labelProvider.numericFormat = ENumericFormat.Decimal_0;
sciChartSurface.yAxes.add(yAxis);
for (let i = 0; i < SERIES; i++) {
  const dataSeries= new XyDataSeries(wasmContext);
  const rendSeries= new FastLineRenderableSeries(wasmContext, {
      dataSeries,
     stroke: color,
      strokeThickness: 3,
      pointMarker: new EllipsePointMarker(wasmContext, {
        width: 5,
        height: 5,
        strokeThickness: 2,
        fill: "white",
        stroke: color
      })
  });
  dataSeriesArray[i] = dataSeries;
  rendSeriesArray[i] = rendSeries;
sciChartSurface.renderableSeries.add(rendSeries);
}
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier(),new RolloverModifier(wasmContext));
const loadPoints = () => {
  const newTimeSpans=[];

  // Start counting Points generation time
  const generateTimestamp = Date.now();

  const xValuesArray = new Array(SERIES);
  const yValuesArray = new Array(SERIES);
  const strokeArray =  new Array(SERIES);
  for (let i = 0; i < SERIES; i++) {
      // Allocate data arrays
      xValuesArray[i] = new Array(POINTS);
      yValuesArray[i] = new Array(POINTS);

      // Clear data, if any
      dataSeriesArray[i].clear();

      // Generate stroke
      const r = Math.random();
      const g = Math.random();
      const b = Math.random();
      strokeArray[i] = convertRgbToHexColor(r, g, b);

      // Generate points
      let prevYValue = 0;
      for (let j = 0; j < POINTS; j++) {
          const curYValue = Math.random() * 10 - 5;

          xValuesArray[i][j] = j;
          yValuesArray[i][j] = prevYValue + curYValue;

          prevYValue += curYValue;
      }
  }

  // Add the first time span: Generating 1M data points
  newTimeSpans.push({
      title: "Generate 500x500 Data Points",
      durationMs: Date.now() - generateTimestamp
  });

  // Start counting batch append time
  const appendTimestamp = Date.now();
  for (let i = 0; i < SERIES; i++) {
      dataSeriesArray[i].appendRange(xValuesArray[i], yValuesArray[i]);
      rendSeriesArray[i].stroke = strokeArray[i];
  }

  // Add the second time span: Generation of data point
  newTimeSpans.push({
      title: "Append 500x500 Data Points",
      durationMs: Date.now() - appendTimestamp
  });

  // Subscribe to sciChartSurface.rendered event,
  // and calculate time duration between the append and
  // the first frame after it
  const firstFrameTimestamp = Date.now();
  let frameIndex = 0;
  let nextFramesTimestamp;
  const handler = () => {
      if (frameIndex === 0) {
          // Add the third time span: Render the first frame
          newTimeSpans.push({
              title: "Render the frame",
              durationMs: Date.now() - firstFrameTimestamp
          });
          nextFramesTimestamp = Date.now();
      } else {
          // Unsubscribe from sciChartSurface.rendered
          updateTimeSpans(newTimeSpans);
          sciChartSurface.rendered.unsubscribe(handler);

          // Zoom extents at the end of performance measurement
          sciChartSurface.zoomExtents();
      }
      setTimeout(sciChartSurface.invalidateElement, 0);
      // Increment frame index
      frameIndex++;
  };
  sciChartSurface.rendered.subscribe(handler);
};
  loadPoints()
};

drawExample();

There seems to be no documentation on how to configure scichart when using app router with nextJS, and I am running into an error.

I have followed a combination of this tutorial, and additional setup for nextJS found here, specifically the next.config.js file, copy-files-from-to.json, and additions to package.json. But I continue to get the error: ‘Module has already been declared’. (first/second pics in PDF)

I have attached a photos inside the pdf, including my project structure, and a zip with the files to duplicate.

Steps to replicate:
1) extract files and add root package.json to a directory of your choice
2) from within this directory, use ‘yarn create next-app scichart-prototype’ (use set-up options from 4th image in PDF)
3) Replace root layout.tsx and page.tsx with files in zip, add SciChartDemo directory and add page.tsx from that (also in zip)
4) replace the next.config.mjs file with the next.config.mjs file from the zip
5) add the copy-files-from-to.json from the zip
6) replace the package.json file in scichart-prototype directory with file from the zip.
7) run ‘yarn install’ to add packages
8) run ‘turbo dev’
9) after visiting localhost:3000/ click the Sci Chart Demo link to see error.

Thanks for taking a look.

question posted to nextjs forum

Hi Scichart Team.

I am working on the MouseWheelZoomModifier (EActionType.Pan).
But my users are using a trackpad (apple magic trackpad).
Currently, they are using 2 fingers and move up or down (vertically) to pan the chart. But they are asked to pan the chart by using 2 fingers and move left or right (horizontally) instead.

Do we have any setting for MouseWheelZoomModifier that help me pan the chart by that way?

I’m using an example of RealtimeTickingStockCharts

https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Examples/src/components/Examples/Charts2D/CreateStockCharts/RealtimeTickingStockCharts

I’ve added a modifier

new YAxisDragModifier({
            dragMode: EDragMode.Scaling,
        }),

I see icon changed to arrows but scaling does not work. What should I check ?

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?

Hello,

I found an issue with very high memory usage by the application. after some tests I found the problem and moved it to a separate example(https://codepen.io/PodaRocheK/pen/PoVmzvP?editors=0011). Please check this code and observe the memory usage on this page. With prolonged use (after 10 minutes), it is clear that more and more memory is used. After hours, the memory used may already be more than several gigabytes. Tell me what the problem is, maybe I’m doing something wrong. Maybe I’m somehow storing old data incorrectly or adding it incorrectly.

This example is not a working example, it has been sped up in order to quickly identify the problem. In our example, an unnecessary data update will occur once every few seconds and after a night of inactivity, the entire page will die. Please tell me what the problem is.

Thank you!

When I’m using a BoxAnnotation, and it is selected, I can see that the borders are shown expanding past the chart area, on top of the axes.
Ideally they would have the same behaviour as the normal stroke, and keep constrained to the chart area.

Codepen showing the issue: https://codepen.io/jrfv/full/bGzqvoE

Am I missing some configuration to make this work?

Thanks!