Forums

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.

I recently upgraded SciChart from version 2 to version 3.0.266. It was working fine. But I got error (please refer to the attached screenshot) when I try to run my application today. It’s so strange as it worked fine yesterday and I didn’t make any codes change today.

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

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’m trying to add a axis label/marker to the yAxis of my chart.
This label should follow the intersection between a FastLineRenderableSeries (that i’m using to render a moving average filtered dataSeries) and the yAxis.

I tried to extend the “draw” method of the FastLineRenderableSeries to draw a label ontop of the yAXis, using the “drawModifiersAxisLabel” helper function. Like:

class CustomFastLineRenderableSeries extends FastLineRenderableSeries {
draw(renderContext: WebGlRenderContext2D, renderPassData: RenderPassData) {
    super.draw(renderContext, renderPassData)
    const yAxis = getYAxis(this.parentSurface);
    drawModifiersAxisLabel(
        yAxis,
        renderContext,
        150, // testing values
        "#00ff00", // testing values
        "#00ff00", // testing values
    );
}

but the label don’t get drawn.

The attached image shows the desired feature (image from another charting lib)

How can I implement this?

Good evening. Lately I’ve been troubleshooting a problem with page memory usage increasing. Over time, the memory grows exponentially and reaches several gigabytes. To explain the problem, we need to describe how we use charts:

On our website in real time, depending on our algorithm, the charts replace each other. The user constantly sees 4 charts, which are constantly replaced by others. Adding new charts occurs unnoticed by the user and only after the graph is fully loaded and drawn does it replace the previous one. That is, the user actually sees 4 charts, but there may be more on the page. After replacing the desired chart, the old one is deleted using surface.delete() and removing all dependencies.

At first, when creating a chart, I used the create() method. After a number of attempts to avoid memory accumulation and re-reading the documentation, I came to the conclusion that it is possible, since all graphs are created using create() – they have a common wasm and since there cannot be a situation in which all charts will be deleted (at least 4 are always present ), then wasm memory is not freed. Tell me if I’m right about this.

Afterwards, I decided to try to create charts using createSingle() with a reliable method, which now, since each graph has its own wasm, memory will be freed. Perhaps this was the case, but I can’t say for sure, because now after some time the page began to reload automatically with the appearance of an error, the screenshot of which I attached. This is most likely due to a wasm limitation on the page when using createSingle. Although it’s strange, when you delete the chart, the amount of wasm should decrease. And even with a limit of 16 copies, this should be enough. Please explain this error to me as well, perhaps the problem with rebooting can be somehow solved by you (I’m not sure that this should happen)

Thank you very much in advance for your answer. Have a good day!

Hi,

I have a uniform heatmap with multiple ’tiles’ of data loaded in, by using multiple UniformHeatmapDataSeries / UniformHeatmapRenderableSeries.

The user is allowed to pan around/zoom around the heatmap.

I want to build two charts to display the ‘visible heatmap average’, one for each axis. For example, I would display a line chart underneath the heatmap. The first point on this line chart would represent the average value of all cells in the first column of the heatmap – I need this to take into account all of the UniformHeatmapDataSeries that are currently in the viewport, treating them as a singular heatmap.

I’ve seen the NumericAxis.getCurrentCoordinateCalculator(), which looks promising, but I’ve not yet worked out if that can do what I need.

Any thoughts on the best approach?

Thanks
Joe

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.

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.

Hi,

In past versions of SciChart JS I was able to run a webpack-built set of static files on an Nginx-based Docker container without issues.

I’m now seeing the error “memory access out of bounds” (screenshot attached) when doing this, and as a result does not render the charts at all, whether it’s running locally or hosted on AWS. This happens in both Chrome and Firefox.

It runs absolutely fine using webpack dev server.

The error seems to be coming from scichart2d.wasm. Any ideas?

Thanks
Joe

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

I have a React application showing a real time updated chart which works well when receives data from event-based WebSocket. Now I need to modify the app with a new data source. I have an aysnc function to get a batch of data in an interval.

kinesisReadInterval.current = setInterval(async () => {
        const recordsResponse = await kinesisRef.current.getRecords({ ShardIterator: shardIterator }).promise();
        recordsResponse.Records.forEach(record => {
            try {
                const dataObj = JSON.parse(record.Data.toString('utf-8'));
                spectrumAnalyzerRef.current.metaDataHandler(dataObj);
            } catch (jsonError) {
                spectrumAnalyzerRef.current.binaryDataHandler(record.Data.buffer);
            }
        });

        shardIterator = recordsResponse.NextShardIterator;

        if (!shardIterator || !kinesisConected.current) {
                clearInterval(intervalId); // Stop interval if conditions are not met
        }
    }, 1000);

The recordsResponse.Records contains a batch of records and I want to update the chart based on these records one by one. From my logs, I can see that the binaryDataHandler() which will call appendRange() ran successfully for each record. However, the chart only redraws for the last record of the recordsResponse.Records. I have tried to store the recordsResponse.Records in a state variable and loop to update the chart later, but still got the same result. I am not sure whether it’s chart related issue or React rendering issue. Do you have any idea?

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 large data set that I can’t really load into memory at once so instead I am paging the data, grabbing only what I require plus a little buffer either side so that the graph always has something in it.

To implement paging I need to change the position at which the graph starts rendering, unfortunately it seems that it is not possible to change UniformHeatmapDataSeries.xStart as set in the constructor.

Is the only way around this to recreate the heatmap from scratch every time a new page is loaded or am I missing another trick?

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!

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.

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

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,

I am getting console error and page is crashing and reloading the page.

I am using a axis line chart from the js scichart. I want to change the font size of a legend. How do I change the font size of a legend?

Hello scichart team!

We would like to run e2e tests for our application, which uses the scichirt.js library. To run e2e, we will be running a local development server with our SPA app in some CI environment.

Is there a way to avoid installing a license manager for e2e in CI env and use RuntimeLicenseKey, but for localhost?

Hello,

I have a BlazorWASM app. I am wondering how to sync the x values of different renderable series that have different number of data points.

In a simple form, I am passing in the data for a moving average to be rendered on the chart that has already been populated with data. The moving average data has already been calculated and has the correct date timestamps. But when I add this series to the chart it is starting at index 0 of where the the price data started instead of where the xAxis date of this renderable series has.

I prefer not to use the filters api to regenerate this data as some will be complex and have already been calculated by study or pulled from a database. I have seen the article to offset a series but this seems unnecessary since I already have the x axis coordinate that I want each point of the new line series to be rendered.

Is there somewhere in the docs that I missed how to get these renderable series to line up properly to their own x data points?

Thank you