# the mapping between the scalar values and the color representation is not occurring.

**URL:** https://discourse.vtk.org/t/the-mapping-between-the-scalar-values-and-the-color-representation-is-not-occurring/15443
**Category:** Web
**Tags:** vtkjs
**Created:** [March 30, 2025, 8:54am UTC](https://discourse.vtk.org/t/the-mapping-between-the-scalar-values-and-the-color-representation-is-not-occurring/15443 "2025-03-30T08:54:48Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Harikrushnadodiya](https://discourse.vtk.org/user_avatar/discourse.vtk.org/harikrushnadodiya/32/9892_2.png) [@Harikrushnadodiya](https://discourse.vtk.org/u/Harikrushnadodiya)
#### Post date: [March 30, 2025, 8:54am UTC](https://discourse.vtk.org/t/the-mapping-between-the-scalar-values-and-the-color-representation-is-not-occurring/15443/1 "2025-03-30T08:54:48Z")

</div>

I am new to this library. I have .vtp file containing more than one scalar fields. Additionally, the code visualizes a 3D file, and the scalar bar updates based on the .vtp file’s scalar values. It is working fine.

Problem: The 3D color contour plot is not visible; the mapping between the scalar values and the color representation is not occurring. **It shows simple gray model.** I require assistance in resolving this issue.

import React, { useEffect, useRef } from ‘react’;  
import ‘@kitware/vtk.js/favicon’;  
import ‘@kitware/vtk.js/Rendering/Profiles/Geometry’;  
import ‘@kitware/vtk.js/Rendering/Profiles/Glyph’;  
import vtkFullScreenRenderWindow from ‘@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow’;  
import vtkXMLPolyDataReader from ‘@kitware/vtk.js/IO/XML/XMLPolyDataReader’;  
import vtkActor from ‘@kitware/vtk.js/Rendering/Core/Actor’;  
import vtkLookupTable from ‘@kitware/vtk.js/Common/Core/LookupTable’;  
import vtkMapper from ‘@kitware/vtk.js/Rendering/Core/Mapper’;  
import vtkScalarBarActor from ‘@kitware/vtk.js/Rendering/Core/ScalarBarActor’;

const { ColorMode, ScalarMode } = vtkMapper;

function App() {  
const containerRef = useRef(null);

useEffect(() =\> {  
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({  
background: [0.9, 0.9, 0.9],  
rootContainer: containerRef.current,  
});  
const renderer = fullScreenRenderer.getRenderer();  
const renderWindow = fullScreenRenderer.getRenderWindow();

```
const lookupTable = vtkLookupTable.newInstance({ hueRange: [0.666, 0] });
const reader = vtkXMLPolyDataReader.newInstance();

reader.setUrl('/file.vtp', { loadData: true }).then(() => {
  const data = reader.getOutputData();
  const pointData = data.getPointData();
  const displacementArray = pointData.getArrayByName('displacement_1.s');

  if (!displacementArray) {
    console.error('Scalar array "displacement_1.s" not found in file.vtp');
    return;
  }

  const scalarRange = displacementArray.getRange();
  console.log("Scalar Range:", scalarRange);

  lookupTable.setMappingRange(scalarRange);
  lookupTable.build();

  const mapper = vtkMapper.newInstance({
    interpolateScalarsBeforeMapping: true,
    colorMode: ColorMode.MAP_SCALARS,
    scalarMode: ScalarMode.USE_POINT_FIELD_DATA,
    scalarVisibility: true, // Correct place to set scalar visibility
    scalarRange: scalarRange,
    useLookupTableScalarRange: false,
    lookupTable,
    scalarMaterialMode: 1,
  });

  const actor = vtkActor.newInstance();
  actor.getProperty().setEdgeVisibility(false);

  const scalarBarActor = vtkScalarBarActor.newInstance();
  scalarBarActor.setScalarsToColors(lookupTable);
  renderer.addActor(scalarBarActor);

  mapper.setInputConnection(reader.getOutputPort());
  actor.setMapper(mapper);
  renderer.addActor(actor);

  renderer.resetCamera();
  renderWindow.render();

  return () => {
    fullScreenRenderer.delete();
    reader.delete();
  };
}).catch((error) => {
  console.error('Error loading file.vtp:', error);
});

```

}, );

return (  
\<div ref={containerRef} style={{ width: ‘100%’, height: ‘80vh’ }} /\>  
);  
}

export default App;

---

<div class="post-metadata">

### Author: ![finetjul](https://discourse.vtk.org/user_avatar/discourse.vtk.org/finetjul/32/154_2.png) [@finetjul](https://discourse.vtk.org/u/finetjul)
#### Post date: [March 30, 2025, 9:35am UTC](https://discourse.vtk.org/t/the-mapping-between-the-scalar-values-and-the-color-representation-is-not-occurring/15443/2 "2025-03-30T09:35:23Z")

</div>

Did you try your VTP with the [GeometryViewer](https://kitware.github.io/vtk-js/examples/GeometryViewer.html) example ?  
If it works you can look at the code of the example.

HTH,  
Julien.