Hi, when I was using the RolloverModifier all the points that were displayed in the tooltip were highlighted by slightly increasing the size of the marks in the chart area. Ultimately, I wanted to have some sort of crosshair in my chart and I ended up using the CursorModifier instead of the RolloverModifier to achieve my goal. This worked fine, but the only thing I have lost from changing the modifier is this “highlighting” of the markers displayed in the tooltip. Is there any way to have this “highlighting” also with the CursorModifier ?
I have provided 2 images showing the 2 modifiers.
- Alexandru Neamtu asked 1 day ago
- last active 1 day ago
Hi, I would like to update the theme at the runtime of the chart. In JS I have made a dropdown component from which I can change the theme of the chart. When this “select” component changes it calls in the following code:
function ChartThemeChanged() {
var x = document.getElementById("ChatTheme").value;
switch (x){
case "dark":
theme = new SciChart.SciChartJsNavyTheme();
break;
case "light":
theme = new SciChart.SciChartJSLightTheme();
break;
}
emissionSmallSciChartSurface.applyTheme(theme);
emissionLargeSciChartSurface.applyTheme(theme);
inertiaSmallSciChartSurface.applyTheme(theme);
inertiaLargeSciChartSurface.applyTheme(theme);
}
This works fine for the main chart area. I also have a LegendModifier which I placed on a different div with “placementDivId”. When I change the theme, as I said the main area of the chart changes but the legend does not change. How can I fix this? Is there any function I can call on the chart surface to trigger to reevaluate and redraw the legend with the correct new theme?
I have observed that if I add a new series to the chart with “emissionSmallSciChartSurface.renderableSeries.add(lineSeries);” the theme of the legend is applied. I guess it is applied because the legend is redrawn with the extra series but this is not really practical.
How can I fix this cleanly?
Thank you!
- Alexandru Neamtu asked 1 day ago
- last active 1 day ago
Hello,
We are creating a stock chart and are currently at the stage of adding various formations. So far, we have added: trend line (LineAnnotation), vertical and horizontal lines, and a horizontal ray (HorizontalLineAnnotation with x1). We still need the most popular and commonly used formation: the extended line – which is simply a straight line that extends across the entire chart, and its position and angles can be adjusted.
Here’s a link with an example of how it works: https://docs.anychart.com/Stock_Charts/Drawing_Tools_and_Annotations/Infinite_Line
Is it possible to create such a line, or is it currently not supported?
Additionally, the ability to add labels only works in HorizontalLineAnnotation and VerticalLineAnnotation. Will the ability to add labels in LineAnnotation be added?
Best regards,
Kamil
- Kamil Macura asked 1 day ago
- last active 42 mins ago
I have a realtime app that will work with 5 to 8 million datapoints of timedataseries. If I have to dynamically scale multiple charts on a surface, it can be ranging from 1 to 20. upon reading the documentation I see that Subcharts and SciChartVerticalGroup are 2 possible solutions. I would have to dynamically add and remove those sub charts just like what you have shown in one of the these examples.
https://codesandbox.io/p/sandbox/sync-multi-chart-r85zv7?file=%2Fsrc%2FApp.tsx%3A235%2C28
https://codesandbox.io/s/2t9yrn?file=/src/index.tsx
What would be a better choice for performance ?
- vamsi pallem asked 2 days ago
- last active 22 hours ago
Hi everyone,
I’m currently working on a project where I need to plot a candlestick chart, but I’m running into some trouble with the layout. Specifically, I’m trying to display the candlestick chart in the left two-thirds of the plot, leaving the right one-third of the plot available for annotations and other elements. The issue I’m facing is that the candlesticks are still being drawn in the right third of the plot, which is something I want to avoid.
I’ve attached an example image showing how it should look.
Currently, the chart displays the end of the data, and when you horizontally scroll, the buttons on the right side get pushed further right (because they are set using custom annotations on specific x and y axes positions), and the candlestick chart starts appearing in the right section.
Is there a way to set it up so that the candlestick chart does not render in the right section, but everything else (like the annotations and buttons) still does?
Has anyone here tackled a similar problem or knows how to prevent the candlesticks from being drawn in the right third while keeping that space available for other elements? Any advice or code examples would be greatly appreciated!
Thanks in advance!
- Libor Zapletal asked 2 days ago
I created 3 candle sticks and they all have different width even tho I give them the same dataPointWidth
?
See image below for reference,
Code sandbox link: https://codesandbox.io/p/sandbox/vertically-stacked-axes-forked-5ypshd?file=%2Fsrc%2FApp.tsx&workspaceId=727af2ef-2725-4acf-b130-b2c2973fbfea
Thank you.
- Nung Khual asked 6 days ago
- last active 5 days ago
I’m developing apps in swiftui and compose. Basically, the code where I update the backing XyDataSeries is separate from where the actual render surface is. This mostly works fine in ios, but I’m noticing some flickering in android. At the end of the update the charts render fine, but I ‘m pretty sure I should be suspending the updates until my block of data series are all updated. The problem is getting the surface instance back to where the data series are being updated (which I can do, but it just makes things more complicated on my end because of the view hierarchies in swiftui and compose).
Is there a way to globally suspend updates across all rendered surfaces (without requiring explicit references to those surfaces)? If not, can I request this feature?
- w p asked 7 days ago
Hi, I see that there is Box Plot chart on WPF sciChart, but it doesn’t seem to exist for javascript version.
Is there a plan for it anytime soon or is there any way I can create a box plot chart with the current javascript version?
My current idea to create one with what is available is using StackedColumnSeries and box annotations and line annotations. The reason I want to use StackedColumnSeries is for the xAxis. The idea is to create xAxis with, Plot1, Plot2 and Plot3.
See the image below.
- Nung Khual asked 7 days ago
- last active 6 days ago
Hello,
I have some FastLineRenderableSeries with XyDataSeires that I’m plotting to a chart. On each of these series I’m highlighting one specific point using the IPointMetadata IsSelected interface (Image 1). On this selected point I want to show a series tooltip the same way a VerticalSliceModifier would when it interacts with a series (see image 2 for an example of what I want). How would I do this?
For now I’m setting the SelectedPointMarker for my series to an EllipsePointMarker.
- Jamie Agate asked 1 week ago
- last active 1 week ago
Hello everyone.
Is there a way to set the max width for a Stacked Column Chart?
Best regards,
Michael
- Michael Greisberger asked 1 week ago
Hello.
I want to save some lines’ parameters from RenderableSeries items collection. As example, if I have legend for chart I have IsVisible checkbox for each line on it. What the best way to get ‘feedback’ from legend in case if I unclicked several checkboxes? How to catch this event? I need it because after catch this event I want to save current line state and after restart application will have a possibility to restore RenderableSeries state.
P.S. I want to make it under MVVM pattern
- Fedor Iudin asked 2 weeks ago
I’m using a DateTimeNumericAxis as my xAxis.
As an example, 1 of my records date time is set to: 2024-08-02T15:00:00+10:00
They are converted to a timestamp value of 1722574800 and add it to the series.xValues, because it’s the format that SciChart reads. However, the xAxis label is being translated as August 2, 2024 5:00:00 AM instead of August 2, 2024 3:00:00 PM.
My current workaround is to create custom labels by updating the xAxis.labelProvider.formatLabel and labelProvider.formatCursorLabel of the xAxis. So now, I can convert it to toLocaleDateString with options: month: ‘short’, day: ‘numeric’ . But it’s not as compact as the default labels.
Default Axis Labels: Jul 27 28 29 30 31 Aug 02
Custom Axis Labels: 26 Jul 27 Jul 28 Jul 29 Jul 30 Jul 31 Jul 01 Aug 02Aug
See attached images with default vs custom labels
Question: How do I go about making sure that the Axis Labels and Axis Cursor labels follows the actual DateTime (2024-08-02T15:00:00+10:00) without making any custom axis labels?
- Maryjes Chapman asked 2 weeks ago
- last active 1 day ago
Is there any way to show the label of the bubble all the time instead of hovering at the center of the bubble?
I have tried annotation, but I wonder if there is any easier way to set the visibility of the bubble marker to always.
I am using BubbleRenderableSeriesViewModel to build bubble chart and using XyzDataSeries to build the chart.
- Hardik Poudel asked 2 weeks ago
Hi, i want to change the GradientStops of FastUniformHeatmapRenderableSeries from ViewModel
Here is the Code below
<s:SciChartSurface
Width="330"
Height="630"
s:VisualXcceleratorEngine.EnableImpossibleMode="True"
s:VisualXcceleratorEngine.IsEnabled="True"
Cursor="Cross">
<s:SciChartSurface.RenderableSeries>
<s:FastUniformHeatmapRenderableSeries DataSeries="{Binding DataSeries}">
<s:FastUniformHeatmapRenderableSeries.ColorMap>
<s:HeatmapColorPalette
GradientStops="{Binding ColorMap}"
Maximum="100"
Minimum="0" />
</s:FastUniformHeatmapRenderableSeries.ColorMap>
</s:FastUniformHeatmapRenderableSeries>
</s:SciChartSurface.RenderableSeries>
<s:SciChartSurface.XAxis>
<s:NumericAxis
AxisAlignment="Left"
FlipCoordinates="True"
Width="30"
MajorDelta="60"
MinorDelta="20"
AutoTicks="True"
DrawMajorGridLines="False"
DrawMinorGridLines="False"
DrawMinorTicks="False"
VisibleRange="0, 600" />
</s:SciChartSurface.XAxis>
<s:SciChartSurface.YAxis>
<s:NumericAxis
x:Name="YAxis"
AxisAlignment="Bottom"
FlipCoordinates="True"
Height="30"
AutoTicks="True"
DrawMajorGridLines="False"
DrawMinorGridLines="False"
DrawMinorTicks="False"
MajorDelta="30"
MinorDelta="10"
VisibleRange="0, 300" />
</s:SciChartSurface.YAxis>
</s:SciChartSurface>
When I change the ColorMap at ViewModel, I can check that GradientStops Property in View is changed. But Chart’s color is not changed.
How can I change the GradientStops of FastUniformHeatmapRenderableSeries from ViewModel ?
- JONGBOG JOUNG asked 2 weeks ago
Hello,
I’ve observed that SciChart JavaScript does not currently support point selection or hit testing for 3D charts. Is there a method or workaround to implement point selection in 3D charts?
It would be helpful to obtain the coordinates of the selected point if such functionality is available.
Thank you for your assistance.
I attempted to use the Custom Modifier to capture point selection in a 3D chart, but I only received the screen coordinates of the mouse click, not the 3D coordinates of the point.
Is there a way to obtain the 3D coordinates of a selected point in Sci Chart JavaScript, or is there an alternative approach that can be used to achieve this?
i have included my attempt at this in the post.
- Shivansh Adhikari asked 2 weeks ago
- last active 1 week ago
Hello everyone,
I’m trying to display a tooltip when I hover over an annotation in our WPF project using MVVM.
I attempted to override the MouseMove event on the SciChart surface to identify which annotation the mouse was over by cycling through each annotation. However, it didn’t seem like a very good way to proceed to me and I didn’t try to display the desired information at that point.
While reviewing the documentation, I noticed that annotations have a “Cursor” property. Is there a way to bind that property from the viewmodel? That would make my job so much easier.
If anyone has suggestions on how to proceed, they would be greatly appreciated.
Thanks,
Andrea
- Andrea Cerfogli asked 2 weeks ago
I have a UserControl which contains a chart and some wpf controls. How can I print this UserControl to PDF or XPS? All examples I see are for the chart only.
- j chatlein asked 2 weeks ago
I have a UserControl which contains a chart and some wpf controls. How can I print this UserControl to PDF or XPS? All examples I see are for the chart only.
- j chatlein asked 2 weeks ago
I have a UserControl which contains a chart and some wpf controls. How can I print this UserControl to PDF or XPS? All examples I see are for the chart only.
- j chatlein asked 2 weeks ago
Hello,
I am using your example:
https://www.scichart.com/documentation/js/current/CursorModifier_CustomisingContainer.html
new CursorModifier({
showYLine: false,
axisLabelFill: "#484848",
tooltipLegendOffsetX: 10, - doesn't work
crosshairStrokeDashArray: [5, 5],
crosshairStrokeThickness: 1,
crosshairStroke: _theme.crosshairStrokeSupplyDemand,
showTooltip: true,
tooltipSvgTemplate: getTooltipSvgTemplate
})
Is it possible to offset the tooltip from the X-axis? If it is on the right side of the axis, the spacing is maintained, unfortunately, if it is on the left side, it is ‘stuck’ to the line.
Thanks in advance.
Best regards,
Kamil
- Kamil Macura asked 2 weeks ago
- last active 1 week ago
Hi, is there a modifier or possibly buttons for zoom in & zoom out that works similar to a MouseWheelZoomModifier but for users with no mouse wheel?
- Maryjes Chapman asked 3 weeks ago
- last active 3 weeks ago
I’ve got an X axis that is int/numeric based that I have a custom labeler on to display strings. For example, let’s say my data is 1-26, but I want to show the letters in the alphabet rather than the number. The labeler piece is sorted out and is working for me as I’m seeing the letters as labels on the axis.
At this point, I’m trying to work on a tick provider that will only show labels corresponding to data in the series. Is this possible? Say I have A, E, I, O, and U as my data in the series, those are the only labels I want to see on the axis. I’m having trouble getting the TickProvider API to work in this way.
Thank you for the help!
Matthew
- Matthew Trahan asked 3 weeks ago
- last active 1 week ago
Boxplot series on the second axis have a different width (very small on second series) when there are multiple Y-axes and the values of the first series of the first axis are between 0.1-0.6 and those of the second between 41400-41900.
- Tobias asked 3 weeks ago
- last active 1 week ago
I had a bug in my code that would generate randomly oscillating, extremely large/small values. The obvious solution is for me not to do that… but the result is a crash in the scichart library. I’m not suggesting you support plotting this because its noise, but it’d be cool if it didn’t crash and take down the whole application.
My data “acceptsUnsortedData” (which is probably a huge clue… the garbage data I’m throwing at the chart is basically randomly zigzagging in extreme values in X/Y)
And I’m rendering with SCIFastLineRenderableSeries
Here’s a sample of the data. Not quite max/min, but covers a pretty big range.
[1917] Double 3.6899712713166423E+251
[1918] Double -3.6549492454778691E+251
Attached is a stack trace, but all I have is assembler
- w p asked 4 weeks ago
Hi together,
my XValues = e.g [1,2,3,4,5]
im currently using a VerticalSliceModifier with UseInterpolation set to false but the VerticalLine Label still displays values like 1.22.
When using a rollover modifier with UseInterpolation set to false i only get the expected dataValue e.g 1.
Why is the verticalSlice modifier ignoring this and how do i fix this.
ps: I´ve attached an screenshot from an sample project.
Thank you in advance.
Best regards,
Armin
- Armin Wild asked 4 weeks ago
- last active 1 week ago
I’ve played around with the DataPointSelectionModifier and the ability to select a data point in a series on the chart (visually). Now I want the user to be able to relocate it on the chart by dragging it. I’m also going to need to allow the user to delete the point as well, perhaps click it and then hit the delete button on the keyboard.
I’m not finding any way to do this, but it seems this must be a feature.
- Chris Kirkman asked 4 weeks ago
- last active 1 week ago
Hi,
I am looking for a way to unselect the annotation programatically. setting isSelected to false is not adviced and also does not really unselect the annotation (just remove the adorner 🙂 )
I want to provide an ability to hit “Esc” to unselect the annotation.
Please advice.
Best,
Pramod
- pramod butte asked 4 weeks ago
- last active 3 weeks ago
Are there any native tools that will a user to drag/drop/delete points on a line series? I have a customer requirement that will allow the user to manually edit my series.
- Chris Kirkman asked 4 weeks ago
- last active 3 weeks ago
Hello,
we have a problem while executing our unit tests on our jenkins server.
The unit tests are run via the Nunit Console Runner.
In one specific Test project the unit test aborts with a “SocketException”.
The output looks like this:
Test Files D:\dev\jenkins\workspace\c\build\test....\source\Exec64_Release\Test.dll
Writing out DLLs to C:\Users\user\AppData\Local\SciChart\Dependencies\v8.1.0.27856\x64
System.Net.Sockets.SocketException : No connection could be made because the target machine actively refused it 127.0.0.1:65018
So because there is the line with “Writing out Dlls ….” which contains SciChart and the next line is the SocketException I just wanted to ask if there is something in SciChart which tries to connect to the localhost, I don’t know e.g. the licensing?
I don’t want to blame SciChart, I just want to ask if it could be possible. Because it is not easy to debug this scenario reliantly.
Best Regards,
Nick
- Nick Müller asked 4 weeks ago
- last active 1 week ago
Hello,
I am building an application where I use a WPF class library that calls sciChartSurface multiple times within my MainWindow application. Please refer to the attached screenshot.
I want to ensure that the Y-axis label widths are consistent across multiple chart surfaces. Specifically, I need a way to measure the total Y-axis label area of each chart and then set all the charts (with smaller Y-axis label areas) to match the chart with the largest Y-axis label area.
Additionally, I need the X-axis labels of all the charts to be synchronized, even when they contain different series configured as either single-axis or multi-axis.
Any suggestions or solutions to achieve this would be greatly appreciated.
Thank you.
- Sanket Mahajan asked 1 month ago
- last active 3 weeks ago
I am trying to modify the tooltip with the following code:
function tooltipTemplate(
id: string,
seriesInfo: SeriesInfo,
rolloverTooltip: RolloverTooltipSvgAnnotation
) {
console.log({
id,
seriesInfo,
rolloverTooltip,
});
return `<svg width="120" height="16">
<rect x="0" y="0" width="100%" height="100%" fill="${seriesInfo.stroke}"/>
<svg width="100%">
<text y="0" x="0" font-size="12" font-family="Verdana" dy="0" fill="white">
<tspan x="4" dy="1em">${seriesInfo.seriesName}: ${seriesInfo.formattedYValue}</tspan>
</text>
</svg>
</svg>`;
}
It is working but now all the tooltip are on top of each other, how can I fix that?
- Jhonatan Laguna asked 1 month ago
- last active 3 weeks ago
The real-time graph only shows the data of the last minute on the x-axis, and the VisibleRange property setting is invalid
private void InitializeChart()
{
for (int i = 0; i < 50; i++)
{
var dataSeries = new XyDataSeries<DateTime, double> { FifoCapacity = 10 };
Color color = Color.FromArgb(0xAA, (byte)random.Next(1, 256), (byte)random.Next(1, 256), (byte)random.Next(1, 256));
var lineSeries = new FastLineRenderableSeries()
{
DataSeries = dataSeries,
StrokeThickness = 2,
Stroke = color
};
sciChart.RenderableSeries.Add(lineSeries);
fastLines.Add(dataSeries);
}
}
private void StartTimer()
{
var timer = new Timer(1000);
timer.Elapsed += (sender, e) =>
{
Dispatcher.Invoke(() =>
{
var currentDate = DateTime.Now;
for (int i = 0; i < fastLines.Count; i++)
{
var xAxis = sciChart.XAxes.OfType().FirstOrDefault();
if (xAxis != null&& xAxis.DataRange!=null)
{
var newRange = new DateRange(currentDate.AddSeconds(-60), currentDate);
fastLines[i].XRange.Min = newRange.Min;
//xAxis.VisibleRange = newRange;
Application.Current.Dispatcher.BeginInvoke((Action)(() =>
{
xAxis.InvalidateElement();
}));
sciChart.ZoomExtents();
}
if (fastLines[i].Count > 5 &&i>40)
{
break;
}
double y = (i + 1);
fastLines[i].Append(currentDate, y);
}
});
};
timer.Start();
}
- jyj jyj asked 1 month ago
- last active 3 weeks ago
The note at the bottom of this page says:
“This feature can be used to create a Scatter Series, if strokeStyle contains a transparent Pen.”
https://www.scichart.com/documentation/android/current/articles/chart2d/2dChartTypes/Line%20Series.html?tabs=kotlin
If I set the lines stroke to transparent and set a point marker, nothing is rendered
val rSeriesPL: IRenderableSeries = FastLineRenderableSeries()
rSeriesPL.dataSeries = serPL
rSeriesPL.strokeStyle = SolidPenStyle(0x01000000.toInt(), false, 20f, null) <<<< this works as the line is almost transparent (points show full red), but if I set it to 0x00FF0000, the point markers disappear too
val scatterPointMarkerPL = EllipsePointMarker()
scatterPointMarkerPL.setSize(10, 10)
scatterPointMarkerPL.fillStyle = SolidBrushStyle(Color.Red.toArgb())
scatterPointMarkerPL.strokeStyle = SolidPenStyle(Color.Red.toArgb(), false, 1f, null)
rSeriesPL.pointMarker = scatterPointMarkerPL
This is in the android simulator (Just mentioning it because I’ve noticed other/unrelated oddness in the ios simulator)
- w p asked 1 month ago
- last active 4 weeks ago
Hi, I’ve been looking for alternatives to ChartJS and so far really like what I’m seeing with SciChart, but was just curious if there’s any JS support for Radar Charts? I can see that it’s supported in the WPF version https://www.scichart.com/documentation/win/current/The%20Radar%20Chart%20Type.html, but haven’t been able to find any similar documentation regarding the JS version
Thanks!
- Dan Wojciehowski asked 1 month ago
- last active 3 weeks ago
Is tvOS easily supported?
I get the following build error because tvOS isn’t listed in the package platforms:
/While building for tvOS Simulator, no library for this platform was found in ‘/Users/me/Library/Developer/Xcode/DerivedData/blahhhhhhhhhh/SourcePackages/artifacts/scichart-sp/SciChart/SciChart.xcframework’.
I suspect all the user interaction code would break on tvOS, but I’m just looking for static charts.
I found this which implies its possible, but the post is quite old.
https://www.scichart.com/questions/ios/scichart-was-built-without-full-bitcode
- w p asked 1 month ago
Hello,
We are developing an application whose main task is to display charts and allow users to add indicators to these charts. We have two requirements for drawing lines on the chart upon button click:
Option 1 (2 clicks):
– The user clicks on point A.
– The user moves the cursor over the chart and sees a line from point A to
the cursor (the line changes length with each mouse movement).
– On the second click, the line takes on the final parameters of the
second click.
Option 2 (mousedown && mouseup ):
- I press the mouse on point A but do not release it.
- I move the cursor over the chart (the line changes length with each mouse movement).
- I release the mouse, and the line is drawn.
Is either of these options feasible? If not, is there any possibility of drawing lines through any user interaction?
At the moment, we have implemented line drawing by clicking on a point, and at that point, a short line is drawn that the user can adjust as they wish. However, there is a minor issue with retrieving the X and Y values:
const mouseX = clickEvent.offsetX;
const mouseY = clickEvent.offsetY;
const xValue = this.sciChartSurface.xAxes.get(0).getCurrentCoordinateCalculator().getDataValue(mouseX);
const yValue = this.sciChartSurface.yAxes.get(0).getCurrentCoordinateCalculator().getDataValue(mouseY);
These values are always shifted to the right and downward. Is there any additional trick I should use to fix it?
Thanks in advance.
Best regards,
Kamil
Link to chart: https://ibb.co/fnG9NV8
- Kamil Macura asked 1 month ago
- last active 1 week ago
I’m having an issue when I try to plot about 40000 points or more on ios, it only renders a straight (randomly diagonal) line (maybe 2 points?).
- I’m doing the exact same thing in android and it works fine there.
- If I switch to a scatter plot it works fine too (on ios), so it seems like SCIFastLineRenderableSeries is the culprit.
- I also noticed an issue where the number of points rendered in the simulator is seemingly limited, but on a physical device its not (I suspect this is unrelated, but might be of interest. It occurs at a much lower point count)
- I haven’t narrowed down the exact point count where this issue surfaces, but I could if that would help. 40k is just a ballpark.
- My data series acceptsUnsortedData (but again, works fine in android)
- SwiftUI and v4.5.4
Ultimately the reason I’m plotting that many points is problematic for several other reasons, so this is about to be a non-issue for me (i.e. I’m just going to plot less points), but it seems like a bug that should be reported.
- w p asked 1 month ago
I am having an issue while trying to append 3d scatter points to a 3d surface.
The following error is being shown . I tired to looking into the documentation too.
Searched for a solution but didn’t find anything.
- Shivansh Adhikari asked 1 month ago
- last active 1 month ago
I have an older version of SciChart, and I get this SystemException when I try to set the runtime license key.
System.Exception
HResult=0x80131500
Message=The registry key specified by the RegistryStoragePath property could not be opened.
Source=SciChart.Core
What am I doing wrong?
Thanks a lot
- Marius Amarandei asked 1 month ago
- last active 1 month ago
Hello,
With older version of SciChart in iOS some of the methods are not found. And migration doc couldnt help much. drawBands function from SCINumericAxis is removed from the latest version. How to handle this with the latest?
For drawing custom bands is it supposed to use annotations instead of drawing bands?
Thanks in advance
- Reshma Lakshmanan asked 1 month ago
- last active 4 weeks ago
Hi, I javascript I have a sciChart and I am using the RolloverModifier.
With this code
sciChartSurface.chartModifiers.add(
new RolloverModifier({
showRolloverLine: true,
tooltipDataTemplate: getTooltipDataTemplate,
placementDivId: "tooltip-div-id",
})
const getTooltipDataTemplate = (seriesInfo, tooltipTitle, tooltipLabelX, tooltipLabelY) => {
// Lines here are returned to the tooltip and displayed as text-line per tooltip
const lines = [];
const val = seriesInfo.yValue;
const x = seriesInfo.formattedXValue
lines.push(`Exposure ${Math.trunc(x)}`)
if(seriesInfo.seriesName.includes('T8') && val != null) { lines.push(`${tooltipTitle}: ${val.toFixed(1)} °C` ); }
if(seriesInfo.seriesName.includes('HU') && val != null) { lines.push(`${tooltipTitle}: ${val.toFixed(2)} %` ); }
if(seriesInfo.seriesName.includes('mA') && val != null) { lines.push(`${tooltipTitle}: ${val} mA` ); }
if(seriesInfo.seriesName.includes('Factor') && val != null) { lines.push(`${tooltipTitle}: ${val.toFixed(7)}` ); }
return lines;
};
I am able to obtain The first image where the tooltip are shown outside the chart area (just below the chart) and for each series there is a colored box. This is fine, but I do not really want individual boxes.
I then tries to use the tooltipLegendTemplate instead of tooltipDataTemplate and with this code:
// Add some interaction modifiers to show zooming and panning
sciChartSurface.chartModifiers.add(
new RolloverModifier({
showRolloverLine: true,
showTooltip: false,
tooltipLegendTemplate: getTooltipLegendTemplate,
placementDivId: “tooltip-div-id”,
}));
// Override the standard tooltip displayed by CursorModifier
const getTooltipLegendTemplate = (seriesInfos, svgAnnotation) => {
// Lines here are returned to the tooltip and displayed as text-line per tooltip
let outputSvgString = "";
let x;
// Foreach series there will be a seriesInfo supplied by SciChart. This contains info about the series under the house
seriesInfos.forEach((seriesInfo, index) => {
let unit
x = seriesInfo.formattedXValue
switch(seriesInfo.seriesName) {
case "T8": unit = ' °C'; break;
case "HU": unit = ' %'; break;
case "Aging Factor Small": unit = ' %'; break;
case "Aging Factor Large": unit = ' %'; break;
case "Space Charge Factor Small": unit = ' %'; break;
case "Space Charge Factor Large": unit = ' %'; break;
case "mA first 40kV": unit = ' mA'; break;
case "mA first 50kV": unit = ' mA'; break;
case "mA first 60kV": unit = ' mA'; break;
case "mA first 95kV": unit = ' mA'; break;
case "mA first 125kV": unit = ' mA'; break;
}
outputSvgString += `<text x="8" y="${20*(index+2)}" font-size="16" font-family="Verdana" fill="${seriesInfo.stroke}">
${seriesInfo.seriesName}: ${seriesInfo.formattedYValue} ${unit}
</text>`;
});
// Content here is returned for the custom legend placed in top-left of the chart
return `<svg>
<text x="8" y="20" font-size="15" font-family="Verdana" fill="lightblue">Exposure ${Math.trunc(x)}</text>
${outputSvgString}
</svg>`;
};
With this code I can obtain the second image. But I would like to place the SVG outside of the chart area (just like I pointed in the image). The placementDivId: “tooltip-div-id” does not seem to work for tooltipLegendTemplate, it only works for tooltipDataTemplate. Can we place the SVG outside of the chart area?
Thank you !
Alex
- Alexandru Neamtu asked 1 month ago
- last active 1 month ago
I’m migrating from LiveCharts to SciChart. With LiveCharts, adding a new point to the series is smooth, and you can see the animation playing as the new point is added.
I’m appending points to a FastLineRenderableSeries with FIFO mode. How can I implement the same effect, just like in LiveCharts?
- Sami Lamb asked 1 month ago
- last active 1 month ago
Hello, I am developing a financial chart in my android application and I am creating a Trendline. I want the trendLine name to be written on each created trendLine, but I could not find how to do it. I create LineAnnotation lineAnnotation = new LineAnnotation(getContext()); but the withAnnotationLabel property is not accessed from here. how can I do this? and can I make this name not always appear, but only when the trendline is clicked?
- devrim çatak asked 1 month ago
Hello,
In my project I am using Non-Uniform Heatmap chart. My problem is that when I zoom in/out the performance is very poor and the FPS drops down a lot. First I thought the problem might be the size of heatmap I was rendering 10 x 3000, but then I tried to run example code from https://www.scichart.com/documentation/js/current/The-Non-Uniform-Heatmap-Chart-Type.html and it has the same performance issue with zValue of size 3×3
In my project I also use Uniform Heatmaps and these don’t have any visible performance issue, even for large amount of data.
I would be very grateful for your help in this matter
- Cezary Szymanski asked 1 month ago
- last active 1 month ago
Hi,
I have a chart with VerticalLineAnnotation in VerticalSliceModifier,
new VerticalLineAnnotation()
{
XAxisId = XAxis.Id,
YAxisId =YAxis.Id,
LabelPlacement = LabelPlacement.BottomLeft,
ShowLabel =true,
X1 = 0.3,
CoordinateMode = AnnotationCoordinateMode.RelativeX,
IsEditable = true
};
Is there a easy way to set label to show axis value, not the Relative?
By the way VerticalLineAnnotation label can auto fit LabelPlacement? When I drag to edge, the label will be sheltered.
- wei zhao asked 1 month ago
- last active 7 days ago
Hi, I am currently doing MVVM development with SciChart. Previously I was using thousands of LineRenderableSeriesViewModel to represent vertical lines along a profile. I noticed that this may be the cause for a slow-down, so I have attempted to merge all the LineRenderableSeriesViewModels into one view model, using double.NaN’s in between vertical lines to get gaps. This works fine, except if the first point is off-screen then everything else disappears. I am currently using the VisualXcceleratorEngine in my surface. The screenshots show what happens if I pan to the right a little bit and the first point goes off-screen. One thing I thought it was at first was the stationing was not monotonically increasing, but I have made it that way and it didn’t fix the problem. Tips would be appreciated.
- Daniel Black asked 2 months ago
- last active 1 month ago
Hello,
I want to display statistical data using a violin plot. Is it possible to create a violin plot using SciChart?
A violin plot is similar to a box plot, with the addition of a rotated kernel density plot on each side.
https://en.wikipedia.org/wiki/Violin_plot
regards,
Tobias
- Tobias asked 2 months ago
- last active 3 days ago
In the “Central XAxis and YAxis” example, I saw how I could use IsCenterAxis to have the X-axis and Y-axis centers intersect vertically and appear in the center of the view, but the version I was using did not have the IsCenterAxis attribute.
- Du Yeming asked 2 months ago
- last active 1 month ago
body { margin: 0; }
scichart-root { width: 100%; height: 100vh; }
chart0
chart0
// Create a SciChartSurface in the div ‘scichart-root’
async function builderExample(divElementId) {
var data1 = [[1698350200000, 659.4081], [1698350200000, 709.4191], [1698347047000, 542.9722], [1698342726000, 652.2053], [1698338406000, 566.1798], [1698334075000, 616.6355], [1698329754000, 686.94464], [1698325434000, 581.1947], [1698321108000, 616.5695], [1698316788000, 687.024], [1698312467000, 514.56464], [1698308146000, 657.59796]];
var xArray = [];
data1.forEach(function (value,index) {
// xArray[index] = value[0]
xArray.push(new Date(value[0]));
})
var yArray = [];
data1.forEach(function (value,index) {
yArray.push(value[1]);
})
// Demonstrates how to create a line chart with SciChart.js using the Builder API
const {
chartBuilder,
EThemeProviderType,
NumberRange,
EAxisAlignment,
EAxisType,
ESeriesType,
ZoomPanModifier,
MouseWheelZoomModifier,
TextAnnotation,
ECoordinateMode ,
EHorizontalAnchorPoint ,
EVerticalAnchorPoint ,
FastLineRenderableSeries,
xyDataSeries
} = SciChart;
// or, for npm, import { chartBuilder, … } from “scichart”
// #region ExampleB
// If you want to show an XAxis with dates between 1st March 2023 and 10th March 2023
const minDate = new Date(xArray[xArray.length – 1]);
const maxDate = new Date(xArray[0]);
console.log(xArray[0] + “minDate “+ minDate);
console.log(xArray[0] + “maxDate “+ maxDate);
// Create data for the chart with X-data as dates using unix Timestamp / 1000
const { wasmContext, sciChartSurface } = await chartBuilder.build2DChart(divElementId, {
surface: { theme: { type: EThemeProviderType.Dark } },
xAxes: {
type: EAxisType.DateTimeNumericAxis,
options: {
axisTitle: “X Axis / DateTime”,
// We need to specify some visibleRange to see these two dates
// SciChart.js expects linux timestamp / 1000
visibleRange: new NumberRange(minDate.getTime()/1000, maxDate.getTime()/1000 )
}
},
yAxes: {
type: EAxisType.NumericAxis,
options: {
axisTitle: “Y Axis, Left, default formatting”,
axisAlignment: EAxisAlignment.Left,
visibleRange: new NumberRange(500, 800),
}
},
series: [
{
type: ESeriesType.MountainSeries,
options: {
strokeThickness: 3,
stroke: “#50C7E0”
},
xyData: { xArray, yArray }
}
]
});
// #endregion
sciChartSurface.chartModifiers.add(new ZoomPanModifier(), new MouseWheelZoomModifier());
// Add annotations to tell the user what to do
sciChartSurface.annotations.add(new TextAnnotation({
text: “DateTimeNumericAxis Demo”,
x1: 0.1, y1: 0.1,
yCoordShift: 0,
xCoordinateMode: ECoordinateMode.Relative, yCoordinateMode: ECoordinateMode.Relative,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center, verticalAnchorPoint: EVerticalAnchorPoint.Center,
opacity: 0.33,
fontSize: 36,
fontWeight: “Bold”
}));
sciChartSurface.annotations.add(new TextAnnotation({
text: “Try mouse-wheel, left/right mouse drag and notice the dynamic X-Axis Labels”,
x1: 0.5, y1: 0.5,
yCoordShift: 50,
xCoordinateMode: ECoordinateMode.Relative, yCoordinateMode: ECoordinateMode.Relative,
horizontalAnchorPoint: EHorizontalAnchorPoint.Center, verticalAnchorPoint: EVerticalAnchorPoint.Center,
opacity: 0.45,
fontSize: 17,
}));
const lineSeries = new FastLineRenderableSeries(wasmContext);
lineSeries.strokeThickness = 3;
lineSeries.stroke = “rgba(255,0,0,1)”;
lineSeries.dataSeries = xyDataSeries;
sciChartSurface.renderableSeries.add(lineSeries);
};
// Uncomment this to use the builder example
builderExample(“scichart-root”);
- aswani kumar asked 2 months ago
- last active 2 months ago