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

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 ?

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?

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.

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?

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.

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.

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

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.

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

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.

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?

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();

}

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.

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

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

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?

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

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.

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.

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

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.

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”);