Themes & Styling

Themes

Try out the Victory themes and make your own. Check out the VictoryTheme API documentation more details on themes.

Live View

Loading...

Live Editor

const result = [...Array(10).keys()];

const scatterData = [
  ...Array(20).keys(),
].forEach((i) => ({
  x: (i - 10) / 3,
  y: i / 2 - 2 * Math.random() - 4,
}));

const toInteger = (number) =>
  parseInt(number).toString();

const DemoComponent = () => {
  const [theme, setTheme] =
    React.useState(
      VictoryTheme.grayscale,
    );

  const positions = [
    { transform: "translate(0, -15)" },
    {
      transform: "translate(180, -40)",
    },
    {
      transform: "translate(-10, 140)",
    },
    {
      transform: "translate(180, 140)",
    },
  ];
  return (
    <div>
      <div className="mb-8 p-4 mx-auto">
        <button
          className="bg-gray-600 border border-gray-800 text-white uppercase py-6 px-12"
          onClick={() =>
            setTheme(
              VictoryTheme.grayscale,
            )
          }
        >
          use grayscale
        </button>
        <button
          className="bg-orange-600 border border-blue-800 text-white uppercase py-6 px-12 ml-2"
          onClick={() =>
            setTheme(
              VictoryTheme.material,
            )
          }
        >
          use material
        </button>
        <button
          className="bg-blue-600 border border-blue-800 text-white uppercase py-6 px-12 ml-2"
          onClick={() =>
            setTheme(VictoryTheme.clean)
          }
        >
          use clean
        </button>
      </div>
      <svg
        viewBox="0 0 400 400"
        role="img"
        aria-labelledby="title desc"
        style={{
          height: "auto",
          width: "100%",
        }}
      >
        <g
          transform={
            positions[0].transform
          }
        >
          <VictoryPie
            theme={theme}
            standalone={false}
            style={{
              labels: { padding: 10 },
            }}
            height={200}
            width={200}
          />
        </g>
        <g
          transform={
            positions[1].transform
          }
        >
          <VictoryChart
            theme={theme}
            standalone={false}
            height={250}
            width={250}
          >
            <VictoryAxis
              tickCount={3}
              tickFormat={toInteger}
            />
            <VictoryAxis
              tickCount={4}
              dependentAxis
            />
            <VictoryScatter
              size={2}
              data={scatterData}
            />
          </VictoryChart>
        </g>

        <g
          transform={
            positions[2].transform
          }
        >
          <VictoryChart
            theme={theme}
            standalone={false}
            height={250}
            width={250}
          >
            <VictoryAxis
              tickCount={4}
              domain={[0, 3]}
              tickFormat={toInteger}
            />
            <VictoryAxis
              tickCount={4}
              dependentAxis
              domain={[0, 10]}
            />
            <VictoryLine
              y={(data) =>
                data.x * data.x
              }
            />
          </VictoryChart>
        </g>

        <g
          transform={
            positions[3].transform
          }
        >
          <VictoryChart
            standalone={false}
            theme={theme}
            height={250}
            width={250}
            domainPadding={{ x: 40 }}
          >
            <VictoryAxis
              tickFormat={[
                "A",
                "B",
                "C",
              ]}
            />
            <VictoryAxis
              tickCount={3}
              dependentAxis
            />
            <VictoryStack>
              <VictoryBar
                data={[
                  {
                    x: "A",
                    y: 1,
                  },
                  {
                    x: "B",
                    y: 3,
                  },
                  {
                    x: "C",
                    y: 3,
                  },
                ]}
              />
              <VictoryBar
                data={[
                  {
                    x: "A",
                    y: 2,
                  },
                  {
                    x: "B",
                    y: 1,
                  },
                  {
                    x: "C",
                    y: 3,
                  },
                ]}
              />
              <VictoryBar
                data={[
                  {
                    x: "A",
                    y: 3,
                  },
                  {
                    x: "B",
                    y: 1,
                  },
                  {
                    x: "C",
                    y: 1,
                  },
                ]}
              />
            </VictoryStack>
          </VictoryChart>
        </g>
      </svg>
    </div>
  );
};

render(<DemoComponent />);

Styles

How can I change the colors of lines and other elements in Victory?

Most components in Victory use a standard style prop with style namespaces for "data" and "labels". Any styles added to the "data" namespace will be applied to all the svg elements rendered for a given dataset.

Live View

Loading...

Live Editor

<VictoryChart
  theme={VictoryTheme.clean}
  domain={{ x: [0, 4] }}
>
  <VictoryBar
    style={{ data: { fill: "red" } }}
    data={[
      { x: 1, y: 2 },
      { x: 2, y: 4 },
      { x: 3, y: 6 },
    ]}
  />
  <VictoryLine
    style={{
      data: {
        stroke: "blue",
        strokeWidth: 5,
      },
    }}
    y={(d) => d.x}
  />
</VictoryChart>

How can I change the color of an individual point or bar?

Individual elements in Victory can be styled by adding style attributes directly to your data object and using functional styles and props as in the example below. Functions are called with all the props that correspond to the element they render.

Live View

Loading...

Live Editor

<VictoryChart>
  <VictoryBar
    style={{
      data: {
        fill: ({ datum }) => datum.fill,
      },
    }}
    data={[
      { x: 1, y: 2, fill: "red" },
      { x: 2, y: 4, fill: "orange" },
      { x: 3, y: 6, fill: "gold" },
    ]}
  />
  <VictoryScatter
    style={{
      data: {
        fill: ({ index }) =>
          +index % 2 === 0
            ? "blue"
            : "grey",
        stroke: ({ datum }) =>
          datum.y < 6 ? "red" : "black",
        strokeWidth: 2,
      },
    }}
    symbol={({ datum }) =>
      datum.x > 1 ? "plus" : "square"
    }
    size={({ datum }) => datum.y + 2}
    data={[
      { x: 0, y: 2 },
      { x: 1, y: 4 },
      { x: 2, y: 6 },
      { x: 3, y: 8 },
      { x: 4, y: 10 },
    ]}
  />
</VictoryChart>

Note that continuous data types such as VictoryLine and VictoryArea cannot be styled in this way, as they only render a single element for a given dataset.

Gradient Fills

Create a gradient def as usual and then reference it by id in your style object. Gradients can be used to give continuous charts (i.e. line or area charts) the appearance of discrete data elements and hover states.

Live View

Loading...

Live Editor

<div>
  <svg style={{ height: 0 }}>
    <defs>
      <linearGradient id="myGradient">
        <stop
          offset="0%"
          stopColor="red"
        />
        <stop
          offset="25%"
          stopColor="orange"
        />
        <stop
          offset="50%"
          stopColor="gold"
        />
        <stop
          offset="75%"
          stopColor="yellow"
        />
        <stop
          offset="100%"
          stopColor="green"
        />
      </linearGradient>
    </defs>
  </svg>
  <VictoryChart
    theme={VictoryTheme.clean}
  >
    <VictoryArea
      style={{
        data: {
          fill: "url(#myGradient)",
        },
      }}
      data={[
        { x: 1, y: 2 },
        { x: 2, y: 3 },
        { x: 3, y: 7 },
        { x: 4, y: 4 },
        { x: 5, y: 5 },
      ]}
    />
  </VictoryChart>
</div>