canvas-chart

Canvas Chart Rendering

Use this skill when the user requests a chart, graph, or visualization to be displayed on the Dashboard Canvas panel.

When to Use

Output a DOJO_CHART block whenever the user asks to:

• Draw a K-line / candlestick chart
• Plot a line chart (trend, indicators, time series)
• Show a bar chart (volume, comparisons)
• Display an area chart (cumulative returns, ranges)
• Create any ECharts-supported visualization on the canvas

DOJO_CHART Protocol

In your text response, output a fenced code block with the language tag DOJO_CHART. The block must contain a single JSON object with two fields:

```DOJO_CHART
{"data": <chart_data>, "script": "<echarts_render_script>"}
```

Field: data

An array of data points for the chart. Each element is an object representing one data point.

For K-line / OHLCV data, each element must have:

{"time": <unix_timestamp>, "open": <number>, "high": <number>, "low": <number>, "close": <number>, "volume": <number>}

For line / bar / area charts, use a simple structure:

{"time": <unix_timestamp>, "value": <number>}

Or for multi-series:

{"time": <unix_timestamp>, "value1": <number>, "value2": <number>}

Field: script

A JavaScript function body string. The sandbox runtime provides three variables:

• chart — an initialized ECharts instance (already called echarts.init(container))
• data — the data array from above
• echarts — the global ECharts library reference

Your script must call chart.setOption({...}) to render. Do not call echarts.init() — the chart is already initialized.

Dark Theme

The Dashboard uses a dark theme. Always apply these colors:

{
  backgroundColor: 'transparent',
  textStyle: { color: '#e0e0e0' },
  title: { textStyle: { color: '#e0e0e0' } },
  legend: { textStyle: { color: '#aaaaaa' } },
  tooltip: { backgroundColor: '#1a1a2e', borderColor: '#333', textStyle: { color: '#e0e0e0' } }
}