# Force order on fill option of a plot

**URL:** <https://talk.observablehq.com/t/force-order-on-fill-option-of-a-plot/9056>\
**Category:** Help\
**Created:** [April 2, 2024, 9:45pm UTC](https://talk.observablehq.com/t/force-order-on-fill-option-of-a-plot/9056 "2024-04-02T21:45:21Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jikaczmarski](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jikaczmarski](https://talk.observablehq.com/u/jikaczmarski)\
**Post date:** [April 2, 2024, 9:45pm UTC](https://talk.observablehq.com/t/force-order-on-fill-option-of-a-plot/9056/1 "2024-04-02T21:45:21Z")

</div>

Hi there,

I’m looking for some guidance on specifying the display/plot order of the fill option on a plot.

For example, consider the following chart,

```auto
Plot.plot({
  marks: [
    Plot.barY(data,{
        x: "x_value",
        y: "y_value",
        fill: "fill_value"
      }
    )
  ]
})

```

I’m not entirely sure how OJS decides the order that the fill will plot itself in a shared bar chart, but what if I want to have it be specific?

Let’s assume that `data.fill_value = ["A","B","C"]`. The order it is plotted in the bar has a default that I want to override so that maybe “C” is plotted on the bottom of the bar.

Hopefully this is enough to go on without building a notebook, but I’m open to learning how to do that if more context is needed.

---

<div class="post-metadata">

**Author:** ![MP\_Li](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mp_li/32/8722_2.png) [@MP\_Li](https://talk.observablehq.com/u/MP_Li)\
**Post date:** [April 2, 2024, 10:10pm UTC](https://talk.observablehq.com/t/force-order-on-fill-option-of-a-plot/9056/2 "2024-04-02T22:10:49Z")

</div>

Let’s say in your example, you have:

- A: red
- B: green
- C: blue

as default, but you want to reverse this and use

- A: blue
- B: green  
\*C: red

instead?

If so, you can do this by passing in `color: {domain: ["C", "B", "A"]}` to adjust color scale.

E.g. adjusted from the out of box Histogram example  
 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/a80aefe47dbb6256de2e069b173fe783661f96f5.png)

![color domain](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/7/7241220703094869759e87b6d302329768b4e0eb.gif)

---

<div class="post-metadata">

**Author:** ![jikaczmarski](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jikaczmarski](https://talk.observablehq.com/u/jikaczmarski)\
**Post date:** [April 2, 2024, 11:26pm UTC](https://talk.observablehq.com/t/force-order-on-fill-option-of-a-plot/9056/3 "2024-04-02T23:26:07Z")

</div>

Thanks for the quick response! This indeed works on example data, however, I seem to have a couple of categories that refuse to follow my domain. Here is an example of the code I have written,

```auto
Plot.plot({
  // Plot area config
  insetLeft: 0,
  insetRight: 0,
  
  // Configure the x-axis
  x: {
    tickFormat: "d",
    label: "Year"
  },
  
  // Configure the y-axis
  y: {
    grid: true,
    label: "Generation (GWh)"
  },
  
  // Plotting the series
  marks: [
    Plot.barY(
      data.filter(d => d.region === "region_1"),
      Plot.groupX(
        {
          y: "sum"
        },
        {
          x: "year",
          y: "generation",
          fill: "fuel_type",
          tip: {format: {x: "d"}}
        }
      )
    ),
    Plot.ruleY([0])
  ],
  
  // Legend
  color: {
    domain: ["Oil","Gas","Hydro","Wind","Solar","Other"],
    range: ["#BFBFBF","#DCD9C5","#96B3DF","#F79646","#F5C243","#C0504D"],
    legend: true
  }
})

```

Which produces the following,

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

The domain should force “Oil” to come first, but the actual plotted order ends up being Gas → Hydro → Oil → etc.

My two cents is that it might have something to do with the filtering, but I’m not sure if/why that is possible.

---

<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:** [April 3, 2024, 3:53am UTC](https://talk.observablehq.com/t/force-order-on-fill-option-of-a-plot/9056/4 "2024-04-03T03:53:41Z")

</div>

The order of stacked elements can be controlled with the **order** option of the [stack transform](https://observablehq.com/plot/transforms/stack), which is implicitly added by the bar mark. This option offers a lot of possibilities; for this case you can specify it as an explicit array of ordinal values:

```auto
       {
          x: "year",
          y: "generation",
          fill: "fuel_type",
          order: ["Oil","Gas","Hydro","Wind","Solar","Other"]
          …

```

---

<div class="post-metadata">

**Author:** ![jikaczmarski](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jikaczmarski](https://talk.observablehq.com/u/jikaczmarski)\
**Post date:** [April 3, 2024, 4:44am UTC](https://talk.observablehq.com/t/force-order-on-fill-option-of-a-plot/9056/5 "2024-04-03T04:44:41Z")

</div>

You are an absolute saint. Thank you so much. Is there a resource I can point to to find all the options available in these marks?

---

<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:** [April 3, 2024, 6:25am UTC](https://talk.observablehq.com/t/force-order-on-fill-option-of-a-plot/9056/6 "2024-04-03T06:25:26Z")

</div>

The documentation has all the options on each dedicated page, as well as in the [API index](https://observablehq.com/plot/api). They are also distributed as types — which can be shown in context by your code editor.

---

<div class="post-metadata">

**Author:** ![MP\_Li](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mp_li/32/8722_2.png) [@MP\_Li](https://talk.observablehq.com/u/MP_Li)\
**Post date:** [April 3, 2024, 2:55pm UTC](https://talk.observablehq.com/t/force-order-on-fill-option-of-a-plot/9056/7 "2024-04-03T14:55:04Z")

</div>

This is great! I never noticed the API index page.

For where types are not directly handy (e.g. while working with Observable Framework, or Notebook), I also installed Observable Plot in a pet project with Typescript, where I can go to node\_modules/@observablehq/plot and quickly jump through types/interfaces for quick reference.

---

<div class="post-metadata">

**Author:** ![jikaczmarski](https://avatars.discourse-cdn.com/v4/letter/j/74df32/32.png) [@jikaczmarski](https://talk.observablehq.com/u/jikaczmarski)\
**Post date:** [April 3, 2024, 3:05pm UTC](https://talk.observablehq.com/t/force-order-on-fill-option-of-a-plot/9056/8 "2024-04-03T15:05:58Z")

</div>

Thank you everyone, this has been an immense help.