Pre loader

uniform Heatmap and image overlay

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


Our application requires registration between visible image and heatmap data. I am able to do this with ScalableAnnotations which registers the image beautifully and is able to scale with the heatmap as shown in the video below.

unfortunately this is exactly opposite of what we need. The issue we are facing is we need the visible image to be under the heatmap and not over the heatmap. In our use case the relevant data in the heatmap is visible and rest of the data is transparent and needs to be over the visible image to colocate where the cancer is.

How do we achieve this?

  • You must to post comments


FYI, we’ve released the feature which allows to place SVG Annotations at the background layer when annotationLayer property is set to EAnnotationLayer.Background.

So consider upgrading to the scichart v3.3.586

  • You must to post comments

Dear Jim,
Great! thank you. I quickly tried the new version, but unfortunately the annotation is not scalable any more.


  • Jim Risen
    Hello, just using the same example from CodePen I was able to verify it works correctly. Let us know if you still have any issues with this?
  • You must to post comments

Hello, the reason for the behavior is that Custom Annotations are rendering their SVG content onto the internal SVG layer which is placed above the Canvas where the series are rendered.

The ability to place annotation behind the series looks like a valuable feature.
There is an appropriate task in our backlog that we likely will try to implement.
You can observe its status here –

Meanwhile, I would suggest trying out some workarounds.
You can reorder the canvas and SVG layers with a bit of extra CSS or JS code.
Here is one example of how to do it:

See the Pen
ScalableCustomAnnotation behind Canvas
by SciChart.js Official (@scichart)
on CodePen.

However, notice that this would affect all of the SVG annotations on the chart including some cursor tooltips…

Alternatively, you can stack an extra chart above or below the original one. Synchronize their visible ranges. And then separate annotation rendering with series rendering and gridlines between them.

  • You must to post comments

Thank you! the css hack is weird but i think a good temp solution.

unfortunately, we have 15-20 heatmaps open at any time which more than 200,000 points, so doubling them is not practical. It will be good to get a sense on the time on the task. seems a bit behind in the priority list. 🙂

thank you,


  • Jim Risen
    We have prioritized this task and hopefully will get some progress next week.
  • You must to post comments

Dear Jim thank you for you response.

I think i made it work for us for time being. For any one else looking for a solution here is what I did:

i have a toggle switch which changes,

  1. the position (z-index) of the svg to 0 or -1 thus sending it behind or in front (default) of the heatmap canvas.
  2. turns off all the gird lines and ticks
  3. make the background default
  4. remove the major bands

    useEffect(() => {
    if (sciChartSurfaceRef.current) {
        if (visibleImageBelowHeatmap) {
            document.getElementById( = '-1'
            document.getElementById( = '0'
            sciChartSurfaceRef.current.background = "#00000000"
            sciChartSurfaceRef.current.xAxes.get(0).drawMinorGridLines = false
            sciChartSurfaceRef.current.xAxes.get(0).drawMajorGridLines = false
            sciChartSurfaceRef.current.xAxes.get(0).drawMinorTickLines = false
            sciChartSurfaceRef.current.xAxes.get(0).drawMajorTickLines = false
            sciChartSurfaceRef.current.yAxes.get(0).drawMinorGridLines = false
            sciChartSurfaceRef.current.yAxes.get(0).drawMajorGridLines = false
            sciChartSurfaceRef.current.yAxes.get(0).drawMinorTickLines = false
            sciChartSurfaceRef.current.yAxes.get(0).drawMajorTickLines = false
            sciChartSurfaceRef.current.xAxes.get(0).drawMajorBands = false
            sciChartSurfaceRef.current.yAxes.get(0).drawMajorBands = false
        } else {
            document.getElementById( = '0'
            document.getElementById( = '0'
            sciChartSurfaceRef.current.background = "radial-gradient(circle, #3C3C3FFF 0%, #1C1C1EFF 100%)"
            sciChartSurfaceRef.current.xAxes.get(0).drawMinorGridLines = true
            sciChartSurfaceRef.current.xAxes.get(0).drawMajorGridLines = true
            sciChartSurfaceRef.current.xAxes.get(0).drawMinorTickLines = true
            sciChartSurfaceRef.current.xAxes.get(0).drawMajorTickLines = true
            sciChartSurfaceRef.current.yAxes.get(0).drawMinorGridLines = true
            sciChartSurfaceRef.current.yAxes.get(0).drawMajorGridLines = true
            sciChartSurfaceRef.current.yAxes.get(0).drawMinorTickLines = true
            sciChartSurfaceRef.current.yAxes.get(0).drawMajorTickLines = true
            sciChartSurfaceRef.current.xAxes.get(0).drawMajorBands = true
            sciChartSurfaceRef.current.yAxes.get(0).drawMajorBands = true

    }, [visibleImageBelowHeatmap])

and the just reverse the changes.


  • You must to post comments
Showing 5 results
Your Answer

Please first to submit.