XAxis not scaling when rendering multiple lines.

[RioDeSousa]

Noob here. I am trying to dynamically render lines for a line chart based off of some 'filter state'. The behaviour is sort of there. However, as each new line gets rendered the XAxis remain its fixed length and the lines scale down, which is not entirely wrong its just that I am expecting them to extend the full width of the chart.

Sorry if it is super obvious and I am just being daft. Any help will be greatly appreciated.

No filter selected - show full dataset

One filter selected - filter the data. XAxis scaled full width as expected here

However once you select multiple filters - the lines shrink and dont span the full width

const EndpointChart = ({ endpoint, perfData }: EndpointChartProps) => {
  const { data, isLoading } = useQuery<BlasterPayloads, Error>(["blaster-payloads-used"], () => fetchPerfBlasterPayloads(endpoint));
  const [selectedFilters, setSelectedFilters] = useState<(string | number)[]>([]);

  const filterDropdownOptions =
    data?.payloads.map((filter) => ({
      label: filter,
      value: filter,
    })) ?? [];

  const filteredData =
    selectedFilters.length === 0
      ? filter(perfData, { endpoint }).reverse()
      : filter(perfData, (item) => item.endpoint === endpoint && includes(selectedFilters, item.payload)).reverse();

  const groupedData = groupData(perfData);

  const formatXAxis = (tickItem: string) => {
    return format(parseISO(tickItem), "MM/dd/yyyy HH:mm");
  };

  return (
    <Card m={2} key={`${endpoint}_Chart`}>
      <CardHeader m={4}>
        <Heading size="md">{`Blaster Results - /${endpoint}`}</Heading>
        <div className="m-1">
          <FilterDropdown
            isLoading={isLoading}
            label="Payloads"
            options={filterDropdownOptions}
            value={selectedFilters}
            onChange={setSelectedFilters}
          />
        </div>
        {selectedFilters.map((item) => (
          <Tag key={`${item}_tag`} m={1} color="blue.500">
            {item}
          </Tag>
        ))}
      </CardHeader>
      <CardBody>
        <Flex height={500}>
          <ResponsiveContainer width="100%" height={400}>
            <LineChart data={filteredData}>
              <XAxis dataKey="stamp" tick={false} />
              <YAxis />
              <Tooltip labelFormatter={formatXAxis} wrapperStyle={{ pointerEvents: "auto" }} />
              <Legend />
              {selectedFilters.length === 0 ? (
                <Line type="monotone" dataKey="duration" data={filteredData} />
              ) : (
                selectedFilters.map((filter) => {
                  const filterData =
                    groupedData.find((gd) => gd.endpoint === endpoint)?.data.find((fd) => fd.filter === filter)?.data ?? [];
                  return <Line key={`${filter}_line`} type="monotone" dataKey="duration" data={filterData} />;
                })
              )}
            </LineChart>
          </ResponsiveContainer>
        </Flex>
      </CardBody>
    </Card>
  );
};

[ckifer]

Hi!

Does your XAxis data happen to be numeric?

[ckifer]

https://codesandbox.io/p/sandbox/line-chart-width-xaxis-padding-forked-5clvd4

made another fork with the number option on. Will try to work on it as you had it (with category axis)

[ckifer]

There are some issues when specifying multiple data arrays on the graphical items themselves. I would lean toward making a datastructure you can specify at the top level and make your data null when there isn't a datapoint for that series

Will work on making that experience better in the future!

[ckifer]

Although is this what you expect it to look like? https://codesandbox.io/p/sandbox/line-chart-repro-categorical-wsgv9h?file=%2Fsrc%2FApp.tsx%3A35%2C24

Try allowDuplicatedCategory={false} on your XAxis

[RioDeSousa]

Not entirely, but I dont hate it. Might play around with it with some larger datasets. Wonder how that will scale

[RioDeSousa]

Again thanks a ton!