Category: JavaScript

Hi,

In my application I am hiding some of the line chart by changing the visibility. When changing the visibility the markers is not hiding from the chart. Its happening only the mouse pointer is inside the chart before the visibility change. I have created a sample application and created the video recording also. Please check the attached file for example code and video. On the video you can saw that 2 line visibility is changed and line are hidden from the chart and the markers not hiding from the chart.

How to setup SciChart.js in React native frame work?

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);
}

What languages are wrappers for the licensing server in? Where can I get information on what c++ functions to call?

Hi

I am running Ubuntu 22.04.
I have done the following:
1. Downloaded licensing tool AppImage
2. chmod +x SciChart-Licensing-Wizard.AppImage
3. ./SciChart-Licensing-Wizard.AppImage

Response:

./SciChart-Licensing-Wizard.AppImage: 9: Syntax error: newline unexpected

Please advise.

Thanks

Hello,

We are working on our Angular Dashboard again using the JS Chart component and one item we would like to tidy up is the Meta Data displayed in the Tool Tips against data points.

When the cursor is enabled and a data point is hovered over, tool tips with the meta data is displayed for all data points in the vertical line; please refer to the screenshot attached.

We would like the tool tip to only be shown when the cursor is on a specific data point. We are currently working with an offshore team and any help surrounding this would be appreciated.

Kind regards,

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);

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,

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.

I have a top chart that is a heatmap and there is another bottom chart that is a temperature map. I want the heatmap not show any y-axis labels but still keep the x-axis start aligned from the left side. I tried turning off the y-axis lables (which I do not need in the heatmap), but that moves the heatmap to the left and not kept aligned with the bottom chart.

const yAxis = new NumericAxis(wasmContext, {
autoRange: EAutoRange.Always,
labelFormat: ENumericFormat.Decimal,
labelPrecision: 2,
labelPostfix: "C",
drawLabels: false
});
The above code hides the y-axis labels but also removes the space on the left side so the x-axis of both graphs does not remained aligned. I need a way to somehow keep the start of x-axis aligned for both top and bottom graphs.

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?

I have a bunch of series (XyScatterSeries) that I am using to draw different markers (triangle, circle, cross) based on the data. I also have couple line series too in the chart.

The line series should be displayed in the LegendModifier, but not any of the scatter series.

I tried setting “includeSeries” function here but that didn’t work (typescript kept complaining about it but I kept it and while running the app it didn’t hide the series):

return new LegendModifier({
        showCheckboxes: true,
        orientation: ELegendOrientation.Vertical,
        placement: ELegendPlacement.TopRight,
        includeSeries: (series: IRenderableSeries, isIncluded: boolean): void => { return false; },
    });

Then I created my own class “MyLegendModifier” deriving from LegendModifier, but that didn’t do anything either.

class MyLegendModifier extends LegendModifier {
    constructor(options?: ILegendModifierOptions) {
        super(options);
    }

    includeSeries(series: IRenderableSeries, isIncluded: boolean) {
        console.log('includeSeries:', series.id);
        if (series.id.startsWith('BUY:') || series.id.startsWith('SELL:')) {
            isIncluded = false;
        }
        super.includeSeries(series, isIncluded);
    }
}

Any advise please.

Hello,

Is it possible to access the native canvas context to draw on the javascript chart surface? like for example, draw a circle or arc using HTML5 canvas apis.

-jackson

Hello I am using the following unixtimestamp format for the x axis and it renders some random numbers instead of treating them as dates. What is the correct format? please see attached screenshot.

export const dateValues: number[] = [
    1546300800000,
    1546304400000,
    1546308000000,
    1546311600000,
    1546315200000,
    1546318800000,
    1546322400000,
    1546326000000,
    1546329600000,
    1546333200000,
    1546336800000,
    1546340400000,
    1546344000000,
    1546347600000,
    1546351200000,
    1546354800000,
    1546358400000,
    1546362000000,
    1546365600000,
    1546369200000,
    1546372800000,
    1546376400000, ]

Here’s the code for creating the chart

  // Create a SciChartSurface
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    "scichart-root"
  ); 

  sciChartSurface.xAxes.add(
        new CategoryAxis(wasmContext, {
          labelProvider: new SmartDateLabelProvider(),
          defaultXStep: 1546304400000 - 1546300800000,
          //growBy: new NumberRange(0.05, 0.05),
          drawMajorGridLines: true,
          drawMinorGridLines: true,
          axisAlignment: EAxisAlignment.Bottom,
          autoRange: EAutoRange.Once,
          drawMajorBands: false,
        })
      );

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 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?

I added the cursor modifier as below:

const chartDefinition = {
    ......,
    modifiers: [
        { 
            type: EChart2DModifierType.Cursor, 
            options: { crosshairStroke: "green",  crosshairStrokeThickness: 1}  
    },
    { type: EChart2DModifierType.MouseWheelZoom },
    { type: EChart2DModifierType.ZoomExtents }
    ]
};

const { sciChartSurface, wasmContext } = await chartBuilder.build2DChart("scichart-root", chartDefinition);  

As I want to show the x, y values of the cursor somewhere outside the chart instead of showing the tooltip. How can I get the x, y values when the cursor moving?

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()

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();

I have a chart in the center of the page and the chart will resize according to the browser window size. When I expand the browser window, the chart will expand to fit the browser size. In this case, the chart grows downward gradually (with animation). How can I remove this animation effect when resizing the chart?

In case it’s related to my style. Here are my markup and style for reference:

//Markup

//Style
.contentPanel {
flex: 1 1 auto;
width: calc(100% – 335px);
max-height: calc(100vh – 108px);
display: flex;
flex-direction: column;
}

.chartContainer {
position: relative;
margin: 10px 0;
display: flex;
flex-direction: column;
flex: 1;
}

.scichart-root {
width: 100%;
height: 100%;
}

Hi,

I have added a data series and also a custom box annotation which is overlapping the data series.
But the question is I am trying to move the box annotation which drag and drop but have to clip on the data series as well.
May I know if is scichart js able to do so? Or best if I just convert it into svg and make it drag and drop will do?

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?

I have a chart that allow users to add one BoxAnnotation and multiple CustomAnnotation (a marker). I got error and failed to drag the BoxAnnotation with the following steps:

Step 1: Call the addMarkerAnnotation() to add a CustomAnnotation

const markerSvgString = '<svg height="26" width="18" xmlns="http://www.w3.org/2000/svg">' +
    '<polygon id="SVG_ID" fill="#000" fill-opacity="0.5" stroke="#00fc00" stroke-width="1.5" points="0,12 8,0 16,12 8,24" clip-path="url(#clip_normal)" />' +
    '<clipPath id="clip_normal"><use xlink:href="#SVG_ID"/></clipPath>' +
    '<text x="5" y="16" fill="#00fc00" font-weight="bold" font-size = "12">MARKER_ID</text>' +
'</svg>';

const deltaSvgString = '<svg height="28" width="28" xmlns="http://www.w3.org/2000/svg">' +
    '<polygon id="SVG_ID" fill="#000" fill-opacity="0.5" stroke="#00fc00" stroke-width="1.5" points="0,0 12,24 22,0" clip-path="url(#clip_delta)" />' +
    '<clipPath id="clip_delta"><use xlink:href="#SVG_ID"/></clipPath>' +
    '<text x="5" y="10" fill="#00fc00" font-weight="bold" font-size="10">MARKER_ID</text>' +
'</svg>';

const addMarkerAnnotation = useCallback((markerId, mode, x1, y1) => {   
    x1 = parseFloat(x1);
    y1 = parseFloat(y1);

    if (x1 != null && y1 != null) {
        let svgString;
        const svgId = "markerSvg_" + markerId;

        if (mode.includes("Delta")) {
            const compareMarkerKey = mode.replace("Delta ", "");
            svgString = deltaSvgString.replace(/MARKER_ID/g, (parseInt(markerId)+1) + "-" + compareMarkerKey);
        } else {
            svgString = markerSvgString.replace(/MARKER_ID/g, parseInt(markerId)+1);
        }
        svgString = svgString.replace(/SVG_ID/g, svgId);

        markerAnnotations.current[markerId] = new CustomAnnotation({
            x1,
            y1,
            id: markerId,
            isEditable: true,
            isSelected: true,
            verticalAnchorPoint: EVerticalAnchorPoint.Center,
            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
            svgString: svgString
        });
        sciChartSurfaceRef.current.annotations.add(markerAnnotations.current[markerId]);
        reorderMarkers(markerId);

        markerAnnotations.current[markerId].dragEnded.handlers.push(() => {
            let annotation = markerAnnotations.current[markerId];
            let freq = annotation.x1 * FREQ_UNITS.KHZ;

            markersInfoSetter.current[markerId](origMarkerInfo => ({...origMarkerInfo, ...{freq: freq.toFixed(numDP.FREQ), power: annotation.y1.toFixed(numDP.POWER)}}));

            if (markersInfoObj.current[markerId].mode !== "Fixed") {
                getMarkerPeak(markerId, markersInfoObj.current[markerId].trace, annotation.x1 * FREQ_UNITS.GHZ);
            }
            reorderMarkers(markerId);
        });
    }
}, [deltaSvgString, markerSvgString, getMarkerPeak, reorderMarkers, numDP]);

Step 2: Call the removeMarkerAnnotation() to remove the CustomAnnotation

const removeMarkerAnnotation = useCallback((markerId) => {
    if (markerAnnotations.current[markerId]) {
        sciChartSurfaceRef.current.annotations.remove(markerAnnotations.current[markerId]);
        markerAnnotations.current[markerId].delete();
        markerAnnotations.current[markerId] = null;
    }
}, []);

Step 3: Call addTriggerAnnotation() to add a BoxAnnotation

const addTriggerAnnotation = useCallback((x1, x2, y2) => {
    x1 = parseFloat(x1);
    x2 = parseFloat(x2);    
    y2 = parseFloat(y2);

    if (x1 != null && x2 != null) {
        console.log("addTriggerAnnotation: ", x1, x2, triggerAnnotation.current, sciChartSurfaceRef.current.annotations);
        if (!triggerAnnotation.current) {
            triggerAnnotation.current = new BoxAnnotation({
                id: "triggerBox",
                fill: "transparent",
                stroke: "#93A3B1",  //#93A3B1   //#6B818C
                strokeThickness: 2,
                xCoordinateMode: ECoordinateMode.DataValue,
                x1: x1,
                x2: x2,
                yCoordinateMode: ECoordinateMode.DataValue,
                y1: minY,
                y2: y2,
                isEditable: true,
                resizeDirections: EXyDirection.XyDirection,     
            });
            sciChartSurfaceRef.current.annotations.add(triggerAnnotation.current);

            triggerAnnotation.current.dragDelta.handlers.push(() => {
                triggerAnnotation.current.y1 = minY;

                const minX =  specSettingsRef.current.start/freqUnits.KHZ;
                const maxX = specSettingsRef.current.stop/freqUnits.KHZ;
                const maxY = specSettingsRef.current.refLevel;

                if (minX != null && maxX != null) {
                    if (triggerAnnotation.current.x1 < minX) {
                        triggerAnnotation.current.x1 = minX;
                    } else if (triggerAnnotation.current.x1 > maxX) {
                        triggerAnnotation.current.x1 = maxX;
                    } else if (triggerAnnotation.current.x2 > maxX) {
                        triggerAnnotation.current.x2 = maxX;
                    } else if (triggerAnnotation.current.x2 < minX) {
                        triggerAnnotation.current.x2 = minX;
                    }
                }

                if (maxY != null) {
                    if (triggerAnnotation.current.y2 < minY) {
                        triggerAnnotation.current.y2 = minY;
                    } else if (triggerAnnotation.current.y2 > maxY) {
                        triggerAnnotation.current.y2 = maxY;
                    }
                }
            });

            triggerAnnotation.current.dragEnded.handlers.push(() => {
                const maxX = specSettingsRef.current.stop/freqUnits.KHZ;
                const x1 = triggerAnnotation.current.x1;
                const x2 = triggerAnnotation.current.x2;
                const y2 = triggerAnnotation.current.y2;

                if (x1 != null && x2 != null && maxX != null) {
                    if (x1 > x2) {
                        triggerAnnotation.current.x1 = x2;
                        triggerAnnotation.current.x2 = x1;
                    } else if (x2 < x1) {
                        triggerAnnotation.current.x1 = x2;
                        triggerAnnotation.current.x2 = x1;
                    } else if (x1 === x2) {
                        if (x2 + xInterval.current <= maxX) {
                            triggerAnnotation.current.x2 = x2 + xInterval.current;
                        } else {
                            triggerAnnotation.current.x1  = x1 - xInterval.current;
                        }
                    }

                    const origStartFreq = parseFloat(triggersRef.current.startFreq);
                    const origStopFreq = parseFloat(triggersRef.current.stopFreq);
                    const newStartFreq = parseFloat((triggerAnnotation.current.x1 * freqUnits.KHZ).toFixed(numDP.FREQ));
                    const newStopFreq = parseFloat((triggerAnnotation.current.x2 * freqUnits.KHZ).toFixed(numDP.FREQ));

                    if (origStartFreq !== newStartFreq || origStopFreq !== newStopFreq) {
                        setTriggers(origObj => ({...origObj, ...{
                            startFreq: newStartFreq, 
                            stopFreq: newStopFreq,
                            level: parseFloat(y2.toFixed(numDP.POWER)),
                        }}));
                    }
                }
            });
        } else {
            updateTriggerAnnotation(x1, x2, y2);
        }
    }
}, [setTriggers, freqUnits.KHZ, numDP.FREQ, numDP.POWER, minY, updateTriggerAnnotation]);

Step 4: Drag the BoxAnnotation. It’s failed to drag the box and got the error “Uncaught TypeError: Cannot read properties of undefined (reading ‘seriesViewRect’)”.

It’s a strange bug as it can only be reproduced with the steps above. With the following steps, I can drag the BoxAnnoation without problem:

Step 1 -> Step 3 -> Step 4
Step 3 -> Step 4
Step 3 -> Step 1 -> Step 2 -> Step 4

Hi,

Im working with Scichart JS on a React project and trying to write some tests using Jest.
I managed to start a browser environment with webgl support to run the tests, but I’m having a hard time to provide the .data and .wasm files to this environment.

This is what i’m trying to run:

import {SciChartSurface} from 'scichart/Charting/Visuals/SciChartSurface';

const buildSurface = async () => {
    const {sciChartSurface} = await SciChartSurface.create('test-surface', {
        viewportBorder: {border: 1}
    });
    return {sciChartSurface};
};

it('should build a surface', async () => {
    document.body.innerHTML = `<div id="test-surface"></div>`;
    const response = await buildSurface();
    const {sciChartSurface} = response;
});

and I’m getting lots of warns an errors like:

console.warn    both async and sync fetching of the wasm failed
console.error    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
console.error   Error: Uncaught [Error: NetworkError for: scichart2d.data]
thrown: "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"

Does anyone know how to setup a sufficient environment on jest to successfully build a scichart surface?

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″}

We are using JavaScript Chart Editable Annotations but we need some more modificaions in that which can enhance this feature in terms of user experience.
Currently when the anonations are loaded they are havinng a fixed shape but we want the annotations to be draggable as soon as they are loaded in the charts whitout any extra clicks,this feature is provided by tradingView charts and we also want to provide the same to our users.
I have attached images and videos for better understanding of the issue.
Hope we can get the solution of this issue asap.

Please refer to the below video link for beter understanding.
https://www.loom.com/share/213b66eb21db44f9ac2457a89563a21a

The SciChart Legend and Cursor Tooltip (Showed only Y axis value) are not display after changing the graph layout.
I need to show the graph legend and Tooltip for all the Y axis.

The chart should also show the x axis value and y axis value on the Tooltip for more clarity.

Before changing the layout the legend was showing the five series vertically one below the other. But i need to show the five legends in horizontally (One after the another).

I have added the chart definition code. The data is added though Ajax call and code for that ajax call is not added.

I have attached the image for your reference.

I have attached the zip file with the html file.

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)

How can we change the color(Red) of custom box annotation when it is clicked .
thanks

The project is developed on SciChart JS.

The x axis is date time numeric and y axis is numeric.

There is a option for the user to select the x axis interval. The interval values are 5 Min, 10 Min, 15 Min, 30 Min, 1 Hour, 6 Hour, 12 Hour, Days, Weeks, Months & Years.

When the user the selects a interval in the select option, the x axis should be updated with the selected interval.

For Example, If the user selects the 5 Min in the select option, then the x axis interval should be 5 Min.

For 5 Min X Axis Interval

16-Jan-2023 07:00
16-Jan-2023 07:05
16-Jan-2023 07:10
16-Jan-2023 07:15
16-Jan-2023 07:20
16-Jan-2023 07:25
16-Jan-2023 07:30

For 1 Hour X Axis Interval

16-Jan-2023 07:00
16-Jan-2023 08:00
16-Jan-2023 09:00
16-Jan-2023 10:00
16-Jan-2023 11:00
16-Jan-2023 12:00
16-Jan-2023 13:00
16-Jan-2023 14:00

So let me know how to change the interval in the x axis (date time numeric) based on the selection.

I have attached the zip file which contains the HTML file.

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?

has anyone had an issue with this module?

LineSeriesDataLabelProvider

is supposed to be imported like this but is nowhere to be found:

import { LineSeriesDataLabelProvider} from 
 "scichart/Charting/Visuals/RenderableSeries/DataLabels/LineSeriesDataLabelProvider";

I’m taking this as example

https://demo.scichart.com/javascript-chart-metadata

I’m using angular