Pre loader

Problem to update the heatmap legend colorMap when yAxis range changed

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


I have a color heatmap legend that need to update the yAxis range on the fly. The colorMap doesn’t update as expected. Here’s my codes to update the y axis and colorMap min/max of the heatmap legend:

const newRange = new NumberRange(newMin, newMax);
const yAxis = heatmapLegendRef.current.sciChartSurface.yAxes.items[0];
yAxis.majorDelta = newScale;
yAxis.minorDelta = newScale / 5;        
yAxis.visibleRange = newRange;
yAxis.visibleRangeLimit = newRange;
yAxis.zoomExtentsRange = newRange;

colorMapRef.current.minimum = newMin;
colorMapRef.current.maximum = newMax;
heatmapLegendRef.current.colorMap = colorMapRef.current;

The y axis range has been updated. But the colorMap didn’t. It seems that the colorMap of the heatmap legend cannot be changed. Is it true that I can only recreate the heatmap legend if I want to change the colorMap?

  • Quyen Sy
    I think the problem is that it can’t change the colorMap.mininum and colorMap.maxinum. I tried to open your example in CodePen and modified the codes to change colorMap.mininum and colorMap.maxinum by clicking on a button. It doesn’t work for me.
  • Andrew Burnett-Thompson
    Thanks for that – found the problem. Will post
  • pramod butte
    I also have the exact same problem…. did you find the solution?
  • Andrew Burnett-Thompson
    I was looking at this the other day. The problem is we’re not setup for changes to min max of colorMap however I can provide a workaround for you both. Give me a day or so and will post something
  • Andrew Burnett-Thompson
    @Pramod – check the question as I have now provided a full answer

OK i managed to get this working.

Bear in mind we haven’t considered this case of user dynamically updating HeatmapLegend and ColorMap min, max so this is a workaround. We will look at the library and see how we can handle some of these functions internally

Take a look at the codepen here.

This is the important part.

function forceRecreateHeatmapLegend(heatmapLegend, colorMap) {
  // The following is a workaround to force recalculation of colormap min, max
  // after changing properties.
  // TODO: Scichart team to review internally and see how we can expose ways
  //       to update both

  console.log(`forceRecreateHeatmapLegend(): ${colorMap.minimum}, ${colorMap.maximum}`);

  // This is the SciChartSurface on HeatmapLegend.innerSciChartSurface
  const legendSurface = heatmapLegendRef.innerSciChartSurface.sciChartSurface;
  legendSurface.yAxes.get(0).visibleRange = new NumberRange(colorMap.minimum, colorMap.maximum);

  // This is the heatmap series used on HeatmapLegend
  const legendSeries = legendSurface.renderableSeries.get(0);

  // Update its yStart, yStep, and zValues
  // TODO: SciChart Team to expose a function on heatmapLegend to update min, max
  legendSeries.dataSeries.yStart = colorMap.minimum;
  legendSeries.dataSeries.yStep = (colorMap.maximum - colorMap.minimum) / 100;
  legendSeries.dataSeries.setZValues(heatmapLegendRef.getZValues(colorMap.minimum, colorMap.maximum));
  legendSeries.colorMap = colorMap;

function changeColorMapRange() {
    colorMap.minimum = 50;
    colorMap.maximum = 250;
    colorMap.gradientStops = [
        { offset: 1, color: "Red" },
        { offset: 0.1, color: "Green" },
        { offset: 0, color: "Transparent" },

    // Workaround: Force recalculation of HeatmapLegend and Colormap max, min
    forceRecreateHeatmapLegend(heatmapLegendRef, colorMap);

    sciChartSurfaceRef.yAxes.items[0].visibleRange = new NumberRange(50, 250);

Changing the colorMap.gradientStops is fine because internally we react to that and update the legend which shares the same colorMap instance to the main chart heatmap series.

However, we don’t react to changing colorMap.minimum and colorMap.maximum. This requires recalculation of the heatmap legend which I’ve done above in the forceRecreateHeatmapLegend function.

The HeatmapLegend is composed of a SciChartSurface with X,Y axis and one UniformHeatmapRenderableSeries which renders the legend itself. So inside the forceRecreateHeatmapLegend function we access this series and update properties to force the rescale.

Anyway if you let me know what are the complete set of requirements you need then I can log a task to review this and ensure we handle them.

Best regards,

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.