Pre loader

How can I modify the colorMap.gradientStops of the heatmap series and the heatmap legend while the chart is running?

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 am trying to add an axis annotation to a heatmap legend. When this annotation is dragged, the color mapping of the heatmap series and the heatmap legend will be changed. How can I modify the colorMap.gradientStops of the heatmap series and the heatmap legend while the chart is running?

  • You must to post comments

Hi Quyen

Does updating the HeatmapColorMap.gradientStops property not trigger a redraw of the chart?

Note you will need to update the entire gradientstops property, not the numbers/colors within it, so code like this:

const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
    dataSeries: heatmapDataSeries,
    colorMap: new HeatmapColorMap({
    minimum: 0,
    maximum: 200,
    gradientStops: [
        { offset: 1, color: "#EC0F6C" },
        { offset: 0.9, color: "#F48420" },
        { offset: 0.7, color: "#DC7969" },
        { offset: 0.5, color: "#67BDAF" },
        { offset: 0.3, color: "#50C7E0" },
        { offset: 0.2, color: "#264B9377" },
        { offset: 0, color: "Transparent" },
// update heatmap colormap
heatmapSeries.colorMap.gradientStops = [  
    { offset: 1, color: "Red" },  
    { offset: 0, color: "Green" } 

Alternatively, you can also try replacing the entire HeatmapColorMap if you change other properties, e.g.

heatmapSeries.colorMap = new HeatmapColorMap({ ... options });

Let me know if it helps.

Best regards

  • Quyen Sy
    Hi Andrew, I tried to update the heatmapSeries.colorMap.gradientStops or heatmapSeries.colorMap. But it didn’t trigger the redraw of the heatmap chart. Any suggestion on how to force the heatmap redraw in this case?
  • Andrew Burnett-Thompson
    Let me have a good. This is a good use-case to try out
  • Andrew Burnett-Thompson
    Hi Quyen, I was able to get this to work. Actually I may have answered another one of your questions. Check out this codepen
  • Quyen Sy
    Thank Andrew! I tried to save the gradientsStops value as an array and tried to update the colorMap.gradientsStops with the updated array inside the onDrag event handler. But it doesn’t work in this way. I modified the codes to create a new array for the graditensStops in onDrag event handler, then it works.
  • Andrew Burnett-Thompson
    yes we’re not listening to changes on gradientStops[i].color or offset, but we are listening for changes to the HeatmapColorMap.gradientStops property, or the entire UniformHeatmapRenderableSeries.colorMap property
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.