# How to change the position of scalar bar on VTK.js

**URL:** https://discourse.vtk.org/t/how-to-change-the-position-of-scalar-bar-on-vtk-js/13082
**Category:** vtk.js
**Tags:** python, code, vtkjs
**Created:** [January 16, 2024, 3:55pm UTC](https://discourse.vtk.org/t/how-to-change-the-position-of-scalar-bar-on-vtk-js/13082 "2024-01-16T15:55:44Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Ossama\_Elbelamachi](https://discourse.vtk.org/user_avatar/discourse.vtk.org/ossama_elbelamachi/32/8074_2.png) [@Ossama\_Elbelamachi](https://discourse.vtk.org/u/Ossama_Elbelamachi)
#### Post date: [January 16, 2024, 3:55pm UTC](https://discourse.vtk.org/t/how-to-change-the-position-of-scalar-bar-on-vtk-js/13082/1 "2024-01-16T15:55:44Z")

</div>

Hello Everyone I hope you are doing well

How can change the position of the scalar bar to be fixed to the bottom of the canvas  
I tried to use the vtkScalarBarActor and set the bar position using the setBarPosition method but nothing change  
Am I doing something wrong or it can’t be change?  
this is my code related to that

```auto
.
.
.
const scalarBarActor = vtkScalarBarActor.newInstance();
        scalarBarActor.setBarPosition([100, -100]);
 scalarBarActor.setAxisLabel("settings");
        mapper.setColorByArrayName("colorMap");
        mapper.set({
          scalarMode: ScalarMode.USE_CELL_FIELD_DATA,
          lookupTable: lookupTable,
          colorByArrayName: "colorMap",
          salarVisibility: true,
        });

        const lut = mapper.getLookupTable();
        scalarBarActor.setScalarsToColors(lut);
        scalarBarActor.setDrawNanAnnotation(false);
        scalarBarActor.setTickTextStyle({
          fontColor: "black",
          fontFamily: "DM Sans",
        });
        scalarBarActor.setAxisTextStyle({
          fontColor: "black",
          fontFamily: "DM Sans",
        });
        renderer.addActor(scalarBarActor);
        actor.setMapper(mapper);
.
.
.

```

Thanks

---

<div class="post-metadata">

### Author: ![realchenjames](https://discourse.vtk.org/user_avatar/discourse.vtk.org/realchenjames/32/9139_2.png) [@realchenjames](https://discourse.vtk.org/u/realchenjames)
#### Post date: [August 2, 2024, 5:44am UTC](https://discourse.vtk.org/t/how-to-change-the-position-of-scalar-bar-on-vtk-js/13082/2 "2024-08-02T05:44:31Z")

</div>

Hello, I have the same question. Have you resolved it?

---

<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: [November 5, 2025, 12:41pm UTC](https://discourse.vtk.org/t/how-to-change-the-position-of-scalar-bar-on-vtk-js/13082/3 "2025-11-05T12:41:52Z")

</div>

There is a [PR that is almost ready](https://github.com/Kitware/vtk-js/pull/3350) to improve the behavior.

Feel free to fix it and resubmit.