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

0 votes
155 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
255 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 3 months ago
  • last active 3 months ago
0 votes
298 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 3 months ago
  • last active 3 months ago
0 votes
315 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 3 months ago
  • last active 3 months ago
1 vote
464 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
425 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
468 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
884 views

Hi,

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

0 votes
621 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
529 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
543 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
745 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
808 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
606 views

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

0 votes
710 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
621 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
707 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
722 views

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

0 votes
676 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
774 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
684 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
720 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
815 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
2k 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
4k 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 6 years ago
  • last active 6 years ago
Showing 25 results