Victory

Victory Canvas

The victory-canvas package currently provides a set of experimental primitive components that will allow Victory to render data in a Canvas container rather than as an SVG.

Container Components

CanvasGroup

This component is designed to be used as the groupComponent for any chart type to enable Canvas rendering. This component will create a <canvas /> HTML component, and allow other child components to access the Canvas context via React context.

const MyLine = (props) => (
  <VictoryLine groupComponent={<CanvasGroup />} {...props} />
);

Primitive Components

Each of these primitive components depends on the Canvas context that it gets through the useCanvasContext React hook. Rather than returning a React component, they render elements to the screen through the Canvas context.

CanvasPoint

Designed to be used with VictoryScatter, this component mimics the behavior of Point.

const MyScatter = (props) => (
  <VictoryScatter
    groupComponent={<CanvasGroup />}
    dataComponent={<CanvasPoint />}
    {...props}
  />
);

Props

  • active boolean a flag signifying whether the component is active
  • data array the entire dataset
  • datum object the data point corresponding to this point
  • events object events to attach to the rendered element
  • getPath function a function of x, y, and size that returns a path string. When this optional function is provided, it will be used to calculate a path, rather than one of the path functions corresponding to the symbols supported by Point.
  • index number the index of this point within the dataset
  • origin object the svg coordinates of the center point of a polar chart
  • polar boolean a flag specifying whether the component is part of a polar chart
  • scale object the x and y scale of the parent chart with domain and range applied
  • size number or function the size of the point. When this prop is given as a function, it will be called with the rest of the props supplied to Point.
  • style object the styles to apply to the rendered element
  • symbol "circle", "cross", "diamond", "plus", "minus", "square", "star", "triangleDown", "triangleUp" which symbol the point should render. This prop may also be given as a function that returns one of the above options. When this prop is given as a function, it will be called with the rest of the props supplied to Point.
  • transform string a transform that will be supplied to elements this component renders
  • x number the x coordinate of the center of the point
  • y number the y coordinate of the center of the point

CanvasCurve

Designed to be used with VictoryLine, this component mimics the behavior of Curve.

const MyLine = (props) => (
  <VictoryLine
    groupComponent={<CanvasGroup />}
    dataComponent={<CanvasLine />}
    {...props}
  />
);

Props

  • active boolean a flag signifying whether the component is active
  • data array the entire dataset used to define the curve
  • events object events to attach to the rendered element
  • interpolation string or function the interpolation to use when calculating a path
  • origin object the svg coordinates of the center point of a polar chart
  • polar boolean a flag specifying whether the component is part of a polar chart
  • role string the aria role to assign to the element
  • scale object the x and y scale of the parent chart with domain and range applied
  • style object the styles to apply to the rendered element
  • transform string a transform that will be supplied to elements this component renders

CanvasBar

Designed to be used with VictoryBar, this component mimics the behavior of Bar.

const Bar = (props) => (
  <VictoryBar
    groupComponent={<CanvasGroup />}
    dataComponent={<CanvasBar />}
    {...props}
  />
);

Props

  • active boolean a flag signifying whether the component is active
  • alignment *"start", "middle", or "end" specifies how a bar path should be aligned in relation to its data point
  • barRatio number a number between zero and one that will be used to calculate bar width when an explicit width is not given
  • barWidth number or function A prop defining the width of the bar. When this prop is given as a function, it will be called with the rest of the props supplied to Bar.
  • cornerRadius number, function or object the number of pixels of corner radius to apply when calculating a bar path. When this prop is given as a function, it will be called with the rest of the props supplied to Bar. When given as an object, this prop may include values for top, bottom, topLeft, topRight, bottomLeft and bottomRight, with more specific values overriding less specific values
  • data array the entire dataset
  • datum object the data point corresponding to this bar
  • events object events to attach to the rendered element
  • index number the index of this bar within the dataset
  • origin object the svg coordinates of the center point of a polar chart
  • polar boolean a flag specifying whether the component is part of a polar chart
  • scale object the x and y scale of the parent chart with domain and range applied
  • style object the styles to apply to the rendered element
  • transform string a transform that will be supplied to elements this component renders
  • width number the width of parent chart (used to calculate default bar width style.width is not supplied)
  • x number the x coordinate of the top of the bar
  • y0 number the y coordinate of the baseline of the bar
  • y number the y coordinate of the top of the bar