Hello,
I would like to ask if we can expect working labels for LineAnnotation anytime soon? It’s the only type of line that doesn’t have functioning labels. I need this information because we are planning to deploy a version with formations soon, and we cannot afford inconsistency in the labels. If this is not planned for the near future, we will temporarily disable this option for the other lines.
Best regards,
Kamil
- Kamil Macura asked 1 hour ago
Hello,
we upgraded the version from 3.4.652 to 3.5.687, and problems with the Y-axis appeared on the charts. When moving the overviewChart sliders or using the scroll wheel to change the visibleRange, the Y-axis fails to set the min and max values correctly, resulting in the default values of 0 and 10 being displayed (Error: Argument max must be a real number (not infinite, not NAN)). We didn’t change anything in the code. I checked the data we provide, and all variables are of type Number, there are no other random things.
I’ll just include the axis parameters we use.
const yAxis = new NumericAxis(wasmContext, {
autoRange: EAutoRange.Always,
growBy: new NumberRange(0.1, 0.1),
drawMajorBands: false,
drawMajorTickLines: false,
drawMinorGridLines: false,
drawMinorTickLines: false,
labelStyle: {
fontSize: 11,
fontFamily: 'Open Sans, sans-serif',
padding: new Thickness(0, 3, 0, 0),
color: this.theme.lineChartColor,
alignment: ELabelAlignment.Right,
},
maxAutoTicks: 7,
axisAlignment: EAxisAlignment.Right,
labelProvider: this.getDynamicValueLabelProvider(),
isVisible: false
});
const yAxisVolume = new NumericAxis(wasmContext, {
id: USER_CHART.Y_AXIS_VOLUME_ID,
growBy: new NumberRange(0, 4),
isVisible: false,
autoRange: EAutoRange.Always,
allowFastMath: true,
});
https://ibb.co/tL5HgCz – in the screenshot, the incorrect axes are on the left side – sometimes only the volume axis (invisible), and in another case, both axes. The correct charts are on the right side.
Best regards,
Kamil
- Kamil Macura asked 22 hours ago
Hello there,
The hit test provider for stackedColumnRenderableSeries returns ‘false’ for the ‘isHit’ boolean when hit testing stacked columns with negative values. However, stacked Columns with positive values correctly return ‘true’ for ‘isHit’ when used in the same setup.
I am trying to achieve that the hit test provider returns ‘true’ when hit testing stacked columns with negative values.
Here’s my demo:
https://codepen.io/maxgeldner/pen/rNXYjgX?editors=1010
I have tried exchanging the series in line 75 and 77 and clicking on the displayed columns afterwards in order to hit test them. Clicking on negative columns returns ‘false’ inside the hit test, clicking on positive columns returns ‘true’.
- Johannes Pungier asked 1 day ago
- last active 1 day ago
The chart works ok on date data. But I have weekly data, e.g.
xValues is set to x
yValues is set to y
xl is not used for drawing the chart.
I then get a tooltip that is out of sync with the x axis (see pic).
"a": {
"x": [
1,
2,
3,
4,
5,
6,
7
],
"xl": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun"
],
"y": [
46.8235294117647,
48.0,
49.34285714285714,
45.05714285714286,
42.114285714285714,
39.55882352941177,
40.970588235294116
]
},
My chart code
const initSciChart = async(series_id, target_element_id, xValues, yValues, zoomOn = false, labels = null) =& gt; {
// Initialize SciChartSurface. Don't forget to await!
const { sciChartSurface, wasmContext } = await SciChartSurface.create(target_element_id, {
theme: new SciChartJsNavyTheme(),
title: series_id,
titleStyle: { fontSize: 22 }
});
// Create an XAxis and YAxis with growBy padding
const growBy = new NumberRange(0.1, 0.1);
let labelProvider = new SmartDateLabelProvider();
if (labels) {
console.log('setting labels');
labelProvider = new TextLabelProvider({
// When passed as an array, labels will be used in order
labels: labels,
});
}
}
const xAxesOptions = {
//axisTitle: "Time",
maxAutoTicks: 10,
minorsPerMajor: 2,
drawMajorGridLines: true,
drawMinorGridLines: true,
axisAlignment: EAxisAlignment.Bottom,
labelProvider: labelProvider,
growBy,
labelStyle: {
alignment: ELabelAlignment.Center, // Auto,
fontFamily: "Arial",
fontSize: 16,
color: "White",
}, // type TTextStyle
};
sciChartSurface.xAxes.add(new CategoryAxis(wasmContext, xAxesOptions));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {
//axisTitle: "Counts",
axisAlignment: EAxisAlignment.Right,
autoRange: EAutoRange.Alwags,
growBy
}));
// allow zooming in the x direction
if (zoomOn) {
sciChartSurface.chartModifiers.add(
new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }),
new ZoomPanModifier(),
new ZoomExtentsModifier(),
);
}
// Create a line series with some initial data
let lineSeries = new FastLineRenderableSeries(wasmContext, {
stroke: "steelblue",
strokeThickness: 3,
dataSeries: new XyDataSeries(wasmContext, {
//xValues: [0,1,2,3,4,5,6,7,8,9],
//yValues: [0, 0.0998, 0.1986, 0.2955, 0.3894, 0.4794, 0.5646, 0.6442, 0.7173, 0.7833]
xValues: xValues,
yValues: yValues,
dataIsSortedInX: true,
//dataEvenlySpacedInX: true,
//containsNaN: false
}),
pointMarker: new EllipsePointMarker(wasmContext, { width: 11, height: 11, fill: "#fff" }),
});
lineSeries.rolloverModifierProps.tooltipLabelX = 'Date';
lineSeries.rolloverModifierProps.tooltipLabelY = '';
sciChartSurface.renderableSeries.add(lineSeries);
// Add RolloverModifier behavior
sciChartSurface.chartModifiers.add(new RolloverModifier());
//sciChartSurface.useCommunityLicense();
};
- Anthony Leung asked 1 week ago
- last active 7 days ago
Hello,
we have a problem with the values on the Y-axis. We use autoRange: EAutoRange.Always, so in theory, the candles and lines should always be visible. The problem occurs when we have 1 candle or 1 OHLC and with the line chart when a new value goes beyond the current range – the value axis update only happens after the second new record. Below I am attaching the code we use; maybe something is missing or incorrect.
//create axis
const yAxis = new NumericAxis(wasmContext, {
autoRange: EAutoRange.Always,
growBy: new NumberRange(0.1, 0.1),
drawMajorBands: false,
drawMajorTickLines: false,
drawMinorGridLines: false,
drawMinorTickLines: false,
labelStyle: {
fontSize: 11,
fontFamily: 'Open Sans, sans-serif',
padding: new Thickness(0, 3, 0, 0),
color: this.theme.lineChartColor,
alignment: ELabelAlignment.Right,
},
maxAutoTicks: 7,
axisAlignment: EAxisAlignment.Right,
labelProvider: this.getDynamicValueLabelProvider(),
});
const yAxisVolume = new NumericAxis(wasmContext, {
id: USER_CHART.Y_AXIS_VOLUME_ID,
growBy: new NumberRange(0, 4),
isVisible: false,
autoRange: EAutoRange.Always,
allowFastMath: true,
});
//create
this.getCandleSeries().dataSeries.append(this.xValues.length - 1, open, high, low, close);
//update
const currentIndex = this.getCandleSeries().dataSeries.count() - 1;
this.getCandleSeries().dataSeries.update(currentIndex, open, high, low, close);
Current view – https://ibb.co/BtCzdgS
Desired view – https://ibb.co/TknZQXG
Line – https://ibb.co/PxY0n3t – also the price annotation is invisible because the new value is out of the current range
If any other part of the code is needed, let me know.
Best regards,
Kamil
- Kamil Macura asked 1 week ago
- last active 1 week ago
Hi,
would it be possible for the onDrag function to return the same values as onClick, namely sender, mouseArgs, and relativeCoords (although I won’t need the latter)? Currently, it doesn’t return anything.
Best regards,
Kamil
- Kamil Macura asked 1 week ago
- last active 22 hours ago
Memory Leak and Crash In SciChart 3D
Demo: https://github.com/Chenyliang/CrashDemo
The situation occurs in two configurations.
1、 i7-9700 + Graphics card: Intel(R) UHD Graphics 630
2、i7-12700 + RTX 3050
Version : 8.5.0.28148
- chen yl asked 1 week ago
- last active 1 week ago
Hi there.
I want to handle the double-click event axis in a 3D chart.
Here is my code.
<s3D:SciChart3DSurface x:Name="chartSurface">
<s3D:SciChart3DSurface.YAxis>
<s3D:NumericAxis3D MouseDoubleClick="Axis_MouseDoubleClick" />
</s3D:SciChart3DSurface.YAxis>
</s3D:SciChart3DSurface>
private void Axis_MouseDoubleClick(object sender, MouseButtonEventArgs e)
{
//Do something for target axis...
}
but, it doesn’t seem to work.
So I tried to get the Hit object using “VisualTreeHelper.HitTest”, but it also didn’t work.
protected override void OnMouseDoubleClick(MouseButtonEventArgs e)
{
var hitResult = VisualTreeHelper.HitTest(chartSurface, e.GetPosition(this));
var axis = FindParent<NumericAxis3D>(hitResult.VisualHit);
if (axis != null)
{
//Do somthing for target axis...
}
base.OnMouseDoubleClick(e);
}
private static T? FindParent<T>(DependencyObject child) where T : DependencyObject
{
if (child == null) return null;
T? foundParent = null;
var currentParent = VisualTreeHelper.GetParent(child);
do
{
if (currentParent is T)
{
foundParent = (T)currentParent;
break;
}
currentParent = VisualTreeHelper.GetParent(currentParent);
} while (currentParent != null);
return foundParent;
}
It seems to work well in 2D charts.
Can you please tell me the way to handle the mouse event for the axes in a 3d chart?
Thanks.
- nada nada asked 2 weeks ago
- last active 3 days ago
Dear SciChart Team,
I am currently using CursorModifier.tooltipDataTemplate with FastBubbleRenderableSeries. In my DataSeries, I have two or more data points that share the same xValues and yValues. However, the SeriesInfo only returns one of these data points, and I am unable to retrieve the others to add them to the lineItems.
Do you have any suggestions on how to solve this?
Thanks in advance!
Best regards,
Phat Pham
- Pham Phat asked 2 weeks ago
- last active 1 week ago
I’ve created a chart with a FastColumnRenderableSeries and a logarithmic Y-axis with a VisibleRange of min=1e-13, max=1e-7. However the resulting chart appears “upside down”, which I understand is a consequence of plotting values <1. Is there any way to “correct” this?
Plotting my data in Excel initially exhibits the same “upside down” behaviour, but can be corrected by setting the “Horizontal access crosses” axis option to 1e-13, so is there an equivalent setting in SciChart? I thought it might have been the ZeroLineY property, but playing around with this had no effect.
As a cheat/workaround I’ve switched to a FastLineRenderableSeries, as you don’t see the upside down effect, but the preference is for a column chart. (I’m rewriting a very old app that uses Dundas, and this does somehow render the data the “right way up”, so I know customers are going to want a like-for-like bar chart).
- Andrew Stephens asked 2 weeks ago
- last active 1 week ago
Is is possible to generate a Constellation diagram (Quadrant chart with circle shape) using SciChart?
If it is possible, please share a sample project.
- Tripti Asawa asked 2 weeks ago
- last active 2 weeks ago
Hello,
The chart has a Y-axis on both the right and left sides, representing price and volume respectively. I would like both labels with the current values (HorizontalLineAnnotation) to be on the right Y-axis. When using yAxisId and horizontalAnchorPoint: “Right,” the volume label (left axis) appears inside the chart. Is there any way to move it to the right Y-axis? I tried using TextAnnotation instead of HorizontalLineAnnotation, and the only way to get the label to appear above the Y-axis on the right side was by using xCoordinateMode: ‘Pixel,’ but I don’t know if there’s any way to get the height in pixels for the current volume value from the left axis.
Best regards,
Kamil
- Kamil Macura asked 2 weeks ago
- last active 2 weeks ago
Is there a simple way to change the order that a number FastLineRenderableSeries are drawn on the graph surface?
We want to be able to change the order in some other part of our program and have the graph update to reflect that change.
Thanks
- Andrew Milford asked 3 weeks ago
- last active 3 weeks ago
I have a line chart and I frequently notice the lines were rendered with gaps in random places that change in size as the chart is being scrolled in the horizontal direction. Please see the attached screenshot/video.
The location of the gap seem to be different every time the page is reloaded.
I do have the following configuration, however I’ve observed the behaviour without the configuration as well.
new XyDataSeries(wasmContext, {
dataIsSortedInX: false,
dataEvenlySpacedInX: false,
containsNaN: true,
});
Appreciate any pointers on how to resolve this issue.
- Edwin Liu asked 3 weeks ago
- last active 2 weeks ago
It is unable to add a horizontal line to the polar graph, but I need to make a circle, which in essence will be a horizontal line, is it possible to add it somehow or draw this circle in some other way.
The picture shows how it should look (here the circle was made with FastLineRenderableSeries)
- Alex Demenev asked 3 weeks ago
- last active 1 week ago
Hello,
I noticed a problem where the tooltip in 3D charts does not work on new data.
Below I have a simple example where the tooltip works as expected on the initial data but does not show when hovered over the data added in the interval via the appendRange function.
https://codesandbox.io/p/sandbox/3d-bubble-chart-forked-vd8ngd
Is there a problem or something missing with my implementation of the tooltip?
- Yiğit Arısoy asked 3 weeks ago
- last active 3 weeks ago
I am added Relative Annotations but look like it worked only for X axis. Why if Y1=0.5 it not displayed only on half of chart? What I done wrong?
- Fedor Iudin asked 3 weeks ago
- last active 1 week ago
Is there a javascript version for ColumnRenderableSeries3D? im trying to recreate this wpf scichart into javascript.
- Jefferson Rosimo asked 3 weeks ago
- last active 1 week ago
Dear SciChart Team,
I am attempting to create a custom PaletteProvider for PointMarker that does not trigger each time the visible range changes. I have referred to the documentation here: https://www.scichart.com/documentation/js/current/typedoc/interfaces/ipointmarkerpaletteprovider.html.
I have implemented the new class as follows:
class NewTradePaletteProvider {
constructor(inputChart) {
this.inputChart = inputChart;
}
onAttached(parentSeries) {
this.parentSeries = parentSeries;
}
onDetached() {
this.parentSeries = undefined;
}
get isRangeIndependant() {
return true;
}
overridePointMarkerArgb(xValue, yValue, index, opacity, metadata) {
const fillValue =
index % 2 == 0
? parseColorToUIntArgb("#00AB55")
: parseColorToUIntArgb("#2195F2");
return { stroke: undefined, fill: fillValue };
}
}
However, the overridePointMarkerArgb method is still being called every time the visible range changes. Could you kindly advise if there is an issue with my approach?
Best regards,
Phat
- Pham Phat asked 4 weeks ago
- last active 3 weeks ago
Hello,
I wanted to move the displayed data away from the Y-axis because the annotations were not fitting. So I set overrideOffset: -14 on the X-axis (CategoryAxis). The data moved, but now the labels on the X-axis are not centered, so I set on the X-axis labelStyle: {padding: new Thickness(2, 36, 0, 0)}. The labels are centered, but now the labels from CursorModifier are shifted. Is there any way to move them? I would like to have all the labels centered. I couldn’t find any properties to change the padding – the only changes available are color changes. Unless there is another method to move the data series away from the Y-axis instead of using overrideOffset.
Best regards,
Kamil
- Kamil Macura asked 4 weeks ago
- last active 1 week ago
Hello
I am trying to make visual E2E test form my application with playwright
When running locally everything works as expected after opening scichart’s Licence Wizard
But when I try to enter same page with playwright I get license key error
Is there any way to solve this? How excatly does scichart check for licence key?
I would be very glad for some help with this
- Cezary Szymanski asked 1 month ago
- last active 4 weeks ago
I have this x axis:
private fun createxAxis(builder: SciChartBuilder, firstDay: Date?): DateAxis {
val weekAgo = Calendar.getInstance().let {
it.time = Date()
it.add(Calendar.DATE, -6)
it.time
}
val today = Calendar.getInstance().let {
it.time = Date()
it.add(Calendar.DATE, 1)
it.time
}
val historicalFirst = if (firstDay != null) {
Calendar.getInstance().let {
it.time = firstDay
it.add(Calendar.DAY_OF_MONTH, -1)
it.time
}
} else {
weekAgo
}
return builder.newDateAxis().apply {
withDrawLabels(true)
withDrawMajorBands(false)
withDrawMajorTicks(false)
withDrawMinorTicks(false)
withTextFormatting("E")
withTickLabelStyle(
FontStyle(
ResourcesCompat.getFont(context, R.font.proxima_nova_400),
context.resources.getDimension(R.dimen._9sdp),
resources.getColor(R.color.white, null),
true
)
)
withAutoFitMarginalLabels(false)
withDrawMajorGridLines(true)
withDrawMinorGridLines(false)
isEnabled = true
withVisibleRange(weekAgo, today)
withVisibleRangeLimit(historicalFirst, today)
}.build()
}
and this pan modifier:
private class CustomXAxisDragModifier(
val gestureCallback: WeakReference
) : XAxisDragModifier() {
override fun performPan(xDelta: Float, yDelta: Float, isSecondHalf: Boolean, axis: IAxis) {
super.performPan(xDelta, yDelta, isSecondHalf, axis)
when (axis) {
is DateAxis -> {
gestureCallback.get()
?.onVisibleRangeUpdated(axis.visibleRange.min, axis.visibleRange.max)
}
}
}
}
val panModifier = CustomXAxisDragModifier(WeakReference(callback)).apply {
dragMode = AxisDragModifierBase.AxisDragMode.Pan
minTouchArea = 1000.0f
clipModeX = ClipMode.ClipAtExtents
clipModeTargetX = ClipModeTarget.VisibleRangeLimit
}
surface.chartModifiers.add(panModifier)
When I load this chart with data, it looks correct (see first screenshot). But the moment I try to drag it, the chart clips to the most recent data point (see second screenshot) instead of what I’m setting as the visible range limit. The most recent data point is a few days before today. How can I get the panning to clip at the visible range limit?
- Marcela Guerra asked 1 month ago
- last active 1 month ago
Hello SciChart Team,
I am currently working with FastBubbleRenderableSeries
using XyzDataSeries
, and I’ve encountered an issue where multiple elements in my dataset share the same X, Y, and Z values. To differentiate them, I need to assign a unique unique_id
via the PointMetaData
API.
Is there an efficient way to retrieve the indices of elements that correspond to a specific unique_id
? I have explored the documentation (https://www.scichart.com/documentation/js/current/typedoc/classes/xyzdataseries.html) but couldn’t find relevant information.
Any suggestions or alternative approaches would be greatly appreciated!
Best regards,
Phat
- Pham Phat asked 1 month ago
- last active 1 month ago
I have a chart with a CategoryDateTimeAxis x-axis, some of the data points that have the same date can’t be selected, and I noticed if I add points that have a different date, the selection works as expected.
It seems that the DataPointSelectionModifier.SelectionChanged even is fired but the DataPointSelectionModifier.SelectedPointMarkers collection is empty
private void MainWindow_Loaded(object sender, RoutedEventArgs e)
{
// Create the X and Y Axis
var xAxis = new CategoryDateTimeAxis() { AxisTitle = "Date", TextFormatting = "dd/MM/yyyy" };
var yAxis = new NumericAxis() { AxisTitle = "Value" };
var selectionModifier = new DataPointSelectionModifier()
{
ReceiveHandledEvents = true,
AllowsMultiSelection = false,
ExecuteOn = ExecuteOn.MouseLeftButton,
UseLayoutRounding = true
};
selectionModifier.SelectionChanged += SelectionModifier_SelectionChanged;
SciChartSurface.XAxis = xAxis;
SciChartSurface.YAxis = yAxis;
SciChartSurface.ChartModifier = new ModifierGroup(
new RubberBandXyZoomModifier(),
new ZoomExtentsModifier(),
selectionModifier);
var series = new XyDataSeries<DateTime, double>();
for (int i = 0; i < 20; i++)
{
var date = i < 10 ? DateTime.Now.AddDays(i) : DateTime.Now.AddDays(10);
series.Append(date, i, new SelectedPointMetadata());
}
var renderableSeries = new FastLineRenderableSeries()
{
DataSeries = series,
XAxis = xAxis,
YAxis = yAxis,
PointMarker = new EllipsePointMarker() { Width = 10, Height = 10, Fill = Colors.Red },
SelectedPointMarker = new EllipsePointMarker() { Width = 10, Height = 10, Fill = Colors.Green },
};
SciChartSurface.RenderableSeries.Add(renderableSeries);
}
private void SelectionModifier_SelectionChanged(object? sender, EventArgs e)
{
if (sender is not DataPointSelectionModifier dataPointSelectionModifier)
{
return;
}
var dataPointInfo = dataPointSelectionModifier.SelectedPointMarkers.FirstOrDefault();
if (dataPointInfo is null)
{
return;
}
var metaData = dataPointInfo.DataPointMetadata as SelectedPointMetadata;
}
}
public class SelectedPointMetadata : IPointMetadata
{
public event PropertyChangedEventHandler PropertyChanged;
public bool IsSelected { get; set; }
}
- Mohamed Ben Amar asked 1 month ago
- last active 1 month ago
I’m modifying the https://demo.scichart.com/javascript/multi-pane-stock-charts-sync-technique# example. To the right of the OHLCV chart I would like to plot GEX levels (a ladder plot) which is unique for every date, and which should update as I scroll across the X-axis of the OHLCV chart. However, I’m unable to write an event listener to make this happen.
- Marital Weeping asked 1 month ago
- last active 1 month ago
I’m apart of a team that has applications written in wpf. We’re looking at switching frameworks to use Flutter and Dart instead. We all really like using scicharts for the performance and all of the graphing features that are available. Is there plans in the future to support flutter and dart or is there a workaround to currently do this?
- Anthony Eshleman asked 1 month ago
- last active 2 days ago
Is there a way to override the shape of each individual PointMarker within the same series based on the metadata? I can override the color of individual points in the DefaultPaletteProvider, but I haven’t found a solution for the shape.
- Son Tran asked 1 month ago
- last active 1 month ago
Hello SciChart Team,
Problem description:
I have a main stock chart and I can add various indicators to it, some of which appear below it as new charts. Additionally, I can draw different types of lines on both the indicators and the chart. If I draw a line on each of them, I can select each one in turn and end up with all three lines selected, but I need to have only one selected and its ID saved (to open the editor and be able to edit its parameters). Is there any way to connect the charts so that the lines “see each other” and deselect when another is selected? Unfortunately, selectedChanged.subscribe doesn’t work because I don’t receive false from other charts.
Best regards,
Kamil
- Kamil Macura asked 1 month ago
- last active 1 month ago
Any update on ARM support?
Not asking about MacOS/linux but Windows on ARM.
- Eamon asked 1 month ago
- last active 1 month ago
Hello SciChart Team,
I’m trying to subscribe to FastBubbleRenderableSeries.hovered, but it doesn’t seem to be working.
const bubbleSeries = new FastBubbleRenderableSeries(wasmContext, {
dataSeries: xyzDataSeries,
pointMarker: new EllipsePointMarker(wasmContext, {
width: 64,
height: 64,
fill: "#4682b477",
}),
});
// Subscribe to the hovered event
bubbleSeries.hovered.subscribe((event) => {
console.log(event);
});
Is there something wrong with my approach? Also, can I extract the yValues, xValues, and zValues of the item being hovered using this method? Any other ideas or different approaches are welcome !
Best regards,
Phat
- Pham Phat asked 1 month ago
- last active 1 month ago
Hello SciChart team,
I need to modify the SCICursorModifier so that it remains visible after tapping, even when I lift my finger and am no longer touching the screen. With the next touch, I would like the displayed cursor to be cleared and replaced with a new one at the new coordinates. Is this possible with SCICursorModifier? Or would I need to implement this differently? How could this be done?
Thanks for help
- Libor Zapletal asked 1 month ago
- last active 1 month ago
Hello SciChart team,
I noticed that setting dataEvenlySpacedInX
in column and candle series doesn’t seem to take effect. You can observe it in this codesandbox where columns (candles) are overlapping because of unevenly spaced X values. I would expect the columns not to overlap.
Please let me know if my expectation is not correct.
Thank you,
Timo Betina
- Timo Betina asked 1 month ago
- last active 1 month ago
Having some weirdness when rendering a sprite as the points on a FastBubbleRenderableSeries. For one, strokethickness, stroke, etc don’t seem to do anything, and furthermore, the sprites are rendered upside down and backwards. If I set the sizes (zvalues on the xyzdataseries) to a negative number, the sprites are only mirrored around the y-axis.
However if I instead use the same sprites on a XyScatterRenderableSeries they look like expected. I would just do this but I need per-point scaling (and hopefully I can figure out how to do per-point hover outlines and tooltips as well)
Originally I had been using an ugly hack of embedding the PNG into a custom svg annotation, but the performance was terrible after a few dozen points were on the chart at once.
- Joe Mattie asked 2 months ago
I am working with this chart and data on a seconds level/granularity and plotting tens of thousands or sometimes hundreds of thousands of seconds of data. SciChart is doing something weird with the time range on zooming in and out. Are there ways to control what the DateTimeAxis displays?
time data:
2024-09-06 08:55:55
2024-09-06 08:48:58
2024-09-06 08:40:06
2024-09-06 08:30:42
2024-09-06 08:26:53
2024-09-06 08:22:41
2024-09-06 08:20:49
2024-09-06 08:17:39
2024-09-06 08:17:03
function updateChartInitial(data) {
const timestamps = new Float64Array(data.map(d => new Date(d.timestamp).getTime()));
const prices = new Float64Array(data.map(d => d.trade_price));
const volumes = new Float64Array(data.map(d => d.agg_volume));
// Clear previous data and append new data to priceSeries
priceSeries.dataSeries.clear();
priceSeries.dataSeries.appendRange(timestamps, prices);
// Clear previous data and append new data to volumeSeries
volumeSeries.dataSeries.clear();
volumeSeries.dataSeries.appendRange(timestamps, volumes);
// Set Y-axis range based on price data
const minPrice = Math.min(...prices);
const maxPrice = Math.max(...prices);
yAxisPrice.visibleRange = new NumberRange(minPrice, maxPrice);
sciChartSurface.zoomExtents();
}
Is there some need to convert to milliseconds and / 1000 or something like this?
Regards
Matt
- Matt Pen asked 2 months ago
- last active 1 month ago
Hello,
I am working on a heatmap chart with contours. The dataSeries are binded to DataSeriesInViewModel in the viewmodel, where DataSeriesInViewModel is defined as:
DataSeriesInViewModel = new UniformHeatmapDataSeries<int, int, double>(zValues2d, 0, 1, 0, 1)
where zValues2d contains the grid values data.
In addition there is binding to ZMax, ZMin which are the max, min values of zValues2d and also ZStep which is the number of steps for the contours.
The problem is that one can see two tootips and that those are not showing the same value.
<s:SciChartSurface x:Name="sciChart" Grid.Column="0" ChartTitle="{Binding ChartTitle}">
<s:SciChartSurface.RenderableSeries>
<s:FastUniformContourRenderableSeries x:Name="ContourSeries"
AntiAliasing="True" ZMax="{Binding ZMax}"
ZMin="{Binding ZMin}" ZStep="{Binding ZStep}"
DataSeries="{Binding DataSeriesInViewModel}">
<s:FastUniformContourRenderableSeries.ColorMap>
<s:HeatmapColorPalette Maximum="{Binding ZMax}" Minimum="{Binding ZMin}">
<s:HeatmapColorPalette.GradientStops>
<GradientStop Offset="0.0" Color="{StaticResource ColorMapColor_1}"/>
<GradientStop Offset="0.2" Color="{StaticResource ColorMapColor_2}"/>
<GradientStop Offset="0.4" Color="{StaticResource ColorMapColor_3}"/>
<GradientStop Offset="0.6" Color="{StaticResource ColorMapColor_4}"/>
<GradientStop Offset="0.8" Color="{StaticResource ColorMapColor_5}"/>
<GradientStop Offset="1.0" Color="{StaticResource ColorMapColor_6}"/>
</s:HeatmapColorPalette.GradientStops>
</s:HeatmapColorPalette>
</s:FastUniformContourRenderableSeries.ColorMap>
</s:FastUniformContourRenderableSeries>
<s:FastUniformHeatmapRenderableSeries x:Name="HeatmapSeries"
Opacity="0.8"
UseLinearTextureFiltering="True"
AntiAliasing="True"
DataSeries="{Binding DataSeriesInViewModel}">
<s:FastUniformHeatmapRenderableSeries.ColorMap>
<s:HeatmapColorPalette Maximum="{Binding ZMax}" Minimum="{Binding ZMin}">
<s:HeatmapColorPalette.GradientStops>
<GradientStop Offset="0.0" Color="{StaticResource ColorMapColor_1}"/>
<GradientStop Offset="0.2" Color="{StaticResource ColorMapColor_2}"/>
<GradientStop Offset="0.4" Color="{StaticResource ColorMapColor_3}"/>
<GradientStop Offset="0.6" Color="{StaticResource ColorMapColor_4}"/>
<GradientStop Offset="0.8" Color="{StaticResource ColorMapColor_5}"/>
<GradientStop Offset="1.0" Color="{StaticResource ColorMapColor_6}"/>
</s:HeatmapColorPalette.GradientStops>
</s:HeatmapColorPalette>
</s:FastUniformHeatmapRenderableSeries.ColorMap>
</s:FastUniformHeatmapRenderableSeries>
</s:SciChartSurface.RenderableSeries>
<s:SciChartSurface.XAxis>
<s:NumericAxis DrawMajorBands="True" AutoRange="Always" LabelProvider="{Binding XAxisLabelProvider}"/>
</s:SciChartSurface.XAxis>
<s:SciChartSurface.YAxis>
<s:NumericAxis DrawMajorBands="True" AutoRange="Always" LabelProvider="{Binding YAxisLabelProvider}"/>
</s:SciChartSurface.YAxis>
<s:SciChartSurface.ChartModifier>
<s:ModifierGroup>
<s:RolloverModifier ShowTooltipOn="Always" UseInterpolation="True" ReceiveHandledEvents="True"/>
</s:ModifierGroup>
</s:SciChartSurface.ChartModifier>
</s:SciChartSurface>
<s:HeatmapColorMap Grid.Column="1" Margin="2"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Background="{StaticResource ThemedSurfaceChartBackground}"
Foreground="{Binding Source={x:Reference Name=sciChart}, Path=Foreground}"
ColorMap="{Binding Source={x:Reference Name=HeatmapSeries}, Path=ColorMap.GradientStops, Converter={StaticResource ColorsToLinearGradientBrushConverter}}"
Minimum="{Binding ZMin}"
Maximum="{Binding ZMax}"
TextFormatting="0.00" Opacity="0.8" BorderBrush="#777" BorderThickness="1" Orientation="Vertical"/>
I also tried to assign to the contour chart the colormap from the heatmap using:
<s:FastUniformContourRenderableSeries x:Name="ContourSeries"
AntiAliasing="True" ZMax="{Binding ZMax}"
ZMin="{Binding ZMin}" ZStep="{Binding ZStep}"
DataSeries="{Binding DataSeriesInViewModel}"
ColorMap="{Binding Source={x:Reference Name=HeatmapSeries},
Path=ColorMap.GradientStops,
Converter={StaticResource ColorsToLinearGradientBrushConverter}}">
but then I still see two tooltips but no contours anymore.
In fact i would like to know what I do wrong here, and how to see only one tooltip.
thanks a lot for your help,
Thomas
- Thomas Lugand asked 2 months ago
- last active 1 month ago
Hi,
We have a specific requirement for our application, where when the user click on the any specific channel in a set of multiple series, only that specific channel is highlighted and other channels fades in the background.
We found an example in JavaScript which suits our requirement here (https://www.scichart.com/example/javascript-chart/javascript-chart-series-selection/) . However we are not able to find any equivalent examples for Android.
Can you help us with an Android equivalent of the mentioned example ?
Below screenshot is JavaScript example in Scichart website which is similar to our requirement.
Will it also be possible to zoom the selected channel ?
Best Regards
Delta Electronics
- Raja Debbarmann asked 2 months ago
- last active 2 days ago
Hello, I am using the scichart example : SciChart_CustomTooltipsWithModifiers.
I want to double click the RolloverModifier to trigger en event.
The xaml(wpf) is as follows:
The c# :
private void RolloverModifier_MouseDoubleClick(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
MessageBox.Show(“nihao11111111111111”);
}
But it didn’t work. Can you help me to solve this problem?
Thank you.
- Zhi Zhang asked 2 months ago
- last active 1 month ago
Hello,
I am trying to Zoom to the contents of the graph. I have a custom annotation that is anchored to the bottom left position. When I zoom into the data contents using the method ViewPortManager.AnimateZoomExtents(), the top of the annotation gets cut of, but it shows the anchor point. Is there a way I can show the entire custom annotation when zooming or is there a way to get the top right coordinate position of the custom annotation?
Kind regards
- Bridgette Mills asked 2 months ago
- last active 2 months ago
Hello!
I have been looking into creating a custom renderable series for drawing filled polygons.
I have a class that derives from the BaseRenderableSeries type, and uses an XyDataSeries for its dataSeries. So far I’ve been able to draw the shape of the polygon using the drawLines
function for the render context API. However, I’m wondering what the best way would be to go about adding support for filling the area of the polygon.
Having read the docs…
The IFillPaletteProvider interface allows you to perform per-point
paletting or coloring of series or data-points in Mountain, Column,
Candlestick Charts and JavaScript chart types which have a fill or
body
…I got the impression that I probably want to be implementing a custom palette provider that implements IFillPaletteProvider, which
may be used to override the color of filled polygon in various chart types.
Rather than jumping straight into this, I had a go at overriding the paletteProvider getter with a function that returns an IFillPaletteProvider. In this I create an empty DefaultPaletteProvider, set the fill palette mode to solid, and then set the overrideFillArgb function to essentially always return the ARGB colour code for an arbitrary colour as a test. I also played around with calling (and not calling) shouldUpdatePalette before returning the palette provider:
get paletteProvider(): IFillPaletteProvider {
const paletteProvider = DefaultPaletteProvider.createEmpty();
paletteProvider.fillPaletteMode = EFillPaletteMode.SOLID;
paletteProvider.overrideFillArgb = (xValue:number, yValue: number, _index: number): number => {
return yValue > 0 ? parseColorToUIntArgb("blue") : parseColorToUIntArgb("black");
}
paletteProvider.shouldUpdatePalette();
return paletteProvider;
}
Now when I call the hasFillPaletteProvider function on my custom renderable series, it indeed returns true.
However, for now my polygon still remains unfilled when drawn onto a surface, I can only see the outline of it. Any advice or tips on where I might be going wrong? I get the feeling I’m missing something obvious/simple, but as yet I can’t figure out what!
Thank you for any help!
- Charlie Lockwood asked 2 months ago
- last active 2 months ago
Hello,
I am trying to make a non-linear numeric axis. Could you please help with an example?
I was reading this documentation and was playing around with the CustomTickProvider class, however I cannot achieve desired result.
https://www.scichart.com/documentation/js/current/webframe.html#AxisTicks-GridLineAndLabelSpacingProgrammatically.html
If we take a look at the example 2, we can see that it is possible to make unequally spaced grid lines but it seems that the spacing is still linear. As in example provided by you, would it be possible to place, let’s say number 2.0 in a place of 4.0, or 8.0?
Kind regards
- Zino As asked 2 months ago
- last active 1 month ago
Hello. I have been playing around with SciChart_SurfaceMesh3DNonUniformData example solution of yours. I have modified the data in it, some of the properties, etc.
I have managed to get the cursor to display and snap to the nearest points while still being able to rotate and zoom the graph.
What I have not been able to figure out, have tried many different things, are the following:
- I would like to change the tooltip. Right now it is showing the default one which shows something like this:
Nonuniform Surface Mesh
Cell Index: z=6, x=8
X Data: 3200.00
Y Data: 0.60
Z Data: 20.00
I would like to just show the X, Y, and Z values and maybe use my own labels instead of “X Data”, etc.
2. Would also be nice if I could position the tooltip a little further away from the cursor position so that it does not obscure the surface so much.
3. Lastly, as the user moves the cursor across the surface I would like to have the active point that it snaps to be displayed with a yellow ellipse to make it more obvious where the cursor is positioned.
I have attached my solution. It had a directory called SciChart8 where I had all the SciChart DLLs but I removed that before zipping it up so you will need to fix up the SciChart references to point to your own copies. I also removed my license key.
Thanks in advance for any help you can provide. I have spent about 4 hours trying to get these things working without success.
Jeff Skory
- Jeff Skory asked 2 months ago
- last active 1 month ago
Hi, can I freeze an axis’s length/size, so that if the canvas is resized (and therefore the series, too), the axis will keep it’s length/size and not resize together? In other words, freeze the axis/detach it from the series
Thanks
- Tom Alon asked 2 months ago
- last active 2 months ago
Is there any plan to fix the warning when using “scichart-react”.
I attach warning message the images below.
- [email protected] asked 2 months ago
- last active 2 months ago
Hello,
Is there a way to change the font style in TextAnnotations to italics? I would like the user to be able to change the text style using a context menu. I can easily override the FontWeight, FontSize, and FontFamily properties, but there is no FontStyle in the documentation.
Regards,
Kamil
- Kamil Macura asked 2 months ago
- last active 2 months ago
Hi,
I am having trouble selecting annotations, when you click two annotations which overlap, one of them gets selected. please see video below:
In this case I can keep track of all the annotations at the mousepoint, but then I cannot programmatically select the annotation. what is the best way to “select” annotation programatically.
Best,
Pramod
- pramod butte asked 2 months ago
- last active 2 months ago
Hi
I tried with the example below and able to draw the image inside the chart. But i need to draw the continues image from one index to another index. Is it possible to draw it with Scichart ?
return new CustomAnnotation({
x1,
y1,
verticalAnchorPoint: EVerticalAnchorPoint.Top,
horizontalAnchorPoint: EHorizontalAnchorPoint.Left,
svgString: <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" style="background-color:blue">
,
<image href="test/images.jpeg" height="${height}" width="${width}"/>
</svg>
});
instead of height and width is it possible to pass x2 and y2 as index.
What i am looking is mentioned in the attachments.
Also when the chart is zooming need to increase or decrease the size of the chart and fit to the index provided. Is it possible?
- Jerin Mathew asked 2 months ago
- last active 2 months ago
When using the Orientation.Horizontal attribute in using LegendModifier 3D, Legend items are displayed in a single line.
I want to print in two lines but I’m not looking for a way to implement that feature.
If there’s a way to print it out, I’d appreciate it if you could let me know.
The development language is C#.
- MIN JAE KIM asked 2 months ago
- last active 2 months ago
Here’s the English translation of your message:
I cannot change the Background Color of the LegendModifier3D that I’m using.
The methods I’ve tried so far are:
1.
csharp
Legend = new CustomLegendModifier3D
{
Background = new SolidColorBrush(Colors.Red)
}
2.
csharp
ControlTemplate template = new ControlTemplate(typeof(LegendModifier3D));
template.VisualTree = new FrameworkElementFactory(typeof(System.Windows.Controls.Grid));
template.VisualTree.SetValue(Border.BackgroundProperty, new SolidColorBrush(Colors.Red));
Legend.Template = template;
I’ve tried these methods, but while the background color of each TextBlock has changed, I’ve found that the background color of the container wrapping the TextBlocks doesn’t change no matter what method I use.
I’m inquiring whether it’s impossible to completely change the background color of the LegendModifier3D container when using LegendModifier3D, or if I’m using the wrong method.
- MIN JAE KIM asked 2 months ago
- last active 2 weeks ago
Hello!
I am dealing with a problem in my WPF app similar to the one described here (https://www.scichart.com/questions/js/why-does-my-candle-sticks-bodies-have-different-width). However, I am using WPF and binding to ColumnRenderableSeriesViewModel.
I was also able to reproduce the issue by modifying the demo program (https://www.scichart.com/example/wpf-chart/wpf-chart-example-histogram/) I changed it to have RedSeriesData and GreenSeriesData to have just one datapoint to make the problem happen.
Could you suggest a workaround? I need to render a bar plot where bars may have different colors. I am accomplishing it by creating a collection of ColumnRenderableSeriesViewModel objects, one for each color. The issue appears when one or more of ColumnRenderableSeriesViewModel objects have just one datapoint.
The attached screenshot shows the modified histogram example with two bars near the right edge appearing much narrower than the rest.
- Alexander Gdalevich asked 2 months ago
- last active 2 months ago