Daily Tip: Don't hide important stuff in hamburgers!
The Path To Glory:
1. Sort Content
2. Import Styles
3. Mark-Up
4. Customize
5. Publish
Remind Your Way:
Clean The Noise,
Highlight The Value

The Value

Principles

Tips

Stop thinking about decorations, start thinking about the value.

The only thing that matters is the data your audience is came for. Design, layouts, make-up and decorations are just your tools to highlight the value.

Imagine you have 30 secs to pitch your data. What would you say? What decision maker need to know? How would you present it? What would you highlight? What would you hide?

That's it. That's the only thing that matters. Delete the noise. Make your audience satisfied.

Manuals:
Settings
  • Base Unit
  • Viewport & Container
  • Spacing Scale
  • Brand Palette
  • Semantic Colors
  • Text Colors
  • Typefaces
  • UI Tokens
  • States
  • Naming System
Modules
Layouts
  • General Layout
  • Full-Width
  • Mobile Only
  • Floors System
Components
  • Sections
  • Cards
  • Card Decks
  • Tables
  • Images
Decorations
  • Text Captions
  • Spaces
  • Dividers
  • Shadows
Usage
  • Import Styles
  • Customization
  • Basic Scripts
  • Mark-Up 101
Need Help?
Ask GPT

Actualy, the most effective way to solve your problem

Create an Issue

If you find a bug or have a feature request

Let's Chat

To discuss a proper way or provide some feedback

Charts Backlog

Features and chart types planned for future releases.

Feature API sketch Description
Annotations

Options for marking up the chart area with reference context
Reference lines referenceLines: [{ value, axis, label, color, strokeDash }] Horizontal lines at specified Y values (or vertical at X values) with optional label. axis: 'x' | 'y', defaults to 'y'.
Callouts and overlays annotations: [{ x, y, text, image }] Text callouts and image overlays anchored to data coordinates or pixel position on the chart area.
Chart structure

Extensions to the shared base layout rendered above and below the SVG area
Notes for charts note Renders a <p class="rc-chart-note"> below the source line, styled with theme.muted. Intended for disclaimers, data caveats, and editorial context. Accepts string or HTMLElement.
Interactive data source source Allow source to accept { text, href } in addition to plain string, rendering as an <a> tag for data attribution links.
New chart types
Candlestick RareCharts.Candlestick OHLCV candlestick chart for price and financial data visualization.
Hierarchies RareCharts.Hierarchies Hierarchical data views such as tree, treemap, cluster, pack, or related structures for nested datasets and ownership-style breakdowns.
Multi-chart container RareCharts.MultiChart Single chart block that composes up to several child charts under one shared title, subtitle, source, and legend. Intended for dashboard-style layouts where multiple chart types belong to one narrative unit.
Bar series
Bar value labels barLabels: true Renders formatted value labels above positive bars and below negative bars. Uses yTickFormat for formatting. Available on Bar and DualAxes.
Bar width control barWidth: number Absolute bar width in px as an alternative to the proportional barWidthRatio. Supports per-series override.
Per-bar color override data: [{ label, value, color }] Allow an individual bar to specify its own fill color without redefining the full chart palette. Useful for highlighting a selected category, outlier, or benchmark item.
Diverging bar chart RareCharts.DivergingBar Bar chart centered on a shared baseline for before/after, left/right, positive/negative, or category comparison layouts.
Map
Map overlays and labels layers: [{ type, data, ... }] Add overlay layers to maps for extra information such as points, routes, bubbles, labels, markers, or other contextual geographic annotations.
Clickable map regions onRegionClick: ({ feature, item, event }) => void or item.href Allow clicking a region to trigger navigation or custom actions. Intended for drill-down flows, region detail pages, dashboards, and linked geographic navigation.
Graph
Graph refactor RareCharts.Graph Rework the Graph class: fix layout and rendering issues, improve animation, and add support for nested or grouped graph structures.
Interactivity
Legend series isolation legendInteractive: true Clicking a legend item isolates that series. All others are dimmed. Clicking the active item or double-clicking restores all series.
Tooltip header style theme.tooltip.header Dedicated theme token for the tooltip header row (date label). Allows independent control of header background and text color, separate from tooltip.bg and tooltip.text.
Arbitrary in-chart labels labels: [{ x, y, text, dx, dy, color }] or per-series labelFormat Render custom text labels directly inside the chart area for lines, bars, and highlighted values. Intended for editorial annotations, direct labeling, and reducing reliance on legends or tooltips.
Branding
Branding API RareCharts.setBrand(config) Global brand configuration applied to all chart instances: logo image (rendered as a watermark), accent color, and font family. Eliminates per-chart theme repetition in multi-chart dashboards.