We have implemented majorTick to make the x-axis only show the more important time, but we still have some problems that cannot be solved
-
The inter-day tick has been added to the majorTick, but it still often cannot be displayed. We need to display the inter-day tick first, not the last majorTick of the previous day
-
Even though I zoomed in to the enough width, it seems that the label of the cross-day tick is still not displayed. I can’t find the reason.
The following is a schematic video:
https://youtu.be/GklhvOo4dr4
Is there a way to make the specified tick/xValue/index have a higher display priority?
Thank you very much for your help
- chinghung lai asked 2 years ago
The x, y values showing in the tooltip of crosshair are rounded to 1 decimal place. How I can I modify the tooltip to show the actual x, y values? And how can I change the text font size in the tooltip?
- Kelly Chan asked 2 years ago
- last active 2 years ago
I have a live updating chart with multiple traces. After updated SciChart to v3.0.280, I got “Uncaught (in promise) RangeError: Maximum call stack size exceeded” error sometimes when I call XyDataSeries.appendRange(). This error will not be triggered if just initialize the chart and keeps updating the chart data. It seems happening after I modified the visibleRange of x-axis or y-axis. But the error is triggered on the line calling appendRange(). I have no clue for this issue. My codes didn’t change and only updated the SciChart version. Could you find the possible cause of my problem? Please refer to the attached screenshots.
Codes to update the chart data:
UpdateSuspender.using(sciChartSurfaceRef.current, () => {
console.time("Time - Update series");
for (tnum=0; tnum<MAX_TRACE; tnum++) {
traceObj = tracesInfoObj.current[tnum];
if (traceSeries.current[tnum] && traceObj.status === "Active") {
traceSeries.current[tnum]["xyDataSeries"].clear();
switch (traceObj.type) {
case 0:
traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, newSpecData);
break;
case 1:
traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, newMaxHoldData);
break;
case 2:
traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, newMinHoldData);
break;
case 3:
traceSeries.current[tnum]["xyDataSeries"].appendRange(dataX, averageData);
break;
}
}
};
console.timeEnd("Time - Update series");
});
- Quyen Sy asked 1 year ago
- last active 1 year ago
I have a chart with stacked xAxes, and I am trying to calculate the stackedLength of each xAxis base on the total length or width available for the xAxes.
The issue come when I am changing the size of the screen or changing the width of the chart using flex-basis. When I do that, I get the error message in the picture below.
My question is, is there a way for me to listen/subscribe to the width change or get the latest width?
- Nung Khual asked 9 months ago
- last active 9 months ago
Hi, so I need to get the data of an annotation when clicked, I have tried with addEventListener ‘mousedown’ event and it work for most case, but the issue comes when some annotations are overlapping.
codesandbox example: https://codesandbox.io/s/vertically-stacked-axes-forked-smkd8v?file=/src/App.tsx
In the codesandbox example, you will see that M1 and M2 are overlapping, if I were to click on M2, the click event will return both M1 and M2, but I only want M2 to be return since I only click on M2.
I couldn’t make the clicking to work on codesandbox but I’m sure you get the idea. I have tested it on my local and I got that issue.
Please let me know if you got any other question, thank you.
- Nung Khual asked 7 months ago
- last active 7 months ago
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.
- Suzanne Ong asked 5 months ago
- last active 5 months 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
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
Is there any way to provide annotation tooltip onmouseover? Perhaps I can subscribe on surface mouse events and manage visibility and positions on “tooltip” annotations by myself? If so, could you please provide reference to surface mouse events API.
- Sergey Chernyakov asked 2 years ago
- last active 4 months ago
What languages are wrappers for the licensing server in? Where can I get information on what c++ functions to call?
- Ryan Campo asked 2 years ago
- last active 2 years ago
Implementation scenario: multiple polylines are displayed. After clicking the polyline, the name of the polyline is displayed in the icon.
Question: I can get the Series Name through the SeriesSelectionModifier now, but I don’t know how to display the Series Name in the chart when the user clicks a polyline. Is there a corresponding API?
- js scichart asked 1 year ago
- last active 1 year ago
I have a real time updated chart and users can add annotation to the chart. The position of the annotation will be updated with the chart data. I would like to stop updating the annotation position while user dragging the annotation. So I added a flag (e.g. isDragging) to the annotation dragStarted and dragEnded events. The isDragging flag will be set to true in dragStarted and then set to false in dragEnded. I will check this flag before updating the annotation position.
Here’s the problem, the annotation dragStarted event will be triggered when users do panning in the chart. But the dragEnded will not be triggered in this case. It breaks my plan to stop updating the annotation position as the isDragging will be incorrect. Is it a bug that the annotation dragStarted event (but not the dragEnded event) triggered when panning?
- Quyen Sy asked 1 year ago
- last active 1 year ago
Currently, I am creating a line chart and appending a lot of fetched data to the data series. The problem is that I have to recreate the chart when I move to another page that is using the same chart from the previous page. Therefore, I have to fetch the data and append it to the chart data series again.
Is there any way to reuse the chart itself without recreating the whole chart on another page?
- info vcanus asked 11 months ago
- last active 11 months ago
In our app we have a feature by which user can add indicators. These indicators can consist of 2 or a maximum of 4 lines.
We don’t want to render svg tooltips(which setted up by the default) with data for each line, instead of that we get point data and pass it to our app inner service that can render indicator legend.
To prevent default tooltips from being displayed we set for each renderable series of an indicator the following values.
rolloverModifierProps.width = 0; rolloverModifierProps.height = 0;
But of course tooltips are still rendered in the DOM and this leads to performance issues when we have 3 or more indicators of this type.
My question is the following
How we can render only circles svg for rollover modifier and completely dont render svg for tooltips in the DOM?
This is what the indicators look like
- Sergey Chernyakov asked 8 months ago
- last active 8 months ago
Hi,
I am facing another issue with dataLabels in latest version of Scichart. I saw another question with similar is already posted and the fix is released.
Can you check this code.
I tried to reproduce the issue with the vue js example code, codesandbox. But the issues is behaving differently in example code, codesandbox, and my existing project.
codesandbox: https://codesandbox.io/s/scichart-error-6xc6jw?file=/src/index.ts
codesandbox:- Text in the bottom area are displayed and top area no labes are displayed.
I am attaching the vue js file also. Please check the file also, On the example no labels are displayed.
I am attaching the video of my project also, Here the labels are invisible sometimes, sometimes the labels are showing not properly. Video Link: https://drive.google.com/file/d/1vZ0lO5xdmN9VfFGXMaoTPfTgqRytrEAl/view?usp=sharing
- Mathew George asked 6 months ago
- last active 6 months ago
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.
- Mathew George asked 4 months ago
- last active 4 months ago
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.
- Drew Afshari asked 3 years ago
- last active 3 years ago
Do scichart supports microsoft blazor ?
If yes, Any examples available ?
- Abhilash R asked 3 years ago
- last active 2 years ago
Hello
My application environment is on the mobile browser, so we need to switch between [pan] and [rollover]
When I use a button to switch, everything is fine, but when I want to switch with a long press, an exception occurs
Below is my code
initModifier() {
this.partitionList.forEach((obj, idx)=>{
let sciChartSurface = this.sciObj[idx].sciChartSurface;
this.zoomPanModifier[idx] = new ZoomPanModifier();
this.rolloverModifier[idx] = new RolloverModifier({modifierGroup: this.modifierGroupId, showTooltip: false});
this.zoomPanModifier[idx].isEnabled = true;
// 擴增功能
sciChartSurface.chartModifiers.add(
this.zoomPanModifier[idx],
new ZoomExtentsModifier(),
new MouseWheelZoomModifier(),
new PinchZoomModifier(),
);
});
},
switchCross() {
let enablePan = !this.zoomPanModifier[0].isEnabled;
this.partitionList.forEach((obj, idx)=>{
let sciChartSurface = this.sciObj[idx].sciChartSurface;
this.zoomPanModifier[idx].isEnabled = enablePan;
if (enablePan)
sciChartSurface.chartModifiers.removeAt(4);
else
sciChartSurface.chartModifiers.add(this.rolloverModifier[idx]);
});
},
I recorded a video, first use the button to switch, and then long press to switch, you can see the problem I want to narrate from the video, the URL is as follows: https://youtu.be/vJjbLNGS-iM
After the problem occurred, it was expected that touchmove should be [pan], but it became [zoom]
Thanks for your help
- chinghung lai asked 2 years ago
- last active 2 years ago
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?
- Samini Retnam asked 2 years ago
- last active 2 years ago
The project is developed on SciChart JS.
The x axis is date time numeric and y axis is numeric.
There is a option for the user to select the x axis interval. The interval values are 5 Min, 10 Min, 15 Min, 30 Min, 1 Hour, 6 Hour, 12 Hour, Days, Weeks, Months & Years.
When the user the selects a interval in the select option, the x axis should be updated with the selected interval.
For Example, If the user selects the 5 Min in the select option, then the x axis interval should be 5 Min.
For 5 Min X Axis Interval
16-Jan-2023 07:00
16-Jan-2023 07:05
16-Jan-2023 07:10
16-Jan-2023 07:15
16-Jan-2023 07:20
16-Jan-2023 07:25
16-Jan-2023 07:30
For 1 Hour X Axis Interval
16-Jan-2023 07:00
16-Jan-2023 08:00
16-Jan-2023 09:00
16-Jan-2023 10:00
16-Jan-2023 11:00
16-Jan-2023 12:00
16-Jan-2023 13:00
16-Jan-2023 14:00
So let me know how to change the interval in the x axis (date time numeric) based on the selection.
I have attached the zip file which contains the HTML file.
- Leo Leslin asked 1 year ago
- last active 6 months ago
Hello,
tell me please, how can I add such indicators on yAxis. Maybe you have some example on sandbox for JS.
Thank you!
- Yevhenii Krasovskyi asked 10 months ago
- last active 9 months ago
Looking into https://www.scichart.com/documentation/js/current/typedoc/classes/scichartverticalgroup.html I see I can add surfaces to the group, but what about removing them?
I’ve constructed a problematic codepen to show a potential issue:
https://codepen.io/jrfv/full/JjwraLK
Any reason for not being able to remove surfaces from the group?
Thanks!
- João Velasques asked 8 months ago
- last active 7 months ago
Hello, how do I remove the shadow from tooltips, generated by the VerticalSliceModifier?
Thanks!
- Michael Geronimo asked 6 months ago
- last active 6 months ago
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
- Dmytro Smirnov asked 3 months ago
- last active 3 months ago
I am using the MouseWheelZoomModifier and ZoomExtentsModifier on the line chart. Beside double clicking the chart area to Zoom Extents the chart, I would like to add a button outside the chart and this button will trigger the Zoom Extents. Is it possible to do it?
- Kelly Chan asked 2 years ago
- last active 2 years ago
I try to use this exemple on my PC with (nodejs 8.13.0) and i can’t run this app example. I receive this error:
× 「wds」: Invalid configuration object. Webpack has been initialized
using a configuration object that does not match the API schema.configuration.optimization has an unknown property ‘namedModules’.
These properties are valid:object { checkWasmTypes?, chunkIds?, concatenateModules?,
emitOnErrors?, flagIncludedChunks?, innerGraph?, mangleExports?,
mangleWasmImports?, mergeDuplicateChunks?, minimize?, minimizer?,
moduleIds?, noEmitOnErrors?, nodeEnv?, portableRecords?,
providedExports?, realContentHash?, removeAvailableModules?,
removeEmptyChunks?, runtimeChunk?, sideEffects?, splitChunks?,
usedExports? }-> Enables/Disables integrated optimizations. Did you mean optimization.moduleIds: “named” (BREAKING CHANGE since webpack 5)?*
Is there compatiblity problem with nodejs LTS version?
Thans for your response.
- Hochoc Max asked 1 year ago
- last active 1 year ago
I am implementing a heatmap. The data size of the heatmap would be changed. I update the UniformHeatmapDataSeries with the updated zValues according to this post.
There is no problem if I update the UniformHeatmapDataSeries with a larger size zValues array. However, when I update it with a smaller size zValues array, the heatmap width will be decrease (Please refer to my screenshots). How can I keep the heatmap always 100% width?
- Quyen Sy asked 1 year ago
- last active 1 year ago
By following this example to create reusable SciChart component in React:
https://www.scichart.com/documentation/js/current/TutorialReusableReactComponent.html
The chart cannot be created when run in dev mode. But it works well under production mode. I think it’s because React renders components twice in strict mode. It seems that SciChart got problems to create chart with the following logic when running the application in dev mode. Is this true? Or I missed anything?
useEffect(() => {
const chartInitializationPromise = props.initChart(rootElementId).then((initResult) => {
sciChartSurfaceRef.current = initResult.sciChartSurface;
return initResult.sciChartSurface;
});
const performCleanup = () => {
sciChartSurfaceRef.current.delete();
sciChartSurfaceRef.current = undefined;
};
return () => {
// check if chart is already initialized or wait init to finish before deleting it
sciChartSurfaceRef.current ? performCleanup() : chartInitializationPromise.then(performCleanup);
};
}, []);
- Quyen Sy asked 9 months ago
- last active 4 months ago
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!
- Yevhenii Krasovskyi asked 7 months ago
- last active 6 months ago
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?
- pramod butte asked 5 months ago
- last active 1 month ago
When using AutoRange.Once on an axis, I expect the auto ranging to be done exactly once.
If at some point, I change the visible range to match the default one (0 to 10 for numeric axis), the auto range is triggered again.
Happens more if I provide inputs so the user can define a range, and depending on the use case, 0 to 10 is not that uncommon.
Kind of an edge case, but still something that can happen, and is definitely unexpected.
This can be seen happening here https://codepen.io/jrfv/full/xxeqwOd
- João Velasques asked 2 months ago
- last active 1 month ago
Hi
I am running Ubuntu 22.04.
I have done the following:
1. Downloaded licensing tool AppImage
2. chmod +x SciChart-Licensing-Wizard.AppImage
3. ./SciChart-Licensing-Wizard.AppImage
Response:
./SciChart-Licensing-Wizard.AppImage: 9: Syntax error: newline unexpected
Please advise.
Thanks
- Ryan van Jaarsveld asked 2 years ago
- last active 1 year ago
I have a chart that allow users to add one BoxAnnotation and multiple CustomAnnotation (a marker). I got error and failed to drag the BoxAnnotation with the following steps:
Step 1: Call the addMarkerAnnotation() to add a CustomAnnotation
const markerSvgString = '<svg height="26" width="18" xmlns="http://www.w3.org/2000/svg">' +
'<polygon id="SVG_ID" fill="#000" fill-opacity="0.5" stroke="#00fc00" stroke-width="1.5" points="0,12 8,0 16,12 8,24" clip-path="url(#clip_normal)" />' +
'<clipPath id="clip_normal"><use xlink:href="#SVG_ID"/></clipPath>' +
'<text x="5" y="16" fill="#00fc00" font-weight="bold" font-size = "12">MARKER_ID</text>' +
'</svg>';
const deltaSvgString = '<svg height="28" width="28" xmlns="http://www.w3.org/2000/svg">' +
'<polygon id="SVG_ID" fill="#000" fill-opacity="0.5" stroke="#00fc00" stroke-width="1.5" points="0,0 12,24 22,0" clip-path="url(#clip_delta)" />' +
'<clipPath id="clip_delta"><use xlink:href="#SVG_ID"/></clipPath>' +
'<text x="5" y="10" fill="#00fc00" font-weight="bold" font-size="10">MARKER_ID</text>' +
'</svg>';
const addMarkerAnnotation = useCallback((markerId, mode, x1, y1) => {
x1 = parseFloat(x1);
y1 = parseFloat(y1);
if (x1 != null && y1 != null) {
let svgString;
const svgId = "markerSvg_" + markerId;
if (mode.includes("Delta")) {
const compareMarkerKey = mode.replace("Delta ", "");
svgString = deltaSvgString.replace(/MARKER_ID/g, (parseInt(markerId)+1) + "-" + compareMarkerKey);
} else {
svgString = markerSvgString.replace(/MARKER_ID/g, parseInt(markerId)+1);
}
svgString = svgString.replace(/SVG_ID/g, svgId);
markerAnnotations.current[markerId] = new CustomAnnotation({
x1,
y1,
id: markerId,
isEditable: true,
isSelected: true,
verticalAnchorPoint: EVerticalAnchorPoint.Center,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
svgString: svgString
});
sciChartSurfaceRef.current.annotations.add(markerAnnotations.current[markerId]);
reorderMarkers(markerId);
markerAnnotations.current[markerId].dragEnded.handlers.push(() => {
let annotation = markerAnnotations.current[markerId];
let freq = annotation.x1 * FREQ_UNITS.KHZ;
markersInfoSetter.current[markerId](origMarkerInfo => ({...origMarkerInfo, ...{freq: freq.toFixed(numDP.FREQ), power: annotation.y1.toFixed(numDP.POWER)}}));
if (markersInfoObj.current[markerId].mode !== "Fixed") {
getMarkerPeak(markerId, markersInfoObj.current[markerId].trace, annotation.x1 * FREQ_UNITS.GHZ);
}
reorderMarkers(markerId);
});
}
}, [deltaSvgString, markerSvgString, getMarkerPeak, reorderMarkers, numDP]);
Step 2: Call the removeMarkerAnnotation() to remove the CustomAnnotation
const removeMarkerAnnotation = useCallback((markerId) => {
if (markerAnnotations.current[markerId]) {
sciChartSurfaceRef.current.annotations.remove(markerAnnotations.current[markerId]);
markerAnnotations.current[markerId].delete();
markerAnnotations.current[markerId] = null;
}
}, []);
Step 3: Call addTriggerAnnotation() to add a BoxAnnotation
const addTriggerAnnotation = useCallback((x1, x2, y2) => {
x1 = parseFloat(x1);
x2 = parseFloat(x2);
y2 = parseFloat(y2);
if (x1 != null && x2 != null) {
console.log("addTriggerAnnotation: ", x1, x2, triggerAnnotation.current, sciChartSurfaceRef.current.annotations);
if (!triggerAnnotation.current) {
triggerAnnotation.current = new BoxAnnotation({
id: "triggerBox",
fill: "transparent",
stroke: "#93A3B1", //#93A3B1 //#6B818C
strokeThickness: 2,
xCoordinateMode: ECoordinateMode.DataValue,
x1: x1,
x2: x2,
yCoordinateMode: ECoordinateMode.DataValue,
y1: minY,
y2: y2,
isEditable: true,
resizeDirections: EXyDirection.XyDirection,
});
sciChartSurfaceRef.current.annotations.add(triggerAnnotation.current);
triggerAnnotation.current.dragDelta.handlers.push(() => {
triggerAnnotation.current.y1 = minY;
const minX = specSettingsRef.current.start/freqUnits.KHZ;
const maxX = specSettingsRef.current.stop/freqUnits.KHZ;
const maxY = specSettingsRef.current.refLevel;
if (minX != null && maxX != null) {
if (triggerAnnotation.current.x1 < minX) {
triggerAnnotation.current.x1 = minX;
} else if (triggerAnnotation.current.x1 > maxX) {
triggerAnnotation.current.x1 = maxX;
} else if (triggerAnnotation.current.x2 > maxX) {
triggerAnnotation.current.x2 = maxX;
} else if (triggerAnnotation.current.x2 < minX) {
triggerAnnotation.current.x2 = minX;
}
}
if (maxY != null) {
if (triggerAnnotation.current.y2 < minY) {
triggerAnnotation.current.y2 = minY;
} else if (triggerAnnotation.current.y2 > maxY) {
triggerAnnotation.current.y2 = maxY;
}
}
});
triggerAnnotation.current.dragEnded.handlers.push(() => {
const maxX = specSettingsRef.current.stop/freqUnits.KHZ;
const x1 = triggerAnnotation.current.x1;
const x2 = triggerAnnotation.current.x2;
const y2 = triggerAnnotation.current.y2;
if (x1 != null && x2 != null && maxX != null) {
if (x1 > x2) {
triggerAnnotation.current.x1 = x2;
triggerAnnotation.current.x2 = x1;
} else if (x2 < x1) {
triggerAnnotation.current.x1 = x2;
triggerAnnotation.current.x2 = x1;
} else if (x1 === x2) {
if (x2 + xInterval.current <= maxX) {
triggerAnnotation.current.x2 = x2 + xInterval.current;
} else {
triggerAnnotation.current.x1 = x1 - xInterval.current;
}
}
const origStartFreq = parseFloat(triggersRef.current.startFreq);
const origStopFreq = parseFloat(triggersRef.current.stopFreq);
const newStartFreq = parseFloat((triggerAnnotation.current.x1 * freqUnits.KHZ).toFixed(numDP.FREQ));
const newStopFreq = parseFloat((triggerAnnotation.current.x2 * freqUnits.KHZ).toFixed(numDP.FREQ));
if (origStartFreq !== newStartFreq || origStopFreq !== newStopFreq) {
setTriggers(origObj => ({...origObj, ...{
startFreq: newStartFreq,
stopFreq: newStopFreq,
level: parseFloat(y2.toFixed(numDP.POWER)),
}}));
}
}
});
} else {
updateTriggerAnnotation(x1, x2, y2);
}
}
}, [setTriggers, freqUnits.KHZ, numDP.FREQ, numDP.POWER, minY, updateTriggerAnnotation]);
Step 4: Drag the BoxAnnotation. It’s failed to drag the box and got the error “Uncaught TypeError: Cannot read properties of undefined (reading ‘seriesViewRect’)”.
It’s a strange bug as it can only be reproduced with the steps above. With the following steps, I can drag the BoxAnnoation without problem:
Step 1 -> Step 3 -> Step 4
Step 3 -> Step 4
Step 3 -> Step 1 -> Step 2 -> Step 4
- Quyen Sy asked 1 year ago
- last active 1 year ago
I am implementing a heatmap chart and would like to allow users to adjust the color mapping of the heatmap by adding sliders to the heatmap legend (Please refer to the attached screenshot). Does SciChart support color slider for HeatmapLegend?
- Quyen Sy asked 1 year ago
- last active 1 year ago
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.
- Sergio Faura asked 11 months ago
- last active 11 months ago
When I’m using a BoxAnnotation, and it is selected, I can see that the borders are shown expanding past the chart area, on top of the axes.
Ideally they would have the same behaviour as the normal stroke, and keep constrained to the chart area.
Codepen showing the issue: https://codepen.io/jrfv/full/bGzqvoE
Am I missing some configuration to make this work?
Thanks!
- João Velasques asked 6 months ago
- last active 6 months ago
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 3 years ago
- last active 2 years ago
Good day,
I am evaluating the use of scichart.js as a charting tool for our web dashboard in an offline environment. As a way of testing, I am currently trying to deploy the build of demo-create-react-app from the SDK on IIS. The build works if deployed using serve -s build but I get this error when I try to deploy the build on IIS.
I would also like to confirm if Scichart.js can work in an offline environment since I saw in this forum post that SciChart gets the .wasm and .data files from the CDN.
- Yohann Gabrielle Ticzon asked 2 years ago
- last active 2 years ago
I have a bunch of series (XyScatterSeries) that I am using to draw different markers (triangle, circle, cross) based on the data. I also have couple line series too in the chart.
The line series should be displayed in the LegendModifier, but not any of the scatter series.
I tried setting “includeSeries” function here but that didn’t work (typescript kept complaining about it but I kept it and while running the app it didn’t hide the series):
return new LegendModifier({
showCheckboxes: true,
orientation: ELegendOrientation.Vertical,
placement: ELegendPlacement.TopRight,
includeSeries: (series: IRenderableSeries, isIncluded: boolean): void => { return false; },
});
Then I created my own class “MyLegendModifier” deriving from LegendModifier, but that didn’t do anything either.
class MyLegendModifier extends LegendModifier {
constructor(options?: ILegendModifierOptions) {
super(options);
}
includeSeries(series: IRenderableSeries, isIncluded: boolean) {
console.log('includeSeries:', series.id);
if (series.id.startsWith('BUY:') || series.id.startsWith('SELL:')) {
isIncluded = false;
}
super.includeSeries(series, isIncluded);
}
}
Any advise please.
- sachin patel asked 2 years ago
- last active 2 years ago
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?
- eddy trouchaud asked 1 year ago
- last active 1 year ago
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.
- Leo Leslin asked 1 year ago
- last active 1 year ago
I have a use case for a chart, that is a heatmap, which may also contain multiple series drawn on top, with multiple internal axis as well.
I can’t transform the data I receive, because that would be too slow, and it needs to maintain a speedy feeling, even when appending more data.
For this reason, when building the chart, I just flip the axis. The bottom axis is the Y axis, and the left axis it the X axis.
The multiple series that can be added (XyDataSeries), provide one extra axis each, and use one of the main axis.
We can think of them as horizontal or vertical series, depending if they use the main X axis, or the main Y axis.
When hovering over the chart, I want to show a tooltip, that shows for each series, their own axis value.
The issue — The normal CursorModifier, can’t correctly present a tooltip, for this case of mixed horizontal/vertical series. I’m not sure if there are configurations I’m missing, or if it is an actual uncovered edge case, hoping to get an answer on this.
To show what the issue is, and how I’m currently fixing it, please have a look at the codepen I made -> https://codepen.io/jrfv/full/zYMjEzP
Any tips on this, is it something scichart will fix eventually?
- João Velasques asked 10 months ago
- last active 8 months ago
Hi,
Is it possible to toggle the DataLabels dynamically in the chart? Setting some values to true or false like isVisible property.
- Mathew George asked 8 months ago
- last active 8 months ago
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.
- Sebastian Goth asked 6 months ago
- last active 6 months ago
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.
- Sergio Faura asked 3 months ago
- last active 3 months ago
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?
- Jerin Mathew asked 3 years ago
- last active 3 years ago
I have two charts in my app. Is there a way that I can make a rollover tooltip on a heatmap chart and the x visible range updates accordingly on another chart when the cursor moving around on the heatmap?
I had this function in Android version with the method InternalUpdate from CustomHeatmapTooltip which extended from UniformHeatmapTooltip. I wonder if there’s a listener for the tooltip.
Thanks.
- Gang Xu asked 2 years ago
- last active 1 year ago
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;
}
- sachin patel asked 2 years ago
- last active 2 years ago
I have a real-time updated chart with multiple series. Is it possible for me to add a custom annotation to the chart by just providing the x1 value? i.e. The y1 value will be the y value of the data point in certain series with the provided x1 value. It will look like that the annotation will be sticked to the series with a fixed x1 value while the chart is updating.
- Kelly Chan asked 2 years ago
- last active 1 year ago