Charts

New in RDS

Data visualization components built on Recharts with consistent RDS theming. Perfect for analytics dashboards, metrics displays, and data-driven UIs.

Overview

The RDS Chart components wrap Recharts primitives with consistent theming, responsive containers, and accessible tooltips. Import them from the UI package and combine with Recharts components.

RdsChartContainer

Responsive wrapper with theme context

RdsChartTooltip

Themed tooltip component

RdsChartLegend

Customizable legend display

RdsChartStyle

CSS variable injection

Bar Chart

Bar charts are ideal for comparing discrete categories. Use them for streaming counts, revenue by platform, or any comparative data.

Streaming Metrics

Usage

import {
  RdsChartContainer,
  RdsChartTooltip,
  RdsChartTooltipContent,
} from "@meinc/rds-ui-core";
import { Bar, BarChart } from "recharts";

const config = {
  streams: { label: "Streams", color: "hsl(var(--chart-1))" },
  downloads: { label: "Downloads", color: "hsl(var(--chart-2))" },
};

<RdsChartContainer config={config}>
  <BarChart data={data}>
    <RdsChartTooltip content={<RdsChartTooltipContent />} />
    <Bar dataKey="streams" fill="var(--color-streams)" />
    <Bar dataKey="downloads" fill="var(--color-downloads)" />
  </BarChart>
</RdsChartContainer>

Line Chart

Line charts show trends over time. Perfect for tracking streaming growth, revenue trends, or engagement metrics.

Revenue by Platform

Usage

import { Line, LineChart } from "recharts";

const config = {
  spotify: { label: "Spotify", color: "#1DB954" },
  apple: { label: "Apple Music", color: "#FC3C44" },
};

<RdsChartContainer config={config}>
  <LineChart data={data}>
    <RdsChartTooltip content={<RdsChartTooltipContent />} />
    <Line
      type="monotone"
      dataKey="spotify"
      stroke="var(--color-spotify)"
    />
    <Line
      type="monotone"
      dataKey="apple"
      stroke="var(--color-apple)"
    />
  </LineChart>
</RdsChartContainer>

Area Chart

Area charts emphasize the magnitude of values over time. Great for showing cumulative metrics or stacked comparisons.

Cumulative Streams

Usage

import { Area, AreaChart } from "recharts";

<RdsChartContainer config={config}>
  <AreaChart data={data}>
    <RdsChartTooltip content={<RdsChartTooltipContent />} />
    <Area
      type="monotone"
      dataKey="streams"
      fill="var(--color-streams)"
      fillOpacity={0.3}
      stroke="var(--color-streams)"
    />
  </AreaChart>
</RdsChartContainer>

Chart Configuration

The RdsChartConfig type defines how your data series are labeled and colored. Colors can use CSS variables or direct hex values.

import type { RdsChartConfig } from "@meinc/rds-ui-core";

const chartConfig: RdsChartConfig = {
  streams: {
    label: "Total Streams",
    color: "hsl(var(--chart-1))", // Use CSS variable
  },
  revenue: {
    label: "Revenue ($)",
    color: "#10B981", // Direct hex color
  },
  // Theme-aware colors
  engagement: {
    label: "Engagement",
    theme: {
      light: "#3B82F6",
      dark: "#60A5FA",
    },
  },
};