Radiant Charts now offers two API styles. The Components API is the recommended default — it provides better type safety, discoverability, and a more idiomatic React authoring experience. The Options API remains fully supported with no breaking changes. This guide shows how to convert existing code.

No breaking changes. The Options API (<RadiantChart options={...}>) is not deprecated. It remains the best choice for dynamic dashboards, config-driven charts, and programmatic generation. You can mix both styles freely.

Single Series

The most common conversion: a chart with one series.

Components API

import { Chart, Bar } from 'radiant-charts';

<Chart data={data} height={400}>
  <Bar xKey="month" yKey="revenue" fill="#6366f1" />
</Chart>

Multi-Series

Add multiple series children — each becomes one entry in the engine's series array.

Components API

import { Chart, Bar, Line, Legend } from 'radiant-charts';

<Chart data={data} height={400}>
  <Legend position="top" />
  <Bar xKey="month" yKey="revenue" title="Revenue" grouped />
  <Line xKey="month" yKey="target" title="Target" stroke="#f59e0b" />
</Chart>

Financial Charts

Specialized chart types like <Candlestick> have typed props — TypeScript will enforce that openKey, highKey, lowKey, and closeKey are present.

Components API

import { Chart, Candlestick, Indicator } from 'radiant-charts';

<Chart data={ohlcData} height={500}>
  <Candlestick
    xKey="date"
    openKey="open"
    highKey="high"
    lowKey="low"
    closeKey="close"
  />
  <Indicator type="SMA" period={20} sourceKey="close" stroke="#f59e0b" />
</Chart>

Axes, Title, and Legend

Top-level options become either <Chart> props or dedicated child components:

Components API

import { Chart, Bar, XAxis, YAxis, Title, Legend } from 'radiant-charts';

<Chart data={data} theme="dark" height={400}>
  <Title text="Quarterly Revenue" />
  <XAxis fontSize={11} rotation={-45} />
  <YAxis />
  <Legend position="bottom" />
  <Bar xKey="quarter" yKey="revenue" />
</Chart>

Conversion Reference

Mapping from Options API fields to Components API equivalents:

Options API	Components API
`options.data`	`<Chart data={...}>`
`options.theme`	`<Chart theme="dark">`
`options.series[{ type, ...props }]`	`<Bar {...props} />, <Line {...props} />, etc.`
`options.title`	`<Title text="..." />`
`options.subtitle`	`<Subtitle text="..." />`
`options.legend`	`<Legend position="top" />`
`options.showXAxis / xAxisFontSize`	`<XAxis show fontSize={11} />`
`options.showYAxis / yAxisFontSize`	`<YAxis show fontSize={11} />`
`options.crosshair`	`<Chart crosshair={{ x: true }}>`
`options.zoom`	`<Chart zoom>`
`options.navigator`	`<Chart navigator={{ enabled: true }}>`
`options.tooltip`	`<Tooltip mode="shared" /> or <Chart tooltip={...}>`
`options.indicators`	`<Indicator type="SMA" period={20} sourceKey="close" />`
`options.animation`	`<Chart animation={{ enabled: true, duration: 500 }}>`
`options.annotations`	`<AnnotationMark type="line" value={50} />`
`ref.exportToPng()`	`<Chart chartRef={ref}> then ref.current.exportToPng()`

When to Stay with Options API

Dynamic series generation — if the number and types of series are determined at runtime from a config object or API response.
Dashboard layouts — ChartDashboard and ChartDesigner work with serializable layout objects.
Passing charts as props — the useChart(options) hook returns a renderable element and its ref for composition in layout components.
Server-driven config — when chart configs come from a CMS or database.

Next Steps

Getting Started — Full setup guide with both API styles.
Core Concepts — The rendering pipeline and architecture behind both APIs.
Demo Gallery — Every chart demo includes a toggle showing both API approaches.

PreviousTooltips Next Bar Charts

Was this article helpful?

Radiant Charts

Now open source! Compare Radiant vs Chart.js, ECharts, AG Grid & more →

Radiant Charts Help Center

Knowledge Base/Core Interactions/Migration Guide

Data Grid

Overview Getting Started Column Definitions Sorting & Filtering Cell Renderers Pivot Mode

Core Interactions

Getting Started Installation Theming Licensing & Offline Keys Tooltips Migration Guide

Chart Types

Categorical

Part to Whole

Pie Charts Donut Charts Treemap Charts Circle Packing Icicle Charts Dendrograms Waffle Charts Sunburst Charts

Distribution

Histogram BoxPlot Charts Ridgeline Plots Beeswarm Plots Strip Plots ECDF Charts KDE Plots QQ Plots Pareto Charts Error Bar Control Chart Violin Plots Statistical Charts

Relationship

Scatter Charts Bubble Charts Density Contours Hexbin Charts Ternary Plots Venn Diagrams

Flow & Networks

Waterfall Charts Funnel Charts Sankey Diagrams Alluvial Diagrams Arc Diagrams Chord Diagrams Dependency Wheel Gantt Charts Force Graphs Streamgraph

Specialized

Geospatial

Choropleth Maps Bubble Map Flow Maps Bivariate Choropleth Maps Cartograms Dot Density Maps

Comparison

Range Bar Chart Grouped Stacked Bar

Interaction

Advanced Interactivity

Part-to-Whole

Pictogram Charts

Statistical

Scatterplot Matrix (SPLOM)Stem & Leaf Plots Rug Plots Population Pyramids Fan Charts Voronoi Diagrams

Financial

Depth Charts Heikin-Ashi Charts Kagi Charts

Scientific

Surface Plots (3D)Vector Field Charts Smith Charts Bode Plots Nyquist Plots Piper Diagrams Wind Rose Charts

Flow

Parallel Sets

Migration Guide: Options to Components API

Single Series

The most common conversion: a chart with one series.

Components API

import { Chart, Bar } from 'radiant-charts';

<Chart data={data} height={400}>
  <Bar xKey="month" yKey="revenue" fill="#6366f1" />
</Chart>

Multi-Series

Add multiple series children — each becomes one entry in the engine's series array.

Components API

import { Chart, Bar, Line, Legend } from 'radiant-charts';

<Chart data={data} height={400}>
  <Legend position="top" />
  <Bar xKey="month" yKey="revenue" title="Revenue" grouped />
  <Line xKey="month" yKey="target" title="Target" stroke="#f59e0b" />
</Chart>

Financial Charts

Specialized chart types like <Candlestick> have typed props — TypeScript will enforce that openKey, highKey, lowKey, and closeKey are present.

Components API

import { Chart, Candlestick, Indicator } from 'radiant-charts';

<Chart data={ohlcData} height={500}>
  <Candlestick
    xKey="date"
    openKey="open"
    highKey="high"
    lowKey="low"
    closeKey="close"
  />
  <Indicator type="SMA" period={20} sourceKey="close" stroke="#f59e0b" />
</Chart>

Axes, Title, and Legend

Top-level options become either <Chart> props or dedicated child components:

Components API

import { Chart, Bar, XAxis, YAxis, Title, Legend } from 'radiant-charts';

<Chart data={data} theme="dark" height={400}>
  <Title text="Quarterly Revenue" />
  <XAxis fontSize={11} rotation={-45} />
  <YAxis />
  <Legend position="bottom" />
  <Bar xKey="quarter" yKey="revenue" />
</Chart>

Conversion Reference

Mapping from Options API fields to Components API equivalents:

Options API	Components API
`options.data`	`<Chart data={...}>`
`options.theme`	`<Chart theme="dark">`
`options.series[{ type, ...props }]`	`<Bar {...props} />, <Line {...props} />, etc.`
`options.title`	`<Title text="..." />`
`options.subtitle`	`<Subtitle text="..." />`
`options.legend`	`<Legend position="top" />`
`options.showXAxis / xAxisFontSize`	`<XAxis show fontSize={11} />`
`options.showYAxis / yAxisFontSize`	`<YAxis show fontSize={11} />`
`options.crosshair`	`<Chart crosshair={{ x: true }}>`
`options.zoom`	`<Chart zoom>`
`options.navigator`	`<Chart navigator={{ enabled: true }}>`
`options.tooltip`	`<Tooltip mode="shared" /> or <Chart tooltip={...}>`
`options.indicators`	`<Indicator type="SMA" period={20} sourceKey="close" />`
`options.animation`	`<Chart animation={{ enabled: true, duration: 500 }}>`
`options.annotations`	`<AnnotationMark type="line" value={50} />`
`ref.exportToPng()`	`<Chart chartRef={ref}> then ref.current.exportToPng()`

When to Stay with Options API

Dynamic series generation — if the number and types of series are determined at runtime from a config object or API response.
Dashboard layouts — ChartDashboard and ChartDesigner work with serializable layout objects.
Passing charts as props — the useChart(options) hook returns a renderable element and its ref for composition in layout components.
Server-driven config — when chart configs come from a CMS or database.

Next Steps

Getting Started — Full setup guide with both API styles.
Core Concepts — The rendering pipeline and architecture behind both APIs.
Demo Gallery — Every chart demo includes a toggle showing both API approaches.

PreviousTooltips Next Bar Charts

Was this article helpful?