SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

0 votes
3k views

Some users have reported an error when importing SciChart.js into a TypeScript or JavaScript application:

TS1261: Already included file name ‘C:...\SciChartSurface.d.ts’ differs from file name ‘C:/…/node_modules/scichart/charting/
Visuals/Axis/SciChartSurface.d.ts’ only in casing.

Solution below…

1 vote
2k views

Hi Andrew:

It’s me again.

Does SciChart.js support Vue.js 2.0 or even 3.0 ?

Will there be any Vue templates in the future ?

Best Regards

Yen Wen

1 vote
2k views

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.

  • Vita Bubko asked 1 year ago
  • last active 12 months ago
1 vote
2k views

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

0 votes
2k views

Do you have any examples with configurating sci chart component in asp.mvc project. Ideally I’d not want to use any of the node.js pipeline and I just want to add set of javascript files to my project.

1 vote
1k views

Working with SciChart/React/Webpack/Babel.

The Webpack Bundle Analyser shows that SciChart accounts for a massive chunk of the bundle’s size.

It is even more pronounced with the default settings, because SciChart uses the crypto package, which is widely known to introduce significant bloat and duplication, shown in the screenshot. Using Webpack to specify the following removes this bloat, and seems to still work, but it would be good to know the implications of including this config:

node: {
fs: "empty",
crypto: false,
}

Screenshots attached, showing the bundle analysis with and without this additional config.

0 votes
1k views

Hi all,

I have another question about SciChart.js, I hope someone can teach me.

First, please download this video

This chart in video is made by d3.js, I hope I can use SciChart.js to make the same features,
please watch from 7 second to the end, when I click the mouse and move to the right direction, then click mouse again,
the section from first click to the second click will make different color, someone can teach me how to do that

PS: English is not my mother language, I wish you all can understand what I mean, Please download the video and watch, thanks.

1 vote
1k views

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.
0 votes
1k views

Hi,

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

0 votes
1k views

Hello.

The graph is automatically stretched in width. How to do the same in height?

Video

0 votes
1k views

Hello!

Tell me what I’m doing wrong?
The error does not always appear (floating error).

enter image description here

In my code, along the stack, it will go to your product

enter image description here

1 vote
1k views

Hi all,

Today, I follow the Tutorial 01, but I can not set up the SciChart.js project,
I am sure that I do the same step like Tutorial,
some one can help me to realize the error messages?
Thanks a lot.

PS:error messages is attached file

Sincerely,

Alec

0 votes
972 views

Hi there,

I got a error message, please tell me what’s wrong about my code ?
Please check the image, thank

Best Regards.
Yen Wen

0 votes
969 views

Hi,

we have recently bought Bundle licenses to be able to use SciChart JS. We are non-profit and make in-house web-applications.
I want to migrate to it asap but need urgent clarification on the licensing. There is only 1 domain allowed per developer. This seems strange to me because we run multiple micro-UIs under different domains. We also have dev & test environments. Do we need an extra license for all of these?

Please clarify. We are very happy with SciChart but this would be a major problem for us.

1 vote
950 views

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

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

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

0 votes
950 views

Hello!

What do these warnings mean to me? Do I need to react to them somehow? Maybe they are not always shown, but, for example, in developer mode?

0 votes
0 answers
942 views

Hi, spotted a Typescript issue – the class declaration of SeriesInfo is missing at least two properties – zValue and formattedZValue. Noticed it because my IDE was complaining about their usage. Looking at a comparison of the class declaration and a console log of what actually exists, it looks like a few more might be missing too.

The above properties are also missing from the type docs.

Thanks!
Joe

0 votes
931 views

I’ve been trying to implement the scichart js blazor wrapper in a serverside application. The chart starts to load, but gives the following error:
Failed to load resource: the server responded with a status of 404 () :5001/scichart2d.data:1

it looks like scichart2d.data is in the wrong place, but as far as I can tell it’s where it should be (in wwwroot).

is there something special I need to do in sever side? I can get it working fine in webAssembly Blazor

0 votes
927 views

Hello,
I am trying to make an annotation draggable. I tried setting the isEditable property to true, but nothing happened. I can’t find the right documentation for draggable annotations . My code for creating the Annotation it’s below:

sciChartSurface.annotations.add(new LineAnnotation({
    stroke: "#279B27", strokeThickness: 3,
    xCoordinateMode: ECoordinateMode.DataValue,
    x1: 0,
    x2: 0,
    yCoordinateMode: ECoordinateMode.Relative,
    y1: 0,
    y2: 1,
    isEditable: true,
}));
0 votes
897 views

Hi, I noticed that Heattexture: [object Object] is logged hundreds/thousands of times while interacting with a heatmap. This isn’t my console log, as it is a very simple implementation and there are no logs on my front end, with nothing called Heattexture in my repository.

I’m guessing that this is a leftover console log that needs to be removed, as it occurs in both my development and production Webpack builds.

Most of the time it does not cause any performance issues, but once I did see the heatmap flickering at roughly the same rate of the console log.

Screenshot attached.

Thanks!

0 votes
886 views

On Vertical chart Label overlapping on smaller height. I have tried maxAutoTicks also and on the lower height, it’s getting one error. This error is occurring when the width is 0 sometimes. Can you please check this issues?

0 votes
876 views

Hello,

It’s possible to change the data point instead of a line, put a circle or other something else?

You can check out what I need to change on image below.

https://prnt.sc/w4rffw

Many thanks,

Pedro Cruz

  • Ricardo Diz asked 12 months ago
  • last active 11 months ago
1 vote
875 views

I am getting the alert message on our application and now I got the same message on the https://demo.scichart.com/javascript-line-chart also. It’s not happening all the time. But it’s happening sometimes only on the application.

0 votes
870 views

Hi,

I’ve been following your instructions on linking multiple charts here: https://www.scichart.com/documentation/js/current/webframe.html#Tutorial%2009%20-%20Linking%20Multiple%20Charts.html

I have found that one chart in isolation runs at the full 60fps smoothness, but with each chart that is synchronised, it gets progressively slower until 5+ synced charts, at which point it becomes almost unusable. This is definitely an issue for our use-case, which will require a large number of synchronised charts.

This is currently using uniform heatmap charts only, I haven’t tried it with any others.

The issue occurs with and without data, i.e. a completely empty heatmap.

I also found that if I follow the instructions to the letter (i.e. a full two-directional link, with one chart pushing position changes to the other, and vice-versa), I get “Maximum depth exceeded” errors due to the infinite loop.

Am I doing something wrong? Are you able to recreate this issue?

Thanks
Joe

0 votes
867 views

I would like to change the backgound color of my piechart.

const sciChartPieSurface = await SciChartPieSurface.create(props.chartName);
sciChartPieSurface.applyTheme(new SciChartJSLightTheme());

This code above doesnt change anything.

0 votes
864 views

Hello,

we plan to generate reports containing SciChart charts, so we can re-use the chart components we show in our web-application. We did the same successfully in the past with SciChart for WPF.

So far I didn’t find any special support to generate high quality print output (and printing for js charts in general). Using the web-browsers print function the charts are rendered as bitmaps at screen resolution. In SciChart for WPF you provide a Vector Rendering Plugin which we used for printing (as described here https://support.scichart.com/index.php?/Knowledgebase/Article/View/17263/40).

Is there already support for high quality rendering in SciChart.js or do you have plans for it and maybe a timeline when to expect it?

I found one issue when printing from the example charts (https://demo.scichart.com/javascript-line-chart). After opening with a new browser window, on the first print the page content in the print dialog is most times empty but after reloading (F5) it is apparently always shown. I don’t know yet if this would be an issue when rendering to a PDF which we plan, but I think this should always work at the first time a page is loaded. Tested with current Chrome (88.0.4324.104) and Edge (88.0.705.56).

I wanted to attach a .png screenshot (435 KiB) but it didn’t work (a progress bar runs to 100% but then the file list is still empty tried file selection and drag&drop ). I think the issue should be understandable without a screenshot?

Update
I could add the image using the edit function.

Greetings,

Nils

0 votes
863 views

Vertical Chart and pointMarker points are ploatted on somewhere on the canvas.

0 votes
859 views

RenderableSeries Hit-Test is not working as expected. Some bugs on the the RenderableSeries Hit-Test. Distance between two points are less then its working most of the time and getting the isHit variable getting true. But the distance is high then the lines near to the point only getting the isHit true. I am attaching the image when the red marked area is working fine and the blue marked area not working.

1 vote
847 views

Working on an application that requires toggling between Linear and Logarithmic scales. I am using the JavaScript version of the library, and I see that there is a LogarithmicNumericAxis available in the WPF version but there is not one currently supported in the JS version.

Curious if there were any recommendations on how to go about hand rolling this type of functionality?

The application is doing realtime streaming of data points so need to be able to update existing values as well as handle incoming values.

0 votes
842 views

Hi,

Is it possible to specify that incoming zValues array matrix is an array of columns, instead of an array of rows?

e.g. if I pass this:

[
[1,2,3],
[4,5,6],
[7,8,9]
]

[1,2,3] is the first column, not the first row.

We want to avoid transposing this data manually before passing it to the heatmap, because our data arrives one column at a time via a websocket subscription, and the data is too large to efficiently re-transpose every time.

I can’t see anything in the docs or the code?

Thanks
Joe

0 votes
833 views

Hello guys,

Can you provide an example how to implement scichart on SSR Frameworks like Nuxt or Next.js ? I am trying to understand how i can compile a simple chart using Nuxt, getting the .data/.wasm file but i have problem after building process.

Can you help?

Many thanks

Pedro Cruz

  • Ricardo Diz asked 10 months ago
  • last active 10 months ago
0 votes
823 views

Screenshots attached.

To recreate:

  • Create a chart
  • Add a CursorModifier – default options is fine
  • Either directly remove the modifier using .remove(modifier), or clear all using .clear()

Expected behaviour:
– Should remove the cursor modifier

Actual behaviour with bug:
– Crashes the page

This appears to be an issue with CursorModifier only (out of the 5 or 6 that I’ve tried). Other modifiers work as expected.

Traced the issue to this.parentSurface being undefined in CursorModifier.js, so when onDetach() is called, it errors.

Thanks!
Joe

0 votes
818 views

paletteProvider transparent colour is not working.

I tried with parseColorToUIntArgb(“#ffffff00”) and parseColorToUIntArgb(“#ffffff00”, 0) to replace the colour with transparent. But its not working.

I want ho hide the marker on the chart if the value is less than a limit. Is any other possibility to hide the marker based on value?
can you check the image, i want to show only the yellow marker.
one more error i am getting from typescript
“Type ‘undefined’ is not assignable to type ‘TPointMarkerArgb'”.

0 votes
817 views

Remove the white spaces on the chart when we using drawLabels: false. I am using multiple x-axes and no of x-axis increase the empty white space on the x-axis is also increasing.

0 votes
816 views

I am getting a console error when using isVisible: false to the FastLineRenderableSeries or FastMountainRenderableSeries and CursorModifier together.

  const { wasmContext, sciChartSurface } = await SciChartSurface.create(
    "chart" + this.element
  );
  sciChartSurface.xAxes.add(
    new NumericAxis(wasmContext, { axisAlignment: EAxisAlignment.Top })
  );
  sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
      axisAlignment: EAxisAlignment.Left,
      growBy: new NumberRange(0.4, 0.4)
    })
  );

  const dataSeries = new XyDataSeries(wasmContext);
  const POINTS = 1000;
  const STEP = (3 * Math.PI) / POINTS;
  for (let i = 0; i <= 1000; i++) {
    const k = 1 - i / 2000;
    dataSeries.append(i, Math.sin(i * STEP) * k * 0.7);
  }

  const rendSeries = new FastLineRenderableSeries(wasmContext, {
    dataSeries: dataSeries,
    strokeThickness: 1,
    stroke: "red",
    isVisible: false
  });
  sciChartSurface.renderableSeries.add(rendSeries);
  // sciChartSurface.background = this.color;

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

  // Add CursorModifier behavior
  const cursorModifier = new CursorModifier({
    crosshairStroke: "#ff6600",
    crosshairStrokeThickness: 1,
    tooltipContainerBackground: "#000",
    tooltipTextStroke: "#ff6600",
    showTooltip: true,
    axisLabelsFill: "#b36200",
    axisLabelsStroke: "#fff"
  });
  sciChartSurface.chartModifiers.add(cursorModifier);

  sciChartSurface.zoomExtents();
  return { wasmContext, sciChartSurface };
0 votes
810 views

I am getting a console error when using isVisible: false to the FastLineRenderableSeries or FastMountainRenderableSeries and CursorModifier together.

1 vote
805 views

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?

0 votes
792 views

Multiple instances of sci chart any appearance changes reflecting on other instances. When I changed the background of one instance the same is reflected in the other instance. I have updated with createSingle to resolve this issue, But i am getting one alert when using createSingle.

0 votes
790 views

Hello Scichart team,

it’s possible to rotate yAxis (and put them horizontally), and adding some break lines if I have more than 1 word? Like:

https://prnt.sc/117pk6f

Waiting for feedback.

Many thanks,

Pedro Cruz

0 votes
790 views

Hey guys,

As you already know, I’ve implemented a wrapper of scichart.

In a clear Nuxt project, I can get the scichart.data / scichart.wasm files very well. Have no problems with that at all.

But on my current project, we can’t implement this because some dependency is missing from scichart. And without your code, I really don’t know how to get into it.

The image is on attachments. Can you help us?

Many thanks,

Pedro Cruz

  • Ricardo Diz asked 10 months ago
  • last active 10 months ago
0 votes
786 views

On the vertical chart custom tooltipSvgTemplate seriesInfo isHit returns false always. Its working fine on the normal chart. Can you please check this issue is on verticle chart.

0 votes
764 views

ZoomPanModifier date format charts zoom out continuously then showing NaN on the scale. It happened because the zoom level goes under the invalid date. Can you add the Minimum Zoom/Pan and Maximum Zoom/Pan area to be configured on options?

1 vote
761 views

Hi,

In the documentation I can’t see any way to make a chart surface fill the available space in all directions.

By default, it fills the available horizontal space, but the ratio of width:height remains fixed.

The only example I’ve seen where this is slightly different is this JS example, where the width flexes independently to fit the available space: https://demo.scichart.com/javascript-2d-3d-chart-tenor-curves-example – I’m not sure exactly what part of the code makes this different to the other examples?

My goal is to allow the user to adjust the height and width of any chart themselves by dragging the size of the container div, with the chart surface ideally just filling the space in a ‘dumb’ way, rather than using JS to manually update the chart size during the drag event.

Thanks,
Joe

0 votes
759 views

Hi,

Currently when we scroll the mouse pointer the zoom level is increasing/decreasing and when we click and drag the pan the chart. I want is when we scroll the chart should change the visible range (Pan chart), and clicking and selecting the area need to zoom like RubberBandXyZoomModifier. But I need to zoom only the X axis. Y axis should be the same as before zoom. Is this possible with SCI chart??

0 votes
757 views

I was just going through the tutorial and had my project initializing the graph and drawing a few datapoints. Out of the blue after recently building with no new changes, I’ve been getting hit with the attached message. I’ve even tried deleting the scichart sub-folder within node_modules and reinstalling scichart via npm to no avail.

0 votes
757 views

I was looking over Tutorial 07 – Tooltips and Legends and the Chart Legends API demo, and noticed that the checkboxes and legend font had some styling applied. But, when I implement a legend on my own it uses the default font (or whatever global font style I used) and the default HTML checkbox styling. I was wondering if you had modified the styling using an outside CSS file, if there is an API endpoint for modifying the styling of the legend, or if this is possibly a bug. I did see that there was an applyTheme() method available, but I thought that it might not apply to this situation. I also tried to look through the example code provided for the Chart API Demo, but I couldn’t find anything that pointed one way or the other.

I have attached screenshots of what the legend looks like in the two examples, as well as a screenshot of what the legend looks like when I implement it on my own. I have also included a zip file with the demo application I created.

Thanks,
Drew

0 votes
725 views

If the y axis values are same then the lines are not visible on the chart and the labels are also not visible on the chart. Can you draw the lines on the middle of the chart to get more visible?

async initTrack() {
  const { wasmContext, sciChartSurface } = await SciChartSurface.create(
    "chart" + this.element
  );
  sciChartSurface.xAxes.add(
    new NumericAxis(wasmContext, { axisAlignment: EAxisAlignment.Top })
  );
  sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
      axisAlignment: EAxisAlignment.Left
    })
  );

  const dataSeries = new XyDataSeries(wasmContext);
  for (let i = 0; i <= 1000; i++) {
    dataSeries.append(i, 10);
  }

  const rendSeries = new FastLineRenderableSeries(wasmContext, {
    dataSeries: dataSeries,
    strokeThickness: 1,
    stroke: "red"
  });
  sciChartSurface.renderableSeries.add(rendSeries);
  sciChartSurface.chartModifiers.add(cursorModifier);

  return { wasmContext, sciChartSurface };
}
0 votes
720 views

Hello,

We have multiple sets of data that we’d like to display as a Stacked Column. The problem is that our data is jagged, meaning each series may not have a value for every value on the x-axis (it’s a time series by day).

Is there any way to present this data without having to merge all the x-values in every dataset? These a very large sets and it just does not seem to be efficient to do this.

Thanks!

Chris

0 votes
719 views

pointMarker max and min values marker are cropped when autoRange is enabled. Check the attached image.

1 vote
692 views

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

Showing 1 - 50 of 99 results