# How to Show Axes in ParaViewWeb Similar to ParaView Application?

**URL:** https://discourse.paraview.org/t/how-to-show-axes-in-paraviewweb-similar-to-paraview-application/15045
**Category:** Web Support
**Created:** [July 12, 2024, 11:42am UTC](https://discourse.paraview.org/t/how-to-show-axes-in-paraviewweb-similar-to-paraview-application/15045 "2024-07-12T11:42:47Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Godric](https://discourse.paraview.org/user_avatar/discourse.paraview.org/godric/32/15792_2.png) [@Godric](https://discourse.paraview.org/u/Godric)
#### Post date: [July 12, 2024, 11:42am UTC](https://discourse.paraview.org/t/how-to-show-axes-in-paraviewweb-similar-to-paraview-application/15045/1 "2024-07-12T11:42:47Z")

</div>

Hello everyone,

I’m using ParaViewWeb with React and JavaScript. I want to display axes. I would like to know if it’s possible to show the axes. If yes, could you please guide me on how to do it? Below is the code I am using.

```auto
function VTKViewer() {
  const vtkContainerRef = useRef(null);
  const context = useRef(null);
  const [representation, setRepresentation] = useState(2);

  useEffect(() => {
    if (!context.current) {
      const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
        rootContainer: vtkContainerRef.current,
      });

      const reader = vtkXMLPolyDataReader.newInstance();

      reader
        .setUrl("assets/file089_state1.vtp", { loadData: true })
        .then(() => {
          const output = reader.getOutputData(0);
          const scalars = output.getPointData().getScalars();
          const dataRange = [].concat(scalars ? scalars.getRange() : [0, 1]);

          let activeArray = vtkDataArray;
          const location = "PointData";
          const colorByArrayName = "S";
          const newArray =
            output[`get${location}`]().getArrayByName(colorByArrayName);
          activeArray = newArray;
          const newDataRange = activeArray.getRange();
          dataRange[0] = newDataRange[0];
          dataRange[1] = newDataRange[1];

          const lookupTable = vtkColorTransferFunction.newInstance();
          lookupTable.setMappingRange(dataRange[0], dataRange[1]);
          lookupTable.updateRange();

          const mapper = vtkMapper.newInstance();
          mapper.set({
            colorByArrayName,
            colorMode: ColorMode.MAP_SCALARS,
            interpolateScalarsBeforeMapping: false,
            scalarMode: ScalarMode.USE_POINT_FIELD_DATA,
            scalarVisibility: true,
          });

          mapper.setInputData(output);

          let lut = mapper.getLookupTable();
          lut.setRange(dataRange[0], dataRange[1]);
          lut.setVectorModeToMagnitude();

          const actor = vtkActor.newInstance();
          actor.setMapper(mapper);

          const scalarBarActor = vtkScalarBarActor.newInstance();
          const scalarBarActor = vtkScalarBarActor.newInstance();
		scalarBarActor.setScalarsToColors(lookupTable);
		scalarBarActor.setDrawNanAnnotation(false);
		scalarBarActor.setAxisLabel("Von Mises Stress (MPa)");
		scalarBarActor.setVisibility(true);
		scalarBarActor.setAxisTextStyle({
		  fontColor: "black",
		  fontFamily: "Arial",
		});
		scalarBarActor.setTickTextStyle({
		  fontColor: "blue",
		  fontFamily: "Arial",
		});

          const renderer = fullScreenRenderer.getRenderer();
          const renderWindow = fullScreenRenderer.getRenderWindow();

          renderer.addActor(scalarBarActor);
          renderer.addActor(actor);
          renderer.resetCamera();
          renderWindow.render();

          context.current = {
            fullScreenRenderer,
            renderWindow,
            renderer,
            actor,
            mapper,
          };
        });
    }

    return () => {
      if (context.current) {
        const { fullScreenRenderer, actor, mapper } = context.current;
        actor.delete();
        mapper.delete();
        fullScreenRenderer.delete();
        context.current = null;
      }
    };
  }, [vtkContainerRef]);

  useEffect(() => {
    if (context.current) {
      const { actor, renderWindow } = context.current;
      actor.getProperty().setRepresentation(representation);
      renderWindow.render();
    }
  }, [representation]);

  return (
    <div>
      <div ref={vtkContainerRef} />
      <table
        style={{
          position: "absolute",
          top: "25px",
          left: "25px",
          background: "white",
          padding: "12px",
        }}
      >
        <tbody>
          <tr>
            <td>
              <select
                value={representation}
                style={{ width: "100%" }}
                onChange={(ev) => setRepresentation(Number(ev.target.value))}
              >
                <option value="0">Points</option>
                <option value="1">Wireframe</option>
                <option value="2">Surface</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}

```

---

<div class="post-metadata">

### Author: ![jourdain](https://discourse.paraview.org/user_avatar/discourse.paraview.org/jourdain/32/11_2.png) [@jourdain](https://discourse.paraview.org/u/jourdain)
#### Post date: [August 6, 2024, 4:32pm UTC](https://discourse.paraview.org/t/how-to-show-axes-in-paraviewweb-similar-to-paraview-application/15045/2 "2024-08-06T16:32:24Z")

</div>

Are you talking about [that](https://kitware.github.io/vtk-js/examples/InteractiveOrientationWidget.html) or [that](https://kitware.github.io/vtk-js/examples/CubeAxes.html)?

---

<div class="post-metadata">

### Author: ![Godric](https://discourse.paraview.org/user_avatar/discourse.paraview.org/godric/32/15792_2.png) [@Godric](https://discourse.paraview.org/u/Godric)
#### Post date: [August 7, 2024, 5:35am UTC](https://discourse.paraview.org/t/how-to-show-axes-in-paraviewweb-similar-to-paraview-application/15045/3 "2024-08-07T05:35:46Z")

</div>

I’m currently using the InteractiveOrientationWidget in vtk.js and I’m trying to find a way to label the axes. I’ve been searching for resources on this topic but haven’t found any so far. Any guidance or suggestions would be greatly appreciated

---

<div class="post-metadata">

### Author: ![jourdain](https://discourse.paraview.org/user_avatar/discourse.paraview.org/jourdain/32/11_2.png) [@jourdain](https://discourse.paraview.org/u/jourdain)
#### Post date: [August 7, 2024, 4:07pm UTC](https://discourse.paraview.org/t/how-to-show-axes-in-paraviewweb-similar-to-paraview-application/15045/4 "2024-08-07T16:07:52Z")

</div>

Labels are not supported right now in vtk.js.