Chart

A chart component visually represents data, such as bar, line, or pie charts. It takes in data and configuration props (labels, values, colors) and renders a chart.

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

If you hit any issues, make sure you check out the installation guide here.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

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.22272067527197015 261.09713650910066;
      --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 "ui"
import { BarChart } from 'recharts'
 
<BarChart accessibilityLayer data={data}>
  <XAxis.../>
  <Chart.Tooltip cursor={false} content={<Chart.TooltipContent />} />
  <Bar.../>
</BarChart>

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 "ui"
import { BarChart } from "recharts"
 
<BarChart>
  ...
  <Chart.Legend content={<Chart.LegendContent />} />
</BarChart>

BarChart could be replaced with any other chart component like PieChart, LineChart, etc.

Area Chart

Used to show changes over time, the area chart highlights both trends and volume, with the filled area showing the magnitude of change. It’s useful when you want to emphasize total growth or decline.

Basic

Stacked

Linear

Gradient

Bar Chart

Bar charts are perfect for comparing different categories. The lengths of the bars make it easy to compare quantities side by side, showing differences between groups clearly.

Basic

Horizontal

Multiple

Custom Label

Mixed

Line Chart

A line chart is used to display data points connected by a straight line, showing trends or changes over time. It's ideal for visualizing continuous data, especially when you want to emphasize the direction of change (upward or downward trends) over a period.

Basic

Multiple

Dots

Dots Color

Custom Label

Linear

Pie Chart

A pie chart divides data into proportional slices to represent parts of a whole. It's ideal for displaying relative sizes of categories, especially when you need a visual comparison of percentages.

Basic

Interactive

Label

Stacked

Radar Chart

Radar charts display multiple variables in relation to a central point, allowing you to compare several categories at once. It's useful for visualizing performance, skills, or capabilities across multiple metrics.

Basic

Multiple

Dots

Icon

Line Only

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.

Basic

Grid

Stacked

Text

Shape

Radial

Radial charts are a type of chart that displays data in a circular format. They are often used to visualize data that is spread out in a circular pattern, such as the distribution of sales across different regions or the concentration of customers in different areas.

Basic

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.

<AreaChart accessibilityLayer />