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 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
Layout Patterns
  • 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

Actually, 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. The base annotations API (vertical and horizontal point/range markers) ships in v0.9.5 — see Annotations. Items below are follow-ups.
Annotations on Bar (time-series mode) annotations on RareCharts.Bar Wire the same annotations API into Bar when its data has a date field. Useful for marking events on daily volume or transaction-count bars.
Callouts and image overlays callouts: [{ x, y, text, image, dx, dy }] Text callouts and image overlays anchored to data coordinates or pixel positions inside the chart area. Distinct from annotations: callouts are free-form content at arbitrary (x, y) rather than axis-aligned markers.
Band series

The band (confidence-ribbon) series ships on RareCharts.Line in v0.9.6 — see Bands. Items below extend it.
Bands on Time Series and Dual Axes type: 'band' on RareCharts.TimeSeries / RareCharts.DualAxes Wire the same { date, lower, upper } band series into the other date-based chart classes. Useful for confidence ranges on a zoomable price feed or alongside a bar/line dual-axis layout. Currently band rendering lives only in Line.
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.