uniform Heatmap and image overlay

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,

Pramod

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) {
           console.log(document.getElementById(sciChartSurfaceRef.current))
           document.getElementById(sciChartSurfaceRef.current.domSvgContainer.id).style.zIndex = '-1'
           document.getElementById(sciChartSurfaceRef.current.domCanvas2D.id).style.zIndex = '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(sciChartSurfaceRef.current.domSvgContainer.id).style.zIndex = '0'
           document.getElementById(sciChartSurfaceRef.current.domCanvas2D.id).style.zIndex = '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.

video

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 – https://abtsoftware.myjetbrains.com/youtrack/issue/SCJS-1507

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.