Pre loader

Category: JavaScript

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0 votes
191 views

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?

  • Gopika V asked 2 weeks ago
  • last active 4 hours ago
1 vote
250 views

There seems to be no documentation on how to configure scichart when using app router with nextJS, and I am running into an error.

I have followed a combination of this tutorial, and additional setup for nextJS found here, specifically the next.config.js file, copy-files-from-to.json, and additions to package.json. But I continue to get the error: ‘Module has already been declared’. (first/second pics in PDF)

I have attached a photos inside the pdf, including my project structure, and a zip with the files to duplicate.

Steps to replicate:
1) extract files and add root package.json to a directory of your choice
2) from within this directory, use ‘yarn create next-app scichart-prototype’ (use set-up options from 4th image in PDF)
3) Replace root layout.tsx and page.tsx with files in zip, add SciChartDemo directory and add page.tsx from that (also in zip)
4) replace the next.config.mjs file with the next.config.mjs file from the zip
5) add the copy-files-from-to.json from the zip
6) replace the package.json file in scichart-prototype directory with file from the zip.
7) run ‘yarn install’ to add packages
8) run ‘turbo dev’
9) after visiting localhost:3000/ click the Sci Chart Demo link to see error.

Thanks for taking a look.

question posted to nextjs forum

  • max keirn asked 2 weeks ago
  • last active 2 weeks ago
1 vote
324 views

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

1 vote
0 answers
327 views

Hi, im facing a problem related to VisibleRange Auto,
when a value is much higher than the values
already plotted and I try to scroll along the X axis,
the value on the Y axis does not fully show the candle.

Please see the attached images.

As you can see, the biggest value of my last candle is 41.75, however,
the numberRange that is being used in VisibleRange Auto is 41.63.

Is there any way around this?

1 vote
0 answers
423 views

I have a design where I want to show something like a box at the top of the chart and when hovering on it, it should show up a tooltip with some info, the issue I’m running into is the fact that I can’t seem to find way I can add tooltip to box annotation other than adding another box annotation when hover or hit, but it seem that it is not recommended base on my previous post before.

I also looked into scatterXY series or pointMarker, the issue with Point marker or scatter series is that I can only set one x and y, but my design require the box to be from a certain x1 point to x2 point. I can probably try to calculate the width and set the width to the point marker, but I would rather not if there is a better way.

Also looked into column chart, but that also have the same issue of only one x and y point and not sure about tooltip, but definitely seem more promising than annotation.

Please let me know if there is a better way to accomplish this, thank you!

The image below is the design.

  • Nung Khual asked 1 month ago
  • last active 1 month ago
1 vote
550 views

I intend to use the Ctrl key to allow the user to select multiple FastLineRenderableSeries at once in an onkeydown event. Is there any way to do so while maintaining the default behavior?

Note: I was able to use onSelectedChanged to select a FastLineRenderableSeries, but I was only able to select one FastLineRenderableSeries at a time.

Here’s the code that I have to generate the FastLineRenderableSeries:

let fastLineRenderableSeries = new FastLineRenderableSeries(this.wasmContextGraph, {
      dataSeries: xyDataSeries,
      id: traceId,
      xAxisId: this.sciChartGraph.xAxes.get(0).id.toString(),
      yAxisId: traceData.array[0][0],
      isVisible: true,
      isSelected: false,
      opacity: 1,
      resamplingMode: EResamplingMode.Auto,

      onSelectedChanged: (sourceSeries, isSelected) => {
        if (isSelected){
          // some unrelated functions
        } else {
          // some unrelated functions
        }
      }
  });
0 votes
864 views

I am having UX issues with overlapping Bars on BarChart with certain datasets. Example attached is the code
https://codesandbox.io/p/sandbox/javascript-column-chart-forked-p59p75?file=%2Fsrc%2FApp.tsx%3A49%2C1

please uncomment lines at 47 and 48 for a different set of x and y values where it works fine.
Not sure what am i doing wrong.

1 vote
485 views

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?

  • Quyen Sy asked 1 month ago
  • last active 1 month ago
1 vote
530 views

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.

1 vote
579 views

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

1 vote
567 views

When using FastCandlestickRenderableSeries, I want every value to appear on the chart. I tried to use DataLabelProvider for this, but it didn’t work. What can I do.

class CustomDataLabelProvider extends DataLabelProvider {
onDataPoint(renderableSeries, xValue, yValue) {
    const labelText = `${yValue.toFixed(2)}`;

    const label = document.createElement('div');
    label.textContent = labelText;
    label.style.position = 'absolute';
    label.style.color = 'black';
    label.style.fontSize = '12px';
    label.style.left = `${this.parentSurface.coordinateCalculator.getCoordinateFrom(xValue) - label.clientWidth / 2}px`;
    label.style.top = `${this.parentSurface.coordinateCalculator.getCoordinateFrom(yValue) - label.clientHeight}px`;

    this.parentSurface.annotationCanvas.appendChild(label);
  }
}



const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
theme: new SciChartJSLightTheme(),   
titleStyle: { fontSize: 22 },
 });

sciChartSurface.applyTheme(new SciChartJSLightTheme());
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const yAxis = sciChartSurface.yAxes.get(0);
yAxis.visibleRange = new NumberRange(LAL, UAL);
const xAxis = sciChartSurface.xAxes.get(0);
xAxis.visibleRange = new NumberRange(0, endBarIndex);

const dataSeries = new OhlcDataSeries(wasmContext, {
xValues: xValues,
openValues: compositeScanAverageArray,
highValues: yValues,
lowValues: compositeScanAverageArray,
closeValues: yValues,
});

sciChartSurface.renderableSeries.add(new FastCandlestickRenderableSeries(wasmContext, {
dataSeries: dataSeries,
strokeThickness: 1,
dataPointWidth: 0.5,
paletteProvider: new CustomPaletteProvider(),
dataLabelProvider: new CustomDataLabelProvider(),
 }));
1 vote
566 views

I want to use a different color for each value in the chart I created here. To put it simply, if the value is greater than 10, I want it to appear yellow, if it is less than green, and red if it is less than 0. thanks

const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
    theme: new SciChartJSLightTheme(),   
});
sciChartSurface.applyTheme(new SciChartJSLightTheme());
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const yAxis = sciChartSurface.yAxes.get(0);
yAxis.visibleRange = new NumberRange(LAL, UAL);
const xAxis = sciChartSurface.xAxes.get(0);
xAxis.visibleRange = new NumberRange(0, endBarIndex);

const dataSeries = new OhlcDataSeries(wasmContext, {
    xValues: xValues,
    openValues: yValues,
    highValues: compositeScanAverageArray,
    lowValues: yValues,
    closeValues: compositeScanAverageArray,
});
const renderableSeries = new FastCandlestickRenderableSeries(wasmContext, {
    dataSeries,
    stroke: "white",
    strokeThickness: 1,
});

sciChartSurface.renderableSeries.add(renderableSeries);
sciChartSurface.annotations.add(
    new SciChart.BoxAnnotation({
        stroke: "yellow",
        strokeThickness: 1,
        fill: "rgba(255, 255, 0, 0.3)",
        x1: 0,
        x2: endBarIndex,
        y1: UAL,
        y2: UWL,
    })
);
sciChartSurface.annotations.add(
    new SciChart.BoxAnnotation({
        stroke: "yellow",
        strokeThickness: 1,
        fill: "rgba(255, 255, 0, 0.3)",
        x1: 0,
        x2: endBarIndex,
        y1: LAL,
        y2: LWL,
    })
);
sciChartSurface.annotations.add(
    new SciChart.BoxAnnotation({
        stroke: "green",
        strokeThickness: 1,
        fill: "rgba(0, 128, 0, 0.3)",
        x1: 0,
        x2: endBarIndex,
        y1: LWL,
        y2: UWL,
    })
);
sciChartSurface.annotations.add(
    new SciChart.LineAnnotation({ stroke: "#FF6600", strokeThickness: 3, x1: startBarIndex, x2: endBarIndex, y1: compositeScanAverage, y2: compositeScanAverage }),
);

sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new ZoomPanModifier());

}

0 votes
0 answers
1k views

Hello to everyone. I want to take the starting point of my bar charts as 20, for example, rather than 0. If the data is 3, I want to create a bar chart going from point 20 to 23, and if it is -3, from point 20 to 17, can you help me?

0 votes
753 views

Codesandbox link: https://codesandbox.io/p/sandbox/vertically-stacked-axes-forked-pd3h7g?file=%2Fsrc%2FApp.tsx%3A133%2C25

I put the first box annotation to be from -5 to 6 and the x-axis range is from 0 to 10, so that mean some portion of the first box annotation is out of the chart. And there is a click event on the box annotation and console log whenever it is clicked on, and when I click outside of the chart box/square and align it to the box annotation, it is registering the click.

  • Nung Khual asked 2 months ago
  • last active 2 months ago
1 vote
695 views

The chart is only showing 3 of 4 Tooltips, is there a way to avoid this?

1 vote
765 views

I have a chart with multiple series, left and right y-axes and one x-axis, some series are assign to left y-axis and some are right y-axis and they all have the same x-axis.

But there is one specific serie that need to be control on its own. I consider adding another y-axis either on the left or right axis, but the issue with that is that both the left and right axes are vertically stacked with some other y-axes. So, if I add another y-axis, it will just be stacked, but I need this y-axis to be on its own and not stacked.

The image below show my current chart, and the white line serie is the one that need a y-axis of its own. Currently it is attach to the right y-axis.

  • Nung Khual asked 2 months ago
  • last active 2 months ago
0 votes
0 answers
698 views

Forked from one of the examples and tried re producing. when rotation is enabled the text overlaps with the axis title
https://codepen.io/govam/pen/Yzgxjjm

1 vote
710 views

I am trying to change the format of CursorModifier

sciChartSurface.chartModifiers.add(
  new CursorModifier({
    modifierGroup: 'Chart',
    showAxisLabels: true,
    showTooltip: false,
    showYLine: false,
    showXLine: true,
  })
);

I have a custom DateLabelProvider for the xAxis that return dates in this format ‘MM/dd HH:mm’ but the CursorModifier tooltip is showing the ‘MM/dd/YYYY’ format, how can I change it?

1 vote
737 views

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?

0 votes
794 views

I have a situation where i have just 2 data points, so stead of showing 2 narrow data points with a data range, its showing a repeated date with one big fat bar.

1 vote
790 views

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.

1 vote
856 views

We created a medical simulation similar to your demo: https://demo.scichart.com/javascript-vital-signs-ecg-medical-chart-example

We choose scichart (JS) as the app has to be high performant. In development (I’m working on a mac machine) everything is working great. Now in production I’m surprised, that most computers in our hospital can’t handle scichart, as it is running extremely slow (really slow motion).
I checked also your demo app, which also runs only in slow motion. So it seems not to be an application problem, but a scichart problem. On my development machines there is no problem with the demo.

The slow motion problem occurs on our iPads and on multiple windows machines (VM) with e.g. intel i5 processor.

Is there anything I can do to get scichart JS apps running?

  • J Quader asked 2 months ago
  • last active 2 months ago
1 vote
848 views

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.

  • J Quader asked 2 months ago
  • last active 2 months ago
1 vote
973 views

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/

enter image description here
(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;
};

enter image description here

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)

1 vote
790 views

Does Scichart JS provide built-in functionality to skip connecting points for gaps in a FastLineRenderableSeries.

We had LineDrawMode for WPF. looking for a similar functionality.

1 vote
776 views

https://stackoverflow.com/questions/77752586/reactjs-sweep-line-demo-issue-with-multiple-surfaces-not-updating-simultaneousl

I need to make a demo of a sweep line with multiple surfaces with reactjs, but The problem is that when I choose to show more than 1 surface it only plays on the data on the latest created surface and stops drawing data on the old surfaces.

you can see the example here with the code: https://28zf6p.csb.app/

this is a GIF for the problem:
[in the stack overflow link]

note: the reason I need multiple surfaces is that I want to have the charts draggable with sortableJS to follow the design I got.

0 votes
910 views

This question is related to this.

Good afternoon. While researching this question, I created an example that I would like you to look at.

1) In this example, there is an express server that hosts an HTML page.
In it I added 3 buttons that trigger the creation of a certain number of charts and their subsequent deletion (1, 10 or 100). And one button that saves data about the memory used (later a chart is created from this data for visual analysis).

2) In the check_result folder there is an html file containing one button that creates a chart based on the data saved on site #1.

The algorithm of actions is as follows:
1) I create 1 chart. I’m waiting for it to be removed
2) I wait some time for the result to be readable
3) I create 10 charts. I’m waiting for them to be removed
4) I wait some time for the result to be readable
5) I create 100 charts. I’m waiting for them to be removed
6) I wait some time for the result to be readable
7) I create 1000 charts. I’m waiting for them to be removed
8) I wait some time for the result to be readable

I am attaching a screenshot of the final chart. The final graph also displays the places where the creation of charts began and the end of the deletion of the last one.

Result: After adding charts, the memory does not return to its previous position.

Please look at this example. If I’m wrong somewhere, tell me how this example can be made to free all memory after deleting all charts. Thanks a lot!

Youtube video with example: https://youtu.be/tyjUSp0zA_o
GoogleDrive with zip file: https://drive.google.com/file/d/1LHoFLtovTto-4uRPcFeu2xeasGc2G3cQ/view?usp=sharing

1 vote
903 views

Hi!

I have chart with mountain series with a palette provider.
It performs extremely well with 50k points.

However, I noticed that when I drag the chart away, to a point where the series is not visible, the performance sinks and the chart is extremely laggy.

I have uploaded my code to codepen: https://codepen.io/robrob123/pen/KKJjyvp

I checked the performance using the chrome performance profiler and I found that a function called applyStrokeFillPalletting is called repeatedly many times and each time it takes way too long to execute, considering there is no series to draw.

I have attached a screenshot showing the performance profiling.

Thank you!

1 vote
1k views

Dear Andrew,

As mentioned in the previous question. we are getting ready to implement a comprehensive annotation and labeling functionality to our application. Although I know how to add scalable custom-annotations (your team guided us with the implementation in the past), an important part of of annotation functionality is. ability to edit the annotations. But I am having trouble accessing and interacting the the annotations.

How can I access the svg polygon nodes from the custom annotation and drag and move them? I have attched a video to show the existing functionality.

https://youtu.be/AkysJ2R3TyE1

Best,
Pramod

1 vote
965 views

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?

1 vote
1k views

Dear Andrew,

I have been trying to sync up 2 profile line plots to a heatmap plot. as shown the in video, depending on the size of the container the line plots may or may not line up with the heatmap. This it seems is due to the size of the line plots changing as the size of the container changes. I am not able to find any way to synchronize the plot sizes. I am currently synchronizing the axis, but not the size of the plot it self. this lack of synchronization leads to syncing incorrect values when zoomed in

I am aware of scichartverticalgroup, but I need the sync on both axis.

Hope the video is self explanatory

https://youtu.be/zg0bPT6eUOw

1 vote
886 views

Is there a way to place AxisMarkerAnnotation on top of the gridline as shown in the attached images?

Here are some code to defined the xAxis:

xAxis.axisAlignment = EAxisAlignment.Bottom;
xAxis.drawLabels = true;
xAxis.labelStyle.fontFamily = "Roboto";
xAxis.labelStyle.fontSize = 12;
xAxis.labelStyle.alignment = ELabelAlignment.Left;
xAxis.autoRange = EAutoRange.Never;
xAxis.labelStyle.padding = new Thickness (0, 0, 0, 0);

Note: I’m aware that CustomAnnotation offers a better solution in placing the annotation into its designated position by setting y1 = 0. But I need the annotation to drag only around the xAxis, which can be done in AxisMarkerAnnotation so far.

1 vote
975 views

I need help to make the SciChart surface grid to always look like squares instead of rectangles(like in the screenshot attached).
Does anyone have solved this yet ?

1 vote
973 views

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.

1 vote
973 views

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

1 vote
1k views

I am new to scichart javascript library and trying to run the provided examples locally. I was working on this example
https://www.scichart.com/documentation/js/current/The%20Candlestick%20Series%20type.html

I am able to run this example locally. now I want to add cursor snapping in it. An example would be tradingview candlestick charts. in those charts cursor snaps to nearest candles.
I am trying to achieve similar. I looked into the docs but couldn’t find the answer.

Thanks !

1 vote
1k views

I have a use case where I want to use an axes custom layout strategy, but also need the charts to be in a vertical group.
Since the vertical group will just create its own LayoutManager and use the default strategies, it ends up overriding mine.
I could override just after adding the chart to the vertical group, but then I’d have to manage that away from the configuration step (I may add charts to the group dynamically).

Example: https://codepen.io/jrfv/full/wvNEXNm

To be clear, for now I’ll work around this like I mentioned above, just wanted to ask if it makes sense for you as well that the SciChartVerticalGroup should respect current layout strategies, instead of using the default ones.

Thanks!

0 votes
0 answers
1k views

We are using a sci-chart in our ReactJs project.

SCI chart values have to be changed from the sidebar and whenever a value is changed from the sidebar the chart values are not updated without re-rendering the entire surface of the SCI chart. We need to change the sidebar value without re-rendering how is this possible?

1 vote
1k views

TextAnnotation,Let me use this method, I want to make all the text in the text attribute display vertically, and find that there is no such function, NativeTextAnnotation has this function but does not support Chinese.I hope you can see that you can give a reply, thank you![enter image description here][1]

1 vote
1k views

How to display data labels vertically and support Chinese,As shown in Fig

1 vote
1k views

Hi!

As described in Deleting DataSeries Memory, deleting a series with all its data can be done by calling .delete() on the renderable (example 3) .

If i do just that, the legend doesn’t reflect that. Is there something else to do?

See repro based on Chart Legends Example – just added a 2s timeout after initialization that deletes the renderableSeries of data3. Removes the series from the chart but not from the legend.

1 vote
2k views

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

Thanks!

1 vote
1k views

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!

1 vote
1k views

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.

1 vote
2k views

Sorry for opening another question, but this followup to https://www.scichart.com/questions/js/series-labels got missed.

I’m looking to add a border and background to a TextAnnotation.

Back in the WPF days we had the ability to pretty easily add background colors and such to annotations, thanks to the existing WPF model. I’m assuming in the JS example this would be custom; do you have any existing code/examples for that? Looking for being able to use a colored box whose fill matches the renderable series stroke, along with a contrasting text color.

Dan

1 vote
1k views

I remember asking about something similar many years ago with WPF, but in browser the problem seems more apparent.

Using the current data model (I can be fairly flexible on the backend, and don’t necessarily have to do things this way), for some of the plots I generate many series that do some funky overlapping stuff (example attached). In the extreme examples, this can be thousands of series (the total number of data points might be < 100k).

In these cases, drawing basically grinds to a halt. Zooms take seconds, the OS starts complaining that chrome is locked up — you get the idea.

Is there a better way to approach this sort of plot? Are there any tuning recommendations for this scenario?

1 vote
1k views

I’m a C# developer looking to evaluate working with SciChartJS for a possible future project.

I’ve created a .NET Blazor Project working with JavaScript Interop and I would like to extend the CustomChartModifier2D in TypeScript.

I’ve not used npm to install SciChart into the project, rather I’m using the CDN approach in my _Host.cshtml file.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js" crossorigin="anonymous"></script>

I’ve been searching online for a SciChartJS TypeScript definition file so that I can leverage TS Strongly Typed system in my test project.

Is there one? Or do I need to build my own, or even is there an already made example of extending SciChart with TypeScript somewhere I’ve missed?

Thank you

  • David P asked 4 months ago
  • last active 4 months ago
1 vote
1k views

Hi –

I could not find an example in the various examples your provide

I have several charts in different components

When a component is closed I want to ensure the chart is destroyed and there is not potential for memory leak

What is this best way of doing this?

Thanks

1 vote
1k views

As part of a recent flag added to 3.2.509, I moved from 3.2 to 3.2.509; it looks like positioning of the scichart legend has changed. The style is now appearing as position: absolute — I don’t have access to source, but I wonder if this was part of 3.2.491, which mentioned something about positioning of the legend?

Anyway, if this was an intended change — and if it’s not something I managed to do to myself — it broke my implementation of an outside-of-plot legend. This is how the style is currently appearing:

<div class="scichart__legend" style="height: 100%; position: absolute; display: flex; left: 0; top: 0; text-align: center;">
...
</div>

This is how it appeared my currently deployed code:

<div class="scichart__legend" style="height: 100%; display: flex; float: left; text-align: center;">
...
</div>

Anyway, should be able to figure something out I hope — I’m no CSS wizard — but wanted to flag it as a possible breaking change that might not have been intended.

Showing 1 - 50 of 368 results

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies