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.
- James Miller asked 3 years ago
- last active 3 years ago
Hi, I’m looking for some pointers on how to implement the following:
- User draws a selection on the chart (similar to rubber band modifier)
- Annotation is drawn on the chart conforming to the users selection
- Annotation is fixed relative to the data point (e.g. will scroll is the chart is panned etc)
Many thanks
- Henrique Rodrigues asked 3 years ago
- last active 2 years ago
I’m looking for some direction on how to implement a modifier that reacts to interaction (mouse up/down etc) with a charts axis
- User clicks on axis
- Provide callback for side effect when clicked
Thanks
- Henrique Rodrigues asked 3 years ago
- last active 3 years ago
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??
- Arun Surendran asked 3 years ago
- last active 3 years ago
Hi,
I am getting console error and page is crashing and reloading the page.
- Arun Surendran asked 3 years ago
- last active 2 years ago
I was used fifo(scrolling) chart in wpf scichart.
But.
I could not found fifo option in js scichart.
Maybe because there is no fifo option, if there is a lot of data accumulated, the chart is slow and cannot be used.
Can I use fifo(scrolling) chart in js scichart?
- 동윤 이 asked 3 years ago
- last active 3 years ago
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.
- Dylan Krupp asked 3 years ago
- last active 3 years ago
Hi,
On RubberBandXyZoomModifier i am using the YDirection zoom. When i click and drag out side the area of sci chart and leave the mouse click. Then again click inside the scichart, it showing the selection area and not disappear after new selection of zoom or pan the chart. the selected area is still showing as selected.
- Arun Surendran asked 3 years ago
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
- Michael Hollas asked 3 years ago
- last active 2 years ago
Hi there,
I would like to use a column chart with labels. Our client tends to use really long names for these labels, so I was wondering if it is possible that these labels wrap. I could find no property in the docs or source that achieves this. The attached screenshot shows the current (and undesired) rendering.
The current behavior seems to be that labels in between are hidden when longer labels overlap them. Is this a configurable property? In our case, the labels may never be hidden.
Kind regards,
Tim Havinga
- Tim Havinga asked 3 years ago
- last active 3 years ago
Hi,
Unsorted xValues is possible on SCI Chart? I tried with dataIsSortedInX: false and isSorted: false on dataSeries, But its not showing the correct range.
eg:
new XyDataSeries(wasmContext, {
dataSeriesName: "Line Series",
xValues: [0,10,20,13,54,15,26,17,18,19],
yValues: [0,1,5,1,20,5,1,8,9,3],
dataIsSortedInX: false
});
- Arun Surendran asked 3 years ago
- last active 3 years ago
Hi Scichart Team,
RenderableSeries Hit-Test still having some issues. I saw that the bug on your board is already closed state and my last comments are missed on the bug. So i am adding the same here.
https://www.scichart.com/questions/js/renderableseries-hit-test-not-working-as-expected
Can you please check the video and the code. Only change i have done on the Example is the data values are updated. On the video you can saw the clicking outside for some area Hit is showing, some area miss is showing, and clicking on the lines or point also showing the same. Let me know you need any more inputs from my side.
- Arun Surendran asked 3 years ago
- last active 2 years ago
How do I insert gaps in a heatmap series? At the moment null values seem to show as either the max value colour or the min value colour.
- Henrique Rodrigues asked 3 years ago
- last active 3 years ago
Scenario: user selects an area of a heatmap chart using a box annotation via a mouse drag.
I have created a custom modifier to draw the box annotation. I’ve used this as the basis: SimpleDataPointSelectionModifier.ts
My question is: how to I get the X axis start + end values and the Y axis start + end values based on the area of the annotation/mouse coordinates.
Thanks
- Henrique Rodrigues asked 3 years ago
- last active 3 years ago
It’s possible to implements something like WPF ‘s SciChartOverview in SciChart JS ?
- Gustavo Reis asked 3 years ago
- last active 3 years ago
After moving from version: 1.4.1575 to version: 1.4.1611 we are seeing the the Cursor modifier replicating across all the charts in our dashboard. Obviously this is not desirable. I’ve attached screenshots to show this.
Please could you advise?
- Henrique Rodrigues asked 3 years ago
Hello, I`d like to ask u about cursor view. As default cursor I want use crosshair and as move grabbing as showed in attachment. How can I do that ?
- test11111 123 asked 3 years ago
- last active 2 years ago
Hi
Is there any way to Create an image (as png) of an scichart surface and store it in Clipboard for later use in javascript?
- Ferdinand Staudhammer asked 3 years ago
- last active 3 years ago
Hi there,
Do you support colour legend for Heatmap in Java Script? Can you please point me to where it is documented if you do.
Thank you
- Ihab Skafi asked 3 years ago
- last active 3 years ago
Cant display any chart when init by SciChartSurface.create(HtmlElementId), how can I fix it ?
- test11111 123 asked 3 years ago
- last active 3 years ago
i cant draw any chart.
just this ..
i used demo code
- YEJI YOON asked 3 years ago
- last active 3 years ago
Hello! Can you help me with creating footprint chart. In documentation and examples I didn`t find way how to do that. How can I create it ?
- test11111 123 asked 3 years ago
- last active 2 years ago
Hi,
I’m trying to implement a market footprint with SciChart framework, I mean is possible create like a plugin for implement in the framework?
My idea was set body color of all the candles invisible and than for every candle set two volume series in horizontal like in the image.
- John Lepre asked 3 years ago
- last active 5 months ago
I think this question has come up before, but is it possible to render a logarithmic axis in the JS library? If not, is this on the roadmap (and when)?
- Paul Crouch asked 3 years ago
- last active 3 years ago
Is there a way to update the entire data series instead of a particular y value at an index ?
https://www.scichart.com/documentation/js/current/typedoc/classes/xydataseries.html#update
- vamsi kunchaparthi asked 3 years ago
- last active 3 years ago
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.
- vamsi kunchaparthi asked 3 years ago
- last active 3 years ago
Hello
I have a use case where annotations are draggable and on drag i am making api call to fetch updated data and resetting the the DataSeries.
I am clearing annotations once i get updated data but it is just clearing the svg annotation nodes from dom but not the hit test context (point focus) on wasm side.
Please look at the attached screenshot and suggest something
Thanks
Vamsi
- vamsi kunchaparthi asked 3 years ago
- last active 3 years ago
I wanted to use a stepline-box chart in my javascript applications for ELD, I failed to find out a similar box graph in the javascript chart section. The graph I have really looking for is attached here.
Could anyone please help me out?
- tomin thomas asked 3 years ago
- last active 3 years ago
I want to build a Stacked Column Side by Side Chart by referring to the reference here.
My code:
export class OutputAmplitudeComponent implements OnInit, OnDestroy {
yValues:any;
x:any;
constructor(@Inject(SETTING_SERVICE) private settingService: SettingService, private cdr: ChangeDetectorRef) {}
ngOnInit() {
this.settingService.registerSetting(OutputAmpSetting).pipe(takeUntil(this.ngUnsubAmplitudeData)).subscribe(setting => {
const OutputAmplitudeData = setting.value;
for (let x = 1; x < this.numberOfOutput; x++) {
if (this.OutputMode === 'Voltage') {
if (phaseNum === 1) {
this.ampSource.data[x-1].voltage1 = OutputAmplitudeData[x];
} else if (phaseNum === 2) {
this.ampSource.data[x-1].voltage2 = OutputAmplitudeData[x];
} else if (phaseNum === 3) {
this.ampSource.data[x-1].voltage3 = OutputAmplitudeData[x];
}
} else if (this.OutputMode === 'Current') {
if (phaseNum === 1) {
this.ampSource.data[x-1].current1 = OutputAmplitudeData[x];
} else if (phaseNum === 2) {
this.ampSource.data[x-1].current2 = OutputAmplitudeData[x];
} else if (phaseNum === 3) {
this.ampSource.data[x-1].current3 = OutputAmplitudeData[x];
}
}
this.sciChartInit();
}
});
}
xValues = this.x;
phase1:number = parseFloat(this.ampSource.data[this.x-1].voltage1);
phase2:number = parseFloat(this.ampSource.data[this.x-1].voltage2);
phase3:number = parseFloat(this.ampSource.data[this.x-1].voltage3);
async sciChartInit() {
const { wasmContext, sciChartSurface } = await SciChartSurface.create("chart");
const xAxis = new NumericAxis(wasmContext);
xAxis.labelProvider.numericFormat = ENumericFormat.Decimal_0;
sciChartSurface.xAxes.add(xAxis);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.yAxes.add(yAxis);
const dataSeries1 = new XyDataSeries(wasmContext, { xValues:this.x, yValues:this.phase1, dataSeriesName: "Phase 1" });
const dataSeries2 = new XyDataSeries(wasmContext, { xValues:this.x, yValues:this.phase2, dataSeriesName: "Phase 2" });
const dataSeries3 = new XyDataSeries(wasmContext, { xValues:this.x, yValues:this.phase3, dataSeriesName: "Phase 3" });
const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
rendSeries1.fill = "#dc443f";
rendSeries1.stroke = "black";
rendSeries1.strokeThickness = 1;
rendSeries1.dataSeries = dataSeries1;
rendSeries1.rolloverModifierProps.markerColor = "#b83735";
rendSeries1.rolloverModifierProps.tooltipColor = "#dc443f";
rendSeries1.rolloverModifierProps.tooltipTextColor = "#fff";
rendSeries1.stackedGroupId = "one";
const rendSeries2 = new StackedColumnRenderableSeries(wasmContext);
rendSeries2.fill = "#aad34f";
rendSeries2.stroke = "black";
rendSeries2.strokeThickness = 1;
rendSeries2.dataSeries = dataSeries2;
rendSeries2.rolloverModifierProps.markerColor = "#87a73e";
rendSeries2.rolloverModifierProps.tooltipColor = "#aad34f";
rendSeries2.rolloverModifierProps.tooltipTextColor = "#000";
rendSeries2.stackedGroupId = "two";
const rendSeries3 = new StackedColumnRenderableSeries(wasmContext);
rendSeries3.fill = "#8562b4";
rendSeries3.stroke = "black";
rendSeries3.strokeThickness = 1;
rendSeries3.dataSeries = dataSeries3;
rendSeries3.rolloverModifierProps.markerColor = "#715195";
rendSeries3.rolloverModifierProps.tooltipColor = "#8562b4";
rendSeries3.rolloverModifierProps.tooltipTextColor = "#fff";
rendSeries3.stackedGroupId = "three";
const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
verticallyStackedColumnCollection.dataPointWidth = 0.5;
verticallyStackedColumnCollection.add(rendSeries1, rendSeries2, rendSeries3);
verticallyStackedColumnCollection.animation = new ScaleAnimation({ duration: 1000, fadeEffect: true });
sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection);
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier());
sciChartSurface.zoomExtents();
sciChartSurface.chartModifiers.add(new RolloverModifier({ rolloverLineStroke: "#228B22" }));
sciChartSurface.chartModifiers.add(
new LegendModifier({
placement: ELegendPlacement.TopRight,
orientation: ELegendOrientation.Horizontal,
showLegend: true,
showCheckboxes: true,
showSeriesMarkers: true
})
);
return { wasmContext, sciChartSurface };
} }
.
Error:
ERROR in output-amplitude.component.ts: - error TS2322: Type 'number' is not assignable to type 'number[]'.
const dataSeries1 = new XyDataSeries(wasmContext, { xValues:this.x, yValues:this.phase1, dataSeriesName: "Phase 1" });
node_modules/scichart/Charting/Model/XyDataSeries.d.ts:
yValues?: number[];
The expected type comes from property 'yValues' which is declared here on type 'IXyDataSeriesOptions'
.
.
I tried to parse the variables to numbers by using parseFloat in phase1 to phase3 but it did not solve error in yValues.
Any idea on the solution?
- ETS Ong asked 3 years ago
- last active 3 years ago
Hi there,
I am using scichart on a web application to plot 4 different plots simultaneously ( three using FastBandRenderableSeries and one using UniformHeatmapDataSeries).
When running on local environment everything works as expected (browser is very responsive) but when I push it to the production website it lags and my computer seems to be having hard time with the browser. I am still debugging it but thought to ask in case you have any recommendations ? Do you have performance related tips you can share?
I was reading on other posts about SciChartSurface.RenderPriority but it does not seem to exist in JS Scichart. Is there a workaround you can suggest?
Thank you,
- Ihab Skafi asked 3 years ago
- last active 3 years ago
I want to build a Stacked Column Side by Side Chart by referring to the reference here.
However, the program could not enter line #41. It just stuck there and the column chart could not be shown.
My code:
export class OutputAmplitudeComponent implements OnInit, OnDestroy {
constructor(@Inject(SETTING_SERVICE) private settingService: SettingService, private cdr: ChangeDetectorRef) {}
ngOnInit() {
this.settingService.registerSetting(HarmonicAmpSetting).pipe(takeUntil(this.ngUnsubHarmonicData)).subscribe(setting => {
const OutputAmplitudeData = setting.value;
for (let x = 1; x < this.numberOfOutput; x++) {
if (this.OutputMode === 'Voltage') {
if (phaseNum === 1) {
this.ampSource.data[x-1].voltage1 = OutputAmplitudeData[x];
} else if (phaseNum === 2) {
this.ampSource.data[x-1].voltage2 = OutputAmplitudeData[x];
} else if (phaseNum === 3) {
this.ampSource.data[x-1].voltage3 = OutputAmplitudeData[x];
}
} else if (this.OutputMode === 'Current') {
if (phaseNum === 1) {
this.ampSource.data[x-1].current1 = OutputAmplitudeData[x];
} else if (phaseNum === 2) {
this.ampSource.data[x-1].current2 = OutputAmplitudeData[x];
} else if (phaseNum === 3) {
this.ampSource.data[x-1].current3 = OutputAmplitudeData[x];
}
}
this.sciChartInit(x);
}
});
}
async sciChartInit(x:number) {
var phase1 = parseFloat(this.ampSource.data[x-1].voltage1);
var phase2 = parseFloat(this.ampSource.data[x-1].voltage2);
var phase3 = parseFloat(this.ampSource.data[x-1].voltage3);
//stuck here
const { wasmContext, sciChartSurface } = await SciChartSurface.create("chart");
const xAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.yAxes.add(yAxis);
const dataSeries1 = new XyDataSeries(wasmContext, { xValues:[x], yValues:[phase1], dataSeriesName: "Phase 1" });
const dataSeries2 = new XyDataSeries(wasmContext, { xValues:[x], yValues:[phase2], dataSeriesName: "Phase 2" });
const dataSeries3 = new XyDataSeries(wasmContext, { xValues:[x], yValues:[phase3], dataSeriesName: "Phase 3" });
const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
rendSeries1.fill = "#dc443f";
rendSeries1.stroke = "black";
rendSeries1.strokeThickness = 1;
rendSeries1.dataSeries = dataSeries1;
rendSeries1.rolloverModifierProps.markerColor = "#b83735";
rendSeries1.rolloverModifierProps.tooltipColor = "#dc443f";
rendSeries1.rolloverModifierProps.tooltipTextColor = "#fff";
rendSeries1.stackedGroupId = "one";
const rendSeries2 = new StackedColumnRenderableSeries(wasmContext);
rendSeries2.fill = "#aad34f";
rendSeries2.stroke = "black";
rendSeries2.strokeThickness = 1;
rendSeries2.dataSeries = dataSeries2;
rendSeries2.rolloverModifierProps.markerColor = "#87a73e";
rendSeries2.rolloverModifierProps.tooltipColor = "#aad34f";
rendSeries2.rolloverModifierProps.tooltipTextColor = "#000";
rendSeries2.stackedGroupId = "two";
const rendSeries3 = new StackedColumnRenderableSeries(wasmContext);
rendSeries3.fill = "#8562b4";
rendSeries3.stroke = "black";
rendSeries3.strokeThickness = 1;
rendSeries3.dataSeries = dataSeries3;
rendSeries3.rolloverModifierProps.markerColor = "#715195";
rendSeries3.rolloverModifierProps.tooltipColor = "#8562b4";
rendSeries3.rolloverModifierProps.tooltipTextColor = "#fff";
rendSeries3.stackedGroupId = "three";
const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
verticallyStackedColumnCollection.dataPointWidth = 0.5;
verticallyStackedColumnCollection.add(rendSeries1, rendSeries2, rendSeries3);
verticallyStackedColumnCollection.animation = new ScaleAnimation({ duration: 1000, fadeEffect: true });
sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection);
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier());
sciChartSurface.zoomExtents();
sciChartSurface.chartModifiers.add(new RolloverModifier({ rolloverLineStroke: "#228B22" }));
sciChartSurface.chartModifiers.add(
new LegendModifier({
placement: ELegendPlacement.TopRight,
orientation: ELegendOrientation.Horizontal,
showLegend: true,
showCheckboxes: true,
showSeriesMarkers: true
})
);
return { wasmContext, sciChartSurface };
} }
.
.
The data needed in the chart is identified and no error is shown.
Any idea on the solution?
Thank you.
- ETS Ong asked 3 years ago
- last active 3 years ago
I want to build a column chart but I got the following error:
ERROR TypeError: Cannot read property ‘append’ of undefined
The error happened in line #42.
My code:
export class OutputAmplitudeComponent implements OnInit, OnDestroy {
constructor(@Inject(SETTING_SERVICE) private settingService: SettingService, private cdr: ChangeDetectorRef) {}
ngOnInit() {
this.settingService.registerSetting(HarmonicAmpSetting).pipe(takeUntil(this.ngUnsubHarmonicData)).subscribe(setting => {
const OutputAmplitudeData = setting.value;
for (let x = 1; x < this.numberOfOutput; x++) {
if (this.OutputMode === 'Voltage') {
if (phaseNum === 1) {
this.ampSource.data[x-1].voltage1 = OutputAmplitudeData[x];
} else if (phaseNum === 2) {
this.ampSource.data[x-1].voltage2 = OutputAmplitudeData[x];
} else if (phaseNum === 3) {
this.ampSource.data[x-1].voltage3 = OutputAmplitudeData[x];
}
} else if (this.OutputMode === 'Current') {
if (phaseNum === 1) {
this.ampSource.data[x-1].current1 = OutputAmplitudeData[x];
} else if (phaseNum === 2) {
this.ampSource.data[x-1].current2 = OutputAmplitudeData[x];
} else if (phaseNum === 3) {
this.ampSource.data[x-1].current3 = OutputAmplitudeData[x];
}
}
}
this.updateData();
});
this.sciChartInit();
}
updateData(){
var phaseNum1 = [];
var xData = [];
for (let x = 1; x < this.numberOfOutput; x++) {
if (this.ampSource.data != null && this.ampSource.data[x-1] != null) {
phaseNum1[x - 1] = parseFloat(this.ampSource.data[x - 1].voltage1);
xData[x - 1] = x;
if (!isNaN(phaseNum1[x - 1])) {
this.dataSeries1.append(x,x);
} else {
console.log("No num");
}
}
}
}
async sciChartInit() {
const { wasmContext, sciChartSurface } = await SciChartSurface.create("chart");
var phaseNum1 = [];
var xData = [];
this.dataSeries1 = new XyDataSeries(wasmContext);
for (let x = 1; x < this.numberOfOutput; x++) {
this.dataSeries1.append(x, x);
}
const xAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.yAxes.add(yAxis);
const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
rendSeries1.fill = "#dc443f";
rendSeries1.stroke = "green";
rendSeries1.strokeThickness = 1;
rendSeries1.dataSeries = this.dataSeries1;
rendSeries1.stackedGroupId = "one";
const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
verticallyStackedColumnCollection.dataPointWidth = 0.5;
verticallyStackedColumnCollection.add(rendSeries1);
verticallyStackedColumnCollection.animation = new ScaleAnimation({ duration: 1000, fadeEffect: true });
sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection);
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier());
sciChartSurface.zoomExtents();
sciChartSurface.chartModifiers.add(
new LegendModifier({
placement: ELegendPlacement.TopRight,
orientation: ELegendOrientation.Horizontal,
showLegend: true,
showCheckboxes: true,
showSeriesMarkers: true
})
);
return { wasmContext, sciChartSurface };
}}
I don’t understand what is undefined and why.
Thank you.
- ETS Ong asked 3 years ago
- last active 3 years ago
I am adding a LegendModifier to display legends for my chart as below:
_sciChartSurface.chartModifiers.add(new SciChart.LegendModifier({ showCheckboxes: true }));
My legend currently looks like the below, with very poor legend visibility:
![enter image description here][1]
I want to know how to set this legend to be opaque so that the labels may be seen clearly. What would be event better would be to just have a constant class for my legend collection (perhaps .sciChartLegendsContainer or whatever) so that I can apply my own css styling myself, without having to hack around with javascript.
Thanks
- Malcolm Geddes asked 3 years ago
- last active 3 years ago
Hi,
I am trying to get my chart to scroll together with my other HTML elements but have not been successful. Referring to the screenshot attached, if I were to disable the position:absolute style the chart is then able to scroll with the HTML elements if not, whenever I scroll the other HTML elements would scroll but the Chart will stay in its position.
Is there property that I can set on the chart to disable the absolute position?
- yeung weng thong asked 3 years ago
- last active 3 years ago
It’s impossible to zoom a candlestick chart (other types as well) on mobile browsers & WebViews.
I’m trying to use pinch-to-zoom with my fingers on chart, but it doesn’t react on it. Only sliding on the left & right is possible.
I’ve even tried demo from documentation:
https://demo.scichart.com/javascript-realtime-ticking-stock-charts
The same is with my chart as well
How can I fix it?
Thank you
- Roman Zio asked 3 years ago
- last active 3 years ago
When I’m viewing a chart from mobile browser, quality of graphics is very low.
I can see pixels and some blurred graphics on mobile browsers. But it’s completely ok on the desktop browsers.
I reproduced it with an official example:
https://demo.scichart.com/javascript-realtime-ticking-stock-charts
- Roman Zio asked 3 years ago
- last active 1 year ago
Dear team. We have a need to draw footprint chart, but your library didnt’t have opportunity to draw it. It will be good if you help us with recommendations in which direction we should move to build it. Thanks you a lot !
- Ihor khmarskiy asked 3 years ago
- last active 9 months ago
I am having problem instantiating SciChart.js within a specific project and was hoping you might be able to help. To provide context I can run SciChart fine in simple projects and I suspect that I have a webpack issue.
When running a simple graph instantiation such as –
import React, { useEffect } from "react";
import ReactDOM from "react-dom";
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
export function MipsGraph(props) {
useEffect(() => {
initSciChart();
});
return (
<div id="depthGraph" style={{height: "100%"}} ></div>
);
}
async function initSciChart() {
const { sciChartSurface, wasmContext } = await SciChartSurface.create("depthGraph");
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);
}
I see the following error
Uncaught (in promise) RuntimeError: abort(TypeError:
WebAssembly.instantiate(): Import #0 module=”env” error: module is not
an object or function). Build with -s ASSERTIONS=1 for more info.
and the warning –
wasm streaming compile failed: TypeError: WebAssembly.instantiate():
Import #0 module=”env” error: module is not an object or function
The warning is raised at line 7544 (after pretty print in chrome dev tools) of scichart2d.js?formatted at a line calling WebAssembly.instantiateStreaming(e,d). both e and d have values.
Debugging originally led me to believe that there was an issue finding the scichart2d.wasm file however network traffic clearly shows the file being fetched.
Any ideas?
- Paul Hodgson asked 3 years ago
- last active 3 years ago
Hi,
Our website is running on a web hosting service supported by the university. To work with the SciChart JS, do we have to install the npm and configure it accordingly? If so, we probably have to contact IT department for assistance, since we don’t have permission to do so.
Please advise. Thanks.
- Gang Xu asked 3 years ago
- last active 9 months ago
Hello,
How can i convert my data to Y coordinate value in OhlsSeries?
Please advise. Thanks.
- Artem Smirnov asked 3 years ago
- last active 3 years ago
I am wondering if there may be some guidance on how to configure the styles for the SciChart.js chart instance in a React application to be able to handle dynamic changes to the height value.
The scenario is that the chart and wasm context are being saved in refs, so that the component the chart exists within does not rerender. Data is being consumed via a web socket, and streaming realtime data.
All that is well and good, but trying to implement a new feature request where the height of the chart changes dynamically, similar to an accordion style where the chart may have a full view, a split view, or no view (92vh, 46vh, 0vh)
I am finding that my css styles are not applying, or frustratingly will apply seemingly at random and other times not apply even though the underlying code remains the same. I tried to override, or at least alter, the position absolute styles of the canvas, by wrapping it in a parent element with position relative, which works to keep the height and width of the chart as desired, but the aspect ratio seems to falter and the chart axes are blurred and illegible.
I’m sure this would be a great instance of a picture says a 1000 words, and I am nearing a 1000 words. Will try to attach a codepen/ example that demonstrates the issue I am experiencing.
If there are any tips or tricks you would recommend please advise
- James Miller asked 3 years ago
- last active 3 years ago
I have been trying to integrate Scichart JS in my Ionic 5 (Capacitor) application, but didn’t get succeed on that. I really need help on that
- Subham Dandapat asked 3 years ago
- last active 3 years ago
Hi!
For example, I try to draw candles in yAxis visible range from 0.0001 to 0.00014842, and when I zoom, it switches to the visible range from 1 to -1, collapsing my candles.
Please, help to solve this problem.
- Artem Smirnov asked 3 years ago
- last active 3 years ago
I want to use my custom image as a background for SciChart js.
I tried to put background-image to body of the page.
Then I enabled transparent background via:
sciChartSurface.backgroundCompletelyTransparentEnabled = true;
But it doesn’t work. It does nothing.
Then I tried to put transparent background to SciChart:
sciChartSurface.background = "#00000000";
But it doesn’t work as well. Chart completely disappears in this case.
How can I put my image as a background for SciChart?
- Roman Zye asked 3 years ago
- last active 3 years ago
I have been working with the new Overview Chart feature available in the new 2.0.0-beta.2084 release, and ran into an issue where I can remove lines from the overview surface no problem, but then I always receive an error whenever I try to add one.
I was just wondering if there is a recommended flow for when a parent chart’s renderable series array has traces added or removed. One thing I did try to circumvent this issue was to delete the old overview and add a new one, but I receive either a separate error or the overview would draw without any traces.
I have attached a file with example code that should display the error I receive when you add a line to an overview component. I have also attached an image of the error that appears in the console.
- Drew Afshari asked 3 years ago
- last active 3 years ago
Is it possible to display the values always on the chart.
- Arun Surendran asked 3 years ago
- last active 3 years ago
Is it possible to add the text to the chart and display it to the chart?
Please see the attached image. In our application its a realtime chart. need to add the text based on x axis. it should be moved based on zoom and pan.
- Arun Surendran asked 3 years ago
- last active 3 years ago
I need to set VerticalLineAnnotations without a label.
My setting is:
const verticalLineAnnotation = new VerticalLineAnnotation({
stroke: "ff2626",
strokeThickness: 3,
x1: -1,
showLabel: false,
isEditable: true,
isHidden: true
});
When the user needs the annotation the VerticalLineAnnotation is made visible by setting isHidden = false. After setting it to false an exception is thrown with following content: “TypeError: Cannot read properties of undefined (reading ‘left’)”.
- René Völkel asked 3 years ago
- last active 3 years ago
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.
- Christy Lott asked 3 years ago
- last active 2 years ago