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

1 vote
0 answers
66 views

Good day 🙂

I am kinda new to SciChart …
Still under learning process on how to use it …
I was doing this particular task assigned and I got stuck …
May I know to create a Trace Setting Panel using custom annotation with html element inside ?

This is my index.js code :

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

async function initSciChart() {

    SciChartSurface.setRuntimeLicenseKey("...");

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

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

    const lineSeries1 = new FastLineRenderableSeries(wasmContext, { stroke: "Yellow"});
    sciChartSurface.renderableSeries.add(lineSeries1);
    lineSeries1.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 3], yValues: [2, 4]});

    const lineSeries2 = new FastLineRenderableSeries(wasmContext, { stroke: "Red"});
    sciChartSurface.renderableSeries.add(lineSeries2);
    lineSeries2.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 7], yValues: [3, 8]});

    const lineSeries3 = new FastLineRenderableSeries(wasmContext, { stroke: "Blue"});
    sciChartSurface.renderableSeries.add(lineSeries3);
    lineSeries3.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 7], yValues: [6, 3]});

    const lineSeries4 = new FastLineRenderableSeries(wasmContext, { stroke: "Green"});
    sciChartSurface.renderableSeries.add(lineSeries4);
    lineSeries4.dataSeries = new XyDataSeries(wasmContext, {xValues: [10, 6], yValues: [6, 3]});

    const lineSeries5 = new FastLineRenderableSeries(wasmContext, { stroke: "Purple"});
    sciChartSurface.renderableSeries.add(lineSeries5);
    lineSeries5.dataSeries = new XyDataSeries(wasmContext, {xValues: [15, 8], yValues: [12, 6]});

    const lineSeries6 = new FastLineRenderableSeries(wasmContext, { stroke: "Orange"});
    sciChartSurface.renderableSeries.add(lineSeries6);
    lineSeries6.dataSeries = new XyDataSeries(wasmContext, {xValues: [13, 8], yValues: [2, 1]});

}
initSciChart();

This is my index.html code:

<html lang="en-us">

<head>
    <meta charset="utf-8" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>SciChart.js Task 1</title>
    <script async type="text/javascript" src="bundle.js"></script>
    <style>
        body {
            font-family: 'Arial'
        }
    </style>
</head>

<body>
    <h1>task</h1>
    <p>task 1</p>

    <!-- the Div where the SciChartSurface will reside -->
    <div id="scichart-root" style="width: 800px; height: 600px;"></div>

</body>

</html>

Together I will attach my output (from the above code) and also the output which I suppose to get (which I’m not sure how to do it …

Hope to hear from you soon.

Thank you in advance.

1 vote
104 views

A client responded that the line diagram drawn by scient.js on the mobile phone could not be seen.
We follow the user’s log and find that there is such content

2022/09/21 07:02:27.981 exception thrown: RuntimeError: function signature mismatch,RuntimeError: function signature mismatch
            at <anonymous>:wasm-function[2101]:0x5fc72
            at <anonymous>:wasm-function[1355]:0x2a029
            at <anonymous>:wasm-function[2409]:0x7ef3a
            at Ch (<anonymous>:wasm-function[4028]:0x12f27f)
            at r._main (<anonymous>:16:687711)
            at Object.Ma [as callMain] (<anonymous>:16:688823)
            at <anonymous>:16:565075

2022/09/21 07:02:27.981 Could not load SciChart WebAssembly module.
            Check your build process and ensure that your scichart2d.wasm, scichart2d.data and scichart2d.js files are from the same version

.
We try to reproduce many different devices. At present, it seems that only the device will happen. The following is the information of the device

0 votes
0 answers
69 views

I am trying to implement Scichart JS into a Create React App web application.
So far I have gotten it working for all the functionality I need except for a very key feature.
Is the Zoom functionality completely absent for iOS safari (touch interaction)?
If so, is there a workaround to make it work (ie manually adding pointer events to the chart surface?)

Thanks

1 vote
147 views

Hello I am using the following unixtimestamp format for the x axis and it renders some random numbers instead of treating them as dates. What is the correct format? please see attached screenshot.

export const dateValues: number[] = [
    1546300800000,
    1546304400000,
    1546308000000,
    1546311600000,
    1546315200000,
    1546318800000,
    1546322400000,
    1546326000000,
    1546329600000,
    1546333200000,
    1546336800000,
    1546340400000,
    1546344000000,
    1546347600000,
    1546351200000,
    1546354800000,
    1546358400000,
    1546362000000,
    1546365600000,
    1546369200000,
    1546372800000,
    1546376400000, ]

Here’s the code for creating the chart

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

  sciChartSurface.xAxes.add(
        new CategoryAxis(wasmContext, {
          labelProvider: new SmartDateLabelProvider(),
          defaultXStep: 1546304400000 - 1546300800000,
          //growBy: new NumberRange(0.05, 0.05),
          drawMajorGridLines: true,
          drawMinorGridLines: true,
          axisAlignment: EAxisAlignment.Bottom,
          autoRange: EAutoRange.Once,
          drawMajorBands: false,
        })
      );
1 vote
139 views

Hello,

Is it possible to access the native canvas context to draw on the javascript chart surface? like for example, draw a circle or arc using HTML5 canvas apis.

-jackson

1 vote
240 views

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.

1 vote
214 views

Hi there,

I have downloaded the examples from SciChart GitHub and I found error where most of the demos cannot be compiled. I run the following command which are “npm install” and “npm start”, at the end it says failed to compile. I have included one of the demos screenshot on what it shows. May I know why and how to resolve this issue ?

Thank you 🙂

1 vote
260 views

I have a top chart that is a heatmap and there is another bottom chart that is a temperature map. I want the heatmap not show any y-axis labels but still keep the x-axis start aligned from the left side. I tried turning off the y-axis lables (which I do not need in the heatmap), but that moves the heatmap to the left and not kept aligned with the bottom chart.

const yAxis = new NumericAxis(wasmContext, {
autoRange: EAutoRange.Always,
labelFormat: ENumericFormat.Decimal,
labelPrecision: 2,
labelPostfix: "C",
drawLabels: false
});

The above code hides the y-axis labels but also removes the space on the left side so the x-axis of both graphs does not remained aligned. I need a way to somehow keep the start of x-axis aligned for both top and bottom graphs.

1 vote
273 views

I have a simple need to display a horizontal heatmap based on values along the x-axis. So if value on x-axis is 1, color shown on the heatmap should be orange, if the next value is 2, red color bar appears to next the previous orange etc. Something like this (see attached graphic also):

Heatmap: [=orange=red=green]
values along x-axis: [22.05, 24.00, 30.00 ]

So the code I am trying is as follows:

export async function renderHeatMap(element) 
{
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(element);

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

    var heatMapData = zeroArray2D([1, 5]);
    heatMapData[0][0] = 22.05; //should appear as color1 in heatmap
    heatMapData[0][1] = 24.00; //...
    heatMapData[0][2] = 30.00; //should appear as color2 in heatmap
    heatMapData[0][3] = 26.75;
    heatMapData[0][4] = 30.00; //should appear as color3 in heatmap

    const heatmapDataSeries = new UniformHeatmapDataSeries(wasmContext, 0, 1, 0, 1, heatMapData);

    const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
        dataSeries: heatmapDataSeries,
        colorMap: new HeatmapColorMap({
            minimum: 20, // min value in the zValues (data) to map to offset 0 in the colormap
            maximum: 30, // max value in the zValues (data) to map to offset 1 in the colormap
            gradientStops: [
                { offset: 0, color: "#00008B" },
                { offset: 0.3, color: "#7FFF00" },
                { offset: 0.7, color: "#FFFF00" },
                { offset: 1.0, color: "#FF0000" },
            ],
        }),
    });

    sciChartSurface.renderableSeries.add(heatmapSeries);
}

But this only displays an empty grid. I don’t see a heatmap. Anyone can point out what may be wrong? Not even the axis is showing up correctly.

1 vote
306 views

Hi There,

I’m new to SciChart, I have a question regarding DateTimeAxis that is it possible to display the date when plotting data based on hours for multiple days?

For example, I’m plotting data for Aug/07, Aug/06, and Aug/05, so I have 72 data points to display, but the problem is the user can see all the data based on hours however, they will not be able to see when the day has changed. Is there any way I can achieve this.

  • Umer Nawaz asked 2 months ago
  • last active 2 months ago
1 vote
387 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
394 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
322 views

Hi,

I’ve had a request from the client of our app to set logarithmic axis to have their major ticks at powers of 10, for example 0.1|1|10|100|1000|10000 – they would be expressed as 1e-1|1e0|1e1|1e2|1e3|1e4…. etc.

Is this possible within the current implantation of the logarithmic axis?

Cheers,

  • Adam Stone asked 2 months ago
  • last active 1 month ago
1 vote
330 views

Hi,

Is it possible to either rotate a TextAnnotation, not necessarily by user interaction but even just in code to have text going vertically?

Cheers,

  • Adam Stone asked 2 months ago
  • last active 2 months ago
1 vote
344 views

Hi,

I would like to display the rollovermodifier line that must be parallel to the X axis and the Rollovermodifier line must be a dashed line. In the y axis I need to add a label annotation with svg .How can I fix the problem. Kindly provide me the solution.

This is the code I have given,

const horizontalline = new RolloverModifier({
IsEnabled: true,
DrawVerticalLine: true,
showTooltip: false,
rolloverLineStroke: “white”,
rolloverLineStrokeThickness : 1
})
sciChartSurface.chartModifiers.add(horizontalline);

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

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,

1 vote
345 views

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

1 vote
357 views

What languages are wrappers for the licensing server in? Where can I get information on what c++ functions to call?

  • Ryan Campo asked 3 months ago
  • last active 3 months ago
1 vote
373 views

Hello I have been having a difficult time getting the correct time displayed on my xAxis and labels.

Passing in an xValue to an OHLC data series of 60 and the setting cursorLabelFormat: ENumericFormat.Date_DDMMHHMM this should produce a label “01/01 00:01” With the year as 1970.

When the computers timezone is set to UTC + 0 this behaves as expected.

However when the computers timezone is set to anything negative (UTC – 7) the label is formatted as “31/12 00:01” with the year 1969. If scichart is trying to convert to local time I would expect a reading of “31/12 17:01” 1969.

And when the timezone is set to anything positive (UTC + 7) the label is formatted as it is UTC +0 “01/01 00:01” 1970 again I would expect the hour to corrispond to the UTC offset if scichart is trying to convert to local time.

Looking at the later case I would assume that no time conversion is taking place which is what I would prefer. But looking at the former case (UTC -X) there appears to be some manipulation happening somewhere, I just have not been able to find any documentation explaining this. Am I missing something to get this to work properly out of the box without a custom label provider?

Thank you,

Update:

I do not want to worry about timezones. I want sciChart to plot the time that I give it. Again this is acting as expected when the computer timezone is in anything greater than UTC 0. But when the computer timezone is less than UTC 0 the label and axes are showing a date 24 hours prior to what I give it.

See attached images for the error. Note the only change that is happening is changing the computer timezone from UTC – 4 to UTC + 4.

See below for code setting up the chart.

Why is changing the computer timezone affecting the data labels?

export async function example(element) {
    let { sciChartSurface, wasmContext } = chartInstances.hasOwnProperty(element.id) && chartInstances[element.id];

    // initialize sciChart and add created chart to chartInstances
    if (sciChartSurface === undefined) {
        const newContext = await SciChartSurface.create(element.id);
        sciChartSurface = newContext.sciChartSurface;
        wasmContext = newContext.wasmContext;
        chartInstances[element.id] = { sciChartSurface, wasmContext };
    }

    //create and add xAxis
    let xAxis = new CategoryAxis(wasmContext, {
        drawLabels: true,
        drawMajorTickLines: true,
        drawMinorTickLines: true,
        axisAlignment: EAxisAlignment.Bottom,
        autoRange: EAutoRange.Once,
        cursorLabelFormat: ENumericFormat.Date_DDMMHHMM,
        labelFormat: ENumericFormat.Date_DDMMYYYY,
    });

    sciChartSurface.xAxes.add(xAxis);

    //create and add yAxis
    let yAxis = new NumericAxis(wasmContext, {
        maxAutoTicks: 5,
        autoRange: EAutoRange.Always,
        growBy: new NumberRange(0.3, 0.11),
        axisAlignment: EAxisAlignment.Right,
        labelPrecision: 4
    });
    sciChartSurface.yAxes.add(yAxis);

    //add chart modifiers
    sciChartSurface.chartModifiers.add(new ZoomPanModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new ZoomExtentsModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier({ xyDirection: EXyDirection.XDirection }));
    sciChartSurface.chartModifiers.add(new RolloverModifier({ modifierGroup: "first", showTooltip: false }));
    sciChartSurface.chartModifiers.add(new CursorModifier(
        {
            crosshairStroke: "#9598a1",
            crosshairStrokeDashArray: [10, 5],
        }));

    //apply desired theme
    sciChartSurface.applyTheme(new SciChartJSDarkTheme());

    //create three bars 
    _ohlcDataSeries = new OhlcDataSeries(wasmContext, {
        xValues: [60,120,180], //1 min, 2 min, 3 min post epoch
        openValues: [10,10,10],
        highValues: [15,15,15],
        lowValues: [5,5,5],
        closeValues: [11,11,11],
        dataSeriesName: "PriceDataSeries"
    });

    //create and style fastCandRendSeries
    const fcRendSeries = new FastCandlestickRenderableSeries(wasmContext,
        {
            dataSeries: _ohlcDataSeries,
            strokeThickness: 1,
            dataPointWidth: 0.5,
            brushUp: "#50ff50B2",
            brushDown: "#ff5050B2",
            strokeUp: "#50ff50",
            strokeDown: "#ff5050",
            animation: new WaveAnimation({ fadeEffect: true, duration: 800 })
        });
    sciChartSurface.renderableSeries.add(fcRendSeries);
}
  • Leland asked 3 months ago
  • last active 3 months ago
0 votes
0 answers
578 views

How to setup SciChart in React native frame work?

1 vote
561 views

Hello,

I am attempting to get SciChart working in a Blazor Server app.

I have followed the examples here:
https://github.com/ABTSoftware/SciChart.JS.Examples/tree/master/Sandbox/demo-browser-global-module
https://github.com/ABTSoftware/SciChart.JS.Examples/blob/master/Tutorials/2D_Browser_CDN_Tutorials_JavaScript/Tutorial_2_Adding_Series_and_data/index.html
https://www.scichart.com/documentation/js/current/webframe.html#Deploying%20Wasm%20or%20WebAssembly%20and%20Data%20Files%20with%20your%20app.html
https://cdn.jsdelivr.net/npm/scichart@2.2.2393/README.md

I have the following line in my “_Layout.cshtml” file in the head section:

<script src="https://cdn.jsdelivr.net/npm/scichart@2.1.2290/_wasm/scichart.browser.js" crossorigin="anonymous"></script>

In my scichart js I have:

export async function initSciChart() {
    SciChart.SciChartSurface.setRuntimeLicenseKey("....");
    SciChart.SciChartSurface.useWasmFromCDN();
}

However when I call this over JSInterop i get the following error:

Error: Microsoft.JSInterop.JSException: SciChart.SciChartSurface.useWasmFromCDN is not a function
TypeError: SciChart.SciChartSurface.useWasmFromCDN is not a function
at Module.initSciChart (https://localhost:7195/Pages/Strategy/StrategyMain.razor.js:33:30)
at https://localhost:7195/_framework/blazor.server.js:1:3501
at new Promise ()
at kt.beginInvokeJSFromDotNet (https://localhost:7195/_framework/blazor.server.js:1:3475)
at https://localhost:7195/_framework/blazor.server.js:1:72001
at Array.forEach ()
at kt._invokeClientMethod (https://localhost:7195/_framework/blazor.server.js:1:71987)
at kt._processIncomingData (https://localhost:7195/_framework/blazor.server.js:1:70029)
at connection.onreceive (https://localhost:7195/_framework/blazor.server.js:1:64432)
at o.onmessage (https://localhost:7195/_framework/blazor.server.js:1:48766)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeVoidAsync(IJSObjectReference jsObjectReference, String identifier, Object[] args)
at TradeLogicBS.Web.Pages.Strategy.StrategyMain.OnAfterRenderAsync(Boolean firstRender) in D:\Repos\TradeLogicBS\TradeLogicBS\TradeLogicBS.Web\Pages\Strategy\StrategyMain.razor:line 63
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

How do we set this up properly to access the scichart modules in a blazor server application?

Thank you,

  • Leland asked 4 months ago
  • last active 2 months ago
1 vote
599 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
579 views

Hi. I’m trying to add 3DChart to my vue project. And I have a question about the configuration. Can I download .data and .wasm files from the CDN.

For 2D charts , I’ve used recomendation of your release v.2.2:
SciChartSurface.useWasmFromCDN()
It works for me. How I can use CDN for SciChart3DSurface?

1 vote
503 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
597 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

1 vote
476 views

Hello,

I have a BlazorWASM app. I am wondering how to sync the x values of different renderable series that have different number of data points.

In a simple form, I am passing in the data for a moving average to be rendered on the chart that has already been populated with data. The moving average data has already been calculated and has the correct date timestamps. But when I add this series to the chart it is starting at index 0 of where the the price data started instead of where the xAxis date of this renderable series has.

I prefer not to use the filters api to regenerate this data as some will be complex and have already been calculated by study or pulled from a database. I have seen the article to offset a series but this seems unnecessary since I already have the x axis coordinate that I want each point of the new line series to be rendered.

Is there somewhere in the docs that I missed how to get these renderable series to line up properly to their own x data points?

Thank you

  • Leland asked 4 months ago
  • last active 4 months ago
1 vote
668 views

I have combed through KB articles and other documentations and samples here and SO, but I am not able to fix the issue. I am desperate for any help.

I have a react app that shows the chart, but at the top of the page, I have a header section and the remaining height is filled with Chart. All the samples and answers that I have seen thus far has no header section on the page. So the chart is 100% filled within it’s container. But, in my case the chart does not fit its container width & height and I end up with a scroll-bar. This is especially evident when you maximize the page (Chrome maximize window).

I am on Windows 10.

I have attached the code and a screen-shot of what the resulting page in Chrome. I have tried with and without CSS and it made no difference in terms of chart filling its container.

React Code:

import { useCallback, useEffect, useState } from 'react';
import { createRoot } from 'react-dom/client';
import './Chart-styles.scss';
import { SciChartSurface } from 'scichart/Charting/Visuals/SciChartSurface';
import { NumericAxis } from 'scichart/Charting/Visuals/Axis/NumericAxis';
import { getSciChartLicense } from '../common/chartUtils';

const Chart = () => {
const [chartId] = useState('line-chart');

const initChartAsync = useCallback(async () => {
    const { sciChartSurface, wasmContext } = await SciChartSurface.create(chartId);

    const xAxis = new NumericAxis(wasmContext);
    const yAxis = new NumericAxis(wasmContext);
    sciChartSurface.xAxes.add(xAxis);
    sciChartSurface.yAxes.add(yAxis);
}, []);

useEffect(() => {
    SciChartSurface.setRuntimeLicenseKey(getSciChartLicense());
    initChartAsync()
        .catch(error => {
            console.error('ChartRenderer | useEffect | initChartAsync failed!', error);
        });
}, [chartId]);

return (
    <div className="App">
        <div className='App-header'>
            <h2>Chart Header</h2>
            <h3>Chart Sub-Header</h3>
        </div>
        <div
            id={chartId}
            style={{width: '100%', height: '100%'}}
        />
    </div>
);
};

const container = document.getElementById('app');
const root = createRoot(container!);
root.render(<Chart/>);

Chart-Style.scss

#app {
    display: flex;
    flex-flow: column nowrap;
    margin: 0;
    padding: 0;
}

.App {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column nowrap;
    text-align: center;
}

.App-header {
    flex: 0 1 auto;
    display: flex;
    flex-flow: column nowrap;
    background-color: #855b24;
    color: white;
    h2 {
        background-color: #2e2e2d;
        flex: 0 1 auto;
        margin: 0;
        padding: 2px;
    }
    h3 {
        background-color: #5c5c5b;
        flex: 0 1 auto;
        margin: 0;
        padding: 2px;
    }
}

#line-chart {
    flex: 1 1 auto;
}
0 votes
506 views

Hello, I am running scichart in a blazorwasm app. On updating from 1.x to 2.2.2351 I am getting an uncaught error for a missing module on app startup before I make any calls to scichart to initialize.

The error is:
Uncaught Error: Cannot find module ‘../Charting/Model/Filters/HlcScaleOffsetFilter’
at webpackMissingModule (buildDataSeries.js:15:94)
at eval (buildDataSeries.js:15:215)
at Object../node_modules/scichart/Builder/buildDataSeries.js (strategyChart.js:133:1)
at webpack_require (strategyChart.js:21:30)
at eval (chartBuilder.js:45:25)
at Object../node_modules/scichart/Builder/chartBuilder.js (strategyChart.js:181:1)
at webpack_require (strategyChart.js:21:30)
at eval (SciChartSurface.js:30:22)
at Object../node_modules/scichart/Charting/Visuals/SciChartSurface.js (strategyChart.js:3253:1)
at webpack_require (strategyChart.js:21:30)

My webpack is:

 const path = require("path");
const CopyPlugin = require("copy-webpack-plugin");
const webpack = require("webpack");
module.exports = {
    mode: "development",
    entry: {
        strategyChart: './src/strategyChart.js'
    },
    module: {
        rules: []
    },
    resolve: {
        extensions: [".js"]
    },
    output: {
        path: path.resolve(__dirname, '../wwwroot'),
        filename: "[name].js",
        library: "[name]"
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: "node_modules/scichart/_wasm/scichart2d.data", to: "" },
                { from: "node_modules/scichart/_wasm/scichart2d.wasm", to: "" }
            ]
        }),
        new webpack.IgnorePlugin(/(fs)/)
    ]
};
  • Leland asked 4 months ago
  • last active 4 months ago
0 votes
549 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 4 months ago
  • last active 4 months ago
0 votes
600 views

I would like to create an arc annotation as shown in the attached image in Scichart JavaScript.
Please guide me on what will be the best way.

1 vote
677 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
526 views

@TypeScriptError Getting an 800A0404 error when opening any javascript file. This is happening in the Windows Script Host panel. Telling me that I have bad code, that’s not bad. This has been happening since upgrading my Java Version.

0 votes
554 views

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

0 votes
0 answers
500 views

I would like to create an annotation in which users can have a multi-line text annotation which can be looks like text-box

0 votes
567 views

Javascript Stock Chart CategoryAxis date display minute ,second and microsecond

How to display date format HH:MM:SS.ssssss .
Can you please help me,

  • sara uçar asked 5 months ago
  • last active 5 months ago
0 votes
543 views

Hi guys, I got problem that cursor modifier is not display full lines on x and y axis, ( also it breaks when browser zoom changes ) is there any solution now ?

0 votes
652 views

I have a large data set that I can’t really load into memory at once so instead I am paging the data, grabbing only what I require plus a little buffer either side so that the graph always has something in it.

To implement paging I need to change the position at which the graph starts rendering, unfortunately it seems that it is not possible to change UniformHeatmapDataSeries.xStart as set in the constructor.

Is the only way around this to recreate the heatmap from scratch every time a new page is loaded or am I missing another trick?

0 votes
571 views

Hi,

I’m building a heatmap with UniformHeatmapRenderableSeries I would like to know if it is possible to get some text inside each block.
I would like to display the block size when I zoom in like this https://www.scichart.com/example/android-heatmap-chart-with-text-example/.
Do you have any suggestions?

Best Regards,
Gabriel

0 votes
677 views

Hi
I am trying out JS SciChart based on the Blazor example you have posted more than a year ago.
I cannot get the auto scaling to work by code (the default behavior does auto scale once right after adding the data). Calling sciChartSurface.zoomExtents(); (or zoomExtentsX() and zoomExtentsY() after one another) does zoom into a very details portion of the graph.

Also (maybe related) the tooltip does not update when moving the cursor around, it always keeps the same data. I tried using CursorModifier as well as RolloverModifier, both having the same problem.

Attached the JS code and the c# files and a picture how this looks like after calling the autoScale() method.

Thanks for any help
Regards
Reto

0 votes
654 views

Error from chart in div chart1 Error: getNativeXValues is invalid for heatmap type series. Try getting or setting zValues instead
at UniformHeatmapDataSeries.BaseHeatmapDataSeries.getNativeXValues (BaseHeatmapDataSeries.js:430:1)

Help! Please!

1 vote
624 views

How can I rotate the axis titles in SciChat JS?

We want the the titles Fp1 and Fp2 to be rotated so they are horizontal on the screen instead of vertical.

enter image description here

0 votes
0 answers
531 views

Hi,
As title, is any way to reach this requirement?
when drag the annotation but not appear the selected style. like circle point and around broder.

0 votes
778 views
  1. Big Sur 11.6.
  2. Monterey 12.2.1
  3. Catalina 10.15.7 (late 2013 model)
    ![enter image description here][1]

sciChart version 1.4.1611

If you open the chart in the Firefox browser, then, strangely enough, everything works.

Is it related to the version of the library?

0 votes
785 views

Hi,

We found that the part of our project that uses scichart does not work correctly on iOS12, and then we tried to open a browser on iOS12 to the scichart javascript demo webpage, and found that it did not work.

What is the minimum iOS version supported by javscript scichart?

0 votes
2k views

Hello, I just started evaluating JS 2D chart library and am running into an error (below) and don’t know what I should do to continue forward:

Error:

wasm streaming compile failed: TypeError: Failed to execute ‘compile’ on ‘WebAssembly’: Incorrect response MIME type. Expected ‘application/wasm’.

falling back to ArrayBuffer instantiation

failed to asynchronously prepare wasm: CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

CompileError: WebAssembly.instantiate(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

Could not load SciChart WebAssembly module.
Check your build process and ensure that your scichart2d.wasm, scichart2d.data and scichart2d.js files are from the same version

Uncaught (in promise) Could not load SciChart WebAssembly module.
Check your build process and ensure that your scichart2d.wasm, scichart2d.data and scichart2d.js files are from the same version


I am copying the scichart2d.data and scichart2d.wasm in my webpack config as follows (according to your tutorials):

config.plugins.push(
    new CopyPlugin({
        patterns: [
            // {
            //     from: 'src/index.html',
            //     to: '',
            // },
            {
                from: 'node_modules/scichart/_wasm/scichart2d.data',
                to: '',
            },
            {
                from: 'node_modules/scichart/_wasm/scichart2d.wasm',
                to: '',
            },
        ],
    })

I have since then done the following but to no avail:

  1. Restart my webpack-dev-server -> In chrome, “Empty cache and refresh”
  2. Delete my node_modules folder -> yarn install -> yarn start

Can someone please help me with this issue at an earliest convenience.

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
774 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
927 views

Hi everyone! We have a problem, the chart does not start on macOS and Windows 11 operating systems – a black screen is displayed.

I have a license (javascript): The javascript license must work on all Windows/Linux/macOS browsers.
also for mobile browsers.

The problem is displayed in any browser.

The parameters of the MacBook on which the chart does not start are attached below in the screenshot.

What could be the problem?

enter image description here

0 votes
0 answers
583 views

Hi,

When we published the product of Test Domain, a black rectangle will appear in the SciChart line graph. How should we avoid it?

The tester told me he was reluctant to update to Production Domain in this situation.

Thank for your help

0 votes
723 views

Is there any way to provide annotation tooltip onmouseover? Perhaps I can subscribe on surface mouse events and manage visibility and positions on “tooltip” annotations by myself? If so, could you please provide reference to surface mouse events API.

Showing 1 - 50 of 172 results