# Domain only showing 2 values on bar chart instead of range

**URL:** <https://talk.observablehq.com/t/domain-only-showing-2-values-on-bar-chart-instead-of-range/7265>\
**Category:** Help\
**Created:** [November 9, 2022, 6:45am UTC](https://talk.observablehq.com/t/domain-only-showing-2-values-on-bar-chart-instead-of-range/7265 "2022-11-09T06:45:36Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![vanar](https://avatars.discourse-cdn.com/v4/letter/v/b77776/32.png) [@vanar](https://talk.observablehq.com/u/vanar)\
**Post date:** [November 9, 2022, 6:45am UTC](https://talk.observablehq.com/t/domain-only-showing-2-values-on-bar-chart-instead-of-range/7265/1 "2022-11-09T06:45:36Z")

</div>

> **[EsportsEventsPrize](https://observablehq.com/d/c548a0f621dd50b6)**

Hi all, I am new to Observable and am trying to allow the user to change what range of years they are looking at. Unfortunately it is only giving me the 2 years that are in the array. I am sure I am doing something silly. Also the Y Axis is not changing values automatically like I have seen some of the sample charts do. Thanks!  
This channel is a safe space for new users to ask questions, to get feedback, and to share blockers or insights. All questions welcome!

---

<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:** [November 9, 2022, 9:08am UTC](https://talk.observablehq.com/t/domain-only-showing-2-values-on-bar-chart-instead-of-range/7265/2 "2022-11-09T09:08:48Z")

</div>

Since you are using vertical bars (with Plot.barY), the domain is ordinal, not continuous, so you need to enumerate all the years included in the range.

A way to do it is to use [d3.utcYears](https://github.com/d3/d3-time/blob/main/README.md#timeYears); note that the range that this function returns does not include the _stop_ value, so you have to add it manually:  
`domain: [...d3.utcYears(...SelectUTC), SelectUTC[1]]`

(This has an added benefit of showing any year in the range for which there might be no data. Not an issue in your case, since all years have data.)

An alternative would be to filter the dataset before plotting:  
`Plot.barY(esports.filter(d => SelectUTC[0] <= d.year && d.year <= SelectUTC[1]), …`

You could also use a “utc” scale on x, and a rectY mark.

---

<div class="post-metadata">

**Author:** ![vanar](https://avatars.discourse-cdn.com/v4/letter/v/b77776/32.png) [@vanar](https://talk.observablehq.com/u/vanar)\
**Post date:** [November 9, 2022, 10:44am UTC](https://talk.observablehq.com/t/domain-only-showing-2-values-on-bar-chart-instead-of-range/7265/3 "2022-11-09T10:44:31Z")

</div>

Thanks a lot for your help! Your second solution achieves just what I was imagining!