get color information at the clicked pixel on uniformheatmap

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(
    "chart"
  );

  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,
    gradientStops
  });

  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,
    dataSeries,
    colorMap
  });

  sciChartSurface.renderableSeries.add(heatmapSeries);

  // add functionality to log cell color on click

  const colorData = createColorMap(gradientStops, precision);

  sciChartSurface.chartModifiers.add(
    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 {
      super.modifierMouseDown(args);

      if (!args.mousePoint) {
        return;
      }

      const { x, y } = args.mousePoint;

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

      if (!hitTestInfo.isEmpty) {
        const colorHex = getCellColor(
          hitTestInfo.zValue,
          colorData,
          colorMap.minimum,
          colorMap.maximum,
          heatmapSeries.fillValuesOutOfRange,
          wasmContext
        );

        // 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
Andrew