Radial Chart

Radial chart displays data with bars radiating from a central point, useful for cyclic or directional trends.

Basic

Charts are used to display data in a clear and concise manner. They are ideal for presenting information in a visually appealing and easy-to-understand format.

Installation

Colors

If you're working on an existing project, you can use these variables. However, if you've just installed Justd, they will already be included during project initialization. You can also customize chart colors, check out the theme page for more options.

@layer base {
  root: {
      --primary-chart: 51.24% 0.222 261.097;
      --secondary-chart: 76.58% 0.119 263.28;
      --tertiary-chart: 63.25% 0.184 258.64;
      --highlight-chart: 81.17% 0.097 249.1;
      --accent-chart: 81.17% 0.097 249.1;
  }
  .dark: {
      --primary-chart: 54.6% 0.215 262.87;
      --secondary-chart: 72.11% 0.142 253.1;
      --tertiary-chart: 63.25% 0.184 258.64;
      --highlight-chart: 81.17% 0.097 249.1;
      --accent-chart: 88.29% 0.057 251.91;
  }
}

Tooltip

Tooltips are used to provide additional information about a chart element when the user hovers over it. They can be used to display additional details, such as the value of a data point, or to provide context about the data.

import { Chart } from '@/components/ui'
import { RadialChart } from 'recharts'
 
<RadialChart accessibilityLayer data={data}>
  <XAxis.../>
  <Chart.Tooltip cursor={false} content={<Chart.TooltipContent />} />
  <Bar.../>
</RadialChart>

Legend

Legends are used to display a list of labels for different chart elements. They can be used to provide context about the data and help the user understand the meaning of different colors and shapes.

import { Chart } from '@/components/ui'
import { RadialChart } from 'recharts'
 
<RadialChart>
  ...
  <Chart.Legend content={<Chart.LegendContent />} />
</RadialChart>

Radial Chart

A radial chart is a circular graph where data points are plotted in a circular arrangement around a central point, radiating outwards. It’s used to display multivariate data where multiple variables are compared on the same scale. Radial charts help in visualizing relationships between different data points and often make it easier to see overall patterns or outliers in the data.

Grid

Stacked

Text

Shape

Accessibility

For accessibility purposes, you can add the accessibilityLayer prop to the chart component. This will add a role="img" to the chart, which will make it accessible to screen readers.

<RadialChart accessibilityLayer />