VictoryStyleInterface

Defines the style of the component using valid svg styles. However, width, height, and padding should be specified via props as they determine relative layout for components in VictoryChart.

info

For more information about themes and styles, see the themes guide.

Example

Style attributes can be defined as an object of CSSProperties.

style={{
  data: { fill: "tomato", opacity: 0.7 },
  labels: { fontSize: 12 },
  parent: { border: "1px solid #ccc" }
}}

Or they may be defined as a function of the props for whatever element it applies to.

style={{
  data: { fill: ({ datum }) => datum.y > 0 ? "green" : "red" },
  labels: { fontSize: ({ text }) => text.length > 10 ? 8 : 12 },
  parent: { border: "1px solid #ccc" }
}}

Live View

Loading...

Live Editor

<VictoryScatter
  style={{
    parent: {
      border: "1px solid #ccc",
    },
    data: {
      fill: "#c43a31",
      fillOpacity: 0.6,
      stroke: "#c43a31",
      strokeWidth: 3,
    },
    labels: {
      fontSize: 15,
      fill: "#c43a31",
      padding: 15,
    },
  }}
  size={9}
  data={sampleData}
  labels={({ datum }) => datum.x}
/>

Type Signature

type StringOrNumberOrCallback =
  | string
  | number
  | ((props: any) => string | number);

type VictoryStyleObject = {
  [K in keyof React.CSSProperties]: StringOrNumberOrCallback;
};

type LabelProps =
  React.CSSProperties & {
    angle?: number;
    verticalAnchor?: VerticalAnchorType;
  };

type VictoryLabelStyleObject = {
  [K in keyof LabelProps]: StringOrNumberOrCallback;
};

interface VictoryStyleInterface {
  parent?: VictoryStyleObject;
  data?: VictoryStyleObject;
  labels?:
    | VictoryLabelStyleObject
    | VictoryLabelStyleObject[];
  border?: VictoryStyleObject;
}

Caveats

note

When a component is rendered as a child of another Victory component, or within a custom <svg> element with standalone={false}, parent styles will be applied to the enclosing <g> tag. Many styles that can be applied to a parent <svg> will not be expressed when applied to a <g>.

note

The style prop used by VictoryAxis has a different format than the standard style prop.

note

custom angle and verticalAnchor properties may be included in labels styles.