SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

1 vote
414 views

Hi,

I am using SciChart trial version to create a a simple line chart but when running an application for a while, I got this error in the dev console log – not sure what the root cause is but it seems to come from SciChart library

screenshot

  • Atanai W. asked 2 months ago
  • last active 1 month ago
0 votes
415 views

Hi,

I have an issue with Rollover modifier line styling in sci chart using java script. we need the horizontal dashed line for the rollover modifier. How is it possible?

  • Ayana VS asked 2 months ago
  • last active 2 months ago
1 vote
619 views

Hi,

In my application I am hiding some of the line chart by changing the visibility. When changing the visibility the markers is not hiding from the chart. Its happening only the mouse pointer is inside the chart before the visibility change. I have created a sample application and created the video recording also. Please check the attached file for example code and video. On the video you can saw that 2 line visibility is changed and line are hidden from the chart and the markers not hiding from the chart.

1 vote
531 views

Hey, how would I go about adding a custom template for the cursor axis labels using the Javascript 2D chart API?

I’d like the x-axis to not just have a date in MM/DD/YYYY format but a date and time displayed. The current implementation is below, and below that is the desired implementation.

Current: https://ibb.co/qJgJ36j

Desired: https://ibb.co/XzTkDgw

I have looked through the documentation but I may have missed something. If I have, please point me in the right direction, thanks!

1 vote
614 views

Hi,

I am facing a issue with RolloverModifier. I have multiple charts in single window. For some points the lines over the chart are missing.

Please find the attached images for some examples and the code for reproduce the issue. on the attachment you can see that the line on some chart is missing when mouse on left and right corner area of the chart.

Posting again because on latest version also the same issue not resolved.
https://www.scichart.com/questions/js/rollovermodifier-in-multiple-chart-line-missing-on-some-areas

0 votes
565 views

Hello,

I have a Blazor WASM app running Scichart JS. In attempting to get any of the filters working listed in the Filters API docs I am unable to build my application and get thrown an error.

As listed in Moving Average Filter Docs I import the XyMovingAverageFilter:

import { XyMovingAverageFilter } from ‘scichart/Charting/Model/Filters/XyMovingAverageFilter’;

Run npm install and build the application and I get the error:
Module not found: Error: Can’t resolve ‘scichart/Charting/Model/Filters/XyMovingAverageFilter’ in …

So far I have not run into any issues getting any of the Scichart JS APIs working in this manner.

  • Leland asked 5 months ago
  • last active 5 months ago
1 vote
693 views

Hi,

I am facing a issue with RolloverModifier. I have multiple charts in single window. For some points the lines over the chart are missing.

Please find the attached images for some examples and the code for reproduce the issue. on the attachment you can see that the line on some chart is missing when mouse on left and right corner area of the chart

0 votes
579 views

Do you have Fibonacci Arcs and Retracements in JavaScript charts? If yes could you please provide a sample to build them.

3 votes
1k views

Hi,

In my application I am using two charts for represent different values. I am using LegendModifier on the first chart. Is it possible when i uncheck the series on first chart and the same color series on second chart also need to hide from the second chart. Any event callback function available in LegendModifier ?

0 votes
797 views

I am working on a proof of concept for our company to move some of our desktop apps to the web. We use SciChart WPF in our desktop apps so we are going with SciChart.JS for the web apps. Is it possible to stack the FastLineRenderableSeries in SciChart.JS like we do in WPF?

Edit: Found the answer just after I posted this question.

sciChartSurface.layoutManager.leftOuterAxesLayoutStrategy = new LeftAlignedOuterVerticallyStackedAxisLayoutStrategy();

Screenshot of WPF Chart

0 votes
883 views

Looking to try and “link” two timeseries charts when either one is zoomed. The link aspect would be updating the other chart to have the same visible range as the zoomed chart.

Each chart has its visibleRange property updated in response to separate socket events, that happen at similar intervals but different.

Originally, was hoping to have something similar to the onZoomExtents method that fires a callback that would allow me to grab the latest min/max of the visibleRangeProperty of the xAxes to then update the other chart.

Any suggestions on how I could go about doing this?

And if it is not clear what I am talking about I can provide some code snippets.

0 votes
832 views
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { ZoomPanModifier } from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumberRange } from "scichart/Core/NumberRange";
import { Point } from "scichart/Core/Point";
import { EAnimationType } from "scichart/types/AnimationType";
import { ShadowEffect } from "scichart/Charting/Visuals/RenderableSeries/ShadowEffect";
import { SciChartJSLightTheme } from "scichart/Charting/Themes/SciChartJSLightTheme";
import { SciChartJSDarkTheme } from "scichart/Charting/Themes/SciChartJSDarkTheme";
import { EAutoRange } from "scichart/types/AutoRange";

async function initSciChart() {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    "scichart-root"
  );
  // Create an X,Y Axis and add to the chart
  const xAxis = new NumericAxis(wasmContext);
  const yAxis = new NumericAxis(wasmContext, {visibleRange: new NumberRange(0, 11)});
  //const yAxis = new NumericAxis(wasmContext, {visibleRange: new NumberRange(0, 10)});
  // , {autoRange: EAutoRange.Once}

  sciChartSurface.xAxes.add(xAxis);
  sciChartSurface.yAxes.add(yAxis);

  // Create some data and set on a line series
  const xyData = new XyDataSeries(wasmContext);
  for (let i = 0; i < 250; i++) {
    xyData.append(i, 0);
    // xyData.append(i, Math.sin(i * 0.1));
  }
  sciChartSurface.renderableSeries.add(
    new FastLineRenderableSeries(wasmContext, { dataSeries: xyData })
  );
}

initSciChart();

Visible Range is not working correctly. I found two cases getting the issue.

Case 1: visibleRange: new NumberRange(0, 10) -> if the values are 0 and 10 then the chart showing auto mode.
Case 2: xyData.append(i, 0) -> if all the values are 0 then its showing line on middle even the value is 0 to any number.

Please check the cases has some issues…

0 votes
962 views

Hi, Custom tooltip is not working on v2.0.2179.
Its working on v2.0.2146. Can you please check the issue..

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 { RangeSelectionChartModifier } from "./RangeSelectionChartModifier";
import { RubberBandXyZoomModifier } from "scichart/Charting/ChartModifiers/RubberBandXyZoomModifier";
import { MouseWheelZoomModifier } from "scichart/Charting/ChartModifiers/MouseWheelZoomModifier";
import { EXyDirection } from "scichart/types/XyDirection";
import { ZoomExtentsModifier } from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import { EClipMode } from "scichart/Charting/Visuals/Axis/AxisBase2D";
import { MouseButtonZoomChartModifier } from "./MouseButtonZoomChartModifier";
import { SeriesInfo } from "scichart/Charting/Model/ChartData/SeriesInfo";
import { CursorTooltipSvgAnnotation } from "scichart/Charting/Visuals/Annotations/CursorTooltipSvgAnnotation";
import { CursorModifier } from "scichart/Charting/ChartModifiers/CursorModifier";



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 xyData = new XyDataSeries(wasmContext);
      for (let i = 0; i < 250; i++) {
        xyData.append(i, Math.sin(i * 0.1));
      }
      sciChartSurface.renderableSeries.add(
        new FastLineRenderableSeries(wasmContext, { dataSeries: xyData })
      );

      const cursorModifier = new CursorModifier({
        crosshairStrokeThickness: 1,
        showTooltip: true,
        showAxisLabels: false,
        crosshairStroke: "transparent",
      });
      cursorModifier.tooltipSvgTemplate = (seriesInfo, svgAnnotation) => {
        let rowString = "";
        seriesInfo.forEach(() => {
          rowString = rowString + `<tspan x="8" dy="1.2em" fill="red">Test : 123</tspan>`;  
        });

        const string = `<svg width="300" height="33" x="0"><defs>
            <filter id="id_1610011455082" x="0" y="0" width="200%" height="200%">
            <feOffset result="offOut" in="SourceAlpha" dx="3" dy="3"></feOffset>
            <feGaussianBlur result="blurOut" in="offOut" stdDeviation="3"></feGaussianBlur>
            <feBlend in="SourceGraphic" in2="blurOut" mode="normal"></feBlend>
            </filter>
            </defs>
            <rect rx="4" ry="4" width="95%" height="90%" style="stroke-width:1;stroke:'#ffffff'}"></rect>
            <svg width="100%"><text x="8" y="3" font-size="13" font-family="Verdana" dy="0">`;

        svgAnnotation.xCoordShift = 5;
        svgAnnotation.yCoordShift = 5;
        return string + rowString + `</text></svg></svg>`;
      };
      sciChartSurface.chartModifiers.add(
        cursorModifier
      );


      const mouseWheelModifier = new MouseWheelZoomModifier();
      mouseWheelModifier.modifierMouseWheel = args => {
        const delta = args.mouseWheelDelta * 0.1;
        mouseWheelModifier.parentSurface.xAxes.asArray().forEach(x => {
          x.scroll(delta, EClipMode.None);
        });
      };
      sciChartSurface.chartModifiers.add(
        new RubberBandXyZoomModifier({ xyDirection: EXyDirection.XDirection })
      );
      sciChartSurface.chartModifiers.add(mouseWheelModifier);
      sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
  }

   initSciChart();
1 vote
863 views

RubberBandXyZoomModifier Zoom visibleRangeChanged not hitting when zooming. Can you check this? or any callback function when zooming the chart?

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 {XyScatterRenderableSeries} from "scichart/Charting/Visuals/RenderableSeries/XyScatterRenderableSeries";
import {EllipsePointMarker} from "scichart/Charting/Visuals/PointMarkers/EllipsePointMarker";
import {NumberRange} from "scichart/Core/NumberRange";
import {RubberBandXyZoomModifier} from "scichart/Charting/ChartModifiers/RubberBandXyZoomModifier";
import {ZoomExtentsModifier} from "scichart/Charting/ChartModifiers/ZoomExtentsModifier";
import {ZoomPanModifier} from "scichart/Charting/ChartModifiers/ZoomPanModifier";
import {EZoomState} from "scichart/types/ZoomState";
import { EExecuteOn } from "scichart/types/ExecuteOn";
import { EXyDirection } from "scichart/types/XyDirection";


async function initSciChart() {
    const {sciChartSurface, wasmContext} = await SciChartSurface.create("scichart-root");
    const xAxis = new NumericAxis(wasmContext);
    const yAxis = new NumericAxis(wasmContext);
    xAxis.visibleRangeChanged.subscribe((args) => {
        console.log("X Axis changed");
    });
    yAxis.visibleRangeChanged.subscribe((args) => {
        console.log("Y Axis changed");
    });
    sciChartSurface.xAxes.add(xAxis);
    sciChartSurface.yAxes.add(yAxis);
    const scatterSeries = new XyScatterRenderableSeries(wasmContext, {
        pointMarker: new EllipsePointMarker(wasmContext, {width: 7, height: 7, fill: "White", stroke: "SteelBlue"}),
    });
    const lineSeries = new FastLineRenderableSeries(wasmContext, {stroke: "#4083B7", strokeThickness: 2});
    sciChartSurface.renderableSeries.add(lineSeries, scatterSeries);
    const scatterData = new XyDataSeries(wasmContext, {dataSeriesName: "Cos(x)"});
    const lineData = new XyDataSeries(wasmContext, {dataSeriesName: "Sin(x)"});

    for (let i = 0; i < 1000; i++) {
        lineData.append(i, Math.sin(i * 0.1));
        scatterData.append(i, Math.cos(i * 0.1));
    }
    scatterSeries.dataSeries = scatterData;
    lineSeries.dataSeries = lineData;

    sciChartSurface.chartModifiers.add(new RubberBandXyZoomModifier({
        xyDirection: EXyDirection.XDirection
    }));
    const updateDataFunc = () => {
        const i = lineData.count();
        lineData.append(i, Math.sin(i * 0.1));
        scatterData.append(i, Math.cos(i * 0.1));
        if (sciChartSurface.zoomState !== EZoomState.UserZooming) {
            xAxis.visibleRange = new NumberRange(i - 1000, i);
        }
        setTimeout(updateDataFunc, 1 / 60);
    };
    updateDataFunc();
}

initSciChart();

Please check the example with v2.0.2146. Its working with older version and now its not working.
On the example the first time it will print the console. after that when zooming the change callback is not hitting.

1 vote
1k views

Good day,

I am evaluating the use of scichart.js as a charting tool for our web dashboard in an offline environment. As a way of testing, I am currently trying to deploy the build of demo-create-react-app from the SDK on IIS. The build works if deployed using serve -s build but I get this error when I try to deploy the build on IIS.

Failed to load resource: the server responded with a status of 404 (Not Found) (localhost:3553/scichart2d.data:1)
Uncaught Error: Not Found : http://localhost:3553/scichart2d.data
 at XMLHttpRequest.r.onload (2.1e4d934a.chunk.js:2)(scichart2d.js:12)

I would also like to confirm if Scichart.js can work in an offline environment since I saw in this forum post that SciChart gets the .wasm and .data files from the CDN.

0 votes
1k views

Is it possible to add the text to the chart and display it to the chart?

Please see the attached image. In our application its a realtime chart. need to add the text based on x axis. it should be moved based on zoom and pan.

0 votes
942 views

Is it possible to display the values always on the chart.

0 votes
1k views

I am wondering if there may be some guidance on how to configure the styles for the SciChart.js chart instance in a React application to be able to handle dynamic changes to the height value.

The scenario is that the chart and wasm context are being saved in refs, so that the component the chart exists within does not rerender. Data is being consumed via a web socket, and streaming realtime data.

All that is well and good, but trying to implement a new feature request where the height of the chart changes dynamically, similar to an accordion style where the chart may have a full view, a split view, or no view (92vh, 46vh, 0vh)

I am finding that my css styles are not applying, or frustratingly will apply seemingly at random and other times not apply even though the underlying code remains the same. I tried to override, or at least alter, the position absolute styles of the canvas, by wrapping it in a parent element with position relative, which works to keep the height and width of the chart as desired, but the aspect ratio seems to falter and the chart axes are blurred and illegible.

I’m sure this would be a great instance of a picture says a 1000 words, and I am nearing a 1000 words. Will try to attach a codepen/ example that demonstrates the issue I am experiencing.

If there are any tips or tricks you would recommend please advise

0 votes
1k views

When I’m viewing a chart from mobile browser, quality of graphics is very low.
I can see pixels and some blurred graphics on mobile browsers. But it’s completely ok on the desktop browsers.

I reproduced it with an official example:
https://demo.scichart.com/javascript-realtime-ticking-stock-charts

  • Roman Zio asked 1 year ago
  • last active 1 week ago
0 votes
1k views

It’s impossible to zoom a candlestick chart (other types as well) on mobile browsers & WebViews.
I’m trying to use pinch-to-zoom with my fingers on chart, but it doesn’t react on it. Only sliding on the left & right is possible.

I’ve even tried demo from documentation:
https://demo.scichart.com/javascript-realtime-ticking-stock-charts

The same is with my chart as well

How can I fix it?
Thank you

  • Roman Zio asked 1 year ago
  • last active 1 year ago
0 votes
1k views

I want to build a Stacked Column Side by Side Chart by referring to the reference here.

However, the program could not enter line #41. It just stuck there and the column chart could not be shown.

My code:

export class OutputAmplitudeComponent implements OnInit, OnDestroy {

constructor(@Inject(SETTING_SERVICE) private settingService: SettingService, private cdr: ChangeDetectorRef) {}

ngOnInit() {        
                this.settingService.registerSetting(HarmonicAmpSetting).pipe(takeUntil(this.ngUnsubHarmonicData)).subscribe(setting => {
                    const OutputAmplitudeData = setting.value;

                    for (let x = 1; x < this.numberOfOutput; x++) {
                        if (this.OutputMode === 'Voltage') {
                            if (phaseNum === 1) {
                                this.ampSource.data[x-1].voltage1 = OutputAmplitudeData[x];
                            } else if (phaseNum === 2) {
                                this.ampSource.data[x-1].voltage2 = OutputAmplitudeData[x];
                            } else if (phaseNum === 3) {
                                this.ampSource.data[x-1].voltage3 = OutputAmplitudeData[x]; 
                            }
                        } else if (this.OutputMode === 'Current') {
                            if (phaseNum === 1) {
                                this.ampSource.data[x-1].current1 = OutputAmplitudeData[x];
                            } else if (phaseNum === 2) {
                                this.ampSource.data[x-1].current2 = OutputAmplitudeData[x];
                            } else if (phaseNum === 3) {
                                this.ampSource.data[x-1].current3 = OutputAmplitudeData[x];
                            }
                        }
                        this.sciChartInit(x);
                    }   
                });
            }   


async sciChartInit(x:number) {

    var phase1 = parseFloat(this.ampSource.data[x-1].voltage1);
    var phase2 = parseFloat(this.ampSource.data[x-1].voltage2);
    var phase3 = parseFloat(this.ampSource.data[x-1].voltage3);

    //stuck here

    const { wasmContext, sciChartSurface } = await SciChartSurface.create("chart");

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

    const dataSeries1 = new XyDataSeries(wasmContext, { xValues:[x], yValues:[phase1], dataSeriesName: "Phase 1" });
    const dataSeries2 = new XyDataSeries(wasmContext, { xValues:[x], yValues:[phase2], dataSeriesName: "Phase 2" });
    const dataSeries3 = new XyDataSeries(wasmContext, { xValues:[x], yValues:[phase3], dataSeriesName: "Phase 3" });

    const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
    rendSeries1.fill = "#dc443f";
    rendSeries1.stroke = "black";
    rendSeries1.strokeThickness = 1;
    rendSeries1.dataSeries = dataSeries1;
    rendSeries1.rolloverModifierProps.markerColor = "#b83735";
    rendSeries1.rolloverModifierProps.tooltipColor = "#dc443f";
    rendSeries1.rolloverModifierProps.tooltipTextColor = "#fff";
    rendSeries1.stackedGroupId = "one";

    const rendSeries2 = new StackedColumnRenderableSeries(wasmContext);
    rendSeries2.fill = "#aad34f";
    rendSeries2.stroke = "black";
    rendSeries2.strokeThickness = 1;
    rendSeries2.dataSeries = dataSeries2;
    rendSeries2.rolloverModifierProps.markerColor = "#87a73e";
    rendSeries2.rolloverModifierProps.tooltipColor = "#aad34f";
    rendSeries2.rolloverModifierProps.tooltipTextColor = "#000";
    rendSeries2.stackedGroupId = "two";

    const rendSeries3 = new StackedColumnRenderableSeries(wasmContext);
    rendSeries3.fill = "#8562b4";
    rendSeries3.stroke = "black";
    rendSeries3.strokeThickness = 1;
    rendSeries3.dataSeries = dataSeries3;
    rendSeries3.rolloverModifierProps.markerColor = "#715195";
    rendSeries3.rolloverModifierProps.tooltipColor = "#8562b4";
    rendSeries3.rolloverModifierProps.tooltipTextColor = "#fff";
    rendSeries3.stackedGroupId = "three";

    const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
    verticallyStackedColumnCollection.dataPointWidth = 0.5;
    verticallyStackedColumnCollection.add(rendSeries1, rendSeries2, rendSeries3);
    verticallyStackedColumnCollection.animation = new ScaleAnimation({ duration: 1000, fadeEffect: true });

    sciChartSurface.renderableSeries.add(verticallyStackedColumnCollection);

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

    sciChartSurface.zoomExtents();

    sciChartSurface.chartModifiers.add(new RolloverModifier({ rolloverLineStroke: "#228B22" }));
    sciChartSurface.chartModifiers.add(
        new LegendModifier({
            placement: ELegendPlacement.TopRight,
            orientation: ELegendOrientation.Horizontal,
            showLegend: true,
            showCheckboxes: true,
            showSeriesMarkers: true
        })
    );
    return { wasmContext, sciChartSurface };
} }

.
.
The data needed in the chart is identified and no error is shown.
Any idea on the solution?

Thank you.

  • ETS Ong asked 1 year ago
  • last active 1 year ago
1 vote
1k views

Hi Scichart Team,
RenderableSeries Hit-Test still having some issues. I saw that the bug on your board is already closed state and my last comments are missed on the bug. So i am adding the same here.

https://www.scichart.com/questions/js/renderableseries-hit-test-not-working-as-expected

Can you please check the video and the code. Only change i have done on the Example is the data values are updated. On the video you can saw the clicking outside for some area Hit is showing, some area miss is showing, and clicking on the lines or point also showing the same. Let me know you need any more inputs from my side.

0 votes
1k views

Hi,
Unsorted xValues is possible on SCI Chart? I tried with dataIsSortedInX: false and isSorted: false on dataSeries, But its not showing the correct range.

eg:

 new XyDataSeries(wasmContext, {
        dataSeriesName: "Line Series",
        xValues: [0,10,20,13,54,15,26,17,18,19],
        yValues: [0,1,5,1,20,5,1,8,9,3],
    dataIsSortedInX: false
    });
0 votes
0 answers
1k views

Hi,
On RubberBandXyZoomModifier i am using the YDirection zoom. When i click and drag out side the area of sci chart and leave the mouse click. Then again click inside the scichart, it showing the selection area and not disappear after new selection of zoom or pan the chart. the selected area is still showing as selected.

0 votes
3k views

Hi,

I am getting console error and page is crashing and reloading the page.

0 votes
2k views

Hi,

Currently when we scroll the mouse pointer the zoom level is increasing/decreasing and when we click and drag the pan the chart. I want is when we scroll the chart should change the visible range (Pan chart), and clicking and selecting the area need to zoom like RubberBandXyZoomModifier. But I need to zoom only the X axis. Y axis should be the same as before zoom. Is this possible with SCI chart??

0 votes
2k views

Hi,
sciChartSurface.chartModifiers.clear() is getting error on the application. Its working on previous version and getting error on 1.4.1557.

0 votes
2k views

Hello Scichart Team again,

I’m trying to replicate anything like this (check Screenshot_2.png).

I can update the scichart background, but I just wanted to have a single color in the background, but it seems that there is an overlap of colors in X / Y as I show in the next printscreen (check Screenshot_3.png)

How I can solve this?

Waiting for feedback.

Many thanks,

Pedro Cruz

0 votes
2k views

RenderableSeries Hit-Test is not working as expected. Some bugs on the the RenderableSeries Hit-Test. Distance between two points are less then its working most of the time and getting the isHit variable getting true. But the distance is high then the lines near to the point only getting the isHit true. I am attaching the image when the red marked area is working fine and the blue marked area not working.

1 vote
2k views

Hi, I wanted to make a multiple Y-Axis scale with multiple series plot into their respective Y scale. Like this,

Series A plot to 1st Y-axis Scale
Series B plot to 2nd Y-axis Scale
Series C plot to 3rd Y-axis Scale
Series D plot to 4th Y-axis Scale

and all those series are not overlapping each other. I want to do like the picture attached but with the series are not overlapping to each other.

0 votes
2k views

pointMarker max and min values marker are cropped when autoRange is enabled. Check the attached image.

0 votes
2k views

paletteProvider transparent colour is not working.

I tried with parseColorToUIntArgb(“#ffffff00”) and parseColorToUIntArgb(“#ffffff00”, 0) to replace the colour with transparent. But its not working.

I want ho hide the marker on the chart if the value is less than a limit. Is any other possibility to hide the marker based on value?
can you check the image, i want to show only the yellow marker.
one more error i am getting from typescript
“Type ‘undefined’ is not assignable to type ‘TPointMarkerArgb'”.

0 votes
2k views

If the y axis values are same then the lines are not visible on the chart and the labels are also not visible on the chart. Can you draw the lines on the middle of the chart to get more visible?

async initTrack() {
  const { wasmContext, sciChartSurface } = await SciChartSurface.create(
    "chart" + this.element
  );
  sciChartSurface.xAxes.add(
    new NumericAxis(wasmContext, { axisAlignment: EAxisAlignment.Top })
  );
  sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
      axisAlignment: EAxisAlignment.Left
    })
  );

  const dataSeries = new XyDataSeries(wasmContext);
  for (let i = 0; i <= 1000; i++) {
    dataSeries.append(i, 10);
  }

  const rendSeries = new FastLineRenderableSeries(wasmContext, {
    dataSeries: dataSeries,
    strokeThickness: 1,
    stroke: "red"
  });
  sciChartSurface.renderableSeries.add(rendSeries);
  sciChartSurface.chartModifiers.add(cursorModifier);

  return { wasmContext, sciChartSurface };
}
0 votes
2k views

I am getting a console error when using isVisible: false to the FastLineRenderableSeries or FastMountainRenderableSeries and CursorModifier together.

  const { wasmContext, sciChartSurface } = await SciChartSurface.create(
    "chart" + this.element
  );
  sciChartSurface.xAxes.add(
    new NumericAxis(wasmContext, { axisAlignment: EAxisAlignment.Top })
  );
  sciChartSurface.yAxes.add(
    new NumericAxis(wasmContext, {
      axisAlignment: EAxisAlignment.Left,
      growBy: new NumberRange(0.4, 0.4)
    })
  );

  const dataSeries = new XyDataSeries(wasmContext);
  const POINTS = 1000;
  const STEP = (3 * Math.PI) / POINTS;
  for (let i = 0; i <= 1000; i++) {
    const k = 1 - i / 2000;
    dataSeries.append(i, Math.sin(i * STEP) * k * 0.7);
  }

  const rendSeries = new FastLineRenderableSeries(wasmContext, {
    dataSeries: dataSeries,
    strokeThickness: 1,
    stroke: "red",
    isVisible: false
  });
  sciChartSurface.renderableSeries.add(rendSeries);
  // sciChartSurface.background = this.color;

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

  // Add CursorModifier behavior
  const cursorModifier = new CursorModifier({
    crosshairStroke: "#ff6600",
    crosshairStrokeThickness: 1,
    tooltipContainerBackground: "#000",
    tooltipTextStroke: "#ff6600",
    showTooltip: true,
    axisLabelsFill: "#b36200",
    axisLabelsStroke: "#fff"
  });
  sciChartSurface.chartModifiers.add(cursorModifier);

  sciChartSurface.zoomExtents();
  return { wasmContext, sciChartSurface };
0 votes
2k views

I am getting a console error when using isVisible: false to the FastLineRenderableSeries or FastMountainRenderableSeries and CursorModifier together.

0 votes
2k views

Multiple instances of sci chart any appearance changes reflecting on other instances. When I changed the background of one instance the same is reflected in the other instance. I have updated with createSingle to resolve this issue, But i am getting one alert when using createSingle.

0 votes
2k views

On Vertical chart Label overlapping on smaller height. I have tried maxAutoTicks also and on the lower height, it’s getting one error. This error is occurring when the width is 0 sometimes. Can you please check this issues?

0 votes
2k views

On the vertical chart custom tooltipSvgTemplate seriesInfo isHit returns false always. Its working fine on the normal chart. Can you please check this issue is on verticle chart.

0 votes
2k views

Remove the white spaces on the chart when we using drawLabels: false. I am using multiple x-axes and no of x-axis increase the empty white space on the x-axis is also increasing.

0 votes
2k views

Hello,
I am trying to make an annotation draggable. I tried setting the isEditable property to true, but nothing happened. I can’t find the right documentation for draggable annotations . My code for creating the Annotation it’s below:

sciChartSurface.annotations.add(new LineAnnotation({
    stroke: "#279B27", strokeThickness: 3,
    xCoordinateMode: ECoordinateMode.DataValue,
    x1: 0,
    x2: 0,
    yCoordinateMode: ECoordinateMode.Relative,
    y1: 0,
    y2: 1,
    isEditable: true,
}));
0 votes
5k views

Some users have reported an error when importing SciChart.js into a TypeScript or JavaScript application:

TS1261: Already included file name ‘C:...\SciChartSurface.d.ts’ differs from file name ‘C:/…/node_modules/scichart/charting/
Visuals/Axis/SciChartSurface.d.ts’ only in casing.

Solution below…

0 votes
5k views

The value of SciChart in Silverlight is the browser hosting capability. With Silveright on its way out, there appears to be no replacement for SciChart in a browser. However, there is a very good public domain project called Fayde that has re-implemented the Mono Moonlight code as Typescript. Fayde lets you port C#/XAML to Javascript surprisingly easily.

Have you looked at Fayde, and do you foresee a (possibly stripped-down) SciChart version for Fayde?

Fayde: https://wsick.github.io/Fayde/

  • asthomas asked 7 years ago
  • last active 7 years ago
Showing 42 results