Pre loader

get color information at the clicked pixel on uniformheatmap

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


Hi I have an application where I would like to get the color information of the the pixel clicked on the uniformheatmap.

I am of course able to get the value, x, y using the hitTestProvider.hitTest but it does not contain any additional information regarding the color of the clicked pixel

Any help of direction is appreciated.


  • Andrew Burnett-Thompson
    Hi Pramod, we believe this should be quite simple using a combination of Hit-Test API and conversion of the zValue using the ColorMap. One of our team is working on an example now. Quick question for you: Do you want the exact pixel colour (which may be affected by any transparency in the scene) or the colour which corresponds to the Z-Value in the heatmap cell?
  • You must to post comments
Best Answer

Hi, good morning Pramod,

Our team took a look at this yesterday.

As you correctly identified, using the Hit-Test API will allow you to get the X,Y location (coordinate) and data values as well as the Heatmap cell (z) value on click.

Next, to convert that into a colour:

We convert from Heatmap zValue to colour when drawing, so we extracted some of the code of those functions into a stand alone example to do the same lookup. Note we are going to expose some of these functions from the library instead because conversion to/from zValue and colour should be as simple as a function call.

Here’s a full working example on Code Sandbox.

Breaking this down

First we setup the chart with X,Y axis and a heatmap with some data

const initSciChart = async () => {
  SciChartDefaults.performanceWarnings = false;

  const { wasmContext, sciChartSurface } = await SciChartSurface.create(

  sciChartSurface.xAxes.add(new NumericAxis(wasmContext, {}));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext, {}));

  const gradientStops = [
    { offset: 0, color: "yellow" },
    { offset: 1, color: "red" }
  const colorMap = new HeatmapColorMap({
    minimum: 0,
    maximum: 3,

  const initialZValues = [
    [NaN, NaN, 1, 2],
    [0, 1, 2, 3]

  const dataSeries = new UniformHeatmapDataSeries(wasmContext, {
    xStart: 0,
    xStep: 1,
    yStart: 3,
    yStep: 1,
    zValues: initialZValues
  dataSeries.hasNaNs = true;

  const heatmapSeries = new UniformHeatmapRenderableSeries(wasmContext, {
    // opacity: 0.5,


  // add functionality to log cell color on click

  const colorData = createColorMap(gradientStops, precision);

    new MouseWheelZoomModifier(),
    new ZoomPanModifier(),
    new ZoomExtentsModifier()

Next, we create a Custom Modifier to do the hit-test operation. This is better than subscribing to mouse-down and is the preferred way to interact with the chart via mouse operations. See the Custom Chartmodifier API for details

  class CustomModifier extends CustomChartModifier2D {
    public modifierMouseDown(args: ModifierMouseArgs): void {

      if (!args.mousePoint) {

      const { x, y } = args.mousePoint;

      const hitTestInfo = heatmapSeries.hitTestProvider.hitTestXSlice(x, y);

      if (!hitTestInfo.isEmpty) {
        const colorHex = getCellColor(

        // here we got the heatmap cell color representation in hex
        console.log("color", colorHex.toString(16));

The modifier is added to the SciChartSurface like any other modifier

  sciChartSurface.chartModifiers.add(new CustomModifier());

It calls a Hit-Test function to get the HitTestInfo which reports back on the X,Y and Z (cell) value of the heatmap.

Finally we call a function getCellColor() to convert from zValue using the colormap into the colour code.

The function getCellColor is included in the CodeSandbox. I won’t repeat it here for brevity. We will include this in the library in future versions.

Let me know if this helps!

Best regards

  • You must to post comments

Dear Andrew thank you for a quick response.

We have a heatmap overlayed on an image. Think medical image where the “detected” image is overlayed on visible image. That being said, I think given that the alpha can be part of colormap itself. I think getting the RGB value from the colorMap is a good idea and is that something Scichart API allows? There is one caveat, we change the max and min of the heatmap very frequently this changing the default value from the gradient. (please see attached image / videp)

In the past I have use library like “Chroma.js” to get the color value.

I have attached a video of our use case, we also change colormaps frequently.

Again thank you for your prompt response.



  • Andrew Burnett-Thompson
    Hi Pramod, the video link is showing as unavailable. Did you mean to set it to public or unlisted? The SciChartSurface is drawn to a canvas. You can get the canvas via SciChartSurface.domCanvasWebGL. After that, you can use getImageData() to read back pixels and get the x,y final colour value from the chart itself. See for more details. Let us know if you need further help on this.
  • You must to post comments

We just need color information from the heatmap, and do not care about transparency. the application takes the information from a clicked pixel and tries to paint the data collected at the pixel with the color of the pixel. I have attached a small video demonstrating the use case.

P.S I posted a comment before but it disappeared!

  • You must to post comments

Hi Andrew,

I have 2 questions not sure if I should create a new topic,

  1. I have been working with uniform heatmap and I need a way to fix the aspect ratio to 1, for all resize, zoom events, is there an option in heatmap to fix an aspect ration? Please see the attached video

  2. I am also adding a customAnnotation with drawn SVG, but even when the xcoordinateMode is set to data, the SVG does not zoom in or out with the plot,
    new CustomAnnotation({
    id: "lassoSVG",
    x1: svgStart.x,
    y1: svgStart.y,
    isEditable: true,
    yCoordinateMode: ECoordinateMode.DataValue,
    xCoordinateMode: ECoordinateMode.DataValue,
    verticalAnchorPoint: EVerticalAnchorPoint.Top,
    svgString: new XMLSerializer().serializeToString(svg.node())



  • You must to post comments
Showing 4 results
Your Answer

Please first to submit.