Error when adding props to VictoryZoomVoronoiContainer

[StraightOuttaCrompton]

Bugs and Questions

Checklist

• This is not a victory-native specific issue. (Issues that only appear in victory-native should be opened here)

• I have read through the FAQ and Guides before asking a question

• I am using the latest version of Victory

• I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

When using createContainer like so,

const VictoryZoomVoronoiContainer = createContainer("zoom", "voronoi");

Being used in a brush and zoom chart implemented from the example

<VictoryChart
    containerComponent={
        <VictoryZoomVoronoiContainer
            zoomDimension="x"
            zoomDomain={zoomDomain}
            onZoomDomainChange={handleZoom}
        />
    }
>

I receive the following typescript error

Type '{ zoomDimension: string; zoomDomain: DomainPropType; onZoomDomainChange: (domain: DomainPropType) => void; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'.
  Property 'zoomDimension' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.

Reproduction

https://codesandbox.io/s/basic-victory-example-fzf8i?fontsize=14&hidenavigation=1&theme=dark

[StraightOuttaCrompton]

Since this is a typescript error, I think it might be likely an issue with a type definitions. If you think this is an issue with @types/victory, how would you suggest I proceed?

[boygirl]

I don't think any of these props are missing from the type definition for VictoryZoomContainer: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts#L579

I would guess the issue is with the definition for createContainer: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/victory/index.d.ts#L2591

[StraightOuttaCrompton]

Ok, I can try to get round to having a look this week. Do you know who works on the type definitions so that I can talk to them about it?

[Sophmrs]

You need to pass both prop types as generic arguments to createContainer, else it creates a component with no props other than the default React.Component ones.
So in this case use:

const VictoryZoomVoronoiContainer = createContainer<VictoryZoomContainerProps, VictoryVoronoiContainerProps>('zoom', 'voronoi');

[StraightOuttaCrompton]

Yeah that has worked - I should have spotted that in the index.d.ts file.

Thank you very much!

Is there a way this can be documented other than in the index.d.ts file? Or should I add your example to the index.d.ts file to avoid other people making the same mistake as me?

[erosval]

I'm already using the syntax suggested by @theomg but it doesn't work, any suggestions?

Reproduction: https://codesandbox.io/s/basic-victory-example-ig1el

[Sophmrs]

You are passing the types of the containers themselves instead of their prop types to createContainer, so it should be

  const VictoryZoomVoronoiContainer = createContainer<
    VictoryVoronoiContainerProps,
    VictoryZoomContainerProps
  >("zoom", "voronoi");

instead of

  const VictoryZoomVoronoiContainer = createContainer<
    VictoryVoronoiContainer,
    VictoryZoomContainer
  >("zoom", "voronoi");

[erosval]

Thanks for your help @theomg, It works!

[adstew]

Hi I am also having this issue but when following the steps given by @theomg I am getting a "Cannot find VictoryVoronoiContainerProps" error. I have tried importing VictoryVoronoiContainerProps as well as VictoryContainerProps with no luck.

You are passing the types of the containers themselves instead of their prop types to createContainer, so it should be

  const VictoryZoomVoronoiContainer = createContainer<
    VictoryVoronoiContainerProps,
    VictoryZoomContainerProps
  >("zoom", "voronoi");

instead of

  const VictoryZoomVoronoiContainer = createContainer<
    VictoryVoronoiContainer,
    VictoryZoomContainer
  >("zoom", "voronoi");

Any suggestions?

[erosval]

@adstew , try to verify the imports, ex:

import {
  VictoryAxis,
  VictoryChart,
  VictoryLine,
  VictoryTheme,
  VictoryTooltip,
  createContainer,
  VictoryPortal,
  VictoryLabel,
} from "victory";
import { VictoryVoronoiContainerProps } from "victory-voronoi-container";
import { VictoryZoomContainerProps } from "victory-zoom-container";

below an excerpt of the source code that works for me:

  const VictoryZoomVoronoiContainer = createContainer<VictoryZoomContainerProps, VictoryVoronoiContainerProps>(
    "zoom",
    "voronoi"
  );

  return (
    <VictoryChart
      containerComponent={
        <VictoryZoomVoronoiContainer
          responsive={false}
          zoomDimension="x"
          minimumZoom={{ x: 1, y: 0.005 }}
          voronoiDimension="x"
          labels={({ datum }) => `${datum.y} (${intl.formatDate(datum.x, DATETIME_FORMAT_OPTIONS)})`}
          labelComponent={
            <VictoryTooltip style={LABEL_STYLE} constrainToVisibleArea={true} flyoutStyle={{ strokeWidth: 0.5 }} />
          }
        />
      }
    >
    ...
    </VictoryChart>

[adstew]

@adstew , try to verify the imports, ex:

import {
  VictoryAxis,
  VictoryChart,
  VictoryLine,
  VictoryTheme,
  VictoryTooltip,
  createContainer,
  VictoryPortal,
  VictoryLabel,
} from "victory";
import { VictoryVoronoiContainerProps } from "victory-voronoi-container";
import { VictoryZoomContainerProps } from "victory-zoom-container";

below an excerpt of the source code that works for me:

  const VictoryZoomVoronoiContainer = createContainer<VictoryZoomContainerProps, VictoryVoronoiContainerProps>(
    "zoom",
    "voronoi"
  );

  return (
    <VictoryChart
      containerComponent={
        <VictoryZoomVoronoiContainer
          responsive={false}
          zoomDimension="x"
          minimumZoom={{ x: 1, y: 0.005 }}
          voronoiDimension="x"
          labels={({ datum }) => `${datum.y} (${intl.formatDate(datum.x, DATETIME_FORMAT_OPTIONS)})`}
          labelComponent={
            <VictoryTooltip style={LABEL_STYLE} constrainToVisibleArea={true} flyoutStyle={{ strokeWidth: 0.5 }} />
          }
        />
      }
    >
    ...
    </VictoryChart>

This works, thank you! I was missing import { VictoryVoronoiContainerProps } from "victory-voronoi-container";

[DHAVAL7723]

I am using same code shown by @adstew but it give error!

SyntaxError: Unexpected token (120:111)

120 | const VictoryZoomVoronoiContainer = createContainer<VictoryZoomContainerProps,VictoryVoronoiContainerProps>("zoom", "voronoi");

Any Solution please?

[becca-bailey]

Closing in favor of #2111

[eatyourpeas]

Hi - I appreciate this is closed and but am getting this same issue and none of the above fixes appear to work for me.
I am using victory 36.9.1 and react 18.2 in node 20

It is all working in production currently on node 16, react 17 using victory 35.4.8

I am trying to create a voronoi zoom container

import { VictoryVoronoiContainerProps } from 'victory-voronoi-container';
import { VictoryZoomContainerProps } from 'victory-zoom-container';

When I create the container I get a type error:

const VictoryZoomVoronoiContainer = createContainer<VictoryZoomContainerProps, VictoryVoronoiContainerProps>(
    'zoom',
    'voronoi',
);

Expected 0 type arguments, but got 2.ts(2558)

Apologies in advance if this is my fault and is a question best directed elsewhere.

[carbonrobot]

@eatyourpeas I will open a new issue for this. There are a lot of new types and changes since this original issue, so we can address it separately. #2815