Hi,
In my application I am using two charts for represent different values. I am using LegendModifier on the first chart. Is it possible when i uncheck the series on first chart and the same color series on second chart also need to hide from the second chart. Any event callback function available in LegendModifier ?
- Arun Surendran asked 2 years ago
- last active 2 years 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 12 months ago
Hi, I wanted to make a multiple Y-Axis scale with multiple series plot into their respective Y scale. Like this,
Series A plot to 1st Y-axis Scale
Series B plot to 2nd Y-axis Scale
Series C plot to 3rd Y-axis Scale
Series D plot to 4th Y-axis Scale
and all those series are not overlapping each other. I want to do like the picture attached but with the series are not overlapping to each other.
- syahiran keysight asked 3 years ago
- last active 3 years ago
Hi,
I’m trying to implement a market footprint with SciChart framework, I mean is possible create like a plugin for implement in the framework?
My idea was set body color of all the candles invisible and than for every candle set two volume series in horizontal like in the image.
- John Lepre asked 3 years ago
- last active 4 months ago
Hi,
I just registered here.
I want to use your tool to create one graph. But licence is too expensive for me. May I create graph during trial mode and use it?
What if trial licence expired? Already created graph will still working or not?
Thanks
- stevo paradox asked 1 year ago
- last active 1 year ago
I have a color heatmap legend that need to update the yAxis range on the fly. The colorMap doesn’t update as expected. Here’s my codes to update the y axis and colorMap min/max of the heatmap legend:
const newRange = new NumberRange(newMin, newMax);
const yAxis = heatmapLegendRef.current.sciChartSurface.yAxes.items[0];
yAxis.majorDelta = newScale;
yAxis.minorDelta = newScale / 5;
yAxis.visibleRange = newRange;
yAxis.visibleRangeLimit = newRange;
yAxis.zoomExtentsRange = newRange;
colorMapRef.current.minimum = newMin;
colorMapRef.current.maximum = newMax;
heatmapLegendRef.current.colorMap = colorMapRef.current;
The y axis range has been updated. But the colorMap didn’t. It seems that the colorMap of the heatmap legend cannot be changed. Is it true that I can only recreate the heatmap legend if I want to change the colorMap?
- Quyen Sy asked 8 months ago
- last active 8 months ago
I’m looking on https://demo.scichart.com/javascript-multi-pane-stock-charts-sync-technique
I have a q react application. Can I add/remove subcharts(indicator panes) dynamically?
- Ivan Skiridomov asked 6 months ago
- last active 5 months ago
I’m looking for some direction on how to implement a modifier that reacts to interaction (mouse up/down etc) with a charts axis
- User clicks on axis
- Provide callback for side effect when clicked
Thanks
- Henrique Rodrigues asked 3 years ago
- last active 3 years ago
I need to implement custom html legend instead of built-in options.
To hide built-in rollover I’m using series config:
this.series.rolloverModifierProps.width = 0;
this.series.rolloverModifierProps.height = 0;
this.series.rolloverModifierProps.markerColor = "rgba(255, 255, 255, 0)";
I can’t set
rolloverModifierProps.showRollover = false;
because in that case rolloverModifierProps.tooltipDataTemplate handler is not firing.
My handler looks like
rolloverModifierProps.tooltipDataTemplate = (seriesInfo: SeriesInfo): string[] => {
const ohlcInfo = seriesInfo as OhlcSeriesInfo;
myOwnHandlerToPassDataToHtml({ high: ohlcInfo.highValue, low: ohlcInfo.lowValue, open: ohlcInfo.openValue, close: ohlcInfo.closeValue });
return [];
};
I’am wondering if there is any other way to hide rollover marker but keep tooltipDataTemplate handler firing?
- Sergey Chernyakov asked 2 years ago
- last active 2 years 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 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
I am trying to add an axis annotation to a heatmap legend. When this annotation is dragged, the color mapping of the heatmap series and the heatmap legend will be changed. How can I modify the colorMap.gradientStops of the heatmap series and the heatmap legend while the chart is running?
- Quyen Sy asked 1 year ago
- last active 1 year ago
We use a SciChartVerticalGroup instance to create multi-pane view and add additional charts for indicators under the main chart. After updating scichart 2.2.2407 -> 3.2.461
we face with the following error
(see the screen shot).
Error from chart in div cid1694501226340: TypeError: Cannot read properties of undefined (reading ‘invalidateElement’)
It occurs when we remove sub-pane and change the main chart line, for example from FastLineRenderableSeries
to FastCandlestickRenderableSeries
There was no such error on version 2.2.2407
How we can I fix this?
- Sergey Chernyakov asked 7 months ago
Hi –
I could not find an example in the various examples your provide
I have several charts in different components
When a component is closed I want to ensure the chart is destroyed and there is not potential for memory leak
What is this best way of doing this?
Thanks
- Himura Kenshin asked 5 months ago
- last active 5 months ago
I have a chart with multiple series, left and right y-axes and one x-axis, some series are assign to left y-axis and some are right y-axis and they all have the same x-axis.
But there is one specific serie that need to be control on its own. I consider adding another y-axis either on the left or right axis, but the issue with that is that both the left and right axes are vertically stacked with some other y-axes. So, if I add another y-axis, it will just be stacked, but I need this y-axis to be on its own and not stacked.
The image below show my current chart, and the white line serie is the one that need a y-axis of its own. Currently it is attach to the right y-axis.
- Nung Khual asked 3 months ago
- last active 3 months ago
I have been working with the new Overview Chart feature available in the new 2.0.0-beta.2084 release, and ran into an issue where I can remove lines from the overview surface no problem, but then I always receive an error whenever I try to add one.
I was just wondering if there is a recommended flow for when a parent chart’s renderable series array has traces added or removed. One thing I did try to circumvent this issue was to delete the old overview and add a new one, but I receive either a separate error or the overview would draw without any traces.
I have attached a file with example code that should display the error I receive when you add a line to an overview component. I have also attached an image of the error that appears in the console.
- Drew Afshari asked 3 years ago
- last active 3 years ago
Hello, I just started evaluating your 2D JS chart library and am running into an error (below) and don’t know what I should do to continue forward:
Error:
wasm streaming compile failed: TypeError: Failed to execute ‘compile’
on ‘WebAssembly’: Incorrect response MIME type. Expected
‘application/wasm’.falling back to ArrayBuffer instantiation
failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0
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 versionUncaught (in promise) 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
I am copying the scichart2d.data and scichart2d.wasm in my webpack config as follows (according to your tutorials):
config.plugins.push(
new CopyPlugin({
patterns: [
// {
// from: 'src/index.html',
// to: '',
// },
{
from: 'node_modules/scichart/_wasm/scichart2d.data',
to: '',
},
{
from: 'node_modules/scichart/_wasm/scichart2d.wasm',
to: '',
},
],
})
I have since then done the following but to no avail:
- Restart my webpack-dev-server -> In chrome, “Empty cache and refresh”
- Delete my node_modules folder -> yarn install -> yarn start
Can someone please help me with this issue at an earliest convenience.
- sachin patel asked 2 years ago
- last active 4 months ago
Hi,
I’ve had a request from the client of our app to set logarithmic axis to have their major ticks at powers of 10, for example 0.1|1|10|100|1000|10000 – they would be expressed as 1e-1|1e0|1e1|1e2|1e3|1e4…. etc.
Is this possible within the current implantation of the logarithmic axis?
Cheers,
- Adam Stone asked 2 years ago
- last active 2 years ago
We are using JavaScript Chart Editable Annotations but we need some more modificaions in that which can enhance this feature in terms of user experience.
Currently when the anonations are loaded they are havinng a fixed shape but we want the annotations to be draggable as soon as they are loaded in the charts whitout any extra clicks,this feature is provided by tradingView charts and we also want to provide the same to our users.
I have attached images and videos for better understanding of the issue.
Hope we can get the solution of this issue asap.
Please refer to the below video link for beter understanding.
https://www.loom.com/share/213b66eb21db44f9ac2457a89563a21a
- Saksham Jaiswal asked 1 year ago
- last active 1 year ago
Can SciChart be used in Qt? If so, is there a demo available for reference, or can you provide guidance on how to use it?
- Allen Nee asked 12 months ago
- last active 12 months ago
I want to create two xAxis, the first one will be a normal xAxis and the second one will be an array of date ranges, but the issue then is that since all the xAxis are inside one array together, they all are stacked on top of each other.
I tried sciChartSurface.layoutManager.bottomOuterAxesLayoutStrategy = new BottomAlignedOuterHorizontallyStackedAxisLayoutStrategy(); but that only create all xAxis into one line of xAxis.
I want two line of xAxis, where the first one is normal, but second xAxis should be Horizontally Stacked Axis Layout.
The first image is before horizontal stacked is applied and the second after.
The third image show the xAxes array from sciChartSurface.xAxes, the index(0) of the array is the first xAxis, which should be normal, and the rest (index 1 – 8) should be horizontally stacked.
The horizontal stacked xAxis should be right below the first xAxis.
- Nung Khual asked 9 months ago
- last active 9 months ago
I am using the solution you provided on, https://www.scichart.com/questions/js/is-it-possible-to-create-info-box-that-will-sync-with-the-xaxis-of-the-chart.
The solution work great but there is one issue, the issue is that the text annotation should always be visible.
The issue with this solution is that the text annotation disappear if I zoom in somewhere not the text area.
Also another issue is that, in this example, the first info box x1 is beyond the current range, and so the text annotation is not visible, since the x1 of the text annotation is the same as info box and x1 is not within the current range.
First image show the first red info box x1 is not within current range, therefore not showing text annotation and the second info box working as expected with text annotation.
The second image show what happen once I zoom in on the right side away from the text annotation, then the ‘#21H’ is not visible anymore, which is wrong. Just like in my previous question example, the text annotation should always be visible, other than that, everything work great.
Thank you and let me know if there is any question.
- Nung Khual asked 7 months ago
- last active 7 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?
- João Velasques asked 5 months ago
- last active 1 month ago
I intend to use the Ctrl
key to allow the user to select multiple FastLineRenderableSeries
at once in an onkeydown
event. Is there any way to do so while maintaining the default behavior?
Note: I was able to use onSelectedChanged
to select a FastLineRenderableSeries
, but I was only able to select one FastLineRenderableSeries
at a time.
Here’s the code that I have to generate the FastLineRenderableSeries
:
let fastLineRenderableSeries = new FastLineRenderableSeries(this.wasmContextGraph, {
dataSeries: xyDataSeries,
id: traceId,
xAxisId: this.sciChartGraph.xAxes.get(0).id.toString(),
yAxisId: traceData.array[0][0],
isVisible: true,
isSelected: false,
opacity: 1,
resamplingMode: EResamplingMode.Auto,
onSelectedChanged: (sourceSeries, isSelected) => {
if (isSelected){
// some unrelated functions
} else {
// some unrelated functions
}
}
});
- Suzanne Ong asked 2 months ago
- last active 2 months ago
I am getting the alert message on our application and now I got the same message on the https://demo.scichart.com/javascript-line-chart also. It’s not happening all the time. But it’s happening sometimes only on the application.
- Arun Surendran asked 3 years ago
- last active 3 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
Hi,
I’ve been trying to customize the RolloverModifier tooltip content with a vertical chart but am at a loss to try to get the format I need. I’d like to take in all the series info and display them in a tooltip together with a small icon and the y-value next to this.
I was able to do this in the CursorModifier content but unable to do so in the RolloverModifier which is what I really want to use.
I’ve included a CodeSandbox link below showing the custom SVG template and output on the CursorModifier I’d like to use for the RolloverModifier. Is this type of output template possible?
Thanks in advance!
- Craig Wendel asked 1 year ago
- last active 1 year 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
I need to make a demo of a sweep line with multiple surfaces with reactjs, but The problem is that when I choose to show more than 1 surface it only plays on the data on the latest created surface and stops drawing data on the old surfaces.
you can see the example here with the code: https://28zf6p.csb.app/
this is a GIF for the problem:
[in the stack overflow link]
note: the reason I need multiple surfaces is that I want to have the charts draggable with sortableJS to follow the design I got.
- dolev dublon asked 4 months ago
- last active 3 months ago
Looking to try and “link” two timeseries charts when either one is zoomed. The link aspect would be updating the other chart to have the same visible range as the zoomed chart.
Each chart has its visibleRange property updated in response to separate socket events, that happen at similar intervals but different.
Originally, was hoping to have something similar to the onZoomExtents method that fires a callback that would allow me to grab the latest min/max of the visibleRangeProperty of the xAxes to then update the other chart.
Any suggestions on how I could go about doing this?
And if it is not clear what I am talking about I can provide some code snippets.
- James Miller asked 2 years ago
- last active 4 months ago
Hi. I’m trying to add 3DChart to my vue project. And I have a question about the configuration. Can I download .data and .wasm files from the CDN.
For 2D charts , I’ve used recomendation of your release v.2.2:
SciChartSurface.useWasmFromCDN()
It works for me. How I can use CDN for SciChart3DSurface?
- Volodymyr Stoyanovskyy asked 2 years ago
- last active 2 years ago
Hello, I need to use tooltips to display information to users. However, after using the tooltip, there will be a jam after the tooltip appears and when zooming. How can I optimize the performance.
The following is the code. I use the js example: “Load 500 Series x 500 Points Performance Demo” for transformation
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { EllipsePointMarker } from "scichart/Charting/Visuals/PointMarkers/EllipsePointMarker";
import {
RolloverModifier,
TRolloverTooltipDataTemplate
} from "scichart/Charting/ChartModifiers/RolloverModifier";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { SciChartSurface } from "scichart";
import {
IXyDataSeriesOptions,
XyDataSeries
} from "scichart/Charting/Model/XyDataSeries";
import { NumberRange } from "scichart/Core/NumberRange";
import { EAutoRange } from "scichart/types/AutoRange";
import { convertRgbToHexColor } from "scichart/utils/convertColor";
// eslint-disable-next-line
SciChartSurface.useWasmFromCDN();
const divElementId = "scichart-root";
const color = "#368BC1";
const SERIES = 1500;
const POINTS = 188;
const drawExample = async (updateTimeSpans) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(
divElementId,{ widthAspect: 3, heightAspect: 2}
);
const xAxis = new NumericAxis(wasmContext, {
visibleRange: new NumberRange(0, POINTS),
autoRange: EAutoRange.Never
});
sciChartSurface.xAxes.add(xAxis);
const dataSeriesArray= new Array(SERIES);;
const rendSeriesArray=new Array(SERIES);
const yAxis = new NumericAxis(wasmContext, {
visibleRange: new NumberRange(-5000, 5000),
autoRange: EAutoRange.Never
});
// yAxis.labelProvider.numericFormat = ENumericFormat.Decimal_0;
sciChartSurface.yAxes.add(yAxis);
for (let i = 0; i < SERIES; i++) {
const dataSeries= new XyDataSeries(wasmContext);
const rendSeries= new FastLineRenderableSeries(wasmContext, {
dataSeries,
stroke: color,
strokeThickness: 3,
pointMarker: new EllipsePointMarker(wasmContext, {
width: 5,
height: 5,
strokeThickness: 2,
fill: "white",
stroke: color
})
});
dataSeriesArray[i] = dataSeries;
rendSeriesArray[i] = rendSeries;
sciChartSurface.renderableSeries.add(rendSeries);
}
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier(),new RolloverModifier(wasmContext));
const loadPoints = () => {
const newTimeSpans=[];
// Start counting Points generation time
const generateTimestamp = Date.now();
const xValuesArray = new Array(SERIES);
const yValuesArray = new Array(SERIES);
const strokeArray = new Array(SERIES);
for (let i = 0; i < SERIES; i++) {
// Allocate data arrays
xValuesArray[i] = new Array(POINTS);
yValuesArray[i] = new Array(POINTS);
// Clear data, if any
dataSeriesArray[i].clear();
// Generate stroke
const r = Math.random();
const g = Math.random();
const b = Math.random();
strokeArray[i] = convertRgbToHexColor(r, g, b);
// Generate points
let prevYValue = 0;
for (let j = 0; j < POINTS; j++) {
const curYValue = Math.random() * 10 - 5;
xValuesArray[i][j] = j;
yValuesArray[i][j] = prevYValue + curYValue;
prevYValue += curYValue;
}
}
// Add the first time span: Generating 1M data points
newTimeSpans.push({
title: "Generate 500x500 Data Points",
durationMs: Date.now() - generateTimestamp
});
// Start counting batch append time
const appendTimestamp = Date.now();
for (let i = 0; i < SERIES; i++) {
dataSeriesArray[i].appendRange(xValuesArray[i], yValuesArray[i]);
rendSeriesArray[i].stroke = strokeArray[i];
}
// Add the second time span: Generation of data point
newTimeSpans.push({
title: "Append 500x500 Data Points",
durationMs: Date.now() - appendTimestamp
});
// Subscribe to sciChartSurface.rendered event,
// and calculate time duration between the append and
// the first frame after it
const firstFrameTimestamp = Date.now();
let frameIndex = 0;
let nextFramesTimestamp;
const handler = () => {
if (frameIndex === 0) {
// Add the third time span: Render the first frame
newTimeSpans.push({
title: "Render the frame",
durationMs: Date.now() - firstFrameTimestamp
});
nextFramesTimestamp = Date.now();
} else {
// Unsubscribe from sciChartSurface.rendered
updateTimeSpans(newTimeSpans);
sciChartSurface.rendered.unsubscribe(handler);
// Zoom extents at the end of performance measurement
sciChartSurface.zoomExtents();
}
setTimeout(sciChartSurface.invalidateElement, 0);
// Increment frame index
frameIndex++;
};
sciChartSurface.rendered.subscribe(handler);
};
loadPoints()
};
drawExample();
- js scichart asked 1 year ago
- last active 1 year ago
Hi,
New to using Scichart JS, is it possible to change the series colour of the overview chart?
See screenshot, I have a FastColumnRenderableSeries as the main chart, and using FastMountainRenderableSeries for the overview. I would like to change the colour of the overview chart.
Tried setting the stroke colour etc, as in the example but can not seem to make it work.
Kind Regards,
James
- James Usherwood 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
I need to set range for stock chart from some records(first today’s record, first record of day before yesterday, etc for week, month, start of current year and the first record of chart) to last record.
To set the range i need to get indexes of this rows. Tell me please how can i do this for stock xValues. May be i can mark some records to find if faster or i need to check every records from 0 to MAX and then select the range?
Thank you!
- Yevhenii Krasovskyi asked 10 months ago
- last active 10 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 7 months ago
- last active 3 weeks ago
I’m a C# developer looking to evaluate working with SciChartJS for a possible future project.
I’ve created a .NET Blazor Project working with JavaScript Interop and I would like to extend the CustomChartModifier2D in TypeScript.
I’ve not used npm to install SciChart into the project, rather I’m using the CDN approach in my _Host.cshtml file.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js" crossorigin="anonymous"></script>
I’ve been searching online for a SciChartJS TypeScript definition file so that I can leverage TS Strongly Typed system in my test project.
Is there one? Or do I need to build my own, or even is there an already made example of extending SciChart with TypeScript somewhere I’ve missed?
Thank you
- David P asked 5 months ago
- last active 5 months ago
The chart is only showing 3 of 4 Tooltips, is there a way to avoid this?
- Jhonatan Laguna asked 3 months ago
- last active 3 months ago
Hi all,
Today, I follow the Tutorial 01, but I can not set up the SciChart.js project,
I am sure that I do the same step like Tutorial,
some one can help me to realize the error messages?
Thanks a lot.
PS:error messages is attached file
Sincerely,
Alec
- YEN-WEN WANG asked 4 years ago
- last active 3 years ago
Hi,
In the documentation I can’t see any way to make a chart surface fill the available space in all directions.
By default, it fills the available horizontal space, but the ratio of width:height remains fixed.
The only example I’ve seen where this is slightly different is this JS example, where the width flexes independently to fit the available space: https://demo.scichart.com/javascript-2d-3d-chart-tenor-curves-example – I’m not sure exactly what part of the code makes this different to the other examples?
My goal is to allow the user to adjust the height and width of any chart themselves by dragging the size of the container div, with the chart surface ideally just filling the space in a ‘dumb’ way, rather than using JS to manually update the chart size during the drag event.
Thanks,
Joe
- Henrique Rodrigues asked 3 years ago
- last active 2 years ago
It’s possible to implements something like WPF ‘s SciChartOverview in SciChart JS ?
- Gustavo Reis asked 3 years ago
- last active 3 years ago
Hi,
We found that the part of our project that uses scichart does not work correctly on iOS12, and then we tried to open a browser on iOS12 to the scichart javascript demo webpage, and found that it did not work.
What is the minimum iOS version supported by javscript scichart?
- chinghung lai asked 2 years ago
- last active 4 months ago
The SciChart Legend and Cursor Tooltip (Showed only Y axis value) are not display after changing the graph layout.
I need to show the graph legend and Tooltip for all the Y axis.
The chart should also show the x axis value and y axis value on the Tooltip for more clarity.
Before changing the layout the legend was showing the five series vertically one below the other. But i need to show the five legends in horizontally (One after the another).
I have added the chart definition code. The data is added though Ajax call and code for that ajax call is not added.
I have attached the image for your reference.
I have attached the zip file with the html file.
- Leo Leslin asked 1 year ago
- last active 1 year ago
Hello, I am using SciChartJS and have a new requirement from our users as follows that I need help with the implementation. Any pointers from anyone would be a great help.
**Requirements: **
- Assume that x-axis is Time and y-axis is prices.
- There are multiple series in the chart (e.g., Bid Price, Ask Price)
- Allow user to select a time on xAxis using
CTRL + CLICK
- When the user selects the time, show the rollover line and the tooltip for all series at the selected time
- This rollover line and tooltip should remain visible until the user selects a new time on the x-axis at which point the rollover tooltip should display the tooltip for the new point.
I started inheriting the RolloverModifier
but couldn’t find an appropriate method to show the tooltip.
So, I started implementing the above feature using CustomModifierBase2d
and adding a VerticalLineAnnotation
for the rollover line. But again, struggling with the tooltip.
If someone could help me out or give me pointers, that would be highly appreciated.
Best Regards,
Sachin Patel.
- sachin patel asked 9 months ago
- last active 8 months 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 7 months ago
- last active 7 months 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
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
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
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
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 8 months ago
- last active 8 months ago