Category: JavaScript

I have a bunch of series (XyScatterSeries) that I am using to draw different markers (triangle, circle, cross) based on the data. I also have couple line series too in the chart.

The line series should be displayed in the LegendModifier, but not any of the scatter series.

I tried setting “includeSeries” function here but that didn’t work (typescript kept complaining about it but I kept it and while running the app it didn’t hide the series):

return new LegendModifier({
        showCheckboxes: true,
        orientation: ELegendOrientation.Vertical,
        placement: ELegendPlacement.TopRight,
        includeSeries: (series: IRenderableSeries, isIncluded: boolean): void => { return false; },
    });

Then I created my own class “MyLegendModifier” deriving from LegendModifier, but that didn’t do anything either.

class MyLegendModifier extends LegendModifier {
    constructor(options?: ILegendModifierOptions) {
        super(options);
    }

    includeSeries(series: IRenderableSeries, isIncluded: boolean) {
        console.log('includeSeries:', series.id);
        if (series.id.startsWith('BUY:') || series.id.startsWith('SELL:')) {
            isIncluded = false;
        }
        super.includeSeries(series, isIncluded);
    }
}

Any advise please.

Good afternoon. My team and I are looking at your library to create a depth chart, like here, but have run into a few problems:
1. if we have, for example, a “buySeries” array larger than the “sellSeries” array, the graph is not drawn very nicely.
2. the labels are not drawn correctly when we have too small numbers, I tried to solve the problem with xAxis.textFormatting = ‘0.#####’ or ‘0.00###’, but that doesn’t work for some reason.
3. If we want to add labels while hovering over the chart with showLabel = true , then we get 4 labels, two on yAxis. is it possible to make the buySeries label appear only on the left, for example, and the sellSeries label only on the right? (second screenshot)

Hi

I am running Ubuntu 22.04.
I have done the following:
1. Downloaded licensing tool AppImage
2. chmod +x SciChart-Licensing-Wizard.AppImage
3. ./SciChart-Licensing-Wizard.AppImage

Response:

./SciChart-Licensing-Wizard.AppImage: 9: Syntax error: newline unexpected

Please advise.

Thanks

Hello,

We are working on our Angular Dashboard again using the JS Chart component and one item we would like to tidy up is the Meta Data displayed in the Tool Tips against data points.

When the cursor is enabled and a data point is hovered over, tool tips with the meta data is displayed for all data points in the vertical line; please refer to the screenshot attached.

We would like the tool tip to only be shown when the cursor is on a specific data point. We are currently working with an offshore team and any help surrounding this would be appreciated.

Kind regards,

Is it possible, in version 2.2.2404, to have RubberBandXyZoomModifier function like what seems to be the default for v3? So when I’m dragging the box to zoom, if I leave the chart area, the box snaps to the edges of the chart, and upon mouse release, it zooms normally to the box.

I can provide an example:

https://8tunzo.csb.app/ — broken (version 2.2.2404)

https://umvryi.csb.app/ — working (version 3.0.301)

Same exact code

import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { RubberBandXyZoomModifier } from "scichart/Charting/ChartModifiers/RubberBandXyZoomModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";

const dataX = [0, 10, 20, 30, 40, 50];
const dataY = [0, 10, 5, 20, 15, 35];

// eslint-disable-next-line
SciChartSurface.useWasmFromCDN();

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

  const xAxis = new NumericAxis(wasmContext);
  const yAxis = new NumericAxis(wasmContext);
  sciChartSurface.xAxes.add(xAxis);
  sciChartSurface.yAxes.add(yAxis);

  const lineData = new XyDataSeries(wasmContext, {
    xValues: dataX,
    yValues: dataY
  });

  sciChartSurface.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, { dataSeries: lineData })
  );

  sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({}));
  sciChartSurface.chartModifiers.add(new RubberBandXyZoomModifier({}));
  sciChartSurface.chartModifiers.add(new ZoomExtentsModifier({}));
}

initSciChart();

From what I’ve read into chrome’s roadmap, everything seems on track for a webgpu release in May.
Is scichart taking this into account and planning to add webgpu support?
I suspect this would make quite an impact on performance, so it would be a great addition.

Thanks!

I am considering applying server-side licensing for my javerScript application.

In the document below, there is a phrase “Our server-side licensing component is written in C++.”
(https://support.scichart.com/index.php?/Knowledgebase/Article/View/17256/42/)

However, there is only asp.net sample code on the provided github.
(https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-dotnet-server-licensing)

I wonder if there is a sample code implemented in C++ for server-side licensing.

Can you provide c++ sample code?
Also, are there any examples to run on Ubuntu?

I am considering applying server-side licensing for my javerScript application.

In the document below, there is a phrase “Our server-side licensing component is written in C++.”
(https://support.scichart.com/index.php?/Knowledgebase/Article/View/17256/42/)

However, there is only asp.net sample code on the provided github.
(https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-dotnet-server-licensing)

I wonder if there is a sample code implemented in C++ for server-side licensing.

Can you provide c++ sample code?
Also, are there any examples to run on Ubuntu?

How can we change the color(Red) of custom box annotation when it is clicked .
thanks

Error from chart in div instrument_candle_chart_2
RuntimeError: call_indirect to a signature that does not match (evaluating ‘invoker(fn, thisWired, arg0Wired, arg1Wired, arg2Wired, arg3Wired, arg4Wired, arg5Wired, arg6Wired, arg7Wired, arg8Wired)

error here: OhlcSeriesDrawingProvider.prototype.draw:

this.nativeDrawingProvider.DrawPointsVec(nativeContext, xDrawValues, openValues, highValues, lowValues, closeValues, renderPassData.xCoordinateCalculator.nativeCalculator, renderPassData.yCoordinateCalculator.nativeCalculator, this.args);

Hello, I need to use tooltips to display information to users. However, after using the tooltip, there will be a jam after the tooltip appears and when zooming. How can I optimize the performance.

The following is the code. I use the js example: “Load 500 Series x 500 Points Performance Demo” for transformation

import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { EllipsePointMarker } from "scichart/Charting/Visuals/PointMarkers/EllipsePointMarker";
import {
  RolloverModifier,
  TRolloverTooltipDataTemplate
} from "scichart/Charting/ChartModifiers/RolloverModifier";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { SciChartSurface } from "scichart";
import {
  IXyDataSeriesOptions,
  XyDataSeries
} from "scichart/Charting/Model/XyDataSeries";
import { NumberRange } from "scichart/Core/NumberRange";
import { EAutoRange } from "scichart/types/AutoRange";
import { convertRgbToHexColor } from "scichart/utils/convertColor";
// eslint-disable-next-line
SciChartSurface.useWasmFromCDN();

const divElementId = "scichart-root";

const color = "#368BC1";

const SERIES = 1500;
const POINTS = 188;


const drawExample = async (updateTimeSpans) => {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    divElementId,{ widthAspect: 3, heightAspect: 2}
  );
  const xAxis = new NumericAxis(wasmContext, {
    visibleRange: new NumberRange(0, POINTS),
    autoRange: EAutoRange.Never
});
sciChartSurface.xAxes.add(xAxis);
const dataSeriesArray= new Array(SERIES);;
const rendSeriesArray=new Array(SERIES);
const yAxis = new NumericAxis(wasmContext, {
    visibleRange: new NumberRange(-5000, 5000),
    autoRange: EAutoRange.Never
});
// yAxis.labelProvider.numericFormat = ENumericFormat.Decimal_0;
sciChartSurface.yAxes.add(yAxis);
for (let i = 0; i < SERIES; i++) {
  const dataSeries= new XyDataSeries(wasmContext);
  const rendSeries= new FastLineRenderableSeries(wasmContext, {
      dataSeries,
     stroke: color,
      strokeThickness: 3,
      pointMarker: new EllipsePointMarker(wasmContext, {
        width: 5,
        height: 5,
        strokeThickness: 2,
        fill: "white",
        stroke: color
      })
  });
  dataSeriesArray[i] = dataSeries;
  rendSeriesArray[i] = rendSeries;
sciChartSurface.renderableSeries.add(rendSeries);
}
sciChartSurface.chartModifiers.add(new ZoomExtentsModifier(), new ZoomPanModifier(), new MouseWheelZoomModifier(),new RolloverModifier(wasmContext));
const loadPoints = () => {
  const newTimeSpans=[];

  // Start counting Points generation time
  const generateTimestamp = Date.now();

  const xValuesArray = new Array(SERIES);
  const yValuesArray = new Array(SERIES);
  const strokeArray =  new Array(SERIES);
  for (let i = 0; i < SERIES; i++) {
      // Allocate data arrays
      xValuesArray[i] = new Array(POINTS);
      yValuesArray[i] = new Array(POINTS);

      // Clear data, if any
      dataSeriesArray[i].clear();

      // Generate stroke
      const r = Math.random();
      const g = Math.random();
      const b = Math.random();
      strokeArray[i] = convertRgbToHexColor(r, g, b);

      // Generate points
      let prevYValue = 0;
      for (let j = 0; j < POINTS; j++) {
          const curYValue = Math.random() * 10 - 5;

          xValuesArray[i][j] = j;
          yValuesArray[i][j] = prevYValue + curYValue;

          prevYValue += curYValue;
      }
  }

  // Add the first time span: Generating 1M data points
  newTimeSpans.push({
      title: "Generate 500x500 Data Points",
      durationMs: Date.now() - generateTimestamp
  });

  // Start counting batch append time
  const appendTimestamp = Date.now();
  for (let i = 0; i < SERIES; i++) {
      dataSeriesArray[i].appendRange(xValuesArray[i], yValuesArray[i]);
      rendSeriesArray[i].stroke = strokeArray[i];
  }

  // Add the second time span: Generation of data point
  newTimeSpans.push({
      title: "Append 500x500 Data Points",
      durationMs: Date.now() - appendTimestamp
  });

  // Subscribe to sciChartSurface.rendered event,
  // and calculate time duration between the append and
  // the first frame after it
  const firstFrameTimestamp = Date.now();
  let frameIndex = 0;
  let nextFramesTimestamp;
  const handler = () => {
      if (frameIndex === 0) {
          // Add the third time span: Render the first frame
          newTimeSpans.push({
              title: "Render the frame",
              durationMs: Date.now() - firstFrameTimestamp
          });
          nextFramesTimestamp = Date.now();
      } else {
          // Unsubscribe from sciChartSurface.rendered
          updateTimeSpans(newTimeSpans);
          sciChartSurface.rendered.unsubscribe(handler);

          // Zoom extents at the end of performance measurement
          sciChartSurface.zoomExtents();
      }
      setTimeout(sciChartSurface.invalidateElement, 0);
      // Increment frame index
      frameIndex++;
  };
  sciChartSurface.rendered.subscribe(handler);
};
  loadPoints()
};

drawExample();

I have a chart in the center of the page and the chart will resize according to the browser window size. When I expand the browser window, the chart will expand to fit the browser size. In this case, the chart grows downward gradually (with animation). How can I remove this animation effect when resizing the chart?

In case it’s related to my style. Here are my markup and style for reference:

//Markup

//Style
.contentPanel {
flex: 1 1 auto;
width: calc(100% – 335px);
max-height: calc(100vh – 108px);
display: flex;
flex-direction: column;
}

.chartContainer {
position: relative;
margin: 10px 0;
display: flex;
flex-direction: column;
flex: 1;
}

.scichart-root {
width: 100%;
height: 100%;
}

I have a real time updated chart with very large data size and I am facing the slow client problem. i.e. The data sending speed is faster than the data receiving and handling speed which causes memory growing up issue. I am trying to use Web Workers to increase the data handling speed in frontend. I have found a related post:

https://www.scichart.com/questions/wpf/is-xydataseries-safe-to-being-changed-in-a-separate-thread

It seems possible to update XyDataSeries in the background thread with WPF. My UI is built with NextJS. I tried to use Web Workers to implement multiple threads. But I found that it can’t pass the SciChartSurface or XyDataSeries to the worker thread. Could you show me an example on how to update XyDataSeries in the worker thread with Web Workers?

Hi,

I have added a data series and also a custom box annotation which is overlapping the data series.
But the question is I am trying to move the box annotation which drag and drop but have to clip on the data series as well.
May I know if is scichart js able to do so? Or best if I just convert it into svg and make it drag and drop will do?

I have a real time updated chart and users can add annotation to the chart. The position of the annotation will be updated with the chart data. I would like to stop updating the annotation position while user dragging the annotation. So I added a flag (e.g. isDragging) to the annotation dragStarted and dragEnded events. The isDragging flag will be set to true in dragStarted and then set to false in dragEnded. I will check this flag before updating the annotation position.

Here’s the problem, the annotation dragStarted event will be triggered when users do panning in the chart. But the dragEnded will not be triggered in this case. It breaks my plan to stop updating the annotation position as the isDragging will be incorrect. Is it a bug that the annotation dragStarted event (but not the dragEnded event) triggered when panning?

Implementation scenario: multiple polylines are displayed. After clicking the polyline, the name of the polyline is displayed in the icon.

Question: I can get the Series Name through the SeriesSelectionModifier now, but I don’t know how to display the Series Name in the chart when the user clicks a polyline. Is there a corresponding API?

Hi,

I’ve been trying to customize the RolloverModifier tooltip content with a vertical chart but am at a loss to try to get the format I need. I’d like to take in all the series info and display them in a tooltip together with a small icon and the y-value next to this.

I was able to do this in the CursorModifier content but unable to do so in the RolloverModifier which is what I really want to use.

I’ve included a CodeSandbox link below showing the custom SVG template and output on the CursorModifier I’d like to use for the RolloverModifier. Is this type of output template possible?

Thanks in advance!

I have a chart that allow users to add one BoxAnnotation and multiple CustomAnnotation (a marker). I got error and failed to drag the BoxAnnotation with the following steps:

Step 1: Call the addMarkerAnnotation() to add a CustomAnnotation

const markerSvgString = '<svg height="26" width="18" xmlns="http://www.w3.org/2000/svg">' +
    '<polygon id="SVG_ID" fill="#000" fill-opacity="0.5" stroke="#00fc00" stroke-width="1.5" points="0,12 8,0 16,12 8,24" clip-path="url(#clip_normal)" />' +
    '<clipPath id="clip_normal"><use xlink:href="#SVG_ID"/></clipPath>' +
    '<text x="5" y="16" fill="#00fc00" font-weight="bold" font-size = "12">MARKER_ID</text>' +
'</svg>';

const deltaSvgString = '<svg height="28" width="28" xmlns="http://www.w3.org/2000/svg">' +
    '<polygon id="SVG_ID" fill="#000" fill-opacity="0.5" stroke="#00fc00" stroke-width="1.5" points="0,0 12,24 22,0" clip-path="url(#clip_delta)" />' +
    '<clipPath id="clip_delta"><use xlink:href="#SVG_ID"/></clipPath>' +
    '<text x="5" y="10" fill="#00fc00" font-weight="bold" font-size="10">MARKER_ID</text>' +
'</svg>';

const addMarkerAnnotation = useCallback((markerId, mode, x1, y1) => {   
    x1 = parseFloat(x1);
    y1 = parseFloat(y1);

    if (x1 != null && y1 != null) {
        let svgString;
        const svgId = "markerSvg_" + markerId;

        if (mode.includes("Delta")) {
            const compareMarkerKey = mode.replace("Delta ", "");
            svgString = deltaSvgString.replace(/MARKER_ID/g, (parseInt(markerId)+1) + "-" + compareMarkerKey);
        } else {
            svgString = markerSvgString.replace(/MARKER_ID/g, parseInt(markerId)+1);
        }
        svgString = svgString.replace(/SVG_ID/g, svgId);

        markerAnnotations.current[markerId] = new CustomAnnotation({
            x1,
            y1,
            id: markerId,
            isEditable: true,
            isSelected: true,
            verticalAnchorPoint: EVerticalAnchorPoint.Center,
            horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
            svgString: svgString
        });
        sciChartSurfaceRef.current.annotations.add(markerAnnotations.current[markerId]);
        reorderMarkers(markerId);

        markerAnnotations.current[markerId].dragEnded.handlers.push(() => {
            let annotation = markerAnnotations.current[markerId];
            let freq = annotation.x1 * FREQ_UNITS.KHZ;

            markersInfoSetter.current[markerId](origMarkerInfo => ({...origMarkerInfo, ...{freq: freq.toFixed(numDP.FREQ), power: annotation.y1.toFixed(numDP.POWER)}}));

            if (markersInfoObj.current[markerId].mode !== "Fixed") {
                getMarkerPeak(markerId, markersInfoObj.current[markerId].trace, annotation.x1 * FREQ_UNITS.GHZ);
            }
            reorderMarkers(markerId);
        });
    }
}, [deltaSvgString, markerSvgString, getMarkerPeak, reorderMarkers, numDP]);

Step 2: Call the removeMarkerAnnotation() to remove the CustomAnnotation

const removeMarkerAnnotation = useCallback((markerId) => {
    if (markerAnnotations.current[markerId]) {
        sciChartSurfaceRef.current.annotations.remove(markerAnnotations.current[markerId]);
        markerAnnotations.current[markerId].delete();
        markerAnnotations.current[markerId] = null;
    }
}, []);

Step 3: Call addTriggerAnnotation() to add a BoxAnnotation

const addTriggerAnnotation = useCallback((x1, x2, y2) => {
    x1 = parseFloat(x1);
    x2 = parseFloat(x2);    
    y2 = parseFloat(y2);

    if (x1 != null && x2 != null) {
        console.log("addTriggerAnnotation: ", x1, x2, triggerAnnotation.current, sciChartSurfaceRef.current.annotations);
        if (!triggerAnnotation.current) {
            triggerAnnotation.current = new BoxAnnotation({
                id: "triggerBox",
                fill: "transparent",
                stroke: "#93A3B1",  //#93A3B1   //#6B818C
                strokeThickness: 2,
                xCoordinateMode: ECoordinateMode.DataValue,
                x1: x1,
                x2: x2,
                yCoordinateMode: ECoordinateMode.DataValue,
                y1: minY,
                y2: y2,
                isEditable: true,
                resizeDirections: EXyDirection.XyDirection,     
            });
            sciChartSurfaceRef.current.annotations.add(triggerAnnotation.current);

            triggerAnnotation.current.dragDelta.handlers.push(() => {
                triggerAnnotation.current.y1 = minY;

                const minX =  specSettingsRef.current.start/freqUnits.KHZ;
                const maxX = specSettingsRef.current.stop/freqUnits.KHZ;
                const maxY = specSettingsRef.current.refLevel;

                if (minX != null && maxX != null) {
                    if (triggerAnnotation.current.x1 < minX) {
                        triggerAnnotation.current.x1 = minX;
                    } else if (triggerAnnotation.current.x1 > maxX) {
                        triggerAnnotation.current.x1 = maxX;
                    } else if (triggerAnnotation.current.x2 > maxX) {
                        triggerAnnotation.current.x2 = maxX;
                    } else if (triggerAnnotation.current.x2 < minX) {
                        triggerAnnotation.current.x2 = minX;
                    }
                }

                if (maxY != null) {
                    if (triggerAnnotation.current.y2 < minY) {
                        triggerAnnotation.current.y2 = minY;
                    } else if (triggerAnnotation.current.y2 > maxY) {
                        triggerAnnotation.current.y2 = maxY;
                    }
                }
            });

            triggerAnnotation.current.dragEnded.handlers.push(() => {
                const maxX = specSettingsRef.current.stop/freqUnits.KHZ;
                const x1 = triggerAnnotation.current.x1;
                const x2 = triggerAnnotation.current.x2;
                const y2 = triggerAnnotation.current.y2;

                if (x1 != null && x2 != null && maxX != null) {
                    if (x1 > x2) {
                        triggerAnnotation.current.x1 = x2;
                        triggerAnnotation.current.x2 = x1;
                    } else if (x2 < x1) {
                        triggerAnnotation.current.x1 = x2;
                        triggerAnnotation.current.x2 = x1;
                    } else if (x1 === x2) {
                        if (x2 + xInterval.current <= maxX) {
                            triggerAnnotation.current.x2 = x2 + xInterval.current;
                        } else {
                            triggerAnnotation.current.x1  = x1 - xInterval.current;
                        }
                    }

                    const origStartFreq = parseFloat(triggersRef.current.startFreq);
                    const origStopFreq = parseFloat(triggersRef.current.stopFreq);
                    const newStartFreq = parseFloat((triggerAnnotation.current.x1 * freqUnits.KHZ).toFixed(numDP.FREQ));
                    const newStopFreq = parseFloat((triggerAnnotation.current.x2 * freqUnits.KHZ).toFixed(numDP.FREQ));

                    if (origStartFreq !== newStartFreq || origStopFreq !== newStopFreq) {
                        setTriggers(origObj => ({...origObj, ...{
                            startFreq: newStartFreq, 
                            stopFreq: newStopFreq,
                            level: parseFloat(y2.toFixed(numDP.POWER)),
                        }}));
                    }
                }
            });
        } else {
            updateTriggerAnnotation(x1, x2, y2);
        }
    }
}, [setTriggers, freqUnits.KHZ, numDP.FREQ, numDP.POWER, minY, updateTriggerAnnotation]);

Step 4: Drag the BoxAnnotation. It’s failed to drag the box and got the error “Uncaught TypeError: Cannot read properties of undefined (reading ‘seriesViewRect’)”.

It’s a strange bug as it can only be reproduced with the steps above. With the following steps, I can drag the BoxAnnoation without problem:

Step 1 -> Step 3 -> Step 4
Step 3 -> Step 4
Step 3 -> Step 1 -> Step 2 -> Step 4

I added the cursor modifier as below:

const chartDefinition = {
    ......,
    modifiers: [
        { 
            type: EChart2DModifierType.Cursor, 
            options: { crosshairStroke: "green",  crosshairStrokeThickness: 1}  
    },
    { type: EChart2DModifierType.MouseWheelZoom },
    { type: EChart2DModifierType.ZoomExtents }
    ]
};

const { sciChartSurface, wasmContext } = await chartBuilder.build2DChart("scichart-root", chartDefinition);  

As I want to show the x, y values of the cursor somewhere outside the chart instead of showing the tooltip. How can I get the x, y values when the cursor moving?

We are using JavaScript Chart Editable Annotations but we need some more modificaions in that which can enhance this feature in terms of user experience.
Currently when the anonations are loaded they are havinng a fixed shape but we want the annotations to be draggable as soon as they are loaded in the charts whitout any extra clicks,this feature is provided by tradingView charts and we also want to provide the same to our users.
I have attached images and videos for better understanding of the issue.
Hope we can get the solution of this issue asap.

Please refer to the below video link for beter understanding.
https://www.loom.com/share/213b66eb21db44f9ac2457a89563a21a

Hello,

When annotations and the rollover modifiers are displayed on the very left side of a chart they align with the center of the candlesticks on the chart. However, as they get displayed toward the right side of the chart they get more and more offset to the right side of the candlestick.

Can anyone point me in the right direction to figure out how to fix this issue seemingly with my xAxis?

See attached screenshots,

How to update the text Annotation in JavaScript. I can add the new Text annotation but I can’t update the old text Annotation. whether we have any option in sci chart for JavaScript.

The SciChart Legend and Cursor Tooltip (Showed only Y axis value) are not display after changing the graph layout.
I need to show the graph legend and Tooltip for all the Y axis.

The chart should also show the x axis value and y axis value on the Tooltip for more clarity.

Before changing the layout the legend was showing the five series vertically one below the other. But i need to show the five legends in horizontally (One after the another).

I have added the chart definition code. The data is added though Ajax call and code for that ajax call is not added.

I have attached the image for your reference.

I have attached the zip file with the html file.

Hi there,

Wow this library has come along way in ten years. My question is related to interaction between RS and the legend that is rendered by the chartmodifier.

I declare the legend something like this during the initial bootstrapping of the plot view:

        const legend = new LegendModifier({placementDivId: "legend-goes-here", id:"legend"});
        sciChartSurface.chartModifiers.add(legend);

After that, I have a custom interface available for users to change things, which eventually results in visibility or color changes, updating an RS something like this:

        const thisRs = surface.renderableSeries.getById(`${s.fileId}-${s.name}`);
        if (thisRs) {
            thisRs.isVisible = s.isVisible;
            thisRs.stroke = s.visualInfo?.colorCode ?? "#FFFFFF";
        } 

These changes do not appear to be propagated to the legend despite the series on the plot changing. I guess my questions are:

1) What’s the expected behavior/is there something obvious I’m missing about the model?
2) Any suggestions?

It may very well be somewhere lost in my fairly complex React app, but I first wanted to confirm that I’m not missing something in the api.

Thanks!
Dan

I am trying to implement the following functionality requested by our users:

Zoom:
– Only zoom the chart when using CTRL + MouseWheel key
– This is similar to how most browsers behave

Pan/Scroll:
– If no CTRL key is pressed, then pan/scroll
– This is similar to how most browsers behave

Given the above requirement, I started by creating custom modifier by extending YAxisDragModifier.

My code almost works:
– When using CTRL + Mouse Left & Drag, it Scales (zooms) — just like the user wants
– But using CTRL + Mouse Wheel does not do the same — it only Scales (Zooms).

I have uploaded the code at codesandbox.io:
https://codesandbox.io/s/amazing-shape-2ispt0?file=/src/customModifiers.ts

Note that I have not tried to implement this in ZoomPanModifier yet, but would be helpful if you could give me some pointers on getting this feature in there too.

I would appreciate any help I can get and thanks a bunch in advance.

Best Regards,
Sachin Patel.

The project is developed on SciChart JS.

The x axis is date time numeric and y axis is numeric.

There is a option for the user to select the x axis interval. The interval values are 5 Min, 10 Min, 15 Min, 30 Min, 1 Hour, 6 Hour, 12 Hour, Days, Weeks, Months & Years.

When the user the selects a interval in the select option, the x axis should be updated with the selected interval.

For Example, If the user selects the 5 Min in the select option, then the x axis interval should be 5 Min.

For 5 Min X Axis Interval

16-Jan-2023 07:00
16-Jan-2023 07:05
16-Jan-2023 07:10
16-Jan-2023 07:15
16-Jan-2023 07:20
16-Jan-2023 07:25
16-Jan-2023 07:30

For 1 Hour X Axis Interval

16-Jan-2023 07:00
16-Jan-2023 08:00
16-Jan-2023 09:00
16-Jan-2023 10:00
16-Jan-2023 11:00
16-Jan-2023 12:00
16-Jan-2023 13:00
16-Jan-2023 14:00

So let me know how to change the interval in the x axis (date time numeric) based on the selection.

I have attached the zip file which contains the HTML file.

I recently upgraded SciChart from version 2 to version 3.0.266. It was working fine. But I got error (please refer to the attached screenshot) when I try to run my application today. It’s so strange as it worked fine yesterday and I didn’t make any codes change today.

I am considering applying server-side licensing for my javerScript application.

In the document below, there is a phrase “Our server-side licensing component is written in C++.”
(https://support.scichart.com/index.php?/Knowledgebase/Article/View/17256/42/)

However, there is only asp.net sample code on the provided github.
(https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-dotnet-server-licensing)

I wonder if there is a sample code implemented in C++ for server-side licensing.

Can you provide c++ sample code?
Also, are there any examples to run on Ubuntu?

I’m trying to add a axis label/marker to the yAxis of my chart.
This label should follow the intersection between a FastLineRenderableSeries (that i’m using to render a moving average filtered dataSeries) and the yAxis.

I tried to extend the “draw” method of the FastLineRenderableSeries to draw a label ontop of the yAXis, using the “drawModifiersAxisLabel” helper function. Like:

class CustomFastLineRenderableSeries extends FastLineRenderableSeries {
draw(renderContext: WebGlRenderContext2D, renderPassData: RenderPassData) {
    super.draw(renderContext, renderPassData)
    const yAxis = getYAxis(this.parentSurface);
    drawModifiersAxisLabel(
        yAxis,
        renderContext,
        150, // testing values
        "#00ff00", // testing values
        "#00ff00", // testing values
    );
}

but the label don’t get drawn.

The attached image shows the desired feature (image from another charting lib)

How can I implement this?

The scichart y axis is displayed as undefined after updating the data in timed interval. The y axis initially shows the value,but after the data is appended to the source, the y axis is shown as undefined in the chart.

I have attached the final scichart image with yaxis as undefined.