# Simple bar chart with multiple series

**URL:** <https://talk.observablehq.com/t/simple-bar-chart-with-multiple-series/8900>\
**Category:** Help\
**Created:** [March 6, 2024, 4:28pm UTC](https://talk.observablehq.com/t/simple-bar-chart-with-multiple-series/8900 "2024-03-06T16:28:03Z")\
**Posts on this page:** 2\
**Page:** 1

<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:** [March 6, 2024, 4:28pm UTC](https://talk.observablehq.com/t/simple-bar-chart-with-multiple-series/8900/1 "2024-03-06T16:28:03Z")

</div>

How can I create bar chart that has multiple series?

> **[Simple multiple series bar chart](https://observablehq.com/d/8d8cff8616c797af)**

Eg. I would like to have for each date (those date numbers are hourly points eg. ‘2024-03-05 10:00:00’) four bars:

1. this course - started
2. this course - submitted
3. other courses - started
4. other course - submitted

Or, even easier and more general, if i have two measurements (e.g. y1 and y2 for some date point) how can I create two bars, one for y1 and one for y2 (I don’t want stacked bars)

Thanks.

---

<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:** [March 6, 2024, 4:53pm UTC](https://talk.observablehq.com/t/simple-bar-chart-with-multiple-series/8900/2 "2024-03-06T16:53:42Z")

</div>

One way you could do it is by faceting, which we can use to provide “inner x axis” in this case. Here I set the normal `x` channel as the category/type combination, and set the `fx` channel (the “outer” x axis) to the date.

```js
plot = Plot.plot({
  x: { ticks: [] },
  y: { grid: true },
  fx: { type: "utc" },
  color: { legend: true },
  width,
  marks: [
    Plot.barY(data, {
      x: (d) => `${d.category} - ${d.type}`,
      y: "cnt",
      fx: "date",
      fill: (d) => `${d.category} - ${d.type}`,
      tip: true
    }),
    Plot.ruleY([0])
  ]
})

```

https://observablehq.com/embed/45a79d739ac83784?cells=plot

Another thing you could explore is using multiple `Plot.barY` marks, one for each bar you want to draw. That has difficulties with bars overlapping though.