# Plot: Adjust bar size and colour?

**URL:** <https://talk.observablehq.com/t/plot-adjust-bar-size-and-colour/9448>\
**Category:** Help\
**Created:** [June 28, 2024, 5:18pm UTC](https://talk.observablehq.com/t/plot-adjust-bar-size-and-colour/9448 "2024-06-28T17:18:10Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![shauny](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shauny/32/9004_2.png) [@shauny](https://talk.observablehq.com/u/shauny)\
**Post date:** [June 28, 2024, 5:18pm UTC](https://talk.observablehq.com/t/plot-adjust-bar-size-and-colour/9448/1 "2024-06-28T17:18:10Z")

</div>

Hi, I am new to using Observable Plot, I’m looking to replace my Chart.js usage with this as it looks much nicer to use, however I’m stumbling at the first hurdle here.

I have a very simple bar chart created with Chart.js, it’s shown as a small chart on the page. It is the top bar chart in the screenshot.  
My attempts to recreate this with Plot have so far made the bottom chart.

 ![Screenshot 2024-06-28 at 18.17.11](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/9/9252e81a13bd8e138953a37dd2847b23c735ac90.png)

Everything is _way too small_, and I can’t figure out how to add colours.

I tried adding `style: {fontSize: "32px"}` but then the text just gets mashed together and the bars do not grow.

Is there something I’m missing? Is this simply not good for creating small charts?

And how on earth do I use colour schemes?

Thanks so much!

---

<div class="post-metadata">

**Author:** ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)\
**Post date:** [June 28, 2024, 5:36pm UTC](https://talk.observablehq.com/t/plot-adjust-bar-size-and-colour/9448/2 "2024-06-28T17:36:11Z")

</div>

Do you have your attempt in a notebook? Could you share that so that we help with this? A few things that I want to try:

- that style is heading in the right direction… but along with that
- marginLeft should be set
- y label should be null
- you can set the `fill` attribute of the bar to add color

---

<div class="post-metadata">

**Author:** ![shauny](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shauny/32/9004_2.png) [@shauny](https://talk.observablehq.com/u/shauny)\
**Post date:** [June 28, 2024, 6:47pm UTC](https://talk.observablehq.com/t/plot-adjust-bar-size-and-colour/9448/3 "2024-06-28T18:47:15Z")

</div>

No, I’m doing this on my own site using vanilla HTML.

The main important thing is the size of the bars and the text, any ideas how to change that? It’s too tiny.

Edit: here is the code:

```auto
<div id="myplot"></div>
  
  <script type="module">
	
	const ratings = [
	  {Rating: 0.5, Votes: 0},
	  {Rating: 1, Votes: 5},
	  {Rating: 1.5, Votes: 7},
	  {Rating: 2, Votes: 14},
	  {Rating: 2.5, Votes: 32},
	  {Rating: 3, Votes: 67},
	  {Rating: 3.5, Votes: 70},
	  {Rating: 4, Votes: 40},
	  {Rating: 4.5, Votes: 13},
	  {Rating: 5, Votes: 19},
	]
  
	 const plot = Plot.plot({
	   x: {padding: 0.4},   
	   color: { legend: true },
 	  marks: [
		 Plot.barX(ratings, {x: "Votes", y: "Rating"})
 	  ]
	 });
 
 	 const div = document.querySelector("#myplot");
 	 div.append(plot);
  
  </script>

```

---

<div class="post-metadata">

**Author:** ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)\
**Post date:** [June 28, 2024, 6:57pm UTC](https://talk.observablehq.com/t/plot-adjust-bar-size-and-colour/9448/4 "2024-06-28T18:57:57Z")

</div>

Something like this?

https://observablehq.com/embed/0496fa0f96f27d03@33?cells=chart

(You can see the code in the notebook)

---

<div class="post-metadata">

**Author:** ![shauny](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/shauny/32/9004_2.png) [@shauny](https://talk.observablehq.com/u/shauny)\
**Post date:** [June 28, 2024, 7:50pm UTC](https://talk.observablehq.com/t/plot-adjust-bar-size-and-colour/9448/6 "2024-06-28T19:50:47Z")

</div>

Changing the height manually helps, but ideally I don’t want to have to enter the height as I might have some charts with way more, I guess I have to calculate it by the number of items.

The padding doesn’t seem to do anything. I’ve increased the gaps with inset. Is there a way to have the bars _in_ the grid lines rather than _on them_?

What I have now:

 ![Screenshot 2024-06-28 at 20.50.01](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/a1349bf842eb0ff3b4e1b11d0021067e66541686.png)

Thanks so much

---

<div class="post-metadata">

**Author:** ![mythmon](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mythmon/32/8504_2.png) [@mythmon](https://talk.observablehq.com/u/mythmon)\
**Post date:** [June 28, 2024, 8:54pm UTC](https://talk.observablehq.com/t/plot-adjust-bar-size-and-colour/9448/7 "2024-06-28T20:54:15Z")

</div>

Plot draws an SVG at a specific size, either by choosing a size arbitrarily or by you specifying one. Then if you take that SVG and put it into a fixed size HTML area, it will scale up or down to fill the space. However, that means that things get squished, like you have seen. You either need to specify an exact size for Plot (by setting `width` and `height` in the plot function), or make the surrounding HTML expand to hold the generated SVG at it’s original size.

As for your question about grid lines: Plot’s grid lines align with the ticks on the axis. They are meant to help you trace your attention from the data to the axis, and aren’t meant as separators. In the chart Cobus posted, the y axis has been automatically detected as _ordinal_, aka ordered categories. You could change it’s type to _linear_ instead, which is a type of continuous scale. When you do that, and fix a couple other things up, you end up with something like this:

https://observablehq.com/embed/3d2d69c5dd21b21f@48?cells=chart

You can see that there are some issues with the display here, like the bars being slightly vertically misaligned and the top most column being from 5.0 to 5.5. There are ways to fix that as well, but I’d suggest keeping the ordinal format that Cobus shared instead, since you are working with a ordinal data set and not a continuous one.