Polar Charts

Victory supports polar charts for many of its chart types. Polar charts are a type of radial chart, where the data is displayed in a circular graph.

Bar Charts

Bar charts are a common type of polar chart. In the following example, we use a VictoryPolarAxis to create a polar chart with a bar series.

Live View

Loading...

Live Editor

<VictoryChart
  polar
  theme={VictoryTheme.clean}
>
  <VictoryPolarAxis
    dependentAxis
    labelPlacement="vertical"
    style={{ axis: { stroke: "none" } }}
    tickFormat={() => ""}
  />
  <VictoryPolarAxis labelPlacement="parallel" />
  <VictoryBar
    style={{
      data: {
        fill: VictoryTheme.clean.palette
          ?.colors.purple,
      },
    }}
    data={[
      { x: 12, y: 2 },
      { x: 26, y: 2 },
      { x: 30, y: 4 },
      { x: 46, y: 8 },
      { x: 58, y: 6 },
      { x: 65, y: 6 },
    ]}
  />
</VictoryChart>

Bar Charts - Events

Bar charts can be interactive with the use of events. In the following example, we use a VictoryPolarAxis to create a polar chart with a bar series that changes color on hover.

Live View

Loading...

Live Editor

<VictoryChart
  polar
  theme={VictoryTheme.clean}
  containerComponent={
    <VictoryVoronoiContainer />
  }
>
  <VictoryPolarAxis
    dependentAxis
    labelPlacement="vertical"
    axisAngle={90}
    tickValues={[25, 50, 75]}
  />
  <VictoryPolarAxis labelPlacement="perpendicular" />
  <VictoryBar
    style={{
      data: {
        fill: ({ active }) =>
          active
            ? VictoryTheme.clean.palette
                ?.colors.blue || "blue"
            : VictoryTheme.clean.palette
                ?.colors.red || "red",
      },
    }}
    labelComponent={<VictoryTooltip />}
    data={[
      {
        x: "strength",
        y: 10,
        label: "one",
      },
      {
        x: "intelligence",
        y: 25,
        label: "two",
      },
      {
        x: "stealth",
        y: 40,
        label: "three",
      },
      {
        x: "luck",
        y: 50,
        label: "four",
      },
      {
        x: "charisma",
        y: 50,
        label: "five",
      },
    ]}
  />
</VictoryChart>

Bar Charts - Stacked

Bar charts can be stacked in a polar format. In the following example, we use a VictoryPolarAxis to create a polar chart with a stacked bar series.

Live View

Loading...

Live Editor

<VictoryChart
  polar
  theme={VictoryTheme.clean}
  domain={{ x: [0, 360] }}
  innerRadius={50}
  events={[
    {
      childName: "all",
      target: "data",
      eventHandlers: {
        onMouseOver: (evt, props) => {
          return [
            {
              childName: "bar-2",
              mutation: () => {
                return {
                  style: Object.assign(
                    {},
                    props.style,
                    {
                      fill: VictoryTheme
                        .clean.palette
                        ?.colors.cyan,
                    },
                  ),
                };
              },
            },
            {
              childName: "bar-3",
              mutation: () => {
                return {
                  style: Object.assign(
                    {},
                    props.style,
                    {
                      fill: VictoryTheme
                        .clean.palette
                        ?.colors.blue,
                    },
                  ),
                };
              },
            },
          ];
        },
        onMouseOut: () => {
          return [
            {
              childName: "all",
              mutation: () => {
                return {
                  style: undefined,
                };
              },
            },
          ];
        },
      },
    },
  ]}
>
  <VictoryPolarAxis
    dependentAxis
    labelPlacement="vertical"
    style={{ axis: { stroke: "none" } }}
    tickFormat={() => ""}
  />
  <VictoryPolarAxis
    labelPlacement="parallel"
    tickValues={[
      0, 45, 90, 135, 180, 225, 270,
      315,
    ]}
  />
  <VictoryStack>
    <VictoryBar
      name="bar-1"
      style={{
        data: {
          fill: VictoryTheme.clean
            .palette?.colors.red,
        },
      }}
      data={[
        { x: 45, y: 20 },
        { x: 90, y: 30 },
        { x: 135, y: 65 },
        { x: 180, y: 50 },
        { x: 270, y: 40 },
        { x: 315, y: 30 },
      ]}
    />
    <VictoryBar
      name="bar-2"
      style={{
        data: {
          fill: VictoryTheme.clean
            .palette?.colors.orange,
        },
      }}
      data={[
        { x: 45, y: 20 },
        { x: 90, y: 30 },
        { x: 135, y: 65 },
        { x: 180, y: 50 },
        { x: 270, y: 40 },
        { x: 315, y: 30 },
      ]}
    />
    <VictoryBar
      name="bar-3"
      style={{
        data: {
          fill: VictoryTheme.clean
            .palette?.colors.yellow,
        },
      }}
      data={[
        { x: 45, y: 20 },
        { x: 90, y: 30 },
        { x: 135, y: 65 },
        { x: 180, y: 50 },
        { x: 270, y: 40 },
        { x: 315, y: 30 },
      ]}
    />
  </VictoryStack>
</VictoryChart>

Bar & Scatter - Combo

Bar and Scatter charts are another common combination for polar charts. In the following example, we use a VictoryPolarAxis to create a polar chart with a bar and scatter series, and a VictoryGroup to apply styles and data to both components.

Live View

Loading...

Live Editor

<VictoryChart
  polar
  theme={VictoryTheme.clean}
>
  <VictoryPolarAxis
    dependentAxis
    labelPlacement="vertical"
    style={{ axis: { stroke: "none" } }}
    axisAngle={270}
    tickValues={[1, 3, 5, 7]}
  />
  <VictoryPolarAxis labelPlacement="parallel" />
  <VictoryBar
    style={{
      data: {
        fill: ({ datum }) =>
          VictoryTheme.clean.palette
            ?.colors[datum.fill],
      },
    }}
    data={[
      {
        x: 1,
        y: 2,
        label: 1,
        fill: "red",
      },
      {
        x: 2,
        y: 3,
        label: 2,
        fill: "orange",
      },
      {
        x: 3,
        y: 6,
        label: 3,
        fill: "yellow",
      },
      {
        x: 4,
        y: 5,
        label: 4,
        fill: "blue",
      },
      {
        x: 5,
        y: 4,
        label: 5,
        fill: "cyan",
      },
      {
        x: 6,
        y: 3,
        label: 6,
        fill: "green",
      },
    ]}
  />
  <VictoryScatter
    style={{ data: { fill: "black" } }}
    data={[
      { x: 1, y: 2 },
      { x: 2, y: 3 },
      { x: 3, y: 6 },
      { x: 4, y: 5 },
      { x: 5, y: 4 },
      { x: 6, y: 3 },
    ]}
  />
</VictoryChart>

Line Charts

Line charts are another common type of polar chart. In the following example, we use a VictoryPolarAxis to create a polar chart with a line series.

Live View

Loading...

Live Editor

<VictoryChart
  polar
  domain={{ y: [0, 10] }}
  theme={VictoryTheme.clean}
  containerComponent={
    <VictoryVoronoiContainer />
  }
>
  <VictoryPolarAxis
    dependentAxis
    labelPlacement="vertical"
    tickFormat={() => ""}
  />
  <VictoryPolarAxis labelPlacement="parallel" />
  <VictoryLine
    labelComponent={
      <VictoryLabel labelPlacement="parallel" />
    }
    interpolation="linear"
    data={[
      { x: 1, y: 2 },
      { x: 2, y: 5 },
      { x: 3, y: 9 },
      { x: 4, y: 6 },
      { x: 5, y: 8 },
      { x: 6, y: 8 },
      { x: 7, y: 2 },
      { x: 8, y: 6 },
    ]}
  />
</VictoryChart>

Line & Scatter Combo

Line and Scatter charts are a common combination for polar charts. In the following example, we use a VictoryPolarAxis to create a polar chart with a line and scatter series, and a VictoryGroup to apply styles and data to both components.

Live View

Loading...

Live Editor

<VictoryChart
  polar
  theme={VictoryTheme.clean}
  containerComponent={
    <VictorySelectionContainer />
  }
>
  <VictoryPolarAxis labelPlacement="perpendicular" />
  <VictoryGroup
    colorScale="red"
    data={[
      { x: 1, y: 5 },
      { x: 2, y: 3 },
      { x: 3, y: 1 },
      { x: 4, y: 2 },
      { x: 5, y: 4 },
    ]}
  >
    <VictoryLine />
    <VictoryScatter
      labels={({ datum }) => datum.y}
      labelComponent={
        <VictoryTooltip />
      }
    />
  </VictoryGroup>

  <VictoryGroup
    colorScale="cool"
    data={[
      { x: 1, y: 3 },
      { x: 2, y: 5 },
      { x: 3, y: 3 },
      { x: 3, y: 2 },
      { x: 4, y: 2 },
      { x: 5, y: 1 },
    ]}
  >
    <VictoryLine />
    <VictoryScatter
      labels={({ datum }) =>
        `y: ${datum.y}`
      }
      labelComponent={
        <VictoryTooltip />
      }
    />
  </VictoryGroup>

  <VictoryGroup
    colorScale="warm"
    data={[
      { x: 1, y: 5 },
      { x: 2, y: 4 },
      { x: 3, y: 2 },
      { x: 4, y: 4 },
      { x: 5, y: 2 },
    ]}
  >
    <VictoryLine />
    <VictoryScatter
      labels={({ datum }) => datum.y}
      labelComponent={
        <VictoryTooltip />
      }
    />
  </VictoryGroup>
</VictoryChart>

Area Charts

Area charts can also be displayed in a polar format. In the following example, we use a VictoryPolarAxis to create a polar chart with an area series.

Live View

Loading...

Live Editor

<VictoryChart
  polar
  theme={VictoryTheme.clean}
  domain={{ y: [0, 10] }}
>
  <VictoryPolarAxis
    dependentAxis
    labelPlacement="vertical"
    tickFormat={() => ""}
  />
  <VictoryPolarAxis labelPlacement="parallel" />
  <VictoryArea
    interpolation="catmullRom"
    data={[
      { x: 1, y: 6 },
      { x: 2, y: 8 },
      { x: 3, y: 9 },
      { x: 4, y: 5 },
      { x: 5, y: 3 },
      { x: 6, y: 8 },
      { x: 7, y: 8 },
      { x: 8, y: 2 },
    ]}
  />
</VictoryChart>

Area Charts - Events

Area charts can be interactive with the use of events. In the following example, we use a VictoryPolarAxis to create a polar chart with an area series that changes color on hover.

Live View

Loading...

Live Editor

<VictoryChart
  polar
  theme={VictoryTheme.clean}
  domain={{ x: [0, 360] }}
  events={[
    {
      childName: "all",
      target: "data",
      eventHandlers: {
        onMouseOver: (evt, props) => {
          return [
            {
              mutation: () => {
                return {
                  style: Object.assign(
                    {},
                    props.style,
                    {
                      fill: VictoryTheme
                        .clean.palette
                        ?.colors.cyan,
                    },
                  ),
                };
              },
            },
          ];
        },
        onMouseOut: () => {
          return [
            {
              mutation: () => {
                return {
                  style: undefined,
                };
              },
            },
          ];
        },
      },
    },
  ]}
>
  <VictoryPolarAxis
    dependentAxis
    labelPlacement="vertical"
    style={{ axis: { stroke: "none" } }}
    tickFormat={() => ""}
  />
  <VictoryPolarAxis
    labelPlacement="parallel"
    tickValues={[
      0, 45, 90, 135, 180, 225, 270,
      315,
    ]}
  />
  <VictoryStack>
    <VictoryArea
      name="area-1"
      interpolation="cardinal"
      style={{
        data: {
          fill: VictoryTheme.clean
            .palette?.colors.red,
        },
      }}
      data={[
        { x: 45, y: 20 },
        { x: 90, y: 30 },
        { x: 135, y: 65 },
        { x: 180, y: 50 },
        { x: 270, y: 40 },
        { x: 315, y: 30 },
      ]}
    />
    <VictoryArea
      name="area-2"
      interpolation="cardinal"
      style={{
        data: {
          fill: VictoryTheme.clean
            .palette?.colors.orange,
        },
      }}
      data={[
        { x: 45, y: 20 },
        { x: 90, y: 30 },
        { x: 135, y: 65 },
        { x: 180, y: 50 },
        { x: 270, y: 40 },
        { x: 315, y: 30 },
      ]}
    />
    <VictoryArea
      name="area-3"
      interpolation="cardinal"
      style={{
        data: {
          fill: VictoryTheme.clean
            .palette?.colors.yellow,
        },
      }}
      data={[
        { x: 45, y: 20 },
        { x: 90, y: 30 },
        { x: 135, y: 65 },
        { x: 180, y: 50 },
        { x: 270, y: 40 },
        { x: 315, y: 30 },
      ]}
    />
  </VictoryStack>
</VictoryChart>

Area & Scatter Combo

Area and Scatter charts are another common combination for polar charts. In the following example, we use a VictoryPolarAxis to create a polar chart with an area and scatter series, and a VictoryGroup to apply styles and data to both components.

Live View

Loading...

Live Editor

<VictoryChart
  polar
  theme={VictoryTheme.clean}
>
  <VictoryPolarAxis
    dependentAxis
    labelPlacement="vertical"
    style={{ axis: { stroke: "none" } }}
    axisAngle={90}
    tickValues={[25, 50, 75]}
  />
  <VictoryPolarAxis
    labelPlacement="perpendicular"
    tickFormat={[
      "strength",
      "intelligence",
      "stealth",
      "luck",
      "charisma",
    ]}
  />
  <VictoryArea
    data={[
      { x: 1, y: 10 },
      { x: 2, y: 25 },
      { x: 3, y: 40 },
      { x: 4, y: 50 },
      { x: 5, y: 50 },
    ]}
  />
  <VictoryScatter
    size={5}
    data={[
      { x: 1, y: 10 },
      { x: 2, y: 25 },
      { x: 3, y: 40 },
      { x: 4, y: 50 },
      { x: 5, y: 50 },
    ]}
  />
</VictoryChart>