Documentation

Everything you need to integrate the diCharts SDK into your trading platform.

Getting Started

Add the SDK script tag to your HTML <head>:

<script src="https://cdn.dicharts.com/sdk/v1/dicharts.min.js"></script>

Or use as an ES module:

<script type="module">
  import { createWidget } from 'https://cdn.dicharts.com/sdk/v1/dicharts.esm.js';
</script>

Requirements: WebGPU support — Chrome 113+, Edge 113+, Firefox (Nightly), Safari 18+. No other dependencies required. The SDK is framework-agnostic and works with React, Vue, Svelte, or plain JS/TS.

Quick Start

A complete working example — copy this into an HTML file and open it in your browser:

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.dicharts.com/sdk/v1/dicharts.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 100%; height: 500px;"></div>
  <script>
    // Generate sample data
    const data = [];
    const volumes = [];
    let price = 42000;
    const now = Date.now();

    for (let i = 0; i < 200; i++) {
      const ts = now - (200 - i) * 60000;
      const open = price;
      const change = (Math.random() - 0.48) * price * 0.008;
      const close = open + change;
      const high = Math.max(open, close) + Math.random() * price * 0.003;
      const low = Math.min(open, close) - Math.random() * price * 0.003;
      data.push([ts, open, high, low, close]);
      volumes.push(Math.round(50 + Math.random() * 4950));
      price = close;
    }

    // Create widget
    DiCharts.createWidget('#chart', {
      symbol: 'BTC/USDT',
      theme: 'dark',
      style: 'classic',
      data: data,
      volumes: volumes,
      volume: true,
      toolbar: true,
      chartNav: true,
    }).then(widget => {
      console.log('Chart ready!', widget);
    });
  </script>
</body>
</html>

Widget Configuration

DiCharts.createWidget(target, config) creates a full-featured trading chart widget.

target is a CSS selector or DOM element. Returns Promise<DiWidget>.

Option	Type	Default	Description
`symbol`	string	`''`	Symbol name displayed in the toolbar (e.g. 'BTC/USDT').
`theme`	'dark' \| 'light'	`'dark'`	Chart colour theme.
`style`	CandleStyle	`'classic'`	Candle rendering style. See Chart Styles below.
`data`	OHLCTuple[]	`[]`	Initial OHLC data. Each tuple: [timestamp, open, high, low, close].
`volumes`	number[]	`[]`	Volume data array. Must match the length of data.
`volume`	boolean	`true`	Show volume bars below the chart.
`toolbar`	boolean \| ToolbarConfig	`true`	Show toolbar. Pass true for all features, false to hide, or an object to customise.
`chartNav`	boolean	`true`	Show zoom/pan/reset navigation overlay (appears on hover).
`overlays`	OverlayConfig[]	`[]`	Initial overlay indicators (SMA, EMA, Bollinger, etc.).
`subPanes`	SubPaneConfig[]	`[]`	Initial sub-pane indicators (RSI, MACD, etc.).
`autoScroll`	boolean	`true`	Auto-scroll to latest candle when new data arrives.
`streaming`	StreamingConfig	`undefined`	Enable tick aggregation for live streaming. Set { timeframe: '1m' }.
`onTimeframeChange`	(tf) => void	`—`	Called when user clicks a timeframe button.
`onReady`	(widget) => void	`—`	Called when the widget is fully initialised.

Toolbar Configuration

Pass a ToolbarConfig object to selectively enable or disable toolbar features:

Option	Type	Default	Description
`stylePicker`	boolean	`true`	Chart style dropdown.
`timeframes`	boolean	`true`	Timeframe buttons (1s, 1m, 5m, 15m, 1H, 4H, 1D).
`indicators`	boolean	`true`	Indicators popup with search and tabs.
`layout`	boolean	`true`	Multi-layout picker (single, 2-up, quad, etc.).
`settings`	boolean	`true`	Settings popup with volume & order line toggles.
`fullscreen`	boolean	`true`	Fullscreen toggle button.
`themeToggle`	boolean	`true`	Dark/light theme toggle button.

Example — standard chart without timeframes, indicators, or layout picker:

DiCharts.createWidget('#chart', {
  data: candles,
  volumes: volumes,
  toolbar: {
    stylePicker: true,
    settings: true,
    fullscreen: true,
    themeToggle: true,
    timeframes: false,    // hide timeframe buttons
    indicators: false,    // hide indicator picker
    layout: false,        // hide layout picker
  },
});

Chart Styles

Eight chart styles, switchable at creation or runtime via widget.setStyle():

Value	Description
`'classic'`	Standard filled candlesticks
`'hollow'`	Hollow up-candles, filled down-candles
`'heikin-ashi'`	Smoothed candlesticks for trend identification
`'bar'`	Traditional OHLC bar chart
`'line'`	Close-price line chart
`'area'`	Filled area below close price line
`'baseline'`	Above/below baseline chart with two colours
`'renko'`	Price-movement blocks that filter noise

Widget Methods

The DiWidget object returned by createWidget():

Method	Description
`addTick({ timestamp, price, volume? })`	Feed a raw price tick for live streaming. The SDK aggregates ticks into OHLC candles.
`appendCandle([ts, o, h, l, c])`	Append a completed OHLC candle.
`updateLastCandle([ts, o, h, l, c])`	Update the last (forming) candle.
`appendVolume(number)`	Append a volume value for the latest candle.
`setData(candles)`	Replace all candle data.
`setVolumes(volumes)`	Replace all volume data.
`setTheme(theme)`	Change theme programmatically ('dark' or 'light').
`setStyle(style)`	Change candle style programmatically (e.g. 'heikin-ashi').
`chart`	Access the underlying DiChartInstance for advanced operations (order lines, overlays, etc.).
`dispose()`	Destroy the widget and clean up all resources.

Advanced: Underlying Chart API

Access widget.chart for lower-level operations like order lines and custom options:

// Access underlying chart instance for advanced operations
widget.chart.addOrderLine({
  id: 'buy-limit',
  price: 43000,
  label: 'Buy Limit',
  color: '#26a69a',
  style: 'dashed',
});

widget.chart.removeOrderLine('buy-limit');

widget.chart.setOptions({
  crosshair: { enabled: false },
  priceAxis: { scaleType: 'log' },
});

Technical Indicators

11 built-in indicators, accessible via the toolbar or programmatically through config.

Overlays (drawn on the price chart)

SMA— Simple Moving Average — period 20, colour #FFD700

EMA— Exponential Moving Average — period 9, colour #FF6B6B

Bollinger Bands— Volatility bands — period 20, StdDev 2, colour #4ECDC4

VWAP— Volume-Weighted Average Price — colour #FF9800

Ichimoku Cloud— Tenkan 9, Kijun 26, Senkou 52, Displacement 26

Oscillators (drawn in separate sub-panes)

RSI— Relative Strength Index — period 14

MACD— Moving Average Convergence Divergence — fast 12, slow 26, signal 9

Stochastic— Stochastic Oscillator — period 14, SmoothK 3, SmoothD 3

ATR— Average True Range — period 14

OBV— On-Balance Volume

ADX— Average Directional Index — period 14

Add indicators programmatically:

const widget = await DiCharts.createWidget('#chart', {
  data: candles,
  volumes: volumes,
  overlays: [
    { id: 'sma20', type: 'sma', period: 20, color: '#FFD700' },
    { id: 'ema9', type: 'ema', period: 9, color: '#FF6B6B' },
    { id: 'bb', type: 'bollinger', period: 20, stdDev: 2, color: '#4ECDC4' },
  ],
  subPanes: [
    { id: 'rsi', type: 'rsi', period: 14, height: 120 },
    { id: 'macd', type: 'macd', fastPeriod: 12, slowPeriod: 26, signalPeriod: 9, height: 130 },
  ],
});

Real-time Streaming

Enable live streaming by setting the streaming config, then feed ticks via widget.addTick():

const widget = await DiCharts.createWidget('#chart', {
  data: historicalCandles,
  volumes: historicalVolumes,
  streaming: { timeframe: '1m' },
  toolbar: true,
});

// Connect to your WebSocket and feed ticks
ws.onmessage = (msg) => {
  const trade = JSON.parse(msg.data);
  widget.addTick({
    timestamp: trade.time,
    price: trade.price,
    volume: trade.qty,
  });
};

The SDK automatically handles:

Aggregating ticks into OHLC candles at the selected timeframe
Updating the forming (in-progress) candle in real-time
Appending completed candles when a timeframe boundary is crossed
Updating the live price display in the toolbar

Available Timeframes

Key	Label	Interval
`'1s'`	1s	1 second
`'1m'`	1m	1 minute
`'5m'`	5m	5 minutes
`'15m'`	15m	15 minutes
`'1h'`	1H	1 hour
`'4h'`	4H	4 hours
`'1d'`	1D	1 day

Multi-Layout

The layout picker in the toolbar offers 5 chart layouts. Secondary panes automatically show different timeframes (15m, 1h, 4h) with the same symbol, style, and theme.

Single— One chart pane (default)

Two Vertical— Side-by-side charts

Two Horizontal— Stacked charts

1 + 2 Right— Large chart + 2 smaller on right

Quad Grid— 2×2 grid

Standalone Components

Six Canvas2D chart components for building complete dashboards. These work in all browsers (no WebGPU required) and are independent of the widget system.

Depth Chart— Order book depth visualisation with bid/ask stepped area curves.

Heatmap— Colour-coded treemap sized by weight and coloured by change value.

Sparkline— Tiny inline chart for watchlists and tables. No axes, no interaction.

Donut Chart— Donut or pie chart for portfolio allocation and distributions. Supports transparent background for themed containers.

Bar Chart— Feature-complete bar chart: vertical/horizontal, grouped/stacked series, per-bar colours, interactive hover with tooltips, entry animations (grow, fadeGrow, spring), custom label positioning, and transparent backgrounds.

Gauge— Semi-circle gauge meter for displaying a value within a range.

// Depth Chart
const depth = DiCharts.createDepthChart(container, { bids, asks });

// Heatmap
const heatmap = DiCharts.createHeatmap(container, { data });

// Sparkline
const spark = DiCharts.createSparkline(container, { data });

// Donut Chart — transparent background
const donut = DiCharts.createDonutChart(container, {
  data: slices,
  background: 'transparent',
});

// Bar Chart — basic with animation
const bar = DiCharts.createBarChart(container, {
  data: pnlByDay,
  autoColor: true,
  animation: true,
});

// Bar Chart — horizontal with inside labels
const hBar = DiCharts.createBarChart(container, {
  data: items,
  orientation: 'horizontal',
  labelPosition: 'inside',
});

// Bar Chart — per-bar colours (mixed)
const mixed = DiCharts.createBarChart(container, {
  data: [
    { label: 'BTC', value: 45, color: '#f7931a' },
    { label: 'ETH', value: 30, color: '#627eea' },
  ],
  autoColor: false,
});

// Bar Chart — grouped series
const grouped = DiCharts.createBarChart(container, {
  seriesData: [
    { label: 'Q1', values: { Revenue: 400, Costs: 250 } },
    { label: 'Q2', values: { Revenue: 500, Costs: 300 } },
  ],
});

// Bar Chart — stacked + legend
const stacked = DiCharts.createBarChart(container, {
  seriesData: quarterlyData,
  stacked: true,
  showLegend: true,
});

// Bar Chart — interactive (hover + tooltip)
const interactive = DiCharts.createBarChart(container, {
  data: items,
  interactive: true,
  showTooltip: true,
  animation: { easing: 'spring', style: 'fadeGrow' },
  onClick: (item, idx) => console.log(item.label),
});

// Gauge
const gauge = DiCharts.createGauge(container, { value, min: 0, max: 100 });

Framework Integration

The SDK is framework-agnostic. It only needs a DOM element with explicit dimensions. Here are examples for popular frameworks:

React

import { useEffect, useRef } from 'react';

declare const DiCharts: { createWidget: Function };

export default function Chart({ data, volumes }) {
  const ref = useRef<HTMLDivElement>(null);
  const widgetRef = useRef(null);

  useEffect(() => {
    if (!ref.current) return;

    DiCharts.createWidget(ref.current, {
      symbol: 'BTC/USDT',
      data,
      volumes,
      toolbar: true,
    }).then(w => { widgetRef.current = w; });

    return () => {
      widgetRef.current?.dispose();
      widgetRef.current = null;
    };
  }, []);

  return <div ref={ref} style={{ width: '100%', height: '500px' }} />;
}

Vue

<template>
  <div ref="chartEl" style="width: 100%; height: 500px" />
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const chartEl = ref(null);
let widget = null;

onMounted(async () => {
  widget = await DiCharts.createWidget(chartEl.value, {
    symbol: 'ETH/USDT',
    data: candles,
    volumes: volumes,
    toolbar: true,
  });
});

onUnmounted(() => {
  widget?.dispose();
});
</script>

Vanilla JS

<div id="chart" style="width: 100%; height: 600px;"></div>
<script>
  DiCharts.createWidget('#chart', {
    data: myCandles,
    volumes: myVolumes,
    toolbar: true,
  });
</script>

Troubleshooting

Chart shows blank/black area

Ensure your browser supports WebGPU (Chrome 113+, Edge 113+, Safari 18+). Check DevTools console for errors. Verify the container has non-zero width AND height.

"DiCharts is not defined"

The SDK script hasn't loaded. Check the Network tab in DevTools. Make sure the <script> tag is before your code, or use defer and wait for DOMContentLoaded.

Toolbar appears but no candles

Verify data is a valid array of [timestamp, open, high, low, close] tuples. Ensure timestamps are in milliseconds (not seconds). Check that data has at least a few entries.

Cached old version

Add or bump the ?v= query parameter on the script tag: <script src="...dicharts.min.js?v=2">. Hard-refresh with Ctrl+Shift+R (Cmd+Shift+R on Mac).

Mouse & Touch Interactions

Scroll wheelZoom in/out

Click + dragPan left/right

HoverShow crosshair + tooltip with OHLC values

Navigation buttonsPan, zoom, reset (appear on hover at bottom centre)