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 12 months ago
- last active 12 months ago
I am getting a console error when using isVisible: false to the FastLineRenderableSeries or FastMountainRenderableSeries and CursorModifier together.
const { wasmContext, sciChartSurface } = await SciChartSurface.create(
"chart" + this.element
);
sciChartSurface.xAxes.add(
new NumericAxis(wasmContext, { axisAlignment: EAxisAlignment.Top })
);
sciChartSurface.yAxes.add(
new NumericAxis(wasmContext, {
axisAlignment: EAxisAlignment.Left,
growBy: new NumberRange(0.4, 0.4)
})
);
const dataSeries = new XyDataSeries(wasmContext);
const POINTS = 1000;
const STEP = (3 * Math.PI) / POINTS;
for (let i = 0; i <= 1000; i++) {
const k = 1 - i / 2000;
dataSeries.append(i, Math.sin(i * STEP) * k * 0.7);
}
const rendSeries = new FastLineRenderableSeries(wasmContext, {
dataSeries: dataSeries,
strokeThickness: 1,
stroke: "red",
isVisible: false
});
sciChartSurface.renderableSeries.add(rendSeries);
// sciChartSurface.background = this.color;
sciChartSurface.chartModifiers.add(
new ZoomExtentsModifier(),
new ZoomPanModifier(),
new MouseWheelZoomModifier()
);
// Add CursorModifier behavior
const cursorModifier = new CursorModifier({
crosshairStroke: "#ff6600",
crosshairStrokeThickness: 1,
tooltipContainerBackground: "#000",
tooltipTextStroke: "#ff6600",
showTooltip: true,
axisLabelsFill: "#b36200",
axisLabelsStroke: "#fff"
});
sciChartSurface.chartModifiers.add(cursorModifier);
sciChartSurface.zoomExtents();
return { wasmContext, sciChartSurface };
- Arun Surendran 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
How to display data labels vertically and support Chinese,As shown in Fig
- guofang gao asked 5 months ago
- last active 5 months 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
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
Hi,
I have added a data series and also a custom box annotation which is overlapping the data series.
But the question is I am trying to move the box annotation which drag and drop but have to clip on the data series as well.
May I know if is scichart js able to do so? Or best if I just convert it into svg and make it drag and drop will do?
- eva yeoh asked 1 year ago
- last active 1 year 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
Content description: The performance of scichart in single line rendering data is amazing. My current requirement is to render multiple lines at a time (up to 1800 lines). I hope that after loading, when moving the mouse, the tooltips for specific points will be displayed quickly. Are there similar cases for my reference?
- js scichart asked 1 year ago
- last active 1 year ago
Error from chart in div instrument_candle_chart_2
RuntimeError: call_indirect to a signature that does not match (evaluating ‘invoker(fn, thisWired, arg0Wired, arg1Wired, arg2Wired, arg3Wired, arg4Wired, arg5Wired, arg6Wired, arg7Wired, arg8Wired)
error here: OhlcSeriesDrawingProvider.prototype.draw:
this.nativeDrawingProvider.DrawPointsVec(nativeContext, xDrawValues, openValues, highValues, lowValues, closeValues, renderPassData.xCoordinateCalculator.nativeCalculator, renderPassData.yCoordinateCalculator.nativeCalculator, this.args);
- Const Goose asked 6 months ago
- last active 3 months ago
I was looking over Tutorial 07 – Tooltips and Legends and the Chart Legends API demo, and noticed that the checkboxes and legend font had some styling applied. But, when I implement a legend on my own it uses the default font (or whatever global font style I used) and the default HTML checkbox styling. I was wondering if you had modified the styling using an outside CSS file, if there is an API endpoint for modifying the styling of the legend, or if this is possibly a bug. I did see that there was an applyTheme() method available, but I thought that it might not apply to this situation. I also tried to look through the example code provided for the Chart API Demo, but I couldn’t find anything that pointed one way or the other.
I have attached screenshots of what the legend looks like in the two examples, as well as a screenshot of what the legend looks like when I implement it on my own. I have also included a zip file with the demo application I created.
Thanks,
Drew
- Drew Afshari asked 3 years ago
- last active 11 months 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
A client responded that the line diagram drawn by scient.js on the mobile phone could not be seen.
We follow the user’s log and find that there is such content
2022/09/21 07:02:27.981 exception thrown: RuntimeError: function signature mismatch,RuntimeError: function signature mismatch
at <anonymous>:wasm-function[2101]:0x5fc72
at <anonymous>:wasm-function[1355]:0x2a029
at <anonymous>:wasm-function[2409]:0x7ef3a
at Ch (<anonymous>:wasm-function[4028]:0x12f27f)
at r._main (<anonymous>:16:687711)
at Object.Ma [as callMain] (<anonymous>:16:688823)
at <anonymous>:16:565075
2022/09/21 07:02:27.981 Could not load SciChart WebAssembly module.
Check your build process and ensure that your scichart2d.wasm, scichart2d.data and scichart2d.js files are from the same version
.
We try to reproduce many different devices. At present, it seems that only the device will happen. The following is the information of the device
- chinghung lai asked 2 years ago
- last active 1 year ago
I am trying to build my application with Electron. When the Electron application is run, it will open the UI in the browser (not opened with chromium). I created two Electron applications with same codes but with different versions of SciChart (i.e. version 2 and version 3). When I run with the Electron application with SciChart v2, the SciChart can be loaded properly. When when I run the Electron application with SciChart v3, I got error (please refer to the screenshot) and the SciChart cannot be loaded. I am not sure what’s wrong. Do you have any idea?
- Quyen Sy asked 1 year ago
- last active 1 year ago
I would like to create an arc annotation as shown in the attached image in Scichart JavaScript.
Please guide me on what will be the best way.
- Ramesh Sippy asked 2 years ago
- last active 2 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
Is there a test demo that was done using SciChart WPF 2D.
- linxi zheng asked 1 year ago
- last active 1 year ago
Hi there,
Wow this library has come along way in ten years. My question is related to interaction between RS and the legend that is rendered by the chartmodifier.
I declare the legend something like this during the initial bootstrapping of the plot view:
const legend = new LegendModifier({placementDivId: "legend-goes-here", id:"legend"});
sciChartSurface.chartModifiers.add(legend);
After that, I have a custom interface available for users to change things, which eventually results in visibility or color changes, updating an RS something like this:
const thisRs = surface.renderableSeries.getById(`${s.fileId}-${s.name}`);
if (thisRs) {
thisRs.isVisible = s.isVisible;
thisRs.stroke = s.visualInfo?.colorCode ?? "#FFFFFF";
}
These changes do not appear to be propagated to the legend despite the series on the plot changing. I guess my questions are:
1) What’s the expected behavior/is there something obvious I’m missing about the model?
2) Any suggestions?
It may very well be somewhere lost in my fairly complex React app, but I first wanted to confirm that I’m not missing something in the api.
Thanks!
Dan
- Daniel Santimore asked 10 months ago
- last active 6 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 1 year ago
- last active 1 year ago
Hi,
I have a uniform heatmap with multiple ’tiles’ of data loaded in, by using multiple UniformHeatmapDataSeries / UniformHeatmapRenderableSeries.
The user is allowed to pan around/zoom around the heatmap.
I want to build two charts to display the ‘visible heatmap average’, one for each axis. For example, I would display a line chart underneath the heatmap. The first point on this line chart would represent the average value of all cells in the first column of the heatmap – I need this to take into account all of the UniformHeatmapDataSeries that are currently in the viewport, treating them as a singular heatmap.
I’ve seen the NumericAxis.getCurrentCoordinateCalculator(), which looks promising, but I’ve not yet worked out if that can do what I need.
Any thoughts on the best approach?
Thanks
Joe
- Henrique Rodrigues asked 3 years ago
- last active 3 years ago
Hello,
I found an issue with very high memory usage by the application. after some tests I found the problem and moved it to a separate example(https://codepen.io/PodaRocheK/pen/PoVmzvP?editors=0011). Please check this code and observe the memory usage on this page. With prolonged use (after 10 minutes), it is clear that more and more memory is used. After hours, the memory used may already be more than several gigabytes. Tell me what the problem is, maybe I’m doing something wrong. Maybe I’m somehow storing old data incorrectly or adding it incorrectly.
This example is not a working example, it has been sped up in order to quickly identify the problem. In our example, an unnecessary data update will occur once every few seconds and after a night of inactivity, the entire page will die. Please tell me what the problem is.
Thank you!
- Yevhenii Krasovskyi asked 5 months ago
- last active 5 months ago
I have issues with the selection box of the textannotation in firefox.
Code for the annotation:
return new TextAnnotation({
id,
text: text,
verticalAnchorPoint: EVerticalAnchorPoint.Center,
horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
xCoordinateMode: ECoordinateMode.DataValue,
yCoordinateMode: ECoordinateMode.DataValue,
x1: x1,
y1: y1,
fontSize: 16,
fontWeight: "Bold",
textColor: annotation.color,
isEditable: isEditable,
annotationLayer: EAnnotationLayer.AboveChart
})
Please see the differences in the images attached. In the Firefox browser it seems that the svg takes on the size of the scichart surface. Can you help me to fix this problem? The parameters selectionBoxDelta and selectionBoxThickness work in both browsers but do not fix the problem.
Thank you.
- Tobias Lettner asked 1 year ago
I am new to scichart javascript library and trying to run the provided examples locally. I was working on this example
https://www.scichart.com/documentation/js/current/The%20Candlestick%20Series%20type.html
I am able to run this example locally. now I want to add cursor snapping in it. An example would be tradingview candlestick charts. in those charts cursor snaps to nearest candles.
I am trying to achieve similar. I looked into the docs but couldn’t find the answer.
Thanks !
- karan sharma asked 5 months ago
- last active 5 months 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
Hello,
I am trying to make an annotation draggable. I tried setting the isEditable property to true, but nothing happened. I can’t find the right documentation for draggable annotations . My code for creating the Annotation it’s below:
sciChartSurface.annotations.add(new LineAnnotation({
stroke: "#279B27", strokeThickness: 3,
xCoordinateMode: ECoordinateMode.DataValue,
x1: 0,
x2: 0,
yCoordinateMode: ECoordinateMode.Relative,
y1: 0,
y2: 1,
isEditable: true,
}));
- Razvan Muthi asked 3 years ago
- last active 1 year ago
Hello, i want to customize tooltip in graph (SplineBandRenderableSeries), i can change the tooltip content but if i return svg like your example ( return <svg width="${width}" height="${height}">
))
<circle cx="50%" cy="50%" r="50%" fill="${tooltipColor}"/>
<svg width="100%">
<text y="40" font-size="13" font-family="Verdana" dy="0" fill="${tooltipTextColor}">
<tspan x="15" dy="1.2em">${tooltipTitle}</tspan>
<tspan x="15" dy="1.2em">x: ${seriesInfo.formattedXValue} y: ${seriesInfo.formattedYValue}</tspan>
</text>
</svg>
</svg>
It doesn’t work. I have this error in console: Error from chart in div band0 TypeError: valuesWithLabels.reduce is not a function
and
Error from chart in div band0 DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be removed is not a child of this node.
at RolloverTooltipSvgAnnotation.delete …
My graph has 3 renderableSeries (1 XyDataSeries and 2 XyyDataSeries)
Please can you send me an example in (javascript) for modify tooltip styling ?
Thanks.
- Marjorie lesage asked 9 months ago
- last active 8 months 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 5 months ago
How to setup SciChart.js in React native frame work?
- Subin Raj asked 2 years ago
- last active 9 months ago
From what I’ve read into chrome’s roadmap, everything seems on track for a webgpu release in May.
Is scichart taking this into account and planning to add webgpu support?
I suspect this would make quite an impact on performance, so it would be a great addition.
Thanks!
- João Velasques asked 1 year ago
- last active 1 year ago
I have a design where I want to show something like a box at the top of the chart and when hovering on it, it should show up a tooltip with some info, the issue I’m running into is the fact that I can’t seem to find way I can add tooltip to box annotation other than adding another box annotation when hover or hit, but it seem that it is not recommended base on my previous post before.
I also looked into scatterXY series or pointMarker, the issue with Point marker or scatter series is that I can only set one x and y, but my design require the box to be from a certain x1 point to x2 point. I can probably try to calculate the width and set the width to the point marker, but I would rather not if there is a better way.
Also looked into column chart, but that also have the same issue of only one x and y point and not sure about tooltip, but definitely seem more promising than annotation.
Please let me know if there is a better way to accomplish this, thank you!
The image below is the design.
- Nung Khual asked 2 months ago
- last active 2 months ago
Good afternoon. Scichart WPF has two built-in small buttons in the top right corner of the panels for collapsing and closing charts. How can you add such buttons in Scichart javascript and how to correctly describe the functions?
- Alexksandr Shvabskiy asked 6 months ago
- last active 6 months ago
Greetings,
i have three Series in a SciChart.js (Community-Version) Surface.
The Legend i added shows me all three of them and their names and checkboxes do hide or show the series.
Here is my problem: Is there a way to hide one Series (a FastCandlestickRenderableSeries) from the Legend? I only want to show the other two Series (FastLinerenderableSeries).
Somethin like a Parameter “showInLegend: false,”? I did not find something like this in the documentation(https://www.scichart.com/documentation/js/current/typedoc/classes/legendmodifier.html).
Thank you
- Sebastian Affeld asked 8 months ago
- last active 8 months ago
Hi Folks,
Wanted to ensure I’m working in the right direction here. Requirement is to add inline series labels on the plot surface. It’s an awkward requirement at times, but it keeps coming up with because other providers do this sometimes.
I’ve been playing with the examples of using data labels ( https://github.com/ABTSoftware/SciChart.JS.Examples/blob/master/Examples/src/components/Examples/Charts2D/TooltipsAndHittest/UsingVerticalSliceModifier/index.tsx ).
This might work. It’s a little strange since I only need to show at most one label per series. So I use the data label provider I assume and have to manually space them along the index range.
The only alternative I’m aware of is the annotations api, which of course is quite robust and probably a little too fancy for this case.
Appreciate any thoughts on the approach here — thanks!
EDIT: Attached very contrived example. The idea is to supply a label to name the series inline (apparently a legend is not sufficient), but in a way that is reasonably useful visually (similar to the spacing capabilities in the data labels api). The text would be some piece of metadata that is derived from the series (or at least has a 1:1 relationship with the series).
- Dan Santimore asked 5 months ago
- last active 5 months ago
I want to use a different color for each value in the chart I created here. To put it simply, if the value is greater than 10, I want it to appear yellow, if it is less than green, and red if it is less than 0. thanks
const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
theme: new SciChartJSLightTheme(),
});
sciChartSurface.applyTheme(new SciChartJSLightTheme());
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const yAxis = sciChartSurface.yAxes.get(0);
yAxis.visibleRange = new NumberRange(LAL, UAL);
const xAxis = sciChartSurface.xAxes.get(0);
xAxis.visibleRange = new NumberRange(0, endBarIndex);
const dataSeries = new OhlcDataSeries(wasmContext, {
xValues: xValues,
openValues: yValues,
highValues: compositeScanAverageArray,
lowValues: yValues,
closeValues: compositeScanAverageArray,
});
const renderableSeries = new FastCandlestickRenderableSeries(wasmContext, {
dataSeries,
stroke: "white",
strokeThickness: 1,
});
sciChartSurface.renderableSeries.add(renderableSeries);
sciChartSurface.annotations.add(
new SciChart.BoxAnnotation({
stroke: "yellow",
strokeThickness: 1,
fill: "rgba(255, 255, 0, 0.3)",
x1: 0,
x2: endBarIndex,
y1: UAL,
y2: UWL,
})
);
sciChartSurface.annotations.add(
new SciChart.BoxAnnotation({
stroke: "yellow",
strokeThickness: 1,
fill: "rgba(255, 255, 0, 0.3)",
x1: 0,
x2: endBarIndex,
y1: LAL,
y2: LWL,
})
);
sciChartSurface.annotations.add(
new SciChart.BoxAnnotation({
stroke: "green",
strokeThickness: 1,
fill: "rgba(0, 128, 0, 0.3)",
x1: 0,
x2: endBarIndex,
y1: LWL,
y2: UWL,
})
);
sciChartSurface.annotations.add(
new SciChart.LineAnnotation({ stroke: "#FF6600", strokeThickness: 3, x1: startBarIndex, x2: endBarIndex, y1: compositeScanAverage, y2: compositeScanAverage }),
);
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new ZoomPanModifier());
}
- Can Ata Tekirdağlı asked 3 months ago
- last active 3 months 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 9 months ago
- last active 7 months ago
Hello, how do I remove the shadow from tooltips, generated by the VerticalSliceModifier?
Thanks!
- Michael Geronimo asked 5 months ago
- last active 5 months ago
Hi,
I am facing a issue with RolloverModifier. I have multiple charts in single window. For some points the lines over the chart are missing.
Please find the attached images for some examples and the code for reproduce the issue. on the attachment you can see that the line on some chart is missing when mouse on left and right corner area of the chart.
Posting again because on latest version also the same issue not resolved.
https://www.scichart.com/questions/js/rollovermodifier-in-multiple-chart-line-missing-on-some-areas
- Arun Surendran asked 2 years ago
- last active 2 years ago
Hello All,
I was trying to set the visual range property on a numeric axis but i get the error that the “equals” is not a function of NumerixAxis. This happens when i try the following.
export function setXAxisVisibleRange(element, visibleRange) {
const { sciChartSurface } = resolveContext(element);
var axis = sciChartSurface.xAxes.get(0);
axis.visibleRange = visibleRange; **//error here**
}
attached is a picture of a more detailed error. Ultimately what I am trying to do is to sync up the visual range of two charts x axis like in the following tutorial
Thanks for your help in advance.
UPDATE
So my issue was that I had a serialization issue with the NumberRange class. I can now sync up the charts just like in the tutorial. The problem now is that if I scroll or zoom very fast eventually the charts start to flicker in an endless loop. Has anyone ever seen this behavior? One thing I notice is that the min and max value have over 10 decimal points.
Here is a quick printout of the value change events between the two charts when the flickering starts.
Any ideas?
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.2 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.2 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.1 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.2 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.1 Min: -0.17488026755852848 Max: 4.339519732441472
–> CH.1 Min: 0.025927491638795958 Max: 4.088887491638796
–> CH.1 Min: 0.38738145819397996 Max: 3.63774945819398
–> CH.2 Min: 0.5319630448160535 Max: 3.4572942448160537
–> CH.1 Min: 0.532180460735786 Max: 3.457511660735786
–> CH.2 Min: -0.17488026755852848 Max: 4.339519732441472
- Sergio Faura asked 12 months ago
- last active 12 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 4 months ago
Hi,
As title, is any way to reach this requirement?
when drag the annotation but not appear the selected style. like circle point and around broder.
- chinghung lai asked 2 years ago
I am trying to create a live updated non-uniform heatmap with uniform xStep but non-uniform yStep. But I got color mapping problem when I tried to create the non-uniform heatmap. The color showing in the chart doesn’t map with the ColorMap value. Below are my codes:
Draw the non-uniform heatmap:
const SPECTROGRAM_HEIGHT = 256;
const SPECTROGRAM_WIDTH = 100;
const { sciChartSurface, wasmContext } = await SciChartSurface.create("spectrogram-chart-root");
const xAxis = new NumericAxis(wasmContext, {
axisTitle: "Frequency",
axisTitleStyle: {
fontSize: CHART_STYLE.AXIS_FONT_SIZE,
fontFamily: "sans-serif",
fontWeight: "bold"
},
labelStyle: {
fontSize: CHART_STYLE.LABEL_FONT_SIZE,
fontFamily: "sans-serif"
},
labelFormat: ENumericFormat.Decimal,
labelPrecision: 6,
cursorLabelFormat: ENumericFormat.Decimal,
cursorLabelPrecision: 6,
drawMajorBands: false,
});
const yAxis = new NumericAxis(wasmContext, {
axisTitle: "Time",
axisTitleStyle: {
fontSize: CHART_STYLE.AXIS_FONT_SIZE,
fontFamily: "sans-serif",
fontWeight: "bold"
},
labelStyle: {
fontSize: CHART_STYLE.LABEL_FONT_SIZE,
fontFamily: "sans-serif"
},
drawMajorBands: false,
});
// Add XAxis and YAxis
sciChartSurface.xAxes.add(xAxis);
sciChartSurface.yAxes.add(yAxis);
const colorMap = new HeatmapColorMap({
minimum: -200,
maximum: -50,
gradientStops: [
{ offset: 1, color: COLORS.DARK_RED },
{ offset: 0.8, color: COLORS.RED },
{ offset: 0.6, color: COLORS.YELLOW },
{ offset: 0.5, color: COLORS.GREEN },
{ offset: 0.4, color: COLORS.BLUE },
{ offset: 0.01, color: COLORS.DARK_BLUE },
{ offset: 0, color: "Transparent" },
]
});
// Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
zValues = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(-200));
const heatmapSeries = new NonUniformHeatmapRenderableSeries(wasmContext, {
dataSeries: new NonUniformHeatmapDataSeries(wasmContext, { zValues: zValues, xCellOffsets: getHeatmapXOffset, yCellOffsets: getHeatmapYOffset }),
colorMap: colorMap,
useLinearTextureFiltering: true,
fillValuesOutOfRange: true,
});
// Add heatmap to the chart
sciChartSurface.renderableSeries.add(heatmapSeries);
I simply return the index for testing in the getHeatmapXOffset and getHeatmapYOffset functions:
const getHeatmapXOffset = (index) => {
return index;
};
const getHeatmapYOffset = (index) => {
return index;
};
I fill the zValues array with the minimum value -200, but the data displayed in the chart is COLORS.YELLOW. I don’t understand what’s wrong.
- Quyen Sy asked 11 months ago
- last active 11 months ago
As part of a recent flag added to 3.2.509, I moved from 3.2 to 3.2.509; it looks like positioning of the scichart legend has changed. The style is now appearing as position: absolute
— I don’t have access to source, but I wonder if this was part of 3.2.491, which mentioned something about positioning of the legend?
Anyway, if this was an intended change — and if it’s not something I managed to do to myself — it broke my implementation of an outside-of-plot legend. This is how the style is currently appearing:
<div class="scichart__legend" style="height: 100%; position: absolute; display: flex; left: 0; top: 0; text-align: center;">
...
</div>
This is how it appeared my currently deployed code:
<div class="scichart__legend" style="height: 100%; display: flex; float: left; text-align: center;">
...
</div>
Anyway, should be able to figure something out I hope — I’m no CSS wizard — but wanted to flag it as a possible breaking change that might not have been intended.
- Dan Santimore asked 5 months ago
- last active 5 months ago
When hardware acceleration is not enabled from the client side i am getting the follwong error in the console and the chart becomes empty.
Can we have a caetain fallback ui for this error so that when hardware acceleration is disabled we can show some error in the client side instead of frozen screen
- Saksham Jaiswal asked 1 year ago
- last active 1 year ago
Multiple instances of sci chart any appearance changes reflecting on other instances. When I changed the background of one instance the same is reflected in the other instance. I have updated with createSingle to resolve this issue, But i am getting one alert when using createSingle.
- Arun Surendran asked 3 years ago
- last active 3 years ago
paletteProvider transparent colour is not working.
I tried with parseColorToUIntArgb(“#ffffff00”) and parseColorToUIntArgb(“#ffffff00”, 0) to replace the colour with transparent. But its not working.
I want ho hide the marker on the chart if the value is less than a limit. Is any other possibility to hide the marker based on value?
can you check the image, i want to show only the yellow marker.
one more error i am getting from typescript
“Type ‘undefined’ is not assignable to type ‘TPointMarkerArgb'”.
- Arun Surendran asked 3 years ago
- last active 3 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, 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 8 months ago
- last active 8 months ago
Hello Scichart Team again,
I’m trying to replicate anything like this (check Screenshot_2.png).
I can update the scichart background, but I just wanted to have a single color in the background, but it seems that there is an overlap of colors in X / Y as I show in the next printscreen (check Screenshot_3.png)
How I can solve this?
Waiting for feedback.
Many thanks,
Pedro Cruz
- Ricardo Diz asked 3 years ago
- last active 3 years ago
Is it possible to change the heatmap legend from vertical to horizontal?
- Quyen Sy asked 11 months ago
- last active 11 months 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