# Observable Plot barY

**URL:** <https://talk.observablehq.com/t/observable-plot-bary/8958>\
**Category:** Help\
**Created:** [March 19, 2024, 9:37pm UTC](https://talk.observablehq.com/t/observable-plot-bary/8958 "2024-03-19T21:37:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [March 19, 2024, 9:37pm UTC](https://talk.observablehq.com/t/observable-plot-bary/8958/1 "2024-03-19T21:37:03Z")

</div>

Hi,  
Very impressed by Observable Plot. That will replace my vega-lite codes for sure.

I have tested this on a small notebook. Small details to set up to be perfect.

1. Is there a way to control the ticks to be integers. The bar plot represents counts so I would like to have only interger values. If I force the format or use round, there are multiple identical ticks

![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/7/7d6a76e832e5e55e2bad9fc0226753403352bb0a.png)

1. Is there a way to set the width of bars ?  
The number of bars displayed are various so the width bars are adapted to respect the width plot. I would like to have the same bar width each time.

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/4/4627ef230fe4b77564c9efd5e45980cc4b79ef20.png)  
to be compared to  
 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/53155a2b9f316aa0892b101d222f73810cde0f13.png)

1. The vertical domain is set automatically. The highest bar reaches the top of the plot. Is there a way to let some space above from the axis domain displayed ?

My notebook is available from:

> **[International relationships of LSCE authors](https://observablehq.com/@pbrockmann/international-relationships-of-lsce-authors)**
>
> What are the international relationships that LSCE researchers have forged through their published articles?
> Using the API from the HAL Archive, discover from interactive requests and a choice on the different research structures, their international...

Let me know.  
And once again, Observable Plot and Observable are becoming a dreaming plateform and environment to work and visualize data.

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [March 19, 2024, 10:09pm UTC](https://talk.observablehq.com/t/observable-plot-bary/8958/2 "2024-03-19T22:09:39Z")

</div>

1/ Several tricks are possible to ensure you only have integers on _y_, in your case I would recommend to create a mark that is at y=10, so that even if the maximum value is 1 or 2, the chart goes to 10.

```
Plot.ruleY([10], {stroke:[]}),

```

2/ You can do some arithmetic to compute the `insetRight` option for the _x_ scale. It will probably be something like

```
  x: {insetRight: Math.max(0, 600 - 30 * countries.length)},

```

where 600 is the width of the frame (the width of the chart minus the left and right margins), and 30 the bandwidth. Reject negative values, since it’s better, if you have more bars than expected, to make them smaller rather than to bleed out to the right.

3/ To leave room at the top, you can specify an inset for the y scale:

```
y: {insetTop: 20},

```

---

<div class="post-metadata">

**Author:** ![PBrockmann](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/pbrockmann/32/1552_2.png) [@PBrockmann](https://talk.observablehq.com/u/PBrockmann)\
**Post date:** [March 20, 2024, 11:00am UTC](https://talk.observablehq.com/t/observable-plot-bary/8958/3 "2024-03-20T11:00:48Z")

</div>

Many thanks @Fil.

For the 1), your solution is tricky. Very good.

For the 2), I have coded a solution by handling the width of the plot.  
`width: 100 + 30 * countries.length,`

Another small question relative to comestic issues, is there a way to place title on the right ?

---

<div class="post-metadata">

**Author:** ![mekterovic](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mekterovic/32/8590_2.png) [@mekterovic](https://talk.observablehq.com/u/mekterovic)\
**Post date:** [May 20, 2025, 11:20am UTC](https://talk.observablehq.com/t/observable-plot-bary/8958/4 "2025-05-20T11:20:34Z")

</div>

My take on width (of approximately 40px) is this:

```auto
const inset = Math.max(
    0,
    (0.9 * width.value - 40 * distinctXValues.size) / (2 * distinctXValues.size)
  );

```

and then later:

```auto
boxY(props.data, {        
        insetLeft: inset,
        insetRight: inset,
      }),

```