Pre loader

Category: JavaScript

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0 votes
75 views

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

0 votes
0 answers
92 views

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?

0 votes
100 views

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!

0 votes
110 views

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

0 votes
127 views

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.

0 votes
124 views

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

0 votes
145 views

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

0 votes
215 views

SciChanrts

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

0 votes
217 views

Hi,

I have some strange beaviour when using horisontaly stacked charts and cursors. When adding showYLine for the cursor it shows and both charts Y axis. How can I limit/add workaround so it only shows on the correct axis? See the screenshot.

Thank you.

0 votes
202 views

Hi,

I created multiple charts by using subchart api. I would like to know how to listen click() event for each subchart. In other words, how do I know which subchart is clicked by the user?

Thanks

  • Atanai W. asked 1 month ago
  • last active 1 month ago
0 votes
250 views

Currently I’m using line series to render data of two different types. But when using legend, a separate entry is made for each line. I want a single legend for each data type.

const {sciChartSurface, wasmContext} = await SciChart.SciChartSurface.create("scichart-root");

        sciChartSurface.xAxes.add(new SciChart.NumericAxis(wasmContext));
        sciChartSurface.yAxes.add(new SciChart.NumericAxis(wasmContext));

        for (let i = 0; i < 5; i++) {
            const xValues = [1, 2, 3, 4, 5];
            const yValues = xValues.map(x => x * (i + 1));
            const dataSeries = new SciChart.XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: "file 1" });

            const lineSeries = new SciChart.FastLineRenderableSeries(wasmContext, {
                dataSeries,
                stroke: "red",
                strokeThickness: 2,
            });
            sciChartSurface.renderableSeries.add(lineSeries);
        }

        for (let i = 0; i < 5; i++) {
            const xValues = [1, 2, 3, 4, 5];
            const yValues = xValues.map(x => x * (i + 10));
            const dataSeries = new SciChart.XyDataSeries(wasmContext, { xValues, yValues, dataSeriesName: "file 2" });

            const lineSeries = new SciChart.FastLineRenderableSeries(wasmContext, {
                dataSeries,
                stroke: "blue",
                strokeThickness: 2,
            });
            sciChartSurface.renderableSeries.add(lineSeries);
        }

        const legendModifier = new SciChart.LegendModifier({
            placement: SciChart.ELegendPlacement.TopRight,
            orientation: SciChart.ELegendOrientation.Vertical,
            showLegend: true,
            showCheckboxes: true,
            showSeriesMarkers: true,
        });

        legendModifier.getLegendData = () => {
            return [{
                seriesName: "Grouped Lines",
                stroke: "#000000",
                seriesType: "LineSeries"
            }];
        };

        sciChartSurface.chartModifiers.add(legendModifier);
0 votes
276 views

Hello,

Is there an equivalent JavaScript way to check if the hardware acceleration is enabled?

This snippet is from the WPF documentation.

Hardware-accelerated rendering check

if (sciChartSurface.RenderSurface.GetType() == typeof (VisualXcceleratorRenderSurface))
{
   // Hardware-accelerated rendering is enabled!
}

If there is no hardware acceleration in the browser available we do not want to render the SciChart surface.

Best,
Kras

0 votes
329 views

Hello,

I am trying to make my xAxes values to be in datetime, specifically i want to try and get the seconds since my graph will be 20 seconds worth of data.

I checked the Javascript examples however all of them resulted in a wrong date

            // ? Getting start Date
            const startDate = new Date(timestamp).getTime()
            // ? yValues Array size
            const totalPoints = yValues.length
            // ? Getting end Date
            const endDate = startDate + (totalPoints - 1) * 64
            // ? xValues Array. startDate + i * 64 ms
            const xValues = Array.from({ length: totalPoints }, (_, i) => startDate + i * 64)

            // ? xAxes
            const xAxes = new CategoryAxis(wasmContext, {
                defaultXStart: startDate,
                defaultXStep: 64,
                defaultXEnd: endDate,
                labelProvider: new SmartDateLabelProvider(),
                axisAlignment: EAxisAlignment.Bottom,
                autoRange: EAutoRange.Always,
                drawMajorGridLines: false,
                drawMinorGridLines: false,
            })
            sciChartSurface.xAxes.add(xAxes)
            xyDataSeries = new XyDataSeries(wasmContext, { xValues, yValues })

Notes:
– xValues array consists of 320 values from start date to end date going up by 64ms
– Yes all the values of xValues are correct, console logged and checked them manually
– I tried DateTimeNumericAxis but it resulted in the same thing as the below screenshot

0 votes
436 views

Hi,

I have implemented a scalable annotation which will pann and zoom with a heatmap,
see code below,

class ScalableAnnotation extends CustomAnnotation {
    constructor(...args) {
        super(...args)
        this.zoomFactor
        this.initialWidth
        this.initialHeight
        this.initialDiff
        this.initialCircleRadius
        this.diff
    }
    update(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans) {
        super.update(xCalc, yCalc, xCoordSvgTrans, yCoordSvgTrans);
        if (!this.initialDiff) {
            this.initialDiff = xCalc.visibleMax - xCalc.visibleMin;
            this.initialCircleRadius = Number.parseFloat(d3.select(this.svg).selectAll('circle').attr('r'))
            this.initialCircleStrokeWidth = Number.parseFloat(d3.select(this.svg).selectAll('circle').style('stroke-width'))
            this.initialLineStrokeWidth = Number.parseFloat(d3.select(this.svg).selectAll('polygon').style('stroke-width'))
            this.initialWidth = Number.parseFloat(this.svg.getAttribute("width"));
            this.initialHeight = Number.parseFloat(this.svg.getAttribute("height"));
            this.zoomFactor = 1
        } else {
            this.diff = xCalc.visibleMax - xCalc.visibleMin;
            if (this.diff !== this.initialDiff) {
                this.zoomFactor = this.initialDiff / this.diff
                const width = this.initialWidth * this.zoomFactor;
                const height = this.initialHeight * this.zoomFactor;
                d3.select(this.svg).selectAll('circle').attr('r', (this.initialCircleRadius / this.zoomFactor) + 0.01)
                d3.select(this.svg).selectAll('circle').style('stroke-width', (this.initialCircleStrokeWidth / this.zoomFactor) + 0.003)
                d3.select(this.svg).selectAll('polygon').style('stroke-width', (this.initialLineStrokeWidth / this.zoomFactor) + 0.01)
                this.setSvgAttribute("width", width);
                this.setSvgAttribute("height", height);
                let borderX1 = this.getX1Coordinate(xCalc, yCalc) + this.xCoordShift;
                let borderY1 = this.getY1Coordinate(xCalc, yCalc) + this.yCoordShift;
                this.setAnnotationBorders(
                    borderX1,
                    borderX1 + width,
                    borderY1,
                    borderY1 + height
                );
                this.updateAdornerInner();
            }
        }
    }
}

This works fantastic when zooming in and zooming out or panning see video below,

Bur when we resize the heatmap, the annotations do not scan with the heatmap. see video below,

Any suggestion on how to deal with this scenario?

Thanks,

Pramod

0 votes
399 views

Hi thank you for resounding to other questions,

I have having a strange issue. When I add the ScatterRenderableSeries3D to a surface3D, the tooltip3D works. when I add more ScatterRenderableSeries3D it still works. but if I only update the xyzdataseries then the tooltip stops working.

Please see the code below,

            props.data.map(annotationData => {
            //console.log(annotationData)
            if (!sciChart3DSurfaceRef.current.renderableSeries.getById(annotationData?.id)) {
                if (annotationData.x.length > 0) {
                    //console.log("creating data", annotationData)
                    sciChart3DSurfaceRef.current.renderableSeries.add(new ScatterRenderableSeries3D(wasmContextRef.current, {
                        id: annotationData.id,
                        dataSeries: new XyzDataSeries3D(wasmContextRef.current, {
                            xValues: annotationData.x,
                            yValues: annotationData.y,
                            zValues: annotationData.z,
                            metadata: annotationData.metadata // Optional metadata here. Property vertexColor is read to color the point,

                        }),
                        // When metadata colours are provided, the pointMarker.fill is ignored
                        pointMarker: new SpherePointMarker3D(wasmContextRef.current, {
                            size: 2.0,
                        }),
                        opacity: 0.7
                    }));
                }
            }
            else {
                console.log("setting data", annotationData)
                const dataSeries = new XyzDataSeries3D(wasmContextRef.current, {
                    xValues: annotationData.x,
                    yValues: annotationData.y,
                    zValues: annotationData.z,
                    metadata: annotationData.metaata // Optional metadata here. Property vertexColor is read to color the point,
                })
                //console.log(sciChart3DSurfaceRef.current.renderableSeries.getById(annotationData.id))
                sciChart3DSurfaceRef.current.renderableSeries.getById(annotationData.id).dataSeries = dataSeries
            }
        })

When a new renderableSeries is added, the tooltip3d on that data works great! but if I add new dataseries like in else statement the tooltip3d disappears.

Any help is appreciated.

Pramod

0 votes
436 views

Hi there,

I have a license in the past that expired March 13, 2024 for SC-BUNDLE-SDK-ENTERPRISE product.

I want to use SciChart JavaScript now, but if I use a pre-expired version of the package, can I use it without purchasing a license again?

When I tested it by applying the 3.3.567 version(published on February 28, 2024) according to the guidlines, it seems that the watermark does not disappear.

Thank you.

  • nada nada asked 2 months ago
  • last active 2 weeks ago
0 votes
436 views

I am not able to find a chart modifier to allow panning in 3D charts. Can you please point me to the correct modifier?

Thank you,

Pramod

0 votes
430 views

Hi,

What is the best way to update the XyzDataSeries3D data?

sciChart3DSurfaceRef.current.renderableSeries.items[0]

does not seem to have way to update xValues, yValues and zValues? these seem to be classes but i could not find the class method.

Thank you,

Pramod

0 votes
475 views

Hi,

I am trying to get an event when a customAnnotation is selected and unselected. I can of course is click to coincide with selection, but how do I listen on the unselected event?

Thanks,

Pramod

0 votes
616 views

I’m creating a web application in which I have a little bit over a million data points. When toggling annotations (about 4000) on one of my charts I noticed the memory usage of Chrome was doubled. I did some tinkering and found out this behaviour only occurred when I had “strokeDashArray” set in my VerticalLineAnnotations.

  for (let i = 0; i < 5000; i++) {
    const line = new VerticalLineAnnotation({
      x1: i,
      strokeDashArray: [5, 5] //If this is removed then the memory usage drops
    });

    sciChartSurface.annotations.add(line);
  }

Is there a known memory problem with dashed lines or anything I might do wrong?

0 votes
619 views

I am trying to add sci chart in nextjs app and its failing with a message “Aborted(both async and sync fetching of the wasm failed)”.
I have updated next config – webpack with :
const destWasmFolder = “static/chunks/pages”;
config.plugins.push(new CopyPlugin({
patterns: [
{ from: “node_modules/scichart/_wasm/scichart2d.wasm”, to: destWasmFolder },
]
And installed the package copy-files-from-to and created a file “copy-files-from-to.json in the root directory with content:
{
“copyFilesSettings”: {
“whenFileExists”: “overwrite”
},
“copyFiles”: [
{
“from”: “./node_modules/scichart/_wasm/scichart2d.data”,
“to”: “./public/scichart2d.data”
}
]
}

And updated package.json script with “”dev”: “cross-env NODE_OPTIONS=\”-r next-logger\” copy-files-from-to && next dev”

0 votes
612 views

Hello,

I am trying to add multiple Y axis to this example:
https://github.com/ABTSoftware/SciChart.JS.Examples/blob/master/Examples/src/components/Examples/Charts2D/ModifyAxisBehavior/VerticallyStackedAxes/drawExample.ts

What I want to achieve is to add an additional Y axis which would display the index of the loop. I have tried to make the first yAxis isVisible to false and add the additional one but it seems that it creates a blank chart (extra blue lines in the image attachment) with the index label + the number range. At the end vertically stacked axes are doubled instead of showing just the index.
I am attaching the images and the running example. Maybe there is an easier way to show the index of the loop of the particular graph while not displaying the number range?

Any help would be kindly appreciated.

  • Zino As asked 3 months ago
  • last active 2 months ago
0 votes
617 views

I am trying to add a custom modifier (derived from ChartModifierBase2D) to allow our users to navigate through datapoints using keyboard — left and right arrows.
But, the ZoomPanModifier prevents the keyboard events to reach this custom modifier.

Steps to reproduce the issue:
1. For example, use the following modifier that just listens to keyboard event and logs the event to console.
2. Add ZoomPanModifier along with the custom modifier.
3. Click on the chart to focus it and then press arrow keys. Nothing will be logged in the console.
4. Disable the ZoomPanModifier (either by setting its this.isEnabled = false or removing it entirely).
5. Click on the chart to focus it and then press arrow keys. You will see the keys logged in the console.

export class DataPointNavigatorModifier extends ChartModifierBase2D {
  public readonly type: string;

  constructor(options?: IChartModifierBaseOptions) {
    console.log('DataPointNavigatorModifier::CTOR');
    super(options);
    this.handleKeyDown = this.handleKeyDown.bind(this);
    this.type = 'DataPointNavigatorModifier';
  }

  private handleKeyDown(ev: KeyboardEvent) {
    console.log('DataPointNavigatorModifier::handleKeyDown', ev);
  }

  override onAttach() {
    console.log('DataPointNavigatorModifier::onAttach');
    this.parentSurface.domChartRoot.tabIndex = this.parentSurface.domChartRoot.tabIndex || 0;
    this.parentSurface.domChartRoot.addEventListener('keydown', this.handleKeyDown);
  }

  override onDetach() {
    console.log('DataPointNavigatorModifier::onDetach');
    this.parentSurface.domChartRoot.removeEventListener('keydown', this.handleKeyDown);
    super.onDetach();
  }
}

I am open to other solutions that would allow users to navigate through datapoints using keyboard.

Best Regards,
Sachin Patel.

0 votes
646 views

I have a license for 2D plots and now I am trying to evaluate the 3D plots. I used the most basic example provided to plot 3 axis.

import { useEffect, useRef } from "react";
import React from 'react'
import {
    SciChart3DSurface,
    NumericAxis3D,
    Vector3,
    SciChartJsNavyTheme,
    MouseWheelZoomModifier3D,
    OrbitModifier3D,
    ResetCamera3DModifier,
    NumberRange,
    ENumericFormat,
    EWatermarkPosition,
    chartModifiers
} from "scichart"

const createChart = async (divElementId) => {
    SciChart3DSurface.useWasmFromCDN();
    const { wasmContext, sciChart3DSurface } = await SciChart3DSurface.createSingle(divElementId, {
        //theme: new SciChartJsNavyTheme(),
        worldDimensions: new Vector3(300, 200, 300),
        cameraOptions: {
            position: new Vector3(300, 300, 300),
            target: new Vector3(0, 50, 0),
        }
    });
    sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, {
        drawMajorGridLines: true,
        drawMinorGridLines: true,
        drawLabels: true,
        axisTitle: "X Axis, 4-decimal places",
        visibleRange: new NumberRange(0, 1000),
        labelFormat: ENumericFormat.Scientific,
        cursorLabelFormat: ENumericFormat.Decimal,
        labelPrecision: 4,
        maxAutoTicks: 5,
        titleOffset: 50,
        tickLabelsOffset: 10,
    })
    sciChart3DSurface.yAxis = new NumericAxis3D(wasmContext, {
        axisTitle: "Y Axis, 2 dp, prefix & postfix",
        labelPrecision: 2,
        labelPrefix: "$",
        labelPostfix: " USD",
        visibleRange: new NumberRange(10, 1000),
        maxAutoTicks: 5,
        titleOffset: 50,
        tickLabelsOffset: 10,
    })
    sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, {
        axisTitle: "Z Axis, 0 dp",
        visibleRange: new NumberRange(0, 1000),
        labelPrecision: 0,
        labelPostfix: " kWh",
        maxAutoTicks: 5,
        titleOffset: 50,
        tickLabelsOffset: 10,
    })
    //sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, { axisTitle: "Z Axis" });
    sciChart3DSurface.chartModifiers.add(
        new MouseWheelZoomModifier3D(), // provides camera zoom on mouse wheel
        new OrbitModifier3D(), // provides 3d rotation on left mouse drag
        new ResetCamera3DModifier()); // resets camera position on double-click
    return sciChart3DSurface
};

const ThreeDPlotTemplate = (props) => {
    const sciChart3DSurfaceRef = useRef()
    useEffect(() => {
        sciChart3DSurfaceRef.current = createChart(`scichart-root-${props.id}`); // Note, does not delete on unmount (todo later)
        console.log(sciChart3DSurfaceRef.current.then(value => console.log(value)))
    }, []);

    return (
        <div
            className="wrapper"
            style={{
                width: "100%",
                height: "100%",
                position: "relative",
            }}
        >
            <div
                id={`scichart-root-${props.id}`}
                style={{
                    width: "100%",
                    height: "100%",
                    position: "relative",
                }}
            ></div>
            <div
                className="titleWrapper"
                style={{
                    position: "absolute",
                    width: "100%",
                    top: "35%",
                    textAlign: "center",
                    pointerEvents: "none",
                    color: "#ffffff77"
                }}
            >
                <p className="title">SciChart.js 3D Chart Example</p>
                <p className="subTitle">Drag the mouse to rotate, use MouseWheel to zoom</p>
                <p className="subTitle">Double-click to reset zoom</p>
            </div>
        </div >
    )
}

export default ThreeDPlotTemplate

But i am getting just a blank screen Please see attached image. Is this an issue we licensing? or am i missing something?

Thanks,

Pramod

0 votes
0 answers
609 views

Hi everyone,
Wanted to check if there is an existing implementation of NonUniformGridDataSeries3D in js. Had a use case that requires plotting of a 3d mesh with non-uniform grid. I could only find UniformGridDataSeries3D. Can someone please help?

0 votes
0 answers
685 views

Hello, we have been working on our charts for more than a year now. The performance is really bad recently, it uses 100% of CPU when hovering on the chart, it seems to be an issue with the RolloverModifier, if we remove it; everything feels smother and the CPU usage is on normal levels. We tried rolling back to an old version of SciChart, but the problem persist. Any idea of what can be the issue?

0 votes
754 views

When displaying a value in a stacked column chart, if the value is negative, the negative value should be drawn from the 0 position of the y-axis or from below the other negative value if it exists. Similarly, the positive value after the negative should be drawn from the 0 position of the y-axis or from above the other positive value if it exists. But instead, in both cases, they are being drawn from the end of the previous value, resulting in overlapping.

1 vote
792 views

Is there a way to get discreet colormap for the heatmap? currently no matter how many or how few colors are defined in the colormap table it always adds a gradient. how can we get a discreet ranges for colormap?

Thanks

0 votes
754 views

We have a scalablecustomannotation and i have embedded a png in side the snnotation svg. currently when I zoom in on the svg it does interpolation/smoothening of the pixels by default. what would like to set is pixellated mode where there is no automatic smoothening.

Any ideas how to achieve that?

E.g. please see the video below, what you see on the right in the video is what I get from scichart. what I am trying to achieve is the effect in the left window

video

0 votes
761 views

Hello,

I am having a problem where I want to display the Rollover Modifier only when I click on the selected graph.
For example:
https://demo.scichart.com/javascript-chart-rollovermodifier-tooltips
If I select the Second Lines Series, I want to see the rollover only for that particular graph and not the first one and the third one.

I have tried using charts id’s as a reference to show only one tooltip but it just enables it for all the graphs.

Any help would be kindly appreciated.

  • Zino As asked 3 months ago
  • last active 3 months ago
0 votes
2k views

Our application requires registration between visible image and heatmap data. I am able to do this with ScalableAnnotations which registers the image beautifully and is able to scale with the heatmap as shown in the video below.

unfortunately this is exactly opposite of what we need. The issue we are facing is we need the visible image to be under the heatmap and not over the heatmap. In our use case the relevant data in the heatmap is visible and rest of the data is transparent and needs to be over the visible image to colocate where the cancer is.

How do we achieve this?

0 votes
0 answers
748 views

(Copied from GitHub issue)
Issue:
In an attempt to wrap the SciChart Server Licensing shared object using java (JNA), I ended up with strange behavior when calling any function which returns char *. In Java, the returned pointer memory does not start at the correct offset which holds the string value and therefore invalid characters are returned.

Hypothesis:
My guess, after evaluation, is that either the function is returning some std::string object, or that it is actually returning say str.c_str() where str is an std::string. The issue is that returning str.c_str() causes the reference to be dropped once it is out of scope, this means that a dangling pointer is returned. I ended up needing to wrap the function calls in another extern C layer to get the desired functionality in Java, see link below for snippets and attached zip files for source.

Server Licensing GitHub Issue

0 votes
2k views

Hi,
I’ve got some questions to expand on this topic: https://www.scichart.com/questions/js/how-do-you-export-or-save-a-chart-as-an-image-in-js-library

1) Can you export areas of a chart that are not visible on the screen? I have a large line chart, like a seismograph, that is never fully displayed on the screen because it is too long.

2) Can you export from a chart that is not visible on the screen?

Thank you

  • max keirn asked 4 months ago
  • last active 2 months ago
0 votes
910 views

I wanted to customized my box annotation further, for example, I wanted to give my box annotation some border radius, it seem like there is no way to do so currently.

I know that there is custom annotation like svg annotation, but those are svg, the reason Custom annotation doesn’t work for me is because they are not responsive to zooming since they are image/svg, unlike normal box annotation.

For example, for normal box annotation, I can give it x1 to x2 so that when I zoom in the chart, the box annotation expanded. But for Custom annotation, they only take one x point for placement, so I can not cover x1 to x2, it only going to stay on x1.

So, I wonder if there is currently a way I can add border radius to a box annotation, or is there a plan to do so in the future?

Let me know, thank you!

  • Nung Khual asked 4 months ago
  • last active 4 months ago
1 vote
2k views

We managed to create a functioning chart, but sometimes when we first ran the chart it produced this error, followed by the chart being completely unable to display.

We attached the error message produced in DevTools, the expected outcome and the actual outcome when the error occurred.

1 vote
1k views

When using AutoRange.Once on an axis, I expect the auto ranging to be done exactly once.
If at some point, I change the visible range to match the default one (0 to 10 for numeric axis), the auto range is triggered again.

Happens more if I provide inputs so the user can define a range, and depending on the use case, 0 to 10 is not that uncommon.
Kind of an edge case, but still something that can happen, and is definitely unexpected.

This can be seen happening here https://codepen.io/jrfv/full/xxeqwOd

1 vote
1k views

I am trying to subscribe to Visible Range changes on a DateTimeNumericAxis, it is not working, am I doing something wrong?

1 vote
0 answers
1k views

Hi, im facing a problem related to VisibleRange Auto,
when a value is much higher than the values
already plotted and I try to scroll along the X axis,
the value on the Y axis does not fully show the candle.

Please see the attached images.

As you can see, the biggest value of my last candle is 41.75, however,
the numberRange that is being used in VisibleRange Auto is 41.63.

Is there any way around this?

1 vote
0 answers
2k views

I have a design where I want to show something like a box at the top of the chart and when hovering on it, it should show up a tooltip with some info, the issue I’m running into is the fact that I can’t seem to find way I can add tooltip to box annotation other than adding another box annotation when hover or hit, but it seem that it is not recommended base on my previous post before.

I also looked into scatterXY series or pointMarker, the issue with Point marker or scatter series is that I can only set one x and y, but my design require the box to be from a certain x1 point to x2 point. I can probably try to calculate the width and set the width to the point marker, but I would rather not if there is a better way.

Also looked into column chart, but that also have the same issue of only one x and y point and not sure about tooltip, but definitely seem more promising than annotation.

Please let me know if there is a better way to accomplish this, thank you!

The image below is the design.

  • Nung Khual asked 5 months ago
  • last active 5 months ago
1 vote
2k views

I intend to use the Ctrl key to allow the user to select multiple FastLineRenderableSeries at once in an onkeydown event. Is there any way to do so while maintaining the default behavior?

Note: I was able to use onSelectedChanged to select a FastLineRenderableSeries, but I was only able to select one FastLineRenderableSeries at a time.

Here’s the code that I have to generate the FastLineRenderableSeries:

let fastLineRenderableSeries = new FastLineRenderableSeries(this.wasmContextGraph, {
      dataSeries: xyDataSeries,
      id: traceId,
      xAxisId: this.sciChartGraph.xAxes.get(0).id.toString(),
      yAxisId: traceData.array[0][0],
      isVisible: true,
      isSelected: false,
      opacity: 1,
      resamplingMode: EResamplingMode.Auto,

      onSelectedChanged: (sourceSeries, isSelected) => {
        if (isSelected){
          // some unrelated functions
        } else {
          // some unrelated functions
        }
      }
  });
0 votes
0 answers
7k views

I am having UX issues with overlapping Bars on BarChart with certain datasets. Example attached is the code
https://codesandbox.io/p/sandbox/javascript-column-chart-forked-p59p75?file=%2Fsrc%2FApp.tsx%3A49%2C1

please uncomment lines at 47 and 48 for a different set of x and y values where it works fine.
Not sure what am i doing wrong.

1 vote
2k views

I have a React application showing a real time updated chart which works well when receives data from event-based WebSocket. Now I need to modify the app with a new data source. I have an aysnc function to get a batch of data in an interval.

kinesisReadInterval.current = setInterval(async () => {
        const recordsResponse = await kinesisRef.current.getRecords({ ShardIterator: shardIterator }).promise();
        recordsResponse.Records.forEach(record => {
            try {
                const dataObj = JSON.parse(record.Data.toString('utf-8'));
                spectrumAnalyzerRef.current.metaDataHandler(dataObj);
            } catch (jsonError) {
                spectrumAnalyzerRef.current.binaryDataHandler(record.Data.buffer);
            }
        });

        shardIterator = recordsResponse.NextShardIterator;

        if (!shardIterator || !kinesisConected.current) {
                clearInterval(intervalId); // Stop interval if conditions are not met
        }
    }, 1000);

The recordsResponse.Records contains a batch of records and I want to update the chart based on these records one by one. From my logs, I can see that the binaryDataHandler() which will call appendRange() ran successfully for each record. However, the chart only redraws for the last record of the recordsResponse.Records. I have tried to store the recordsResponse.Records in a state variable and loop to update the chart later, but still got the same result. I am not sure whether it’s chart related issue or React rendering issue. Do you have any idea?

  • Quyen Sy asked 5 months ago
  • last active 5 months ago
1 vote
2k views

Hello,

I switched from NumericAxis to DateTimeNumericAxis to view x axis labels in hh:mm format. It is definitely showing the labels in this format which is what I wanted, but for some reason it always show “Jan 1” in the first label. I simply want to show hh:mm labels based on the X values. One thing to now is that this is a live updating chart, not static data.

What am I missing? attached is a picture showing the issue and a picture with the DateTimeNumericAxis configuration.

Thanks.
Sergio.

1 vote
2k views

Hello,

I am experiencing an issue with the BoxAnnotation in SciChart where the precision of the box’s boundaries does not accurately match the data points it is supposed to represent. When dynamically creating a BoxAnnotation to highlight a range of values on a chart, the upper boundary (y2) is set to match the maximum value within the specified range. Despite the calculation seeming accurate, the rendered annotation’s top edge is visually lower than the top of the highest column it encompasses, creating a slight discrepancy. In my application, I am creating a lot of charts, and this issue occurs only on charts with a big data range.

Environment:

SciChart Version: 3.2.532
Browser: Chrome

Attaching code snippet on jsfiddle:
https://jsfiddle.net/c9dekx6v/2/

Regards,
Dmytro

1 vote
0 answers
2k views

When using FastCandlestickRenderableSeries, I want every value to appear on the chart. I tried to use DataLabelProvider for this, but it didn’t work. What can I do.

class CustomDataLabelProvider extends DataLabelProvider {
onDataPoint(renderableSeries, xValue, yValue) {
    const labelText = `${yValue.toFixed(2)}`;

    const label = document.createElement('div');
    label.textContent = labelText;
    label.style.position = 'absolute';
    label.style.color = 'black';
    label.style.fontSize = '12px';
    label.style.left = `${this.parentSurface.coordinateCalculator.getCoordinateFrom(xValue) - label.clientWidth / 2}px`;
    label.style.top = `${this.parentSurface.coordinateCalculator.getCoordinateFrom(yValue) - label.clientHeight}px`;

    this.parentSurface.annotationCanvas.appendChild(label);
  }
}



const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
theme: new SciChartJSLightTheme(),   
titleStyle: { fontSize: 22 },
 });

sciChartSurface.applyTheme(new SciChartJSLightTheme());
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const yAxis = sciChartSurface.yAxes.get(0);
yAxis.visibleRange = new NumberRange(LAL, UAL);
const xAxis = sciChartSurface.xAxes.get(0);
xAxis.visibleRange = new NumberRange(0, endBarIndex);

const dataSeries = new OhlcDataSeries(wasmContext, {
xValues: xValues,
openValues: compositeScanAverageArray,
highValues: yValues,
lowValues: compositeScanAverageArray,
closeValues: yValues,
});

sciChartSurface.renderableSeries.add(new FastCandlestickRenderableSeries(wasmContext, {
dataSeries: dataSeries,
strokeThickness: 1,
dataPointWidth: 0.5,
paletteProvider: new CustomPaletteProvider(),
dataLabelProvider: new CustomDataLabelProvider(),
 }));
1 vote
3k views

I want to use a different color for each value in the chart I created here. To put it simply, if the value is greater than 10, I want it to appear yellow, if it is less than green, and red if it is less than 0. thanks

const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root", {
    theme: new SciChartJSLightTheme(),   
});
sciChartSurface.applyTheme(new SciChartJSLightTheme());
sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
sciChartSurface.yAxes.add(new NumericAxis(wasmContext));
const yAxis = sciChartSurface.yAxes.get(0);
yAxis.visibleRange = new NumberRange(LAL, UAL);
const xAxis = sciChartSurface.xAxes.get(0);
xAxis.visibleRange = new NumberRange(0, endBarIndex);

const dataSeries = new OhlcDataSeries(wasmContext, {
    xValues: xValues,
    openValues: yValues,
    highValues: compositeScanAverageArray,
    lowValues: yValues,
    closeValues: compositeScanAverageArray,
});
const renderableSeries = new FastCandlestickRenderableSeries(wasmContext, {
    dataSeries,
    stroke: "white",
    strokeThickness: 1,
});

sciChartSurface.renderableSeries.add(renderableSeries);
sciChartSurface.annotations.add(
    new SciChart.BoxAnnotation({
        stroke: "yellow",
        strokeThickness: 1,
        fill: "rgba(255, 255, 0, 0.3)",
        x1: 0,
        x2: endBarIndex,
        y1: UAL,
        y2: UWL,
    })
);
sciChartSurface.annotations.add(
    new SciChart.BoxAnnotation({
        stroke: "yellow",
        strokeThickness: 1,
        fill: "rgba(255, 255, 0, 0.3)",
        x1: 0,
        x2: endBarIndex,
        y1: LAL,
        y2: LWL,
    })
);
sciChartSurface.annotations.add(
    new SciChart.BoxAnnotation({
        stroke: "green",
        strokeThickness: 1,
        fill: "rgba(0, 128, 0, 0.3)",
        x1: 0,
        x2: endBarIndex,
        y1: LWL,
        y2: UWL,
    })
);
sciChartSurface.annotations.add(
    new SciChart.LineAnnotation({ stroke: "#FF6600", strokeThickness: 3, x1: startBarIndex, x2: endBarIndex, y1: compositeScanAverage, y2: compositeScanAverage }),
);

sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
sciChartSurface.chartModifiers.add(new ZoomPanModifier());

}

0 votes
0 answers
8k views

Hello to everyone. I want to take the starting point of my bar charts as 20, for example, rather than 0. If the data is 3, I want to create a bar chart going from point 20 to 23, and if it is -3, from point 20 to 17, can you help me?

0 votes
3k views

Codesandbox link: https://codesandbox.io/p/sandbox/vertically-stacked-axes-forked-pd3h7g?file=%2Fsrc%2FApp.tsx%3A133%2C25

I put the first box annotation to be from -5 to 6 and the x-axis range is from 0 to 10, so that mean some portion of the first box annotation is out of the chart. And there is a click event on the box annotation and console log whenever it is clicked on, and when I click outside of the chart box/square and align it to the box annotation, it is registering the click.

  • Nung Khual asked 6 months ago
  • last active 6 months ago
1 vote
2k views

The chart is only showing 3 of 4 Tooltips, is there a way to avoid this?

Showing 1 - 50 of 402 results