Pre loader

Tag: zValues

1 vote

I am implementing a heatmap. The data size of the heatmap would be changed. I update the UniformHeatmapDataSeries with the updated zValues according to this post.

There is no problem if I update the UniformHeatmapDataSeries with a larger size zValues array. However, when I update it with a smaller size zValues array, the heatmap width will be decrease (Please refer to my screenshots). How can I keep the heatmap always 100% width?

  • Quyen Sy asked 3 weeks ago
  • last active 3 weeks ago
1 vote

I am implementing a heatmap. The data size of the heatmap would be changed. When the data size changed, I will replace the zValues of the UniformHeatmapDataSeries with an updated array. But it doesn’t work for me. The heatmap data cannot be plotted after I updated the zValues array. Below are my codes to create the heatmap and update the zValues array.

Draw heatmap:

    const { sciChartSurface, wasmContext } = await SciChartSurface.create("spectrogram-chart-root");
    let xAxisNumberRange = new NumberRange(minFreq/maxFreq);

    spectrogram_xAxis.current = new NumericAxis(wasmContext, {
        axisTitle: "Frequency",
        axisTitleStyle: {
            fontSize: CHART_STYLE.AXIS_FONT_SIZE,
            fontFamily: "sans-serif",
            fontWeight: "bold"
        labelStyle: {
            fontSize: CHART_STYLE.LABEL_FONT_SIZE,
            fontFamily: "sans-serif"
        visibleRange: xAxisNumberRange,
        visibleRangeLimit: xAxisNumberRange,
        zoomExtentsRange: xAxisNumberRange,
        labelFormat: ENumericFormat.Decimal,
        labelPrecision: 2,
        cursorLabelFormat: ENumericFormat.Decimal,
        cursorLabelPrecision: 2,
        drawMajorBands: false,

    // Add XAxis and YAxis
    sciChartSurface.yAxes.add(new NumericAxis(wasmContext, { isVisible: false }));

    // Create a Heatmap Data-series. Pass heatValues as a number[][] to the UniformHeatmapDataSeries
    spectrogramZValues.current = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(SPECTROGRAM_WIDTH).fill(-200));
    heatmapDataSeries.current = new UniformHeatmapDataSeries(wasmContext, {
        xStart: 0,
        xStep: 1,
        yStart: 0,
        yStep: 1,
        zValues: spectrogramZValues.current

    colorMap.current = new HeatmapColorMap({
        minimum: -200,
        maximum: -50,
        gradientStops: gradientStopsArr.current

    // Create a Heatmap RenderableSeries with the color map. ColorMap.minimum/maximum defines the values in
    // HeatmapDataSeries which correspond to gradient stops at 0..1
    const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
        dataSeries: heatmapDataSeries.current,
        useLinearTextureFiltering: true,
        isSorted: true, 
        isEvenlySpaced: true, 
        containsNaN: false,
        colorMap: colorMap.current

    // Add heatmap to the chart

Update heatmap data:

        // Update the chart x-axis
        if (xAxisUpdateRequired) {
            let xAxisNumberRange = new NumberRange(newStartFreq, newStopFreq);
            spectrogram_xAxis.current.visibleRange = xAxisNumberRange;
            spectrogram_xAxis.current.visibleRangeLimit = xAxisNumberRange;
            spectrogram_xAxis.current.zoomExtentsRange = xAxisNumberRange;  

            // Reset the heatmap zValues
            spectrogramZValues.current = Array.from(Array(SPECTROGRAM_HEIGHT), () => Array(newSampleSize).fill(-200));
        // Update heatmap data
  • Quyen Sy asked 4 weeks ago
  • last active 4 weeks ago
Showing 2 results

Try SciChart Today

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

Start TrialCase Studies