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

0 votes
897 views

Hi, I noticed that Heattexture: [object Object] is logged hundreds/thousands of times while interacting with a heatmap. This isn’t my console log, as it is a very simple implementation and there are no logs on my front end, with nothing called Heattexture in my repository.

I’m guessing that this is a leftover console log that needs to be removed, as it occurs in both my development and production Webpack builds.

Most of the time it does not cause any performance issues, but once I did see the heatmap flickering at roughly the same rate of the console log.

Screenshot attached.

Thanks!

0 votes
432 views

i cant draw any chart.
just this ..
i used demo code

  • YEJI YOON asked 5 months ago
  • last active 5 months ago
1 vote
137 views

Hello,

I am trying out SciCharts and am looking to recreate the example 3D uniform surface mesh chart example and don’t have a good hold on the architecture yet. I don’t see directions as to which file to paste the example code into. I’m looking at the code example where it creates a “final camera3D camera – schiChart3DBuilder.newCamera3D().build();” and goes from there. (…/webframe.html#The%20Surface%20Mesh%203E%20Chart%20Type.html)

I have the 3D surface created and rendering. I just need to get started to go from there. Thank you.

0 votes
833 views

Hello guys,

Can you provide an example how to implement scichart on SSR Frameworks like Nuxt or Next.js ? I am trying to understand how i can compile a simple chart using Nuxt, getting the .data/.wasm file but i have problem after building process.

Can you help?

Many thanks

Pedro Cruz

  • Ricardo Diz asked 10 months ago
  • last active 10 months ago
1 vote
278 views

I have been working with the new Overview Chart feature available in the new 2.0.0-beta.2084 release, and ran into an issue where I can remove lines from the overview surface no problem, but then I always receive an error whenever I try to add one.

I was just wondering if there is a recommended flow for when a parent chart’s renderable series array has traces added or removed. One thing I did try to circumvent this issue was to delete the old overview and add a new one, but I receive either a separate error or the overview would draw without any traces.

I have attached a file with example code that should display the error I receive when you add a line to an overview component. I have also attached an image of the error that appears in the console.

0 votes
3k 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
1k views

Hello.

The graph is automatically stretched in width. How to do the same in height?

Video

0 votes
725 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
823 views

Screenshots attached.

To recreate:

  • Create a chart
  • Add a CursorModifier – default options is fine
  • Either directly remove the modifier using .remove(modifier), or clear all using .clear()

Expected behaviour:
– Should remove the cursor modifier

Actual behaviour with bug:
– Crashes the page

This appears to be an issue with CursorModifier only (out of the 5 or 6 that I’ve tried). Other modifiers work as expected.

Traced the issue to this.parentSurface being undefined in CursorModifier.js, so when onDetach() is called, it errors.

Thanks!
Joe

0 votes
1k views

Hi all,

I have another question about SciChart.js, I hope someone can teach me.

First, please download this video

This chart in video is made by d3.js, I hope I can use SciChart.js to make the same features,
please watch from 7 second to the end, when I click the mouse and move to the right direction, then click mouse again,
the section from first click to the second click will make different color, someone can teach me how to do that

PS: English is not my mother language, I wish you all can understand what I mean, Please download the video and watch, thanks.

1 vote
582 views

I’m looking for some direction on how to implement a modifier that reacts to interaction (mouse up/down etc) with a charts axis

  • User clicks on axis
  • Provide callback for side effect when clicked

Thanks

0 votes
247 views

I want to use my custom image as a background for SciChart js.
I tried to put background-image to body of the page.
Then I enabled transparent background via:

sciChartSurface.backgroundCompletelyTransparentEnabled = true;

But it doesn’t work. It does nothing.
Then I tried to put transparent background to SciChart:

sciChartSurface.background = "#00000000";

But it doesn’t work as well. Chart completely disappears in this case.

How can I put my image as a background for SciChart?

  • Roman Zye asked 2 months ago
  • last active 2 months ago
0 votes
613 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
472 views

Hello, I`d like to ask u about cursor view. As default cursor I want use crosshair and as move grabbing as showed in attachment. How can I do that ?

0 votes
757 views

I was looking over Tutorial 07 – Tooltips and Legends and the Chart Legends API demo, and noticed that the checkboxes and legend font had some styling applied. But, when I implement a legend on my own it uses the default font (or whatever global font style I used) and the default HTML checkbox styling. I was wondering if you had modified the styling using an outside CSS file, if there is an API endpoint for modifying the styling of the legend, or if this is possibly a bug. I did see that there was an applyTheme() method available, but I thought that it might not apply to this situation. I also tried to look through the example code provided for the Chart API Demo, but I couldn’t find anything that pointed one way or the other.

I have attached screenshots of what the legend looks like in the two examples, as well as a screenshot of what the legend looks like when I implement it on my own. I have also included a zip file with the demo application I created.

Thanks,
Drew

0 votes
389 views

Hi,
I am trying to get my chart to scroll together with my other HTML elements but have not been successful. Referring to the screenshot attached, if I were to disable the position:absolute style the chart is then able to scroll with the HTML elements if not, whenever I scroll the other HTML elements would scroll but the Chart will stay in its position.

Is there property that I can set on the chart to disable the absolute position?

0 votes
161 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
157 views

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

1 vote
2k views

Hi Andrew:

It’s me again.

Does SciChart.js support Vue.js 2.0 or even 3.0 ?

Will there be any Vue templates in the future ?

Best Regards

Yen Wen

0 votes
927 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
559 views

Hi, I’m looking for some pointers on how to implement the following:

  • User draws a selection on the chart (similar to rubber band modifier)
  • Annotation is drawn on the chart conforming to the users selection
  • Annotation is fixed relative to the data point (e.g. will scroll is the chart is panned etc)

Many thanks

0 votes
642 views

I want to build a column chart but I got the following error:

ERROR TypeError: Cannot read property ‘append’ of undefined

The error happened in line #42.

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.updateData();
                });
                this.sciChartInit();
            }   

updateData(){
    var phaseNum1 = [];
    var xData = [];
    for (let x = 1; x < this.numberOfOutput; x++) {
        if (this.ampSource.data != null && this.ampSource.data[x-1] != null) {
            phaseNum1[x - 1] = parseFloat(this.ampSource.data[x - 1].voltage1);
            xData[x - 1] = x;
            if (!isNaN(phaseNum1[x - 1])) {
                this.dataSeries1.append(x,x);
            } else {
                console.log("No num");
            }
        }
    }
}       

async sciChartInit() {

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

    var phaseNum1 = [];
    var xData = [];
    this.dataSeries1 = new XyDataSeries(wasmContext);
    for (let x = 1; x < this.numberOfOutput; x++) {
        this.dataSeries1.append(x, x);
    }

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

    const rendSeries1 = new StackedColumnRenderableSeries(wasmContext);
    rendSeries1.fill = "#dc443f";
    rendSeries1.stroke = "green";
    rendSeries1.strokeThickness = 1;
    rendSeries1.dataSeries = this.dataSeries1;
    rendSeries1.stackedGroupId = "one";

    const verticallyStackedColumnCollection = new StackedColumnCollection(wasmContext);
    verticallyStackedColumnCollection.dataPointWidth = 0.5;
    verticallyStackedColumnCollection.add(rendSeries1);
    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 LegendModifier({
            placement: ELegendPlacement.TopRight,
            orientation: ELegendOrientation.Horizontal,
            showLegend: true,
            showCheckboxes: true,
            showSeriesMarkers: true
        })
    );
    return { wasmContext, sciChartSurface };
}}

I don’t understand what is undefined and why.

Thank you.

  • ETS Ong asked 4 months ago
  • last active 4 months ago
1 vote
1k views

Hello,

I am currently developing an application using Electron (v. 8.3.0), React (v. 17.0.1), and TypeScript (v. 4.0.5). I have created a simple demo app (see attached) to test this software, and I found that whenever the application window is resized, there is an “Uncaught null” error from scichart2d.js caught by the console. I also found that at some window dimensions, it even seems that the chart cannot properly be displayed and it will try to constantly rerender, quickly filling up the console with the same error.

A couple of notes:

  • I currently am using a trial key.
  • I am compiling this application using electron-webpack (https://webpack.electron.build/). It has a few built-in tools that ease the compilation/app creation process when combining Electron with other frameworks. This means some of the webpack API being used is abstracted, but we can append our own (see webpack.renderer.additions.js), more information can also be found at https://webpack.electron.build/modifying-webpack-configurations.
  • Electron v. 8.3.0 uses Chromium 80, so all features should be supported.
0 votes
598 views

I was used fifo(scrolling) chart in wpf scichart.

But.

I could not found fifo option in js scichart.

Maybe because there is no fifo option, if there is a lot of data accumulated, the chart is slow and cannot be used.

Can I use fifo(scrolling) chart in js scichart?

  • 동윤 이 asked 7 months ago
  • last active 7 months ago
1 vote
761 views

Hi,

In the documentation I can’t see any way to make a chart surface fill the available space in all directions.

By default, it fills the available horizontal space, but the ratio of width:height remains fixed.

The only example I’ve seen where this is slightly different is this JS example, where the width flexes independently to fit the available space: https://demo.scichart.com/javascript-2d-3d-chart-tenor-curves-example – I’m not sure exactly what part of the code makes this different to the other examples?

My goal is to allow the user to adjust the height and width of any chart themselves by dragging the size of the container div, with the chart surface ideally just filling the space in a ‘dumb’ way, rather than using JS to manually update the chart size during the drag event.

Thanks,
Joe

1 vote
1k views

Hi all,

Today, I follow the Tutorial 01, but I can not set up the SciChart.js project,
I am sure that I do the same step like Tutorial,
some one can help me to realize the error messages?
Thanks a lot.

PS:error messages is attached file

Sincerely,

Alec

0 votes
428 views

Dear team. We have a need to draw footprint chart, but your library didnt’t have opportunity to draw it. It will be good if you help us with recommendations in which direction we should move to build it. Thanks you a lot !

0 votes
538 views

Hi,
I’m trying to implement footprint with SciChart framework, I mean is possible create like a plugin for implement in the framework?
My idea was set body color of all the candles invisible and than for every candle set two volume series in horizontal like in the image.

  • John Lepre asked 5 months ago
  • last active 5 months ago
0 votes
511 views

Hello! Can you help me with creating footprint chart. In documentation and examples I didn`t find way how to do that. How can I create it ?

1 vote
692 views

Hi,

I have a uniform heatmap with multiple ’tiles’ of data loaded in, by using multiple UniformHeatmapDataSeries / UniformHeatmapRenderableSeries.

The user is allowed to pan around/zoom around the heatmap.

I want to build two charts to display the ‘visible heatmap average’, one for each axis. For example, I would display a line chart underneath the heatmap. The first point on this line chart would represent the average value of all cells in the first column of the heatmap – I need this to take into account all of the UniformHeatmapDataSeries that are currently in the viewport, treating them as a singular heatmap.

I’ve seen the NumericAxis.getCurrentCoordinateCalculator(), which looks promising, but I’ve not yet worked out if that can do what I need.

Any thoughts on the best approach?

Thanks
Joe

1 vote
339 views

Hello,

How can i convert my data to Y coordinate value in OhlsSeries?

Please advise. Thanks.

0 votes
790 views

Hey guys,

As you already know, I’ve implemented a wrapper of scichart.

In a clear Nuxt project, I can get the scichart.data / scichart.wasm files very well. Have no problems with that at all.

But on my current project, we can’t implement this because some dependency is missing from scichart. And without your code, I really don’t know how to get into it.

The image is on attachments. Can you help us?

Many thanks,

Pedro Cruz

  • Ricardo Diz asked 10 months ago
  • last active 10 months ago
0 votes
461 views

Hi there,

Do you support colour legend for Heatmap in Java Script? Can you please point me to where it is documented if you do.

Thank you

  • Ihab Skafi asked 5 months ago
  • last active 5 months ago
0 votes
406 views

Hello

I have a use case where annotations are draggable and on drag i am making api call to fetch updated data and resetting the the DataSeries.

I am clearing annotations once i get updated data but it is just clearing the svg annotation nodes from dom but not the hit test context (point focus) on wasm side.

Please look at the attached screenshot and suggest something

Thanks
Vamsi

0 votes
539 views

I wanted to use a stepline-box chart in my javascript applications for ELD, I failed to find out a similar box graph in the javascript chart section. The graph I have really looking for is attached here.
Could anyone please help me out?

0 votes
664 views

Fairly simple question: How do you export or save a chart as an image in the JS library?

1 vote
2k views

Hello,
How can I animate an update of a candle or a bar in an OHLC type charts? I use realtime stock chart like this example.
When i update candle it redraws immediately with new values. But i want it to be updated with animation.

  • Vita Bubko asked 1 year ago
  • last active 12 months ago
0 votes
542 views

Scenario: user selects an area of a heatmap chart using a box annotation via a mouse drag.

I have created a custom modifier to draw the box annotation. I’ve used this as the basis: SimpleDataPointSelectionModifier.ts

My question is: how to I get the X axis start + end values and the Y axis start + end values based on the area of the annotation/mouse coordinates.

Thanks

1 vote
517 views

How do I insert gaps in a heatmap series? At the moment null values seem to show as either the max value colour or the min value colour.

0 votes
931 views

I’ve been trying to implement the scichart js blazor wrapper in a serverside application. The chart starts to load, but gives the following error:
Failed to load resource: the server responded with a status of 404 () :5001/scichart2d.data:1

it looks like scichart2d.data is in the wrong place, but as far as I can tell it’s where it should be (in wwwroot).

is there something special I need to do in sever side? I can get it working fine in webAssembly Blazor

0 votes
670 views

I see in the documentation that I need to set the boolean to true/false. But my question is how do I do this after the series has been rendered? I am using a custom legend and need to be able to toggle visibility.

  export default function Chart() {
  const [sciChartSurface, setSciChartSurface] = React.useState<SciChartSurface>();
  const [wasmContext, setWasmContext] = React.useState<TSciChart>();

  const dataSeriesMapRef = React.useRef<Map<keyof typeof chartData, XyDataSeries>>();

  React.useEffect(() => {
    (async () => {
      const { sciChartSurface, wasmContext } = await drawChart(theme, chartType);
      setSciChartSurface(sciChartSurface);
      setWasmContext(wasmContext);
    })();

    dataSeriesMapRef.current = new Map<keyof typeof chartData, XyDataSeries>();

    return () => sciChartSurface?.delete();
  }, [chartType]); // make sure the chart is initialized only once

  React.useEffect(() => {
    if (dataSeriesMapRef.current && sciChartSurface && wasmContext && !isLoading) {
      // const currentSeries = sciChartSurface.renderableSeries.asArray();
      // if (currentSeries) sciChartSurface.renderableSeries.clear();
      updateChartWithData(dataSeriesMapRef.current, theme, wasmContext, sciChartSurface, chartData, chartType);
    }
  }, [theme, chartData, wasmContext, sciChartSurface, isLoading]);

  return (
    <div id="chart-container">
      <ControlsLegend
        chartData={chartData}
        dataSeriesMap={dataSeriesMapRef.current as Map<keyof typeof chartData, XyDataSeries>}
        theme={theme}
        sciChartSurface={sciChartSurface as SciChartSurface}
        wasmContext={wasmContext as TSciChart}
      />
      <div id={DIVID} style={{ width: windowWidth, height: windowHeight }} />
      <ControlsBottom />
    </div>
  );
}

drawChart.js

    export default async (theme: ExtendedTheme, chartType: string) => {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(DIVID);
  const isLightTheme = theme.palette.type === 'light';

  console.log('createChart');
  const xAxis = new NumericAxis(wasmContext);
  const yAxis = new NumericAxis(wasmContext);

  xAxis.labelProvider.formatLabel = (unixTimestamp: number) => {
    return new Date(unixTimestamp * 1000).toLocaleDateString('en-us', {
      month: 'short',
      year: 'numeric',
      day: 'numeric',
    });
  };

  yAxis.labelProvider = new CustomLabelProvider();

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

  if (chartType !== 'stack') sciChartSurface.chartModifiers.add(new RolloverModifier({ showRolloverLine: false }));
  sciChartSurface.chartModifiers.add(new ZoomPanModifier());
  sciChartSurface.chartModifiers.add(new ZoomExtentsModifier());
  sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier());
  sciChartSurface.chartModifiers.add(new PinchZoomModifier());

  const rubberBandXyZoomModifier = new RubberBandXyZoomModifier({
    isAnimated: true,
    animationDuration: 400,
    easingFunction: easing.outExpo,
    fill: '#FFFFFF33',
    stroke: '#FFFFFF77',
    strokeThickness: 1,
  });
  sciChartSurface.chartModifiers.add(rubberBandXyZoomModifier);

  sciChartSurface.zoomExtents();

  if (isLightTheme) sciChartSurface.applyTheme(new SciChartJSLightTheme());
  else sciChartSurface.applyTheme(new SciChartJSDarkTheme());
  return { sciChartSurface, wasmContext };
};

updateChartWithData.js

    export const updateChartWithData = (
  dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>,
  theme: ExtendedTheme,
  wasmContext: TSciChart,
  sciChartSurface: SciChartSurface,
  chartData: ChartData,
  chartType: string
) => {
  sciChartSurface.invalidateElement();
  const streamIds = Object.keys(chartData);
  const isLightTheme = theme.palette.type === 'light';

  if (isLightTheme) sciChartSurface.applyTheme(new SciChartJSLightTheme());
  else sciChartSurface.applyTheme(new SciChartJSDarkTheme());

  sciChartSurface.invalidateElement();
  console.log('updateChartWithData');
  console.log(chartData);

  const stackedColumns: any[] = [];
  streamIds.forEach((s) => {
    const streamId = Number(s) as keyof ChartData;
    const streamSelectorId = streamId as keyof typeof chartData;
    if (dataSeriesMap.has(streamSelectorId)) {
      const xyDataSeries = dataSeriesMap.get(streamSelectorId);
      chartData[streamId].data.forEach((value) => {
        xyDataSeries?.append(value.timestamp, value.value);
      });
    } else if (chartType === 'scatter') {
      const lineSeries = LineChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);

      sciChartSurface.renderableSeries.add(lineSeries);
      sciChartSurface.zoomExtents();
    } else if (chartType === 'bar') {
      const lineSeries = BarChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);
      sciChartSurface.renderableSeries.add(lineSeries);
      sciChartSurface.zoomExtents();
    } else {
      const lineSeries = StackedChart(dataSeriesMap, theme, wasmContext, chartData, streamSelectorId, streamId);
      stackedColumns.push(lineSeries);
    }
  });
};

“LineChart.js”

    export default (
  dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>,
  theme: ExtendedTheme,
  wasmContext: TSciChart,
  chartData: ChartData,
  streamSelectorId: keyof typeof chartData,
  streamId: keyof ChartData
) => {
  const xyDataSeries = new XyDataSeries(wasmContext);
  dataSeriesMap.set(streamSelectorId, xyDataSeries);

  const obj = chartData[streamSelectorId];
  const stroke = obj.stroke as string;
  xyDataSeries.dataSeriesName = obj.label as string;

  chartData[streamId].data.forEach((value) => {
    xyDataSeries.append(value.timestamp, value.value);
  });

  const lineSeries = new FastLineRenderableSeries(wasmContext, {
    stroke,
    strokeThickness: obj.strokeThickness,
    strokeDashArray: obj.strokeDashArray,
    dataSeries: xyDataSeries,
    animation: new WaveAnimation({ zeroLine: -1, pointDurationFraction: 0.5, duration: 1000 }),
  });

  lineSeries.rolloverModifierProps.tooltipColor = theme.palette.background.paper;
  lineSeries.rolloverModifierProps.tooltipTextColor = theme.palette.getContrastText(stroke);
  lineSeries.rolloverModifierProps.markerColor = stroke;
  lineSeries.rolloverModifierProps.tooltipTemplate = (
    id: string,
    tooltipProps: RolloverModifierRenderableSeriesProps,
    seriesInfo: SeriesInfo,
    updateSize: (width: number, height: number) => void
  ) => {
    const { tooltipColor, tooltipTextColor, markerColor } = tooltipProps;
    const { formattedXValue, yValue, seriesName } = seriesInfo;
    const width = 192;
    const height = 60;

    updateSize(width, height);
    return `<svg width='${width}' height='${height}' class="root">
        <rect width="100%" height="100%" fill='${tooltipColor}' stroke='${markerColor}' stroke-width='2' />
         <svg width='100%'>
           <text dy="0" fill='${tooltipTextColor}'>
            <tspan x="15" y="20" class="title">${formattedXValue}</tspan>
             <tspan x="15" y="45" class="value">
              ${seriesName} | ${yValue.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
             </tspan>
          </text>
        </svg>
      </svg>`;
  };
  return lineSeries;
};

lengend.js

    let _chartData: any[] = [];
export default ({
  dataSeriesMap,
  theme,
  wasmContext,
  sciChartSurface,
  chartData,
}: {
  dataSeriesMap: Map<keyof typeof chartData, XyDataSeries>;
  theme: ExtendedTheme;
  wasmContext: TSciChart;
  sciChartSurface: SciChartSurface;
  chartData: ChartData;
}) => {
  const classes = useStyles();

  const chartRef = React.useRef<any>([]);
  const [legendData, setLegendData] = React.useState<any[]>([]);

  // _chartData = [..._chartData, ...values(chartData)];
  _chartData = values(chartData);
  _chartData = uniqby(_chartData, 'groupId');
  _chartData = uniqby(_chartData, 'streamId');

  React.useEffect(() => {
    if (_chartData.length > 0 && !isEqual(chartRef.current, _chartData)) {
      setLegendData(_chartData);
      chartRef.current = _chartData;
    }
  }, [_chartData]);

  const onClick = React.useCallback(
    (item) => {
      // const xyDataSeries = dataSeriesMap.get(160);
      const _legendData = legendData.map((x) => {
        if (x.groupId === item.groupId) x.isVisible = !x.isVisible;
        return x;
      });

      setLegendData(_legendData);
    },
    [legendData]
  );

  return (
    <div className={classes.root}>
      <Paper variant="outlined" square>
        {legendData.map((item: any) => (
          <div className={classes.listItem} key={item.streamId}>
            <IconButton
              onClick={() => onClick(item)}
              style={{ color: item.stroke }}
              size="small"
              aria-label={item.label}
            >
              {item.isVisible ? <VisibilityIcon /> : <VisibilityOffIcon />}
            </IconButton>
            <div>{item.label}</div>
          </div>
        ))}
      </Paper>
    </div>
  );
};

Inside the onClick function is where I was trying to change visibility for both series. I’ve tried multiple things without any luck. I assumed it would be as simple as getting the correct series, setting the visible property and maybe a re-render if that is even needed? Like I said any advice on a better way of handling this is welcome

0 votes
415 views

Hi,

Our website is running on a web hosting service supported by the university. To work with the SciChart JS, do we have to install the npm and configure it accordingly? If so, we probably have to contact IT department for assistance, since we don’t have permission to do so.

Please advise. Thanks.

  • Gang Xu asked 4 months ago
  • last active 4 months ago
0 votes
0 answers
518 views

After moving from version: 1.4.1575 to version: 1.4.1611 we are seeing the the Cursor modifier replicating across all the charts in our dashboard. Obviously this is not desirable. I’ve attached screenshots to show this.

Please could you advise?

0 votes
816 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
876 views

Hello,

It’s possible to change the data point instead of a line, put a circle or other something else?

You can check out what I need to change on image below.

https://prnt.sc/w4rffw

Many thanks,

Pedro Cruz

  • Ricardo Diz asked 12 months ago
  • last active 11 months ago
0 votes
655 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
790 views

Hello Scichart team,

it’s possible to rotate yAxis (and put them horizontally), and adding some break lines if I have more than 1 word? Like:

https://prnt.sc/117pk6f

Waiting for feedback.

Many thanks,

Pedro Cruz

0 votes
969 views

Hi,

we have recently bought Bundle licenses to be able to use SciChart JS. We are non-profit and make in-house web-applications.
I want to migrate to it asap but need urgent clarification on the licensing. There is only 1 domain allowed per developer. This seems strange to me because we run multiple micro-UIs under different domains. We also have dev & test environments. Do we need an extra license for all of these?

Please clarify. We are very happy with SciChart but this would be a major problem for us.

0 votes
455 views

I think this question has come up before, but is it possible to render a logarithmic axis in the JS library? If not, is this on the roadmap (and when)?

1 vote
847 views

Working on an application that requires toggling between Linear and Logarithmic scales. I am using the JavaScript version of the library, and I see that there is a LogarithmicNumericAxis available in the WPF version but there is not one currently supported in the JS version.

Curious if there were any recommendations on how to go about hand rolling this type of functionality?

The application is doing realtime streaming of data points so need to be able to update existing values as well as handle incoming values.

Showing 1 - 50 of 99 results