#1923·visx

[xychart] TypeScript mismatch with dataRegistry entries and Datum

Author: JANA-itsaishviliCreated Aug 12, 2025Updated Aug 12, 2025

I'm trying to access the entries via the DataContext hook i created in a litle component to add annotations to my stacked charts, and I got it to work, but the shape of the data it returns has no bearing with the Datum i'm feeding into the chart. Moreover, it returns a bizarre array pair with data property that also doesn't match the Datum type i provided.

I added a type to support this entry data items array, but then it breaks the xScale, and it loses the band type, which means I can't access the .bandwidth method.

Please help me out here. I don't think i'm doing anything dramatically wrong, but I can't have Datum as any type, and typing the Datum breaks inside the entries array. Here are some of my examples:

bash
// this is what dataRegistry.entries() series data returns
export type DataContextEntries = [number, number] & {
  data: {
    stack: string;
    positiveSum: number;
    negativeSum: number;
  };
};

// this is my bar chart Datum
export type XYDatum = {
  x: string;
  y: number;
  label?: string;
};
bash
export const useXYDataContext = <Datum extends object = XYDatum>() => {
  // get this working by simply passing in the generics to useContext
  const context =
    useContext<Partial<DataContextType<AxisScale, AxisScale, Datum>>>(
      DataContext,
    );

  if (!context) {
    throw new Error(
      "useXYDataContext must be used within a XYChart or DataProvider",
    );
  }

  return context;
};

When I don't pass the DataContextEntries I obviously can't access array elements on the data, and when I pass it to the context generic, I lose context of xScale as band.

What's worse is DataContextType is passing Datum down the chain to DataRegistry, and DataRegistryEntry as data: Datum[];, which comes from the initial generic Datum slot.

Also, xScale() expects NumberLike even though Datum specifies a string band.

Thanks in advance.