RadarChart

RadarChart is a component for drawing radar charts to compare multiple sets of data.

Theming

The RadarChart is a multi part component.

RadarChart inherits the style from LineChart.

If you want to change the style of the component, please check here.

export const RadarChart: ComponentMultiStyle<"RadarChart"> = mergeMultiStyle(
  LineChart,
  {
    baseStyle: {
      radar: {},
      polarGrid: {
        stroke: ["blackAlpha.400", "whiteAlpha.400"],
        strokeWidth: 1,
      },
      polarAngleAxis: {},
      polarAngleAxisTick: {
        "& > text": {
          fill: ["blackAlpha.700", "whiteAlpha.600"],
          fontSize: "xs",
        },
      },
      polarRadiusAxis: {
        "& > line": {
          stroke: ["blackAlpha.400", "whiteAlpha.400"],
        },
      },
      polarRadiusAxisTick: {
        "& > text": {
          fill: ["blackAlpha.700", "whiteAlpha.600"],
          fontSize: "xs",
        },
      },
    },

    sizes: {
      sm: {
        container: {
          w: "full",
        },
      },
      md: {
        container: {
          w: "full",
        },
      },
      lg: {
        container: {
          w: "full",
        },
      },
      full: {
        container: {
          w: "full",
        },
      },
    },
  },
)({ omit: ["line", "grid"] })

Copied!

Edit this page on GitHub

PreviousDonutChart NextRadialChart