Plot: Adjust bar size and colour?

New To Observable
1

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
Screenshot 2024-06-28 at 18.17.11672×1086 26.8 KB

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!

2

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
3

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:

<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>
4

Something like this?

(You can see the code in the notebook)

6

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
Screenshot 2024-06-28 at 20.50.01640×1354 29.4 KB

Thanks so much

7

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:

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.

1 Like