# Y-axis not showing range of all plotted lines

**URL:** <https://talk.observablehq.com/t/y-axis-not-showing-range-of-all-plotted-lines/7850>\
**Category:** Help\
**Created:** [April 13, 2023, 9:49pm UTC](https://talk.observablehq.com/t/y-axis-not-showing-range-of-all-plotted-lines/7850 "2023-04-13T21:49:37Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![RenaissanceMan](https://avatars.discourse-cdn.com/v4/letter/r/f1d935/32.png) [@RenaissanceMan](https://talk.observablehq.com/u/RenaissanceMan)\
**Post date:** [April 13, 2023, 9:49pm UTC](https://talk.observablehq.com/t/y-axis-not-showing-range-of-all-plotted-lines/7850/1 "2023-04-13T21:49:37Z")

</div>

Hey folks, brand new to Observable but working on a project utilizing D3. I have a line chart that plots 3 different lines. I’ve got the X axis working properly but the Y axis only shows a partial amount of the range needed to plot all of the values on the visible graph. All 3 of the lines are pulling data from arrays that have identical properties. I’m using the following code in my `DrawChart` component to establish min and max values for the Y axis:

```auto
const [minY, maxY] = emptyChart
    ? [0, 100000]
    : d3.extent<ChartPoint, number>(
        data[0].points,
        (point) => point.pointTotal
      );

  // @ts-ignore
  const yScale = d3
    .scaleLinear()
    .domain([minY!, maxY!])
    .range([height - margin, 0])
    .nice();

```

Here is the code in the rendering component for the chart:

```auto
<DrawChart
            data={[
              {
                name: "Revenue",
                color: "#2E99E6",
                points:
                  sortedRevenueByDate?.map((points) => ({
                    date: new Date(points?.date as string),
                    pointTotal: points.pointTotal as number,
                    cum: points.cum as number,
                    ytd: points.ytd as number,
                  })) || [],
              },
              {
                name: "Profit",
                color: "#4CBF4C",
                points:
                  sortedProfitByDate?.map((points) => ({
                    date: new Date(points.date as string),
                    pointTotal: points.pointTotal as number,
                    cum: points.cum as number,
                    ytd: points.ytd as number,
                  })) || [],
              },
              {
                name: "Expenses",
                color: "#CC493D",
                points:
                  sortedExpensesByDate?.map((points) => ({
                    date: new Date(points.date as string),
                    pointTotal: points.pointTotal as number,
                    cum: points.cum as number,
                    ytd: points.ytd as number,
                  })) || [],
              },
            ]}
          />

```

If I only plot a single line from the 3, then I have the correct Y axis range showing for the chart. But when I allow multiple lines to be plotted then the range seems to default to only the first line in my `data` object. Can someone shine some light on this for me?

Thanks so much!

---

<div class="post-metadata">

**Author:** ![libbey](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/libbey/32/7658_2.png) [@libbey](https://talk.observablehq.com/u/libbey)\
**Post date:** [April 13, 2023, 10:48pm UTC](https://talk.observablehq.com/t/y-axis-not-showing-range-of-all-plotted-lines/7850/2 "2023-04-13T22:48:46Z")

</div>

Hello! I think I see the issue. When calling d3.extent, only points from the first element are getting passed in (data[0].points). I think you want to pass all points in, from all elements, so something like this:

```auto
   const [minY, maxY] = emptyChart
    ? [0, 100000]
    : d3.extent(
        data.map((set) => set.points.map((point) => point.pointTotal)).flat()
    );

```

I tried this locally and it seemed to work, but I did need to remove the curly braces around the `data` definition and have it just be an array (`[{name: "Revenue"...}, {name: "Profit"...}, {name: "Expenses"...}]`), so not sure if that would also work for you.

---

<div class="post-metadata">

**Author:** ![RenaissanceMan](https://avatars.discourse-cdn.com/v4/letter/r/f1d935/32.png) [@RenaissanceMan](https://talk.observablehq.com/u/RenaissanceMan)\
**Post date:** [April 14, 2023, 3:59pm UTC](https://talk.observablehq.com/t/y-axis-not-showing-range-of-all-plotted-lines/7850/3 "2023-04-14T15:59:28Z")

</div>

that helped tremendously, thanks!