I want to build a column chart but I got the following error:
ERROR TypeError: Cannot read property ‘append’ of undefined
The error happened in line #42.
My code:
export class OutputAmplitudeComponent implements OnInit, OnDestroy {
constructor(@Inject(SETTING_SERVICE) private settingService: SettingService, private cdr: ChangeDetectorRef) {}
ngOnInit() {
this.settingService.registerSetting(HarmonicAmpSetting).pipe(takeUntil(this.ngUnsubHarmonicData)).subscribe(setting => {
const OutputAmplitudeData = setting.value;
for (let x = 1; x < this.numberOfOutput; x++) {
if (this.OutputMode === 'Voltage') {
if (phaseNum === 1) {
this.ampSource.data[x-1].voltage1 = OutputAmplitudeData[x];
} else if (phaseNum === 2) {
this.ampSource.data[x-1].voltage2 = OutputAmplitudeData[x];
} else if (phaseNum === 3) {
this.ampSource.data[x-1].voltage3 = OutputAmplitudeData[x];
}
} else if (this.OutputMode === 'Current') {
if (phaseNum === 1) {
this.ampSource.data[x-1].current1 = OutputAmplitudeData[x];
} else if (phaseNum === 2) {
this.ampSource.data[x-1].current2 = OutputAmplitudeData[x];
} else if (phaseNum === 3) {
this.ampSource.data[x-1].current3 = OutputAmplitudeData[x];
}
}
}
this.updateData();
});
this.sciChartInit();
}
updateData(){
var phaseNum1 = [];
var xData = [];
for (let x = 1; x < this.numberOfOutput; x++) {
if (this.ampSource.data != null && this.ampSource.data[x-1] != null) {
phaseNum1[x - 1] = parseFloat(this.ampSource.data[x - 1].voltage1);
xData[x - 1] = x;
if (!isNaN(phaseNum1[x - 1])) {
this.dataSeries1.append(x,x);
} else {
console.log("No num");
}
}
}
}
async sciChartInit() {
const { wasmContext, sciChartSurface } = await SciChartSurface.create("chart");
var phaseNum1 = [];
var xData = [];
this.dataSeries1 = new XyDataSeries(wasmContext);
for (let x = 1; x < this.numberOfOutput; x++) {
this.dataSeries1.append(x, x);
}
const xAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.yAxes.add(yAxis);
const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
rendSeries1.fill = "#dc443f";
rendSeries1.stroke = "green";
rendSeries1.strokeThickness = 1;
rendSeries1.dataSeries = this.dataSeries1;
rendSeries1.stackedGroupId = "one";
const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
verticallyStackedColumnCollection.dataPointWidth = 0.5;
verticallyStackedColumnCollection.add(rendSeries1);
verticallyStackedColumnCollection.animation = new ScaleAnimation({ duration: 1000, fadeEffect: true });
sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection);
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier());
sciChartSurface.zoomExtents();
sciChartSurface.chartModifiers.add(
new LegendModifier({
placement: ELegendPlacement.TopRight,
orientation: ELegendOrientation.Horizontal,
showLegend: true,
showCheckboxes: true,
showSeriesMarkers: true
})
);
return { wasmContext, sciChartSurface };
}}
I don’t understand what is undefined and why.
Thank you.
- ETS Ong asked 3 years ago
- last active 3 years ago
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
I see in the documentation that I need to set the boolean to true/false. But my question is how do I do this after the series has been rendered? I am using a custom legend and need to be able to toggle visibility.
export default function Chart() {
const [sciChartSurface, setSciChartSurface] = React.useState<SciChartSurface>();
const [wasmContext, setWasmContext] = React.useState<TSciChart>();
const dataSeriesMapRef = React.useRef<Map<keyof typeof chartData, XyDataSeries>>();
React.useEffect(() => {
(async () => {
const { sciChartSurface, wasmContext } = await drawChart(theme, chartType);
setSciChartSurface(sciChartSurface);
setWasmContext(wasmContext);
})();
dataSeriesMapRef.current = new Map<keyof typeof chartData, XyDataSeries>();
return () => sciChartSurface?.delete();
}, [chartType]); // make sure the chart is initialized only once
React.useEffect(() => {
if (dataSeriesMapRef.current && sciChartSurface && wasmContext && !isLoading) {
// const currentSeries = sciChartSurface.renderableSeries.asArray();
// if (currentSeries) sciChartSurface.renderableSeries.clear();
updateChartWithData(dataSeriesMapRef.current, theme, wasmContext, sciChartSurface, chartData, chartType);
}
}, [theme, chartData, wasmContext, sciChartSurface, isLoading]);
return (
<div id="chart-container">
<ControlsLegend
chartData={chartData}
dataSeriesMap={dataSeriesMapRef.current as Map<keyof typeof chartData, XyDataSeries>}
theme={theme}
sciChartSurface={sciChartSurface as SciChartSurface}
wasmContext={wasmContext as TSciChart}
/>
<div id={DIVID} style={{ width: windowWidth, height: windowHeight }} />
<ControlsBottom />
</div>
);
}
drawChart.js
export default async (theme: ExtendedTheme, chartType: string) => {
const { sciChartSurface, wasmContext } = await SciChartSurface.create(DIVID);
const isLightTheme = theme.palette.type === 'light';
console.log('createChart');
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext);
xAxis.labelProvider.formatLabel = (unixTimestamp: number) => {
return new Date(unixTimestamp * 1000).toLocaleDateString('en-us', {
month: 'short',
year: 'numeric',
day: 'numeric',
});
};
yAxis.labelProvider = new CustomLabelProvider();
sciChartSurface.yAxes.add(yAxis);
sciChartSurface.xAxes.add(xAxis);
if (chartType !== 'stack') sciChartSurface.chartModifiers.add(new RolloverModifier({ showRolloverLine: false }));
sciChartSurface.chartModifiers.add(new ZoomPanModifier());
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new PinchZoomModifier());
const rubberBandXyZoomModifier = new RubberBandXyZoomModifier({
isAnimated: true,
animationDuration: 400,
easingFunction: easing.outExpo,
fill: '#FFFFFF33',
stroke: '#FFFFFF77',
strokeThickness: 1,
});
sciChartSurface.chartModifiers.add(rubberBandXyZoomModifier);
sciChartSurface.zoomExtents();
if (isLightTheme) sciChartSurface.applyTheme(new SciChartJSLightTheme());
else sciChartSurface.applyTheme(new SciChartJSDarkTheme());
return { sciChartSurface, wasmContext };
};
updateChartWithData.js
export const updateChartWithData = (
dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>,
theme: ExtendedTheme,
wasmContext: TSciChart,
sciChartSurface: SciChartSurface,
chartData: ChartData,
chartType: string
) => {
sciChartSurface.invalidateElement();
const streamIds = Object.keys(chartData);
const isLightTheme = theme.palette.type === 'light';
if (isLightTheme) sciChartSurface.applyTheme(new SciChartJSLightTheme());
else sciChartSurface.applyTheme(new SciChartJSDarkTheme());
sciChartSurface.invalidateElement();
console.log('updateChartWithData');
console.log(chartData);
const stackedColumns: any[] = [];
streamIds.forEach((s) => {
const streamId = Number(s) as keyof ChartData;
const streamSelectorId = streamId as keyof typeof chartData;
if (dataSeriesMap.has(streamSelectorId)) {
const xyDataSeries = dataSeriesMap.get(streamSelectorId);
chartData[streamId].data.forEach((value) => {
xyDataSeries?.append(value.timestamp, value.value);
});
} else if (chartType === 'scatter') {
const lineSeries = LineChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);
sciChartSurface.renderableSeries.add(lineSeries);
sciChartSurface.zoomExtents();
} else if (chartType === 'bar') {
const lineSeries = BarChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);
sciChartSurface.renderableSeries.add(lineSeries);
sciChartSurface.zoomExtents();
} else {
const lineSeries = StackedChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);
stackedColumns.push(lineSeries);
}
});
};
“LineChart.js”
export default (
dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>,
theme: ExtendedTheme,
wasmContext: TSciChart,
chartData: ChartData,
streamSelectorId: keyof typeof chartData,
streamId: keyof ChartData
) => {
const xyDataSeries = new XyDataSeries(wasmContext);
dataSeriesMap.set(streamSelectorId, xyDataSeries);
const obj = chartData[streamSelectorId];
const stroke = obj.stroke as string;
xyDataSeries.dataSeriesName = obj.label as string;
chartData[streamId].data.forEach((value) => {
xyDataSeries.append(value.timestamp, value.value);
});
const lineSeries = new FastLineRenderableSeries(wasmContext, {
stroke,
strokeThickness: obj.strokeThickness,
strokeDashArray: obj.strokeDashArray,
dataSeries: xyDataSeries,
animation: new WaveAnimation({ zeroLine: -1, pointDurationFraction: 0.5, duration: 1000 }),
});
lineSeries.rolloverModifierProps.tooltipColor = theme.palette.background.paper;
lineSeries.rolloverModifierProps.tooltipTextColor = theme.palette.getContrastText(stroke);
lineSeries.rolloverModifierProps.markerColor = stroke;
lineSeries.rolloverModifierProps.tooltipTemplate = (
id: string,
tooltipProps: RolloverModifierRenderableSeriesProps,
seriesInfo: SeriesInfo,
updateSize: (width: number, height: number) => void
) => {
const { tooltipColor, tooltipTextColor, markerColor } = tooltipProps;
const { formattedXValue, yValue, seriesName } = seriesInfo;
const width = 192;
const height = 60;
updateSize(width, height);
return `<svg width='${width}' height='${height}' class="root">
<rect width="100%" height="100%" fill='${tooltipColor}' stroke='${markerColor}' stroke-width='2' />
<svg width='100%'>
<text dy="0" fill='${tooltipTextColor}'>
<tspan x="15" y="20" class="title">${formattedXValue}</tspan>
<tspan x="15" y="45" class="value">
${seriesName} | ${yValue.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
</tspan>
</text>
</svg>
</svg>`;
};
return lineSeries;
};
lengend.js
let _chartData: any[] = [];
export default ({
dataSeriesMap,
theme,
wasmContext,
sciChartSurface,
chartData,
}: {
dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>;
theme: ExtendedTheme;
wasmContext: TSciChart;
sciChartSurface: SciChartSurface;
chartData: ChartData;
}) => {
const classes = useStyles();
const chartRef = React.useRef<any>([]);
const [legendData, setLegendData] = React.useState<any[]>([]);
// _chartData = [..._chartData, ...values(chartData)];
_chartData = values(chartData);
_chartData = uniqby(_chartData, 'groupId');
_chartData = uniqby(_chartData, 'streamId');
React.useEffect(() => {
if (_chartData.length > 0 && !isEqual(chartRef.current, _chartData)) {
setLegendData(_chartData);
chartRef.current = _chartData;
}
}, [_chartData]);
const onClick = React.useCallback(
(item) => {
// const xyDataSeries = dataSeriesMap.get(160);
const _legendData = legendData.map((x) => {
if (x.groupId === item.groupId) x.isVisible = !x.isVisible;
return x;
});
setLegendData(_legendData);
},
[legendData]
);
return (
<div className={classes.root}>
<Paper variant="outlined" square>
{legendData.map((item: any) => (
<div className={classes.listItem} key={item.streamId}>
<IconButton
onClick={() => onClick(item)}
style={{ color: item.stroke }}
size="small"
aria-label={item.label}
>
{item.isVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
</IconButton>
<div>{item.label}</div>
</div>
))}
</Paper>
</div>
);
};
Inside the onClick function is where I was trying to change visibility for both series. I’ve tried multiple things without any luck. I assumed it would be as simple as getting the correct series, setting the visible property and maybe a re-render if that is even needed? Like I said any advice on a better way of handling this is welcome
- Rodolfo Sanchez asked 3 years ago
- last active 3 years ago
I want to build a Stacked Column Side by Side Chart by referring to the reference here.
However, the program could not enter line #41. It just stuck there and the column chart could not be shown.
My code:
export class OutputAmplitudeComponent implements OnInit, OnDestroy {
constructor(@Inject(SETTING_SERVICE) private settingService: SettingService, private cdr: ChangeDetectorRef) {}
ngOnInit() {
this.settingService.registerSetting(HarmonicAmpSetting).pipe(takeUntil(this.ngUnsubHarmonicData)).subscribe(setting => {
const OutputAmplitudeData = setting.value;
for (let x = 1; x < this.numberOfOutput; x++) {
if (this.OutputMode === 'Voltage') {
if (phaseNum === 1) {
this.ampSource.data[x-1].voltage1 = OutputAmplitudeData[x];
} else if (phaseNum === 2) {
this.ampSource.data[x-1].voltage2 = OutputAmplitudeData[x];
} else if (phaseNum === 3) {
this.ampSource.data[x-1].voltage3 = OutputAmplitudeData[x];
}
} else if (this.OutputMode === 'Current') {
if (phaseNum === 1) {
this.ampSource.data[x-1].current1 = OutputAmplitudeData[x];
} else if (phaseNum === 2) {
this.ampSource.data[x-1].current2 = OutputAmplitudeData[x];
} else if (phaseNum === 3) {
this.ampSource.data[x-1].current3 = OutputAmplitudeData[x];
}
}
this.sciChartInit(x);
}
});
}
async sciChartInit(x:number) {
var phase1 = parseFloat(this.ampSource.data[x-1].voltage1);
var phase2 = parseFloat(this.ampSource.data[x-1].voltage2);
var phase3 = parseFloat(this.ampSource.data[x-1].voltage3);
//stuck here
const { wasmContext, sciChartSurface } = await SciChartSurface.create("chart");
const xAxis = new NumericAxis(wasmContext);
sciChartSurface.xAxes.add(xAxis);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.yAxes.add(yAxis);
const dataSeries1 = new XyDataSeries(wasmContext, { xValues:[x], yValues:[phase1], dataSeriesName: "Phase 1" });
const dataSeries2 = new XyDataSeries(wasmContext, { xValues:[x], yValues:[phase2], dataSeriesName: "Phase 2" });
const dataSeries3 = new XyDataSeries(wasmContext, { xValues:[x], yValues:[phase3], dataSeriesName: "Phase 3" });
const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
rendSeries1.fill = "#dc443f";
rendSeries1.stroke = "black";
rendSeries1.strokeThickness = 1;
rendSeries1.dataSeries = dataSeries1;
rendSeries1.rolloverModifierProps.markerColor = "#b83735";
rendSeries1.rolloverModifierProps.tooltipColor = "#dc443f";
rendSeries1.rolloverModifierProps.tooltipTextColor = "#fff";
rendSeries1.stackedGroupId = "one";
const rendSeries2 = new StackedColumnRenderableSeries(wasmContext);
rendSeries2.fill = "#aad34f";
rendSeries2.stroke = "black";
rendSeries2.strokeThickness = 1;
rendSeries2.dataSeries = dataSeries2;
rendSeries2.rolloverModifierProps.markerColor = "#87a73e";
rendSeries2.rolloverModifierProps.tooltipColor = "#aad34f";
rendSeries2.rolloverModifierProps.tooltipTextColor = "#000";
rendSeries2.stackedGroupId = "two";
const rendSeries3 = new StackedColumnRenderableSeries(wasmContext);
rendSeries3.fill = "#8562b4";
rendSeries3.stroke = "black";
rendSeries3.strokeThickness = 1;
rendSeries3.dataSeries = dataSeries3;
rendSeries3.rolloverModifierProps.markerColor = "#715195";
rendSeries3.rolloverModifierProps.tooltipColor = "#8562b4";
rendSeries3.rolloverModifierProps.tooltipTextColor = "#fff";
rendSeries3.stackedGroupId = "three";
const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
verticallyStackedColumnCollection.dataPointWidth = 0.5;
verticallyStackedColumnCollection.add(rendSeries1, rendSeries2, rendSeries3);
verticallyStackedColumnCollection.animation = new ScaleAnimation({ duration: 1000, fadeEffect: true });
sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection);
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier());
sciChartSurface.zoomExtents();
sciChartSurface.chartModifiers.add(new RolloverModifier({ rolloverLineStroke: "#228B22" }));
sciChartSurface.chartModifiers.add(
new LegendModifier({
placement: ELegendPlacement.TopRight,
orientation: ELegendOrientation.Horizontal,
showLegend: true,
showCheckboxes: true,
showSeriesMarkers: true
})
);
return { wasmContext, sciChartSurface };
} }
.
.
The data needed in the chart is identified and no error is shown.
Any idea on the solution?
Thank you.
- ETS Ong asked 3 years ago
- last active 3 years ago
Hi, I want to color the axis label by its value,
eg.
value < 0 -> show red color
value = 0 -> show gray color
value > 0 -> show green color
similar to this question, but in javascript platform, it seems the LabelProvider has function related to the value(string) formatting only. Is there any ways to styling the label? Thanks!
- chinghung lai 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
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,
In past versions of SciChart JS I was able to run a webpack-built set of static files on an Nginx-based Docker container without issues.
I’m now seeing the error “memory access out of bounds” (screenshot attached) when doing this, and as a result does not render the charts at all, whether it’s running locally or hosted on AWS. This happens in both Chrome and Firefox.
It runs absolutely fine using webpack dev server.
The error seems to be coming from scichart2d.wasm. Any ideas?
Thanks
Joe
- Henrique Rodrigues asked 3 years ago
- last active 3 years ago
Some users have reported an error when importing SciChart.js into a TypeScript or JavaScript application:
TS1261: Already included file name ‘C:...\SciChartSurface.d.ts’ differs from file name ‘C:/…/node_modules/scichart/charting/
Visuals/Axis/SciChartSurface.d.ts’ only in casing.
Solution below…
- Andrew Burnett-Thompson asked 3 years ago
- last active 3 years ago
Do scichart supports microsoft blazor ?
If yes, Any examples available ?
- Abhilash R asked 3 years ago
- last active 2 years ago
Vertical Chart and pointMarker points are ploatted on somewhere on the canvas.
- Jerin Mathew asked 3 years ago
- last active 3 years ago
Hello,
I am trying out SciCharts and am looking to recreate the example 3D uniform surface mesh chart example and don’t have a good hold on the architecture yet. I don’t see directions as to which file to paste the example code into. I’m looking at the code example where it creates a “final camera3D camera – schiChart3DBuilder.newCamera3D().build();” and goes from there. (…/webframe.html#The%20Surface%20Mesh%203E%20Chart%20Type.html)
I have the 3D surface created and rendering. I just need to get started to go from there. Thank you.
- Christy Lott asked 2 years ago
- last active 2 years ago
pointMarker max and min values marker are cropped when autoRange is enabled. Check the attached image.
- Arun Surendran asked 3 years ago
- last active 3 years ago
Hello,
How can I animate an update of a candle or a bar in an OHLC type charts? I use realtime stock chart like this example.
When i update candle it redraws immediately with new values. But i want it to be updated with animation.
- Vita Bubko asked 3 years ago
- last active 2 years ago
I am adding a LegendModifier to display legends for my chart as below:
_sciChartSurface.chartModifiers.add(new SciChart.LegendModifier({ showCheckboxes: true }));
My legend currently looks like the below, with very poor legend visibility:
![enter image description here][1]
I want to know how to set this legend to be opaque so that the labels may be seen clearly. What would be event better would be to just have a constant class for my legend collection (perhaps .sciChartLegendsContainer or whatever) so that I can apply my own css styling myself, without having to hack around with javascript.
Thanks
- Malcolm Geddes asked 3 years ago
- last active 3 years ago
Hi. I’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
Hi
Is there any way to Create an image (as png) of an scichart surface and store it in Clipboard for later use in javascript?
- Ferdinand Staudhammer asked 3 years ago
- last active 3 years ago
I want to use my custom image as a background for SciChart js.
I tried to put background-image to body of the page.
Then I enabled transparent background via:
sciChartSurface.backgroundCompletelyTransparentEnabled = true;
But it doesn’t work. It does nothing.
Then I tried to put transparent background to SciChart:
sciChartSurface.background = "#00000000";
But it doesn’t work as well. Chart completely disappears in this case.
How can I put my image as a background for SciChart?
- Roman Zye asked 3 years ago
- last active 3 years ago
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
- Big Sur 11.6.
- Monterey 12.2.1
- Catalina 10.15.7 (late 2013 model)
![enter image description here][1]
sciChart version 1.4.1611
If you open the chart in the Firefox browser, then, strangely enough, everything works.
Is it related to the version of the library?
- Alexandr Zhuk asked 2 years ago
- last active 2 years ago
I have a real-time updated chart with multiple series. Is it possible for me to add a custom annotation to the chart by just providing the x1 value? i.e. The y1 value will be the y value of the data point in certain series with the provided x1 value. It will look like that the annotation will be sticked to the series with a fixed x1 value while the chart is updating.
- Kelly Chan asked 1 year ago
- last active 1 year ago
Hello,
We are working on our Angular Dashboard again using the JS Chart component and one item we would like to tidy up is the Meta Data displayed in the Tool Tips against data points.
When the cursor is enabled and a data point is hovered over, tool tips with the meta data is displayed for all data points in the vertical line; please refer to the screenshot attached.
We would like the tool tip to only be shown when the cursor is on a specific data point. We are currently working with an offshore team and any help surrounding this would be appreciated.
Kind regards,
- Nathan Weatherington asked 2 years ago
- last active 2 years ago
Hi, so I need to get the data of an annotation when clicked, I have tried with addEventListener ‘mousedown’ event and it work for most case, but the issue comes when some annotations are overlapping.
codesandbox example: https://codesandbox.io/s/vertically-stacked-axes-forked-smkd8v?file=/src/App.tsx
In the codesandbox example, you will see that M1 and M2 are overlapping, if I were to click on M2, the click event will return both M1 and M2, but I only want M2 to be return since I only click on M2.
I couldn’t make the clicking to work on codesandbox but I’m sure you get the idea. I have tested it on my local and I got that issue.
Please let me know if you got any other question, thank you.
- Nung Khual asked 6 months ago
- last active 6 months ago
Hi everyone,
I am using SciChart trial in Angular and I find it so powerful
Thanks for developing this
However, I am having some troubles using it with plotting realtime stock data
From having searched around I found that it is recommended to use CategoryAxis for stock charts to avoid gaps on days without data
However, how do I append/update the data with new data coming in
XYDataSeries.append takes a number for the x-value
In the code below, assume “addNewData” is called every second
How do I properly add the new data with the new DateTime and also format it however i would like
Thanks for your help
sciChartSurface.xAxes.add(new CategoryAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext,{
axisAlignment: EAxisAlignment.Left,
}));
addNewData(){
const x = new Number(new Date()).toString()
if(this.sciChartSurface){
const series = this.sciChartSurface.renderableSeries.get(0);
const dataSeries = <XyDataSeries> series.dataSeries;
const x = dataSeries.count();
const y = Math.random()
dataSeries.append(x, y)
this.sciChartSurface.zoomExtents()
}
}
- Himura Kenshin asked 6 months ago
- last active 6 months ago
I have a chart that allow users to add one BoxAnnotation and multiple CustomAnnotation (a marker). I got error and failed to drag the BoxAnnotation with the following steps:
Step 1: Call the addMarkerAnnotation() to add a CustomAnnotation
const markerSvgString = '<svg height="26" width="18" xmlns="http://www.w3.org/2000/svg">' +
'<polygon id="SVG_ID" fill="#000" fill-opacity="0.5" stroke="#00fc00" stroke-width="1.5" points="0,12 8,0 16,12 8,24" clip-path="url(#clip_normal)" />' +
'<clipPath id="clip_normal"><use xlink:href="#SVG_ID"/></clipPath>' +
'<text x="5" y="16" fill="#00fc00" font-weight="bold" font-size = "12">MARKER_ID</text>' +
'</svg>';
const deltaSvgString = '<svg height="28" width="28" xmlns="http://www.w3.org/2000/svg">' +
'<polygon id="SVG_ID" fill="#000" fill-opacity="0.5" stroke="#00fc00" stroke-width="1.5" points="0,0 12,24 22,0" clip-path="url(#clip_delta)" />' +
'<clipPath id="clip_delta"><use xlink:href="#SVG_ID"/></clipPath>' +
'<text x="5" y="10" fill="#00fc00" font-weight="bold" font-size="10">MARKER_ID</text>' +
'</svg>';
const addMarkerAnnotation = useCallback((markerId, mode, x1, y1) => {
x1 = parseFloat(x1);
y1 = parseFloat(y1);
if (x1 != null && y1 != null) {
let svgString;
const svgId = "markerSvg_" + markerId;
if (mode.includes("Delta")) {
const compareMarkerKey = mode.replace("Delta ", "");
svgString = deltaSvgString.replace(/MARKER_ID/g, (parseInt(markerId)+1) + "-" + compareMarkerKey);
} else {
svgString = markerSvgString.replace(/MARKER_ID/g, parseInt(markerId)+1);
}
svgString = svgString.replace(/SVG_ID/g, svgId);
markerAnnotations.current[markerId] = new CustomAnnotation({
x1,
y1,
id: markerId,
isEditable: true,
isSelected: true,
verticalAnchorPoint: EVerticalAnchorPoint.Center,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
svgString: svgString
});
sciChartSurfaceRef.current.annotations.add(markerAnnotations.current[markerId]);
reorderMarkers(markerId);
markerAnnotations.current[markerId].dragEnded.handlers.push(() => {
let annotation = markerAnnotations.current[markerId];
let freq = annotation.x1 * FREQ_UNITS.KHZ;
markersInfoSetter.current[markerId](origMarkerInfo => ({...origMarkerInfo, ...{freq: freq.toFixed(numDP.FREQ), power: annotation.y1.toFixed(numDP.POWER)}}));
if (markersInfoObj.current[markerId].mode !== "Fixed") {
getMarkerPeak(markerId, markersInfoObj.current[markerId].trace, annotation.x1 * FREQ_UNITS.GHZ);
}
reorderMarkers(markerId);
});
}
}, [deltaSvgString, markerSvgString, getMarkerPeak, reorderMarkers, numDP]);
Step 2: Call the removeMarkerAnnotation() to remove the CustomAnnotation
const removeMarkerAnnotation = useCallback((markerId) => {
if (markerAnnotations.current[markerId]) {
sciChartSurfaceRef.current.annotations.remove(markerAnnotations.current[markerId]);
markerAnnotations.current[markerId].delete();
markerAnnotations.current[markerId] = null;
}
}, []);
Step 3: Call addTriggerAnnotation() to add a BoxAnnotation
const addTriggerAnnotation = useCallback((x1, x2, y2) => {
x1 = parseFloat(x1);
x2 = parseFloat(x2);
y2 = parseFloat(y2);
if (x1 != null && x2 != null) {
console.log("addTriggerAnnotation: ", x1, x2, triggerAnnotation.current, sciChartSurfaceRef.current.annotations);
if (!triggerAnnotation.current) {
triggerAnnotation.current = new BoxAnnotation({
id: "triggerBox",
fill: "transparent",
stroke: "#93A3B1", //#93A3B1 //#6B818C
strokeThickness: 2,
xCoordinateMode: ECoordinateMode.DataValue,
x1: x1,
x2: x2,
yCoordinateMode: ECoordinateMode.DataValue,
y1: minY,
y2: y2,
isEditable: true,
resizeDirections: EXyDirection.XyDirection,
});
sciChartSurfaceRef.current.annotations.add(triggerAnnotation.current);
triggerAnnotation.current.dragDelta.handlers.push(() => {
triggerAnnotation.current.y1 = minY;
const minX = specSettingsRef.current.start/freqUnits.KHZ;
const maxX = specSettingsRef.current.stop/freqUnits.KHZ;
const maxY = specSettingsRef.current.refLevel;
if (minX != null && maxX != null) {
if (triggerAnnotation.current.x1 < minX) {
triggerAnnotation.current.x1 = minX;
} else if (triggerAnnotation.current.x1 > maxX) {
triggerAnnotation.current.x1 = maxX;
} else if (triggerAnnotation.current.x2 > maxX) {
triggerAnnotation.current.x2 = maxX;
} else if (triggerAnnotation.current.x2 < minX) {
triggerAnnotation.current.x2 = minX;
}
}
if (maxY != null) {
if (triggerAnnotation.current.y2 < minY) {
triggerAnnotation.current.y2 = minY;
} else if (triggerAnnotation.current.y2 > maxY) {
triggerAnnotation.current.y2 = maxY;
}
}
});
triggerAnnotation.current.dragEnded.handlers.push(() => {
const maxX = specSettingsRef.current.stop/freqUnits.KHZ;
const x1 = triggerAnnotation.current.x1;
const x2 = triggerAnnotation.current.x2;
const y2 = triggerAnnotation.current.y2;
if (x1 != null && x2 != null && maxX != null) {
if (x1 > x2) {
triggerAnnotation.current.x1 = x2;
triggerAnnotation.current.x2 = x1;
} else if (x2 < x1) {
triggerAnnotation.current.x1 = x2;
triggerAnnotation.current.x2 = x1;
} else if (x1 === x2) {
if (x2 + xInterval.current <= maxX) {
triggerAnnotation.current.x2 = x2 + xInterval.current;
} else {
triggerAnnotation.current.x1 = x1 - xInterval.current;
}
}
const origStartFreq = parseFloat(triggersRef.current.startFreq);
const origStopFreq = parseFloat(triggersRef.current.stopFreq);
const newStartFreq = parseFloat((triggerAnnotation.current.x1 * freqUnits.KHZ).toFixed(numDP.FREQ));
const newStopFreq = parseFloat((triggerAnnotation.current.x2 * freqUnits.KHZ).toFixed(numDP.FREQ));
if (origStartFreq !== newStartFreq || origStopFreq !== newStopFreq) {
setTriggers(origObj => ({...origObj, ...{
startFreq: newStartFreq,
stopFreq: newStopFreq,
level: parseFloat(y2.toFixed(numDP.POWER)),
}}));
}
}
});
} else {
updateTriggerAnnotation(x1, x2, y2);
}
}
}, [setTriggers, freqUnits.KHZ, numDP.FREQ, numDP.POWER, minY, updateTriggerAnnotation]);
Step 4: Drag the BoxAnnotation. It’s failed to drag the box and got the error “Uncaught TypeError: Cannot read properties of undefined (reading ‘seriesViewRect’)”.
It’s a strange bug as it can only be reproduced with the steps above. With the following steps, I can drag the BoxAnnoation without problem:
Step 1 -> Step 3 -> Step 4
Step 3 -> Step 4
Step 3 -> Step 1 -> Step 2 -> Step 4
- Quyen Sy asked 1 year ago
- last active 1 year ago
I am using NextJS with the SciChart trial license for development and suddenly got the error “SciChart: WebGL not supported! ” with Chrome. It worked fine before, and I didn’t change any codes for launching the chart. Also, it works fine with Firefox. The chrome version I am using is 107.0.5304.107.
BTW, the error is gone after I restarted my computer. Is it possible to be related to memory issue?
Below are my codes for initializing the chart:
const initSciChart = () => {
// LICENSING //
SciChartSurface.setRuntimeLicenseKey("xxx");
SciChartDefaults.enableResampling = true;
SciChartDefaults.asyncLabels = true;
SciChartDefaults.useSharedCache = true;
drawSpecChart();
};
async function drawSpecChart() {
// Create the SciChartSurface in the div 'scichart-root'
// The SciChartSurface, and webassembly context 'wasmContext' are paired. This wasmContext
// instance must be passed to other types that exist on the same surface.
let xAxesNumberRange = new NumberRange(0, 18);
let yAxesNumberRange = new NumberRange(-140, -40);
const chartDefinition = {
xAxes: [{
type: EAxisType.NumericAxis,
options: {
axisTitle: "Frequency (GHz)",
axisTitleStyle: {
fontSize: 12,
fontFamily: "sans-serif",
fontWeight: "bold"
},
labelStyle: {
fontSize: 12,
fontFamily: "sans-serif"
},
visibleRange: xAxesNumberRange,
zoomExtentsRange: xAxesNumberRange,
labelFormat: ENumericFormat.Decimal,
labelPrecision: 6,
cursorLabelFormat: ENumericFormat.Decimal,
cursorLabelPrecision: 6,
drawMajorBands: false,
}
}],
yAxes: [{
type: EAxisType.NumericAxis,
options: {
axisTitle: "Power (dBm)",
axisTitleStyle: {
fontSize: 12,
fontFamily: "sans-serif",
fontWeight: "bold"
},
labelStyle: {
fontSize: 12,
fontFamily: "sans-serif"
},
autoTicks: false,
majorDelta: 10,
minorDelta: 5,
axisAlignment: EAxisAlignment.Left,
visibleRange: yAxesNumberRange,
zoomExtentsRange: yAxesNumberRange,
labelFormat: ENumericFormat.Decimal,
labelPrecision: 2,
cursorLabelFormat: ENumericFormat.Decimal,
cursorLabelPrecision: 2,
drawMajorBands: false,
},
}],
series: [],
modifiers: [
{ type: EChart2DModifierType.MouseWheelZoom },
{
type: EChart2DModifierType.ZoomExtents,
options: {
isAnimated: false
}
}
]
};
const { sciChartSurface, wasmContext } = await chartBuilder.build2DChart("scichart-root", chartDefinition);
xAxesNumberRange = null;
yAxesNumberRange = null;
};
- Kelly Chan asked 1 year ago
- last active 1 year ago
Hello,
I have a BlazorWASM app. I am wondering how to sync the x values of different renderable series that have different number of data points.
In a simple form, I am passing in the data for a moving average to be rendered on the chart that has already been populated with data. The moving average data has already been calculated and has the correct date timestamps. But when I add this series to the chart it is starting at index 0 of where the the price data started instead of where the xAxis date of this renderable series has.
I prefer not to use the filters api to regenerate this data as some will be complex and have already been calculated by study or pulled from a database. I have seen the article to offset a series but this seems unnecessary since I already have the x axis coordinate that I want each point of the new line series to be rendered.
Is there somewhere in the docs that I missed how to get these renderable series to line up properly to their own x data points?
Thank you
- Leland asked 2 years ago
- last active 2 years 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 am trying to implement a waterfall chart with uniform heatmap. The data is updated from the top of the chart and keeps pushing the old data down. I would like to show the y-axis with time. How can I update the y-axis with updated data?
Assume the heatmap is 256 height, I created the zValues array with min value when draw the heatmap:
const SPECTROGRAM_WIDTH = 256;
const minPower = -200;
spectrogramZValues.current = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(minPower));
Update zValues array when new data come:
spectrogramZValues.current.shift();
spectrogramZValues.current.push(newData);
When the first data pushed to the chart. There will be one row shown in the axis with timestamp t1. When the second data comes, the top row of the y-axis should be t2 and the t1 is pushed down. When the waterfall chart is filled with 256 data, the bottom of the y-axis should be t1 and the top of the y-axis should be t256. Is it possible to implement this?
Now I am using the uniform heatmap to implement it with yStart=0 and yStep=1. I tried to add the labelProvider to the y-axis to show the timestamp of each row. I am keeping an array locally to store the timestamp of each row which will be updated with the new data. I tried to map this array and return the timestamp in the y-axis labelProvider. But it doesn’t work. The y-axis will not be refreshed when data updated.
yAxis.labelProvider.formatLabel = (dataValue) => {
const ts = timestampArray[dataValue];
if (ts) {
const timeObj = new Date(ts);
const hours = ('0' + timeObj.getHours()).slice(-2);
const minutes = ('0' + timeObj.getMinutes()).slice(-2);
const seconds = ('0' + timeObj.getSeconds()).slice(-2);
const milliseconds = ('0' + timeObj.getMilliseconds()).slice(-3);
return `${hours}:${minutes}:${seconds}.${milliseconds}`;
} else {
return "";
}
};
- Quyen Sy asked 12 months ago
- last active 11 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 Scichart team,
it’s possible to rotate yAxis (and put them horizontally), and adding some break lines if I have more than 1 word? Like:
Waiting for feedback.
Many thanks,
Pedro Cruz
- Ricardo Diz asked 3 years ago
- last active 3 years ago
I have a real time updated chart with multiple traces. I got run time error sometimes. It seems happening randomly. But it can be reproduced after a long run (e.g. 45 mins). I have checked, the memory condition is normal when the problem happens. Do you have any idea what’s wrong with it when I got this error?
- Quyen Sy asked 1 year ago
Hi,
I’m trying to synchronize the pie chart and the line chart in React. I’ve already done this for two line graphs.
They both use the same data table. And I want to know if it’s possible, if when I zoom in on the line chart, it updates the Pie chart with the new range.
Thanks, (sorry for my english ^^)
- thier tom asked 1 year ago
- last active 1 year ago
Downloaded latest Licensing Wizard on my Mac M1 however I cannot run it to start my trial of SciChart.JS.
I’m looking at SciChart.JS for financial charting project in a .NET Blazor for analysis only.
As I’ve not been able to get SciChart installed or to try, is it possible to place annotations such as trend lines and boxes onto the chart by me clicking on the chart?
Also, how does indicators work? And can I add my own indicators? Will the algorithms for these indicators be written in JavaScript or can I do this in C# from Blazor?
I attach a screen shot of the problem running the Licensing Wizard.
Any suggestions would be helpful.
Thanks
- David P 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 1 year 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
Tell me, please, how best to organize the graph in the case when on the time axis we can have more than 100-1000 records within 1 second. The problem seems to be that the X value must be accurate to at least 1 second? How to make records with even greater accuracy. and at the same time the time on the axis was shown correctly for this kind of data?
- Yevhenii Krasovskyi asked 10 months ago
- last active 10 months ago
Hi, spotted a Typescript issue – the class declaration of SeriesInfo is missing at least two properties – zValue and formattedZValue. Noticed it because my IDE was complaining about their usage. Looking at a comparison of the class declaration and a console log of what actually exists, it looks like a few more might be missing too.
The above properties are also missing from the type docs.
Thanks!
Joe
- Henrique Rodrigues asked 3 years ago
I am using a axis line chart from the js scichart. I want to change the font size of a legend. How do I change the font size of a legend?
- info vcanus asked 11 months ago
- last active 11 months ago
Is there a test demo that was done using SciChart WPF 2D.
- linxi zheng asked 1 year ago
- last active 1 year ago
I want to build a Stacked Column Side by Side Chart by referring to the reference here.
My code:
export class OutputAmplitudeComponent implements OnInit, OnDestroy {
yValues:any;
x:any;
constructor(@Inject(SETTING_SERVICE) private settingService: SettingService, private cdr: ChangeDetectorRef) {}
ngOnInit() {
this.settingService.registerSetting(OutputAmpSetting).pipe(takeUntil(this.ngUnsubAmplitudeData)).subscribe(setting => {
const OutputAmplitudeData = setting.value;
for (let x = 1; x < this.numberOfOutput; x++) {
if (this.OutputMode === 'Voltage') {
if (phaseNum === 1) {
this.ampSource.data[x-1].voltage1 = OutputAmplitudeData[x];
} else if (phaseNum === 2) {
this.ampSource.data[x-1].voltage2 = OutputAmplitudeData[x];
} else if (phaseNum === 3) {
this.ampSource.data[x-1].voltage3 = OutputAmplitudeData[x];
}
} else if (this.OutputMode === 'Current') {
if (phaseNum === 1) {
this.ampSource.data[x-1].current1 = OutputAmplitudeData[x];
} else if (phaseNum === 2) {
this.ampSource.data[x-1].current2 = OutputAmplitudeData[x];
} else if (phaseNum === 3) {
this.ampSource.data[x-1].current3 = OutputAmplitudeData[x];
}
}
this.sciChartInit();
}
});
}
xValues = this.x;
phase1:number = parseFloat(this.ampSource.data[this.x-1].voltage1);
phase2:number = parseFloat(this.ampSource.data[this.x-1].voltage2);
phase3:number = parseFloat(this.ampSource.data[this.x-1].voltage3);
async sciChartInit() {
const { wasmContext, sciChartSurface } = await SciChartSurface.create("chart");
const xAxis = new NumericAxis(wasmContext);
xAxis.labelProvider.numericFormat = ENumericFormat.Decimal_0;
sciChartSurface.xAxes.add(xAxis);
const yAxis = new NumericAxis(wasmContext);
sciChartSurface.yAxes.add(yAxis);
const dataSeries1 = new XyDataSeries(wasmContext, { xValues:this.x, yValues:this.phase1, dataSeriesName: "Phase 1" });
const dataSeries2 = new XyDataSeries(wasmContext, { xValues:this.x, yValues:this.phase2, dataSeriesName: "Phase 2" });
const dataSeries3 = new XyDataSeries(wasmContext, { xValues:this.x, yValues:this.phase3, dataSeriesName: "Phase 3" });
const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
rendSeries1.fill = "#dc443f";
rendSeries1.stroke = "black";
rendSeries1.strokeThickness = 1;
rendSeries1.dataSeries = dataSeries1;
rendSeries1.rolloverModifierProps.markerColor = "#b83735";
rendSeries1.rolloverModifierProps.tooltipColor = "#dc443f";
rendSeries1.rolloverModifierProps.tooltipTextColor = "#fff";
rendSeries1.stackedGroupId = "one";
const rendSeries2 = new StackedColumnRenderableSeries(wasmContext);
rendSeries2.fill = "#aad34f";
rendSeries2.stroke = "black";
rendSeries2.strokeThickness = 1;
rendSeries2.dataSeries = dataSeries2;
rendSeries2.rolloverModifierProps.markerColor = "#87a73e";
rendSeries2.rolloverModifierProps.tooltipColor = "#aad34f";
rendSeries2.rolloverModifierProps.tooltipTextColor = "#000";
rendSeries2.stackedGroupId = "two";
const rendSeries3 = new StackedColumnRenderableSeries(wasmContext);
rendSeries3.fill = "#8562b4";
rendSeries3.stroke = "black";
rendSeries3.strokeThickness = 1;
rendSeries3.dataSeries = dataSeries3;
rendSeries3.rolloverModifierProps.markerColor = "#715195";
rendSeries3.rolloverModifierProps.tooltipColor = "#8562b4";
rendSeries3.rolloverModifierProps.tooltipTextColor = "#fff";
rendSeries3.stackedGroupId = "three";
const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
verticallyStackedColumnCollection.dataPointWidth = 0.5;
verticallyStackedColumnCollection.add(rendSeries1, rendSeries2, rendSeries3);
verticallyStackedColumnCollection.animation = new ScaleAnimation({ duration: 1000, fadeEffect: true });
sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection);
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier());
sciChartSurface.zoomExtents();
sciChartSurface.chartModifiers.add(new RolloverModifier({ rolloverLineStroke: "#228B22" }));
sciChartSurface.chartModifiers.add(
new LegendModifier({
placement: ELegendPlacement.TopRight,
orientation: ELegendOrientation.Horizontal,
showLegend: true,
showCheckboxes: true,
showSeriesMarkers: true
})
);
return { wasmContext, sciChartSurface };
} }
.
Error:
ERROR in output-amplitude.component.ts: - error TS2322: Type 'number' is not assignable to type 'number[]'.
const dataSeries1 = new XyDataSeries(wasmContext, { xValues:this.x, yValues:this.phase1, dataSeriesName: "Phase 1" });
node_modules/scichart/Charting/Model/XyDataSeries.d.ts:
yValues?: number[];
The expected type comes from property 'yValues' which is declared here on type 'IXyDataSeriesOptions'
.
.
I tried to parse the variables to numbers by using parseFloat in phase1 to phase3 but it did not solve error in yValues.
Any idea on the solution?
- ETS Ong asked 3 years ago
- last active 3 years ago
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
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
I am getting a console error when using isVisible: false to the FastLineRenderableSeries or FastMountainRenderableSeries and CursorModifier together.
- Jerin Mathew asked 3 years ago
- last active 3 years ago
On the vertical chart custom tooltipSvgTemplate seriesInfo isHit returns false always. Its working fine on the normal chart. Can you please check this issue is on verticle chart.
- Jerin Mathew asked 3 years ago
- last active 3 years ago
Hi,
sciChartSurface.chartModifiers.clear() is getting error on the application. Its working on previous version and getting error on 1.4.1557.
- Arun Surendran asked 3 years ago
- last active 3 years ago
ZoomPanModifier date format charts zoom out continuously then showing NaN on the scale. It happened because the zoom level goes under the invalid date. Can you add the Minimum Zoom/Pan and Maximum Zoom/Pan area to be configured on options?
- Arun Surendran asked 3 years ago
- last active 3 years ago
Working on an application that requires toggling between Linear and Logarithmic scales. I am using the JavaScript version of the library, and I see that there is a LogarithmicNumericAxis available in the WPF version but there is not one currently supported in the JS version.
Curious if there were any recommendations on how to go about hand rolling this type of functionality?
The application is doing realtime streaming of data points so need to be able to update existing values as well as handle incoming values.
- James Miller asked 3 years ago
- last active 3 years ago
I’m looking for some direction on how to implement a modifier that reacts to interaction (mouse up/down etc) with a charts axis
- User clicks on axis
- Provide callback for side effect when clicked
Thanks
- Henrique Rodrigues asked 3 years ago
- last active 3 years ago
Hi, 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