Category: JavaScript

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?

Currently, I am creating a line chart and appending a lot of fetched data to the data series. The problem is that I have to recreate the chart when I move to another page that is using the same chart from the previous page. Therefore, I have to fetch the data and append it to the chart data series again.

Is there any way to reuse the chart itself without recreating the whole chart on another page?

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

Hi,

I am facing another issue with dataLabels in latest version of Scichart. I saw another question with similar is already posted and the fix is released.

Can you check this code.

I tried to reproduce the issue with the vue js example code, codesandbox. But the issues is behaving differently in example code, codesandbox, and my existing project.

codesandbox: https://codesandbox.io/s/scichart-error-6xc6jw?file=/src/index.ts
codesandbox:- Text in the bottom area are displayed and top area no labes are displayed.

I am attaching the vue js file also. Please check the file also, On the example no labels are displayed.

I am attaching the video of my project also, Here the labels are invisible sometimes, sometimes the labels are showing not properly. Video Link: https://drive.google.com/file/d/1vZ0lO5xdmN9VfFGXMaoTPfTgqRytrEAl/view?usp=sharing

Hi,
Is it possible to add the scrollbar in the chart. If the visibleRangeLimit is set is it possible to add the normal scrollbar in the side of the chart.

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.

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

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?

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.

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

Thank you!

Hello, how do I remove the shadow from tooltips, generated by the VerticalSliceModifier?

Thanks!

Hello,

I am experiencing an issue with the BoxAnnotation in SciChart where the precision of the box’s boundaries does not accurately match the data points it is supposed to represent. When dynamically creating a BoxAnnotation to highlight a range of values on a chart, the upper boundary (y2) is set to match the maximum value within the specified range. Despite the calculation seeming accurate, the rendered annotation’s top edge is visually lower than the top of the highest column it encompasses, creating a slight discrepancy. In my application, I am creating a lot of charts, and this issue occurs only on charts with a big data range.

Environment:

SciChart Version: 3.2.532
Browser: Chrome

Attaching code snippet on jsfiddle:
https://jsfiddle.net/c9dekx6v/2/

Regards,
Dmytro

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.

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!

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?

When using AutoRange.Once on an axis, I expect the auto ranging to be done exactly once.
If at some point, I change the visible range to match the default one (0 to 10 for numeric axis), the auto range is triggered again.

Happens more if I provide inputs so the user can define a range, and depending on the use case, 0 to 10 is not that uncommon.
Kind of an edge case, but still something that can happen, and is definitely unexpected.

This can be seen happening here https://codepen.io/jrfv/full/xxeqwOd

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

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

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?

Hello All,

Is there a way to have a cursor modifier display on a mouse left/center/right click instead of automatically showing when the mouse is over the chart? I tried setting the ExecuteOn property but had no effect.

Thanks in advance,
Sergio.

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!

Hello,
How can I animate an update of a candle or a bar in an OHLC type charts? I use realtime stock chart like this example.
When i update candle it redraws immediately with new values. But i want it to be updated with animation.

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.

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?

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 use case for a chart, that is a heatmap, which may also contain multiple series drawn on top, with multiple internal axis as well.
I can’t transform the data I receive, because that would be too slow, and it needs to maintain a speedy feeling, even when appending more data.

For this reason, when building the chart, I just flip the axis. The bottom axis is the Y axis, and the left axis it the X axis.

The multiple series that can be added (XyDataSeries), provide one extra axis each, and use one of the main axis.
We can think of them as horizontal or vertical series, depending if they use the main X axis, or the main Y axis.

When hovering over the chart, I want to show a tooltip, that shows for each series, their own axis value.

The issue — The normal CursorModifier, can’t correctly present a tooltip, for this case of mixed horizontal/vertical series. I’m not sure if there are configurations I’m missing, or if it is an actual uncovered edge case, hoping to get an answer on this.

To show what the issue is, and how I’m currently fixing it, please have a look at the codepen I made -> https://codepen.io/jrfv/full/zYMjEzP

Any tips on this, is it something scichart will fix eventually?

Hello,

I switched from NumericAxis to DateTimeNumericAxis to view x axis labels in hh:mm format. It is definitely showing the labels in this format which is what I wanted, but for some reason it always show “Jan 1” in the first label. I simply want to show hh:mm labels based on the X values. One thing to now is that this is a live updating chart, not static data.

What am I missing? attached is a picture showing the issue and a picture with the DateTimeNumericAxis configuration.

Thanks.
Sergio.

Can you please provide an example or documentation on how to change the tooltip style? Is any method to turn off the cursor pointer for a particular data series?

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.

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

Downloaded latest Licensing Wizard on my Mac M1 however I cannot run it to start my trial of SciChart.JS.

I’m looking at SciChart.JS for financial charting project in a .NET Blazor for analysis only.

As I’ve not been able to get SciChart installed or to try, is it possible to place annotations such as trend lines and boxes onto the chart by me clicking on the chart?

Also, how does indicators work? And can I add my own indicators? Will the algorithms for these indicators be written in JavaScript or can I do this in C# from Blazor?

I attach a screen shot of the problem running the Licensing Wizard.

Any suggestions would be helpful.

Thanks

Hello All,

I was trying to set the visual range property on a numeric axis but i get the error that the “equals” is not a function of NumerixAxis. This happens when i try the following.

export function setXAxisVisibleRange(element, visibleRange) {
     const { sciChartSurface } = resolveContext(element);
     var axis = sciChartSurface.xAxes.get(0);
     axis.visibleRange = visibleRange; **//error here**
}

attached is a picture of a more detailed error. Ultimately what I am trying to do is to sync up the visual range of two charts x axis like in the following tutorial

https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2009%20-%20Linking%20Multiple%20Charts.html

Thanks for your help in advance.

UPDATE

So my issue was that I had a serialization issue with the NumberRange class. I can now sync up the charts just like in the tutorial. The problem now is that if I scroll or zoom very fast eventually the charts start to flicker in an endless loop. Has anyone ever seen this behavior? One thing I notice is that the min and max value have over 10 decimal points.

Here is a quick printout of the value change events between the two charts when the flickering starts.

Any ideas?

–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472

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?

Hi everyone,

I am using SciChart trial in Angular and I find it so powerful
Thanks for developing this
However, I am having some troubles using it with plotting realtime stock data

From having searched around I found that it is recommended to use CategoryAxis for stock charts to avoid gaps on days without data
However, how do I append/update the data with new data coming in
XYDataSeries.append takes a number for the x-value

In the code below, assume “addNewData” is called every second
How do I properly add the new data with the new DateTime and also format it however i would like

Thanks for your help

  sciChartSurface.xAxes.add(new CategoryAxis(wasmContext));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext,{
    axisAlignment: EAxisAlignment.Left,
  }));

  addNewData(){
    const x = new Number(new Date()).toString()
    if(this.sciChartSurface){
      const series = this.sciChartSurface.renderableSeries.get(0);
      const dataSeries = <XyDataSeries> series.dataSeries;
      const x = dataSeries.count();
      const y = Math.random()
      dataSeries.append(x, y)
      this.sciChartSurface.zoomExtents()
    }
  }

Hi, we are using CategoryAxis to display stock data, however, as you can see in the image below, within the “same” candle or volume, divergent information is displayed.

am I doing something wrong?

We managed to create a functioning chart, but sometimes when we first ran the chart it produced this error, followed by the chart being completely unable to display.

We attached the error message produced in DevTools, the expected outcome and the actual outcome when the error occurred.

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,

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.

Good afternoon. Please tell me how can I change the Z index of the annotations so that the box annotation can overlap the text. Now no matter how I try to do it, the text is always above the rectangles. Does the JS version have some layers with annotations that can be changed by they Z like in this question – https://www.scichart.com/questions/wpf/changing-an-annotations-z-index

Unfortunately, I did not find this functionality in the JS version.