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?
- Quyen Sy asked 1 year ago
- last edited 1 year ago
- You must login 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
Andrew
- Andrew Burnett-Thompson answered 1 year ago
- last edited 1 year ago
-
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?
-
Let me have a good. This is a good use-case to try out
-
Hi Quyen, I was able to get this to work. Actually I may have answered another one of your questions. Check out this codepen https://codepen.io/scichart/pen/vYzjjpQ
-
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.
-
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 login to post comments
Please login first to submit.