Forums

Hi, I wanted to make a multiple Y-Axis scale with multiple series plot into their respective Y scale. Like this,

Series A plot to 1st Y-axis Scale
Series B plot to 2nd Y-axis Scale
Series C plot to 3rd Y-axis Scale
Series D plot to 4th Y-axis Scale

and all those series are not overlapping each other. I want to do like the picture attached but with the series are not overlapping to each other.

Hello

My application environment is on the mobile browser, so we need to switch between [pan] and [rollover]

When I use a button to switch, everything is fine, but when I want to switch with a long press, an exception occurs

Below is my code

    initModifier() {
        this.partitionList.forEach((obj, idx)=>{
            let sciChartSurface = this.sciObj[idx].sciChartSurface;
            this.zoomPanModifier[idx] = new ZoomPanModifier();
            this.rolloverModifier[idx] = new RolloverModifier({modifierGroup: this.modifierGroupId, showTooltip: false});
            this.zoomPanModifier[idx].isEnabled = true;
            // 擴增功能
            sciChartSurface.chartModifiers.add(
                this.zoomPanModifier[idx],
                new ZoomExtentsModifier(),
                new MouseWheelZoomModifier(),
                new PinchZoomModifier(),
            );
        });
    },
    switchCross() {
        let enablePan = !this.zoomPanModifier[0].isEnabled;
        this.partitionList.forEach((obj, idx)=>{
            let sciChartSurface = this.sciObj[idx].sciChartSurface;
            this.zoomPanModifier[idx].isEnabled = enablePan;
            if (enablePan)
                sciChartSurface.chartModifiers.removeAt(4);
            else
                sciChartSurface.chartModifiers.add(this.rolloverModifier[idx]);
        });
    },

I recorded a video, first use the button to switch, and then long press to switch, you can see the problem I want to narrate from the video, the URL is as follows: https://youtu.be/vJjbLNGS-iM

After the problem occurred, it was expected that touchmove should be [pan], but it became [zoom]

Thanks for your help

We are having the first experiences with SCIchart. Could someone help with this problem we are experiencing?

[ encore ] ERROR Failed to compile with 1 errors14:42:33 [ encore ]
Module build failed: Module not found: [ encore ]
“./node_modules/scichart/_wasm/scichart2d.wasm” contains a reference
to the file “a”. This file can not be found, please check it for typos
or update it if the file got moved. [ encore ] ERROR in
./resources/js/Pages/Home.vue?vue&type=template&id=6a63e488&scoped=true&ts=true
(./node_modules/unplugin/dist/webpack/loaders/transform.js?unpluginName=unplugin-vue-components!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/js/Pages/Home.vue?vue&type=template&id=6a63e488&scoped=true&ts=true)
10:27 Module parse failed: Unexpected token (10:27) File was processed
with these loaders: *
./node_modules/unplugin/dist/webpack/loaders/transform.js *
./node_modules/unplugin/dist/webpack/loaders/transform.js *
./node_modules/vue-loader/dist/templateLoader.js *
./node_modules/vue-loader/dist/index.js You may need an additional
loader to handle the result of these loaders. | }, null, -1 /* HOISTED
*/)) |

export function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) { | return (_openBlock(),
_createElementBlock(“div”, _hoisted_1, [ | _createElementVNode(“h1”, null, _toDisplayString(_ctx.msg), 1 /* TEXT */),

ERROR in ./node_modules/scichart/_wasm/scichart2d.wasm Module not
found: Error: Can’t resolve ‘a’ in
‘C:\Users\clo\fr\Projeto\chart\App\node_modules\scichart_wasm’

ERROR in ./node_modules/scichart/_wasm/scichart3d.wasm Module not
found: Error: Can’t resolve ‘a’ in
‘C:\Users\clo\fr\Projeto\chart\App\node_modules\scichart_wasm’

webpack compiled with 3 errors

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.

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,

I am currently developing an application using Electron (v. 8.3.0), React (v. 17.0.1), and TypeScript (v. 4.0.5). I have created a simple demo app (see attached) to test this software, and I found that whenever the application window is resized, there is an “Uncaught null” error from scichart2d.js caught by the console. I also found that at some window dimensions, it even seems that the chart cannot properly be displayed and it will try to constantly rerender, quickly filling up the console with the same error.

A couple of notes:

• I currently am using a trial key.
• I am compiling this application using electron-webpack (https://webpack.electron.build/). It has a few built-in tools that ease the compilation/app creation process when combining Electron with other frameworks. This means some of the webpack API being used is abstracted, but we can append our own (see webpack.renderer.additions.js), more information can also be found at https://webpack.electron.build/modifying-webpack-configurations.
• Electron v. 8.3.0 uses Chromium 80, so all features should be supported.

I am working on a proof of concept for our company to move some of our desktop apps to the web. We use SciChart WPF in our desktop apps so we are going with SciChart.JS for the web apps. Is it possible to stack the FastLineRenderableSeries in SciChart.JS like we do in WPF?

Edit: Found the answer just after I posted this question.

sciChartSurface.layoutManager.leftOuterAxesLayoutStrategy = new LeftAlignedOuterVerticallyStackedAxisLayoutStrategy();

I try to use this exemple on my PC with (nodejs 8.13.0) and i can’t run this app example. I receive this error:

× ｢wds｣: Invalid configuration object. Webpack has been initialized
using a configuration object that does not match the API schema.

configuration.optimization has an unknown property ‘namedModules’.
These properties are valid:

object { checkWasmTypes?, chunkIds?, concatenateModules?,
emitOnErrors?, flagIncludedChunks?, innerGraph?, mangleExports?,
mangleWasmImports?, mergeDuplicateChunks?, minimize?, minimizer?,
moduleIds?, noEmitOnErrors?, nodeEnv?, portableRecords?,
providedExports?, realContentHash?, removeAvailableModules?,
removeEmptyChunks?, runtimeChunk?, sideEffects?, splitChunks?,
usedExports? }

-> Enables/Disables integrated optimizations. Did you mean optimization.moduleIds: “named” (BREAKING CHANGE since webpack 5)?*

Is there compatiblity problem with nodejs LTS version?
Thans for your response.

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

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

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)

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?

In our app we have a feature by which user can add indicators. These indicators can consist of 2 or a maximum of 4 lines.

We don’t want to render svg tooltips(which setted up by the default) with data for each line, instead of that we get point data and pass it to our app inner service that can render indicator legend.

To prevent default tooltips from being displayed we set for each renderable series of an indicator the following values.

rolloverModifierProps.width = 0; rolloverModifierProps.height = 0;

But of course tooltips are still rendered in the DOM and this leads to performance issues when we have 3 or more indicators of this type.

My question is the following

How we can render only circles svg for rollover modifier and completely dont render svg for tooltips in the DOM?

This is what the indicators look like

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

I am trying to build my application with Electron. When the Electron application is run, it will open the UI in the browser (not opened with chromium). I created two Electron applications with same codes but with different versions of SciChart (i.e. version 2 and version 3). When I run with the Electron application with SciChart v2, the SciChart can be loaded properly. When when I run the Electron application with SciChart v3, I got error (please refer to the screenshot) and the SciChart cannot be loaded. I am not sure what’s wrong. Do you have any idea?

I am trying to add an axis annotation to a heatmap legend. When this annotation is dragged, the color mapping of the heatmap series and the heatmap legend will be changed. How can I modify the colorMap.gradientStops of the heatmap series and the heatmap legend while the chart is running?

I am trying to implement the following functionality requested by our users:

Zoom:
– Only zoom the chart when using CTRL + MouseWheel key
– This is similar to how most browsers behave

Pan/Scroll:
– If no CTRL key is pressed, then pan/scroll
– This is similar to how most browsers behave

Given the above requirement, I started by creating custom modifier by extending YAxisDragModifier.

My code almost works:
– When using CTRL + Mouse Left & Drag, it Scales (zooms) — just like the user wants
– But using CTRL + Mouse Wheel does not do the same — it only Scales (Zooms).

I have uploaded the code at codesandbox.io:
https://codesandbox.io/s/amazing-shape-2ispt0?file=/src/customModifiers.ts

Note that I have not tried to implement this in ZoomPanModifier yet, but would be helpful if you could give me some pointers on getting this feature in there too.

I would appreciate any help I can get and thanks a bunch in advance.

Best Regards,
Sachin Patel.

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,

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?

Hello, I am using SciChartJS and have a new requirement from our users as follows that I need help with the implementation. Any pointers from anyone would be a great help.

**Requirements: **

• Assume that x-axis is Time and y-axis is prices.
• There are multiple series in the chart (e.g., Bid Price, Ask Price)
• Allow user to select a time on xAxis using CTRL + CLICK
• When the user selects the time, show the rollover line and the tooltip for all series at the selected time
• This rollover line and tooltip should remain visible until the user selects a new time on the x-axis at which point the rollover tooltip should display the tooltip for the new point.

I started inheriting the RolloverModifier but couldn’t find an appropriate method to show the tooltip.

So, I started implementing the above feature using CustomModifierBase2d and adding a VerticalLineAnnotation for the rollover line. But again, struggling with the tooltip.

If someone could help me out or give me pointers, that would be highly appreciated.

Best Regards,
Sachin Patel.