Y-axis not showing range of all plotted lines

Community Help
1

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:

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:

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

2

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:

   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.

3

that helped tremendously, thanks!