Hello, help me please.
I have situations when all panels with different graphs are updated and after that all graphs are not displayed. The containers are not equivalent to the previous ones and I need to set up new divs. How can i do this?
- Yevhenii Krasovskyi asked 10 months ago
- last active 9 months ago
Hi, I have an issue where I am trying to create multiple xAxes where one is normal and the rest are horizontally stacked. Then I calculate the stacked length of each stacked axes, but the issue comes when I change the width of the chart or inspect element, which would alter the width of the chart somehow, I got error saying the total width of the stacked axes is bigger than available size.
I have a codesanbox example of it:
https://codesandbox.io/s/scichart-stacked-xaxis-stacked-length-issue-3knt23?file=/src/App.tsx
I am using percentage for the stacked xAxes length and then I added them up to be 100% total, but somehow it is saying that it is more than available size.
So, my question is, how can I listen or get the width/size changes event of the chart/xAxis, so that I can calculate accordingly?
- Nung Khual asked 9 months ago
- last active 9 months ago
Please tell me, is it possible to make sure that there is no empty space between records on those days when there is no trading on the stock exchange? It appears that the X-axis is linear and not transactional. How can I make it transactional?
- Yevhenii Krasovskyi asked 11 months ago
- last active 11 months ago
I have upgraded the SciChart version to v3.2 and tried to use the memory debugging tools. https://www.scichart.com/documentation/js/current/webframe.html#MemoryLeakDebugging.html
Below are few issues I found:
- The example in the Memory Leak Debugging page got typo. It should
import the MemoryUsageHelper instead of MemoryUsageTracker.
import { MemoryUsageTracker } from “scichart”;
MemoryUsageHelper.isMemoryUsageDebugEnabled = true;
- When I turn on the memory debugger, I always got this warning when I
move the crosshair in my chart. Is this expected?
DeletableEntity.js:70 Failed to remove
CursorTooltipSvgAnnotation_42d65afd-b859-4e14-b82d-7cda881cf1eb from
the Object Registry Probably it has been already deleted!
- I also got the warning in point 2 when I try to delete annotation
from the chart. I think it’s because I am trying to do something
like this:
sciChartSurfaceRef.chartModifiers.remove(markerAnnotation);
markerAnnotation.delete();
The warning will be gone if I remove the second line above. Is it true that if I remove an annotation/dataSeries from a chart, I don’t need to remove that annotation/dataSeries manually afterward (i.e. annotation.delete()) ? Also, if I deleted a chart, I don’t need to delete it’s annotation/dataSeries manally, right?
- Quyen Sy asked 8 months ago
- last active 6 months ago
Hi,
I am creating an application where, we fetch data and display it in multiple heatmaps. The user can manipulate the heatmaps with changing colormap or changing ranges on the colormap.
Data from these multiple heatmaps is composited to another chart for visualization.
I was able to get a reference to the series, but adding the series to another chart errors with a message:
Invalid operation in sciChartSurface.attachSeries, this series has already been attached to a SciChartSurface. Please detach it from a SciChartSurface before attaching to another
at BaseRenderableSeries.onAttach (BaseRenderableSeries.js:634:1)
at __webpack_modules__../node_modules/scichart/Charting/Visuals/SciChartSurface.js.SciChartSurface.attachSeries (SciChartSurface.js:1385:1)
of course this means we cannot attach the same series to two different charts, but is there a way around this such as deepcloning?
renderable series: attached image
sample code: attached image
- pramod butte asked 9 months ago
- last active 9 months ago
Hi, I want to create info boxes between xAxis and chart, info box will contain text, but the width/position of the box will be base on the xAxis and should sync with the chart (zoom etc). For example, if xAxis is from 1-100, and the first info box start from 1 to 10, then the width/position of the box should cover from 1-10, and if I zoom between 1-10, then info box should also sync and expand.
So far, I have created it using horizontal stacked xAxes and custom axis layout strategy provided by you. But the issue is that the stacked xAxes are not sync with the chart, for now, to make it seem sync, I am recalculating stacked axis length when zoom. But the issue comes when there should be gap between the info boxes, for example, if xAxis is 1-100 and the first box is 1-10 and the second box is 20-40, then there is a gap of 10 between the first and second. Right now, those gap are filled using empty xAxes, but they are not correct. When there is gap, the position of the boxes are wrong.
- First image is my current implementation of it using custom axis layout and stacked xAxes.
- Second image is how it look when zoomed
- Third image is the gap issue with the current implementation
- Fourth image is how the correct implementation should look like.
Codesanbox example:
https://codesandbox.io/s/scichart-stacked-xaxis-stacked-length-issue-3knt23?file=/src/App.tsx
- Nung Khual asked 9 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
Problem: Error in displaying 2 decimal places on Y axis, the displayed value will be greater than 1.
Requirements: The date displayed on the X axis of my data, and the date displayed on the Y axis are mostly 2 decimal places, but I need to click the broken line to highlight the broken line.
The code is as follows
import { SeriesSelectionModifier } from “scichart/Charting/ChartModifiers/SeriesSelectionModifier”;
import { XyDataSeries } from “scichart/Charting/Model/XyDataSeries”;
import { SciChartJSLightTheme } from “scichart/Charting/Themes/SciChartJSLightTheme”;
import { NumericAxis } from “scichart/Charting/Visuals/Axis/NumericAxis”;
import { EllipsePointMarker } from “scichart/Charting/Visuals/PointMarkers/EllipsePointMarker”;
import { FastLineRenderableSeries } from “scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries”;
import { NumberRange } from “scichart/Core/NumberRange”;
import { EAxisAlignment } from “scichart/types/AxisAlignment”;
import { ELabelAlignment } from “scichart/types/LabelAlignment”;
import { SciChartSurface } from “scichart”;
import {RubberBandXyZoomModifier} from “scichart/Charting/ChartModifiers/RubberBandXyZoomModifier”;
import {MouseWheelZoomModifier} from “scichart/Charting/ChartModifiers/MouseWheelZoomModifier”;
import {ZoomExtentsModifier} from “scichart/Charting/ChartModifiers/ZoomExtentsModifier”;
import { TextLabelProvider } from “scichart/Charting/Visuals/Axis/LabelProvider/TextLabelProvider”;
import { Thickness } from “scichart/Core/Thickness”;
const dataData = [
“2022-12-21 13:12:45”,
“2022-12-21 12:22:46”,
“2022-12-21 11:32:47”,
“2022-12-21 10:42:41”,
“2022-12-21 09:52:38”,
“2022-12-21 09:02:32”,
“2022-12-21 08:12:28”,
“2022-12-21 07:22:26”,
“2022-12-21 06:32:26”,
“2022-12-21 02:32:17”,
“2022-12-21 01:42:20”,
“2022-12-21 00:52:12”,
“2022-12-21 00:02:15”,
“2022-12-20 23:12:15”,
“2022-12-20 22:22:17”,
“2022-12-20 21:32:44”,
“2022-12-20 20:42:41”,
“2022-12-20 19:52:43”,
“2022-12-20 19:02:42”,
“2022-12-20 18:12:44”,
“2022-12-20 17:22:42”,
“2022-12-20 16:32:37”,
“2022-12-20 15:42:34”,
“2022-12-20 14:52:34”,
“2022-12-20 14:02:35”,
“2022-12-20 13:12:29”,
“2022-12-20 12:24:37”,
“2022-12-20 10:42:37”,
“2022-12-20 09:52:37”,
“2022-12-20 09:02:19”,
“2022-12-20 04:52:00”,
“2022-12-20 04:02:29”,
“2022-12-20 03:12:29”,
“2022-12-20 02:22:30”,
“2022-12-20 01:32:31”,
“2022-12-20 00:42:25”
];
const divElementId = “scichart-root”;
const drawExample = async () => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(divElementId);
const xAxis = new NumericAxis(wasmContext);
const labelProvider = new TextLabelProvider({
// When passed as an array, labels will be used in order
labels: dataData,
maxLength: 188
});
xAxis.labelProvider = labelProvider;
xAxis.labelStyle.alignment = ELabelAlignment.Center;
xAxis.labelStyle.padding = new Thickness(2, 1, 2, 1);
xAxis.axisRenderer.hideOverlappingLabels = false;
xAxis.axisRenderer.keepLabelsWithinAxis = false;
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(
new NumericAxis(wasmContext, {
growBy: new NumberRange(0.05, 0.05),
id: EAxisAlignment.Left.toString(),
axisAlignment: EAxisAlignment.Left,
labelPrecision: 0,
labelStyle: { alignment: ELabelAlignment.Left }
})
);
sciChartSurface.yAxes.add(
new NumericAxis(wasmContext, {
growBy: new NumberRange(0.05, 0.05),
id: EAxisAlignment.Right.toString(),
axisAlignment: EAxisAlignment.Right,
labelPrecision: 0,
labelStyle: { alignment: ELabelAlignment.Right }
})
);
sciChartSurface.applyTheme(new SciChartJSLightTheme());
sciChartSurface.chartModifiers.add(new SeriesSelectionModifier({ enableHover: true, enableSelection: true }));
const seriesCount = 3;
const seriesPointCount = dataData.length-1;
const s = sciChartSurface.suspendUpdates();
const xValues=Array.from(Array(dataData.length), (v,k) =>++k);
for (let i = 0; i < 5; i++) {
const alignment = i % 2 === 0 ? EAxisAlignment.Left : EAxisAlignment.Right;
const yValues=Array.from(Array(dataData.length), () =>Math.floor(Math.random()*100)/100);
const lineSeries = new FastLineRenderableSeries(wasmContext, {
dataSeries: new XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: “Series ” + i }),
strokeThickness: 2,
stroke: “Blue”,
opacity: 0.5,
yAxisId: alignment.toString(),
onSelectedChanged: (sourceSeries, isSelected) => {
sourceSeries.strokeThickness = isSelected ? 5 : 2;
sourceSeries.stroke = isSelected ? “Purple” : “Blue”;
sourceSeries.rolloverModifierProps.tooltipDataTemplate=isSelected ? “wezisadasdasdd” : ”;
sourceSeries.pointMarker = isSelected
? new EllipsePointMarker(wasmContext, {
width: 9,
height: 9,
strokeThickness: 1,
stroke: “White”,
fill: “Purple”
})
: undefined;
},
onHoveredChanged: (sourceSeries, isHovered) => {
sourceSeries.opacity = isHovered ? 1.0 : 0.7;
sourceSeries.strokeThickness = isHovered ? 2 : 1;
}
});
sciChartSurface.renderableSeries.add(lineSeries);
}
s.resume();
const mouseWheelZoomModifier = new MouseWheelZoomModifier();
const rubberBandZoomModifier = new RubberBandXyZoomModifier();
const zoomExtentsModifier = new ZoomExtentsModifier();
sciChartSurface.chartModifiers.add(zoomExtentsModifier);
// sciChartSurface.chartModifiers.add(rubberBandZoomModifier);
sciChartSurface.chartModifiers.add(mouseWheelZoomModifier);
return { sciChartSurface, wasmContext };
};
drawExample();
- js scichart asked 1 year ago
Dear Andrew,
Thank you for the past answers. I have a new question. I have a heatmap with 2 line charts at its left aand top position. the top line chart plot the horizontal values where the mouse if hovering and left chart displays vertical values from the mouse position.
This is working great, but the issue is the heatmap is not always square and I am trying the aligh the line charts with the heatmap dimensions
two issues,
-
the heatmap X/Y dimension are not always same, in fact I have a function which listens to the changing heatmap zoom factor and makes sure the X/Y are always “square” as we want to show the heatmap with square pixels. (see video #2) https://youtu.be/wXStF-7bWsw
-
As I dynamically chage the size of the plot the… the proportion of actual chart area to axis lable changes thus varying the overlap. (see video #1) https://youtu.be/loAVpYSRJ38
Let me know if you need more information,
Best,
Pramod
- pramod butte asked 8 months ago
- last active 8 months 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
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
Hi,
EDataLabelSkipMode Customization is possible with some time range limit?
When i checked the documentation saw the options to skip the label for overlaping. Is it possible can add some index to skip the values. Eg: for Time chart One value is displayed in the chart at 10:30:00. So if i add some index value to skip the next 1 min data. So based on skip index next available value can ba displayed in chart. (10:31:00 or next available value). Can you implement this option to skip ?
- Arun Surendran asked 8 months ago
- last active 8 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?
- haba haba asked 8 months ago
- last active 2 months ago
Hi,
DataLabels Not Displaying in all cases in flippedCoordinates. Based on values only its showing. I have created a sample application with some dummy data.
- First Series is showing the labels properly
- If the first value in array changed then it will show the value.
- If all values are 0 then also its not showing the label.
Can you check the attached file for the sample code.
When the chart is not flipped then its works fine when i am checking.
- Mathew George asked 8 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
I have a bubble chart with EllipsePointMarker as pointMarker and a custom palette provider to set the colors of the markers. I need to set a stroke in one of the markers but doesn’t matter what value I return as a stroke value from the overridePointMarkerArgb function, the stroke isn’t applied. Am I missing something?
- Evandro Cascaes asked 9 months ago
- last active 9 months ago
Hello,
I’m thinking to create a RenderableSeries on the React side for SciChart JS using XyDataSeries generated on my .NET backend. Is it possible to do so?
- Vishnu K U asked 8 months ago
Hi, I was trying your JavaScript 64-Chart Dashboard Performance Demo and noticed few problems about it.
It shows 60Fps and chrome Fps shows only ~15fps and that is obviously lag in my eye.
Another problem was when I resized window it started to jump up and down when fps was below 10 and after above 10 it resized it continuously. Also when labels is added in small window it start jump when try to resize charts…
When I zoomed close to mountain series it changed visual data after moved that to left so there is some problems on your algorithm what you use to group that data to screen in real time.
-Astrid
- Astrid Bergqvist asked 1 year ago
- last active 1 year ago
If I have a use case, where heatmap data can be sparse in time, and I’m zooming around and panning trough the chart, it is quite possible to end up missing heatmap data, because at certain zoom levels, the heatmap lines just disappear.
Any tips to make this not happen?
Codepen showing the issue: https://codepen.io/jrfv/full/KKbrBdN
Make sure to zoom out slowly, and/or pan around, you should see one, or both lines disappearing.
I would post a video, but doesn’t seem to be allowed here, I’ll post 2 images at slightly different zoom levels then
- João Velasques asked 8 months ago
- last active 8 months 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, Custom tooltip is not working on v2.0.2179.
Its working on v2.0.2146. Can you please check the issue..
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { RangeSelectionChartModifier } from "./RangeSelectionChartModifier";
import { RubberBandXyZoomModifier } from "scichart/Charting/ChartModifiers/RubberBandXyZoomModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { EXyDirection } from "scichart/types/XyDirection";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { EClipMode } from "scichart/Charting/Visuals/Axis/AxisBase2D";
import { MouseButtonZoomChartModifier } from "./MouseButtonZoomChartModifier";
import { SeriesInfo } from "scichart/Charting/Model/ChartData/SeriesInfo";
import { CursorTooltipSvgAnnotation } from "scichart/Charting/Visuals/Annotations/CursorTooltipSvgAnnotation";
import { CursorModifier } from "scichart/Charting/ChartModifiers/CursorModifier";
async function initSciChart() {
const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);
const xyData = new XyDataSeries(wasmContext);
for (let i = 0; i < 250; i++) {
xyData.append(i, Math.sin(i * 0.1));
}
sciChartSurface.renderableSeries.add(
new FastLineRenderableSeries(wasmContext, { dataSeries: xyData })
);
const cursorModifier = new CursorModifier({
crosshairStrokeThickness: 1,
showTooltip: true,
showAxisLabels: false,
crosshairStroke: "transparent",
});
cursorModifier.tooltipSvgTemplate = (seriesInfo, svgAnnotation) => {
let rowString = "";
seriesInfo.forEach(() => {
rowString = rowString + `<tspan x="8" dy="1.2em" fill="red">Test : 123</tspan>`;
});
const string = `<svg width="300" height="33" x="0"><defs>
<filter id="id_1610011455082" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="3" dy="3"></feOffset>
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3"></feGaussianBlur>
<feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
</filter>
</defs>
<rect rx="4" ry="4" width="95%" height="90%" style="stroke-width:1;stroke:'#ffffff'}"></rect>
<svg width="100%"><text x="8" y="3" font-size="13" font-family="Verdana" dy="0">`;
svgAnnotation.xCoordShift = 5;
svgAnnotation.yCoordShift = 5;
return string + rowString + `</text></svg></svg>`;
};
sciChartSurface.chartModifiers.add(
cursorModifier
);
const mouseWheelModifier = new MouseWheelZoomModifier();
mouseWheelModifier.modifierMouseWheel = args => {
const delta = args.mouseWheelDelta * 0.1;
mouseWheelModifier.parentSurface.xAxes.asArray().forEach(x => {
x.scroll(delta, EClipMode.None);
});
};
sciChartSurface.chartModifiers.add(
new RubberBandXyZoomModifier({ xyDirection: EXyDirection.XDirection })
);
sciChartSurface.chartModifiers.add(mouseWheelModifier);
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
}
initSciChart();
- Arun Surendran asked 2 years ago
- last active 2 years 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 4 years ago
- last active 3 years ago
I am working on a proof of concept for our company to move some of our desktop apps to the web. We use SciChart WPF in our desktop apps so we are going with SciChart.JS for the web apps. Is it possible to stack the FastLineRenderableSeries in SciChart.JS like we do in WPF?
Edit: Found the answer just after I posted this question.
sciChartSurface.layoutManager.leftOuterAxesLayoutStrategy = new LeftAlignedOuterVerticallyStackedAxisLayoutStrategy();
- Tim Stephansen asked 2 years ago
- last active 6 months 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 5 months ago
Hi
I am trying out JS SciChart based on the Blazor example you have posted more than a year ago.
I cannot get the auto scaling to work by code (the default behavior does auto scale once right after adding the data). Calling sciChartSurface.zoomExtents(); (or zoomExtentsX() and zoomExtentsY() after one another) does zoom into a very details portion of the graph.
Also (maybe related) the tooltip does not update when moving the cursor around, it always keeps the same data. I tried using CursorModifier as well as RolloverModifier, both having the same problem.
Attached the JS code and the c# files and a picture how this looks like after calling the autoScale() method.
Thanks for any help
Regards
Reto
- Reto Stahel asked 2 years ago
- last active 2 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
I updated schichart to the very last version and turn on the memory usage debug mode to see if there are any memory leaks in our application and ran into the following problem.
When MemoryUsageHelper.isMemoryUsageDebugEnabled = true;
and sciChartSurface has the following modifiers(RolloverModifier, CursorModifier) when moving the mouse over the chart I have the following console warnings.
From RolloverModifier instance
From CursorModifier instance
The message below is written on your docs about debugging, so I gues this is the case with the chart modifiers console warnings.
Usually this boils down to failing to call SciChartSurface.delete()
(or series.delete()
, annotation.delete()
when adding/removing objects) or plain JavaScript memory leaks where references to SciChart are held in the customer application & not garbage collected by the browser.
Steps To Reproduce
- Follow the codesandbox example by the link https://codesandbox.io/s/ts-band-chart-xwlxcm?file=/src/App.tsx;
- Once the chart is loaded and rendered, try moving the mouse cursor over the chart;
- Open the browser console ⇒ You will see the warnings I wrote about above.
The current behavior
Moving the mouse over the chart causes warning logs to appear in the browser console and possibly memory leaks.
The expected behavior
No warning logs while moving the mouse over the chart.
- Sergey Chernyakov asked 9 months ago
- last active 9 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 9 months ago
- last active 8 months ago
Hey, how would I go about adding a custom template for the cursor axis labels using the Javascript 2D chart API?
I’d like the x-axis to not just have a date in MM/DD/YYYY format but a date and time displayed. The current implementation is below, and below that is the desired implementation.
Current: https://ibb.co/qJgJ36j
Desired: https://ibb.co/XzTkDgw
I have looked through the documentation but I may have missed something. If I have, please point me in the right direction, thanks!
- NICOS TOMBROS asked 2 years ago
- last active 2 years ago
I am trying to implement the following functionality requested by our users:
Zoom:
– Only zoom the chart when using CTRL + MouseWheel key
– This is similar to how most browsers behave
Pan/Scroll:
– If no CTRL key is pressed, then pan/scroll
– This is similar to how most browsers behave
Given the above requirement, I started by creating custom modifier by extending YAxisDragModifier.
My code almost works:
– When using CTRL + Mouse Left & Drag, it Scales (zooms) — just like the user wants
– But using CTRL + Mouse Wheel does not do the same — it only Scales (Zooms).
I have uploaded the code at codesandbox.io:
https://codesandbox.io/s/amazing-shape-2ispt0?file=/src/customModifiers.ts
Note that I have not tried to implement this in ZoomPanModifier yet, but would be helpful if you could give me some pointers on getting this feature in there too.
I would appreciate any help I can get and thanks a bunch in advance.
Best Regards,
Sachin Patel.
- sachin patel asked 1 year ago
- last active 1 year ago
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?
- Can Ata Tekirdağlı asked 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
Is there any way to provide custom axis label for cursor modifier or at least change label size? I could find only axis label stroke & fill properties in cursor modifier API.
- Sergey Chernyakov asked 2 years ago
- last active 2 years ago
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.
- vamsi pallem asked 3 months ago
- last active 3 months ago
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.
- Lukasz Drzewiecki asked 3 years ago
- last active 3 years ago
I have a chart in the center of the page and the chart will resize according to the browser window size. When I expand the browser window, the chart will expand to fit the browser size. In this case, the chart grows downward gradually (with animation). How can I remove this animation effect when resizing the chart?
In case it’s related to my style. Here are my markup and style for reference:
//Markup
//Style
.contentPanel {
flex: 1 1 auto;
width: calc(100% – 335px);
max-height: calc(100vh – 108px);
display: flex;
flex-direction: column;
}
.chartContainer {
position: relative;
margin: 10px 0;
display: flex;
flex-direction: column;
flex: 1;
}
.scichart-root {
width: 100%;
height: 100%;
}
- Kelly Chan asked 1 year ago
- last active 1 year ago
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.
- Henrique Rodrigues asked 3 years ago
- last active 2 years ago
Hello!
Tell me what I’m doing wrong?
The error does not always appear (floating error).
In my code, along the stack, it will go to your product
- Roman Gavrilow asked 3 years ago
- last active 2 years ago
I have a chart with default majorDelta 10 for y-axis. Users are allowed to change the scale (majorDelta) of the chart. When it’s changed to 0.1, the y-axis labels are gone. The y-axis labels can still be seen when the majorDelta is 0.2. Please check my screenshots for details.
- Quyen Sy asked 1 year ago
- last active 1 year 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
I recently upgraded SciChart from version 2 to version 3.0.266. It was working fine. But I got error (please refer to the attached screenshot) when I try to run my application today. It’s so strange as it worked fine yesterday and I didn’t make any codes change today.
- Quyen Sy asked 1 year ago
- last active 1 year ago
I have a real time updated chart with very large data size and I am facing the slow client problem. i.e. The data sending speed is faster than the data receiving and handling speed which causes memory growing up issue. I am trying to use Web Workers to increase the data handling speed in frontend. I have found a related post:
https://www.scichart.com/questions/wpf/is-xydataseries-safe-to-being-changed-in-a-separate-thread
It seems possible to update XyDataSeries in the background thread with WPF. My UI is built with NextJS. I tried to use Web Workers to implement multiple threads. But I found that it can’t pass the SciChartSurface or XyDataSeries to the worker thread. Could you show me an example on how to update XyDataSeries in the worker thread with Web Workers?
- Quyen Sy asked 1 year ago
- last active 1 year 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?
- sachin patel asked 1 year ago
- last active 1 year ago
In a DateTimeNumericAxis, can I convert the number from VisibleRange to a formatted string HH:MM:SS?
For example, I’d like to convert this x1 to 12/1/1984, 3:00:00 PM, or 15:00:00.
let x1 = this.parentSurface.annotations.getById("hrv").x1;
// x1 =470761200, seconds since 1970.01.01 00:00:00
Thanks.
- Gang Xu asked 1 year ago
- last active 1 year ago
I have XyDataSeries
with 50 data points and I’m trying to insert another 50 data points to index 5. The same values can be inserted as a range to the beginning of the data series or inserted one by one starting from index 5. But they fail with “RuntimeError: memory access out of bounds” whenever I try to insert them as a range from index 5.
Code snippet:
const { xValues, yValues } = generateData(50);
const dataSeries = new XyDataSeries(wasmContext, { xValues, yValues, isSorted: false });
sciChartSurface.renderableSeries.add(new FastLineRenderableSeries(wasmContext, { dataSeries }));
// this works
dataSeries.insertRange(0, xValues, yValues);
// this works
for (let i = 0; i < xValues.length; i++) {
dataSeries.insert(i + 5, xValues[i], yValues[i]);
}
// this fails
dataSeries.insertRange(5, xValues, yValues);
Codesandbox link: https://codesandbox.io/s/scichart-js-boilerplate-forked-hokfcn
I wonder if I’m doing something wrong or if this is an actual issue?
Side note: Index 5 is just an example, because it seems I can use the insertRange
method when inserting to index 0-2, but it fails when inserting to index 3+ (in case of a chart with 50 existing data points)
- Timo Betina asked 1 year ago
- last active 1 year ago
How to update the text Annotation in JavaScript. I can add the new Text annotation but I can’t update the old text Annotation. whether we have any option in sci chart for JavaScript.
- manoj prabakar asked 1 year ago
- last active 1 year ago
How can we change the color(Red) of custom box annotation when it is clicked .
thanks
- apoorv sharma asked 1 year ago
- last active 1 year ago
Hi,
We use SciChart extensively in our WPF applications and make use of CustomRenderableSeries, writing all kinds of different lines and bitmaps directly to the IRenderContext2D depending on the point metadata.
We’re now looking at doing something similar in JavaScript, but can’t find any examples of this kind of customisation in the documentation. In the JavaScript library, is it possible to draw directly to a ‘canvas’ in the same way as in the WPF version? If so, could you please point to an example?
Many thanks,
Graham.
- Graham Stoneman asked 1 year ago
- last active 1 year ago
Hello, I am running scichart in a blazorwasm app. On updating from 1.x to 2.2.2351 I am getting an uncaught error for a missing module on app startup before I make any calls to scichart to initialize.
The error is:
Uncaught Error: Cannot find module ‘../Charting/Model/Filters/HlcScaleOffsetFilter’
at webpackMissingModule (buildDataSeries.js:15:94)
at eval (buildDataSeries.js:15:215)
at Object../node_modules/scichart/Builder/buildDataSeries.js (strategyChart.js:133:1)
at webpack_require (strategyChart.js:21:30)
at eval (chartBuilder.js:45:25)
at Object../node_modules/scichart/Builder/chartBuilder.js (strategyChart.js:181:1)
at webpack_require (strategyChart.js:21:30)
at eval (SciChartSurface.js:30:22)
at Object../node_modules/scichart/Charting/Visuals/SciChartSurface.js (strategyChart.js:3253:1)
at webpack_require (strategyChart.js:21:30)
My webpack is:
const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
module.exports = {
mode: "development",
entry: {
strategyChart: './src/strategyChart.js'
},
module: {
rules: []
},
resolve: {
extensions: [".js"]
},
output: {
path: path.resolve(__dirname, '../wwwroot'),
filename: "[name].js",
library: "[name]"
},
plugins: [
new CopyPlugin({
patterns: [
{ from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
{ from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
]
}),
new webpack.IgnorePlugin(/(fs)/)
]
};
- Leland asked 2 years ago
- last active 2 years ago