// In an app: import { setupECharts } from '@aparte/plugin-echarts'; setupECharts();
// The model writes the library's own option in an echarts fence: each fence is a code segment.
const option = {
title: { text: 'Revenue by quarter (k€)' }, tooltip: { trigger: 'axis' }, legend: { bottom: 0 },
xAxis: { type: 'category', data: ['Q1', 'Q2', 'Q3', 'Q4'] }, yAxis: { type: 'value' },
series: [
{ name: '2025', type: 'bar', data: [120, 132, 101, 134] },
{ name: '2026', type: 'bar', data: [140, 162, 151, 190] },
],
};
const viewport = document.querySelector('aparte-chat-viewport');
viewport.appendMessage({ id: 'u1', role: 'user', content: 'Compare our revenue by quarter with last year.', timestamp: Date.now() });
viewport.appendMessage({ id: 'a1', role: 'assistant', timestamp: Date.now(), segments: [
{ id: 's1', type: 'text', content: 'Every quarter is up on last year, and **Q4 by 42%**:' },
{ id: 's2', type: 'code', language: 'echarts', content: JSON.stringify(option, null, 2) },
] });