Category: JavaScript

Dear Andrew,

Thank you for the past answers. I have a new question. I have a heatmap with 2 line charts at its left aand top position. the top line chart plot the horizontal values where the mouse if hovering and left chart displays vertical values from the mouse position.

This is working great, but the issue is the heatmap is not always square and I am trying the aligh the line charts with the heatmap dimensions

two issues,

1. the heatmap X/Y dimension are not always same, in fact I have a function which listens to the changing heatmap zoom factor and makes sure the X/Y are always “square” as we want to show the heatmap with square pixels. (see video #2) https://youtu.be/wXStF-7bWsw

2. As I dynamically chage the size of the plot the… the proportion of actual chart area to axis lable changes thus varying the overlap. (see video #1) https://youtu.be/loAVpYSRJ38

Let me know if you need more information,

Best,

Pramod

Hello,

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

Hello,

I want to render a base64 image in ScichartJS without actually rendering it in DOM. I saw that you have these guides in WPF:
https://support.scichart.com/index.php?/Knowledgebase/Article/View/17213/34/
https://www.scichart.com/documentation/win/current/webframe.html#Screenshots,_Printing_and_Export_to_XPS.html

However it is difficult to achieve it in Typescript. Is there a guide or any ideas on how to do it? I would appreciate any answer.

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

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

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

This question is related to this.

I still see a problem with memory accumulation and I just can’t cope with it. For clarity, I created a simple example with the simplest graph, two axes, one line series and 10,000 values in this graph.

When the page loads, no code is executed and there is only a button that creates one graph, adds it, waits 3 seconds and deletes it.

I use this button to test the speed and the fact of memory accumulation. For the simplest test, it is enough to simply create a certain number of times and wait for the graph to be deleted. After which it is clear that after some time the memory will not return to its previous values.
Example: after loading the page, memory consumption was about 30-40 MB, after creating and deleting 15 graphs (one by one), the memory was already 105 MB

Thus, with each graph, memory leaks.

Also, to test and search for memory leaks, I used the three snapshot technique:
1) created, for example, 2-3 graphics one by one
2) took a snapshot
3) created an even number of charts (for example, 10 or 25)
4) took a snapshot
5) created one or two more graphs
6) took a snapshot

7) I opened the 3rd Snapshot and looked at the result of the objects distributed between Snapshots 1 and 2. Every time I see the same exact values of 10 or 25 or multiples of them.

Can you please look at the code, at creation and deletion, repeat this test to understand where this memory is leaking from.

Thanks in advance for your answer. I hope the problem will be found.

Zip file upload has been forbidden.
Link to GoogleDrive: https://drive.google.com/file/d/177QFurYZwnnd5Hp9a9jQV2z4nt6ULhkX/view?usp=sharing

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

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’m trying to add an AxisMarkerAnnotations for some line series on my chart.

I was following these questions answered here:
https://www.scichart.com/questions/js/adding-axis-markers-to-fastlinerenderableseries
https://www.scichart.com/questions/js/price-indicators-on-yaxis

I managed to render the axis marker for my series. Now I’m trying to the set the Y value of the marker annotation as the value where the line intersects the Y Axis.
I want the marker value to be the last value of the series, only if the xAxis.visibleRange.max > series.XdataRange.max.

The two attached images show the desired feature.
One shows the marker annotation with the Y1 being the one where the line intersects the YAxis.
The other shows the marker annotation with the Y1 being the last value of the line, because it is visible.

I read some answers here on the forum about using the HitTest API to do this, but I couldn’t make it work on my JS app

Hello everyone. A similar question has already been asked just below the forum, but there is no answer. I have dynamically added diagrams. However, I am interested in the possibility of adding buttons for closing and collapsing diagrams directly to the chart panel. I need the option to close any selected chart. How can this be implemented and written? Thank you.

stack overflow link : https://stackoverflow.com/questions/77781766/reactjs-sweep-line-optimizing-scichartjs-performance-reusing-wasmcontext-for-m

I have a performance problem with scichartjs, when initializing about 40 charts/surfaces the rendering state drops to 5-10 frames per second.

I think it might be related to the fact that I run the create function each time and not reusing the wasmContext maybe?
but I am not sure how to reuse the wasmContext or what is the best performance for this kind of type

demo : https://9669tv.csb.app/

(sorry for the low quality of the Giff due to 2 MB max size of upload)

this is my init function

export const initScichart = async (divElementId) => {
  SciChartSurface.UseCommunityLicense();
  //console.log(divElementId.id);
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    divElementId,
    {
      theme: new SciChartJsNavyTheme(),
    }
  );

  sciChartSurface.xAxes.add(
    new NumericAxis(wasmContext, {
      visibleRange: new NumberRange(0, 5),
    })
  );
  sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
      autoRange: EAutoRange.Always,
    })
  );

  const xyDataSeries = new XyDataSeries(wasmContext, {
    fifoCapacity: 220_000, // set fifoCapacity. Requires scichart.js v3.2 or later
    fifoSweeping: true,
    fifoSweepingGap: 2_200,
    containsNaN: false,
    isSorted: true,
  });

  sciChartSurface.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, {
      dataSeries: xyDataSeries,
      strokeThickness: 1,
      stroke: "#50C7E0",
    })
  );

  xyDataSeries.sciChartSurfaceToDelete = sciChartSurface;

  return xyDataSeries;
};

the reason I need the charts on different surfaces is that I need to wrap them in SortableJS (to be able to drag them across the website)

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)

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?

Please tell me, is it possible to make sure that there is no empty space between records on those days when there is no trading on the stock exchange? It appears that the X-axis is linear and not transactional. How can I make it transactional?

Hi,

I am facing a issue with RolloverModifier. I have multiple charts in single window. For some points the lines over the chart are missing.

Please find the attached images for some examples and the code for reproduce the issue. on the attachment you can see that the line on some chart is missing when mouse on left and right corner area of the chart

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?

Hello. I noticed that a canvas appears in the DOM tree, which completely duplicates the main chart, but it is set to display: none.

can i ask what it is used for? does it affect performance? and can i remove it?

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/support/solutions/articles/101000515345-scichart-js-domain-licensing-faq)

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,

Gauges (linear and radial) are not part of scicharts components…
These controls are helpfull to do some dashboards

Is scichart can do that?
Examples exists?

circular samples
like https://apexcharts.com/javascript-chart-demos/radialbar-charts/
like https://nivo.rocks/radial-bar/
like https://antoniolago.github.io/react-gauge-component/
like https://codepen.io/naikus/pen/BzZoLL

linear samples
https://docs.anychart.com/Gauges/Linear_Gauge

Regards.

I am trying to subscribe to Visible Range changes on a DateTimeNumericAxis, it is not working, am I doing something wrong?

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

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?

Hi!
Currently, I’m using Axis Layout – vertically stacked axes。When I use vertically stacked axes, click on a certain area, can I get on that axis? It’s from click on a certain area, not the series. I know the series can it.
can you give me some help?

Hi,

I am facing a issue with latest version of SciChart. Because of this type error not able to build the project. Can you check this error.

Hello everyone,

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

Thank you a lot!

I’m trying to add rollover / tooltip to a chart, which uses sweeping. First, everything is working fine, but after updating the data over more then one page, the rollover is messing around with the data.

I created a codesandbox with the vitalsign demo: https://codesandbox.io/p/sandbox/javascript-vital-signs-ecg-medical-chart-example-forked-2zqcs3

First the rollover works great. Wait until the data is updated to the left side. Then you’ll see the messed up values and rollover points.

Hello,

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

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

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

Hi,

EDataLabelSkipMode Customization is possible with some time range limit?
When i checked the documentation saw the options to skip the label for overlaping. Is it possible can add some index to skip the values. Eg: for Time chart One value is displayed in the chart at 10:30:00. So if i add some index value to skip the next 1 min data. So based on skip index next available value can ba displayed in chart. (10:31:00 or next available value). Can you implement this option to skip ?

This demo was very helpful in working export out. I have a followup question. For a specific user request, I’m currently attempting something along these lines (current state; there’s some spaghetti-against-the-wall method going on at the moment):

const previousTheme = surface.themeProvider;

    const exportTheme = {
        ...previousTheme,
        sciChartBackground:"Transparent",
        gridBackgroundBrush:"Transparent",
        axisBandsFill: "Transparent"
    }

    surface.applyTheme(exportTheme);
    surface.background = "Transparent";

    new Promise(r => setTimeout(r, 1000)).then(() => {
        try {
            const node = document.getElementById('scichart-stuff');
            if (!node)
                return;
            domtoimage
                .toPng(node )
                .then(function (blob) {
                    saveAs(blob, 'plot.png');
                })
                .catch(function (error) {
                    console.error('Problem exporting/saving image of plot', error);
                });
        } finally {
            surface.applyTheme(previousTheme);
        }
    })

I am able to see the update (after adding the delay) on the screen, but the export appears to be ignoring the values I’m setting. I’m wondering what I might be missing in terms of the interactions of these libraries.

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?

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