Pre loader

Tag: waterfall

0 votes

I am trying to implement a waterfall chart with uniform heatmap. The data is updated from the top of the chart and keeps pushing the old data down. I would like to show the y-axis with time. How can I update the y-axis with updated data?

Assume the heatmap is 256 height, I created the zValues array with min value when draw the heatmap:

const minPower = -200;
spectrogramZValues.current = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(minPower));

Update zValues array when new data come:


When the first data pushed to the chart. There will be one row shown in the axis with timestamp t1. When the second data comes, the top row of the y-axis should be t2 and the t1 is pushed down. When the waterfall chart is filled with 256 data, the bottom of the y-axis should be t1 and the top of the y-axis should be t256. Is it possible to implement this?

Now I am using the uniform heatmap to implement it with yStart=0 and yStep=1. I tried to add the labelProvider to the y-axis to show the timestamp of each row. I am keeping an array locally to store the timestamp of each row which will be updated with the new data. I tried to map this array and return the timestamp in the y-axis labelProvider. But it doesn’t work. The y-axis will not be refreshed when data updated.

        yAxis.labelProvider.formatLabel = (dataValue) => {
        const ts = timestampArray[dataValue];
        if (ts) {
            const timeObj = new Date(ts);
            const hours = ('0' + timeObj.getHours()).slice(-2);
            const minutes = ('0' + timeObj.getMinutes()).slice(-2);
            const seconds = ('0' + timeObj.getSeconds()).slice(-2);
            const milliseconds = ('0' + timeObj.getMilliseconds()).slice(-3);
            return `${hours}:${minutes}:${seconds}.${milliseconds}`;
        } else {
            return "";
  • Quyen Sy asked 2 weeks ago
  • last active 3 days ago
0 votes
0 answers

I am implementing a waterfall chart with non-uniforma heatmap. I found that the live update doesn’t work. I keep updating the zValues with live data but the chart just show 1 row of data. If I resize the chart (my heatmap is inside a resizable container), I can see the updated data (i.e. Each time I resize the chart, the chart updated and show updated data). Do you have any example of live updated non-uniform heatmap? Below are my codes:

Draw the heatmap:


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

const xAxis = new NumericAxis(wasmContext, {
    axisTitle: "Frequency",
    axisTitleStyle: {
        fontFamily: "sans-serif",
        fontWeight: "bold"
    labelStyle: {
        fontFamily: "sans-serif"
    labelFormat: ENumericFormat.Decimal,
    labelPrecision: 6,
    cursorLabelFormat: ENumericFormat.Decimal,
    cursorLabelPrecision: 6,
    drawMajorBands: false,

const yAxis = new NumericAxis(wasmContext, {
    axisTitle: "Time",
    axisTitleStyle: {
        fontFamily: "sans-serif",
        fontWeight: "bold"
    labelStyle: {
        fontFamily: "sans-serif"
    drawMajorBands: false,

// Add XAxis and YAxis

const colorMap = new HeatmapColorMap({
    minimum: -200,
    maximum: -50,
    gradientStops: [
    { offset: 0, color: "Transparent" },
    { offset: 0.01, color: COLORS.DARK_BLUE },
    { offset: 0.4, color: COLORS.BLUE },
    { offset: 0.5, color: COLORS.GREEN },
    { offset: 0.6, color: COLORS.YELLOW },
    { offset: 0.8, color: COLORS.RED },
    { offset: 1, color: COLORS.DARK_RED },

// Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
zValues = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(-200));

const heatmapSeries = new NonUniformHeatmapRenderableSeries(wasmContext, {
    dataSeries: new NonUniformHeatmapDataSeries(wasmContext, { zValues: zValues, xCellOffsets: getHeatmapXOffset, yCellOffsets: getHeatmapYOffset }),
    colorMap: colorMap,
    useLinearTextureFiltering: true,
    fillValuesOutOfRange: true,

// Add heatmap to the chart

I simply return the index for testing in the getHeatmapXOffset and getHeatmapYOffset functions:

    const getHeatmapXOffset = (index) => {
    return index;

const getHeatmapYOffset = (index) => {
    return index;

Reset zValues when number of data point changed:

        spectrogramZValues = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(newWidth).fill(-200));

Update the zValues array when there is new data (I tried to add call zoomExtens() after notifyDataChanged but still didn’t work):

  • Quyen Sy asked 2 weeks ago
  • last active 2 weeks ago
0 votes


I’ve the following problem.

We have an application where we have many spectrums (frequency or order spectrums). To get a better overview and to select one for a more detailed analysis, we would like to display them as a waterfall chart. A spectrum always has a high resolution of 32768 points. If I now display between 60 and 100 spectrums in a waterfall chart, it takes quite a long time to render this and it is almost impossible to operate the chart.

However, a high-resolution spectrum is not required for a good overview in the waterfall diagram. Therefore my idea is to resample every single spectrum to e.g. 8192 points and then display it in the waterfall diagram.

Is there a possibility to use the internal SciChart resampler (e.g. Min/Max) or do I have to develop an own algorithm for this?

Or does a similar function already exist in SciChart?


0 votes


I have 2 charts, a 2D Heatmap and a 3D Waterfall chart, and I want to be able to programmatically change their color palettes.

The 2D heatmap is set up like this, with the GradientStops bound to an ObservableCollection:

<s:HeatmapColorPalette x:Key="HeatmapColorPalette" Maximum="{Binding MaxValue,Mode=TwoWay}"  GradientStops="{Binding ColorPalette}"/>
        DataSeries="{Binding Data}"
        ColorMap="{StaticResource HeatmapColorPalette}">

This works as expected. When the binding changes the palette/heatmap changes.

The 3D waterfall is set up the similarly:

<s3D:GradientColorPalette x:Key="GradientColorPalette" IsStepped="False"  GradientStops="{Binding ColorPalette}" />
        DataSeries="{Binding Data3D}"
        YColorMapping="{StaticResource GradientColorPalette}"

This, when passed the same data, doesn’t render the chart.
This chart otherwise works fine if I define the GradientStops statically in the XAML.

This is the GradientStops definition (in f#):

let BlueRed = 
        new ObservableCollection<GradientStop>([
            new GradientStop(Color.FromRgb(0x00uy,0x00uy,0xFFuy),0.0)
            new GradientStop(Color.FromRgb(0xFFuy,0x00uy,0x00uy),1.0)

I am not sure what I am missing.

(edit: apologies for formatting issues in the question)

0 votes
0 answers


I use GradientColorPalette to set the color mapping of Y axis in Waterfall 3D Chart.
I want to fix the color to certain fixed min/max level, e.g. red when y value >= 100, green when y value < -100.
Currently, it seems that color is auto scale to current min/max y value in waterfall.
I try setting VisibleRange of YAxis, but it has no effect on color mapping.

In case of SurfaceMeshRenderableSeries3D, there are Minimum and Maximum properties.
In case of FastUniformHeatmapRenderableSeries, there are Minimum and Maximum properties in HeatmapColorPalette.
Are there any similar min/max properties to use for Waterfall 3D Chart?

Looking up the documentation, I still cannot find the suitable properties to use.
Is there any way to do the min/max color mapping for waterfall chart?

Best regards

Showing 5 results

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies