@evidencemd/charts

Zero-dependency React SVG chart renderer for EvidenceMD API responses.

~3KB minified. Zero external dependencies. 3 lines to integrate.

Install

npm install @evidencemd/charts

Usage

import { parseCharts, EvidenceMDChart } from '@evidencemd/charts';

// Parse the API response
const { text, charts } = parseCharts(response.choices[0].message.content);

// Render
<div>{text}</div>
{charts.map((c, i) => <EvidenceMDChart key={i} chart={c} />)}

API

parseCharts(content: string)

Extracts ```chart blocks from a string and returns:

{
  text: string;    // Response text with chart blocks removed
  charts: object[]; // Parsed chart JSON objects
}

Malformed chart blocks are silently skipped. EvidenceMDChart returns null for invalid input — handle accordingly:

{charts.map((c, i) => <EvidenceMDChart key={i} chart={c} /> || <span>Chart unavailable</span>)}

<EvidenceMDChart>

| Prop | Type | Default | Description | |------|------|---------|-------------| | chart | object | required | Parsed chart object from parseCharts | | width | number | 560 | SVG viewBox width | | height | number | 280 | SVG viewBox height | | colors | string[] | PALETTE | Color palette (8 colors, wraps for 9+) |

PALETTE

Default 8-color palette. Import and extend if needed:

import { PALETTE } from '@evidencemd/charts';
const myColors = [...PALETTE, "#f97316", "#14b8a6"];
<EvidenceMDChart chart={c} colors={myColors} />

Supported Chart Types

| Type | Description | |------|-------------| | line | Values over a sequence (time, progression) | | area | Same as line, emphasizing volume | | bar | Comparing discrete categories | | grouped-bar | Multiple measures across categories | | pie | Parts of a whole (max 7 slices recommended) | | scatter | Correlation between two numeric variables |

Chart Schema

Charts follow the EvidenceMD API visualization schema:

{
  "type": "bar",
  "title": "GLP-1 Drug Efficacy",
  "xKey": "drug",
  "yKey": "efficacy",
  "xLabel": "Drug Name",
  "yLabel": "HbA1c Reduction (%)",
  "data": [
    { "drug": "Semaglutide", "efficacy": 1.8 },
    { "drug": "Tirzepatide", "efficacy": 2.1 }
  ],
  "annotations": [
    { "type": "line", "axis": "y", "value": 1.5, "label": "Clinical Threshold" },
    { "type": "range", "axis": "y", "min": 1.0, "max": 2.0, "label": "Target Range" }
  ]
}

Key Fields

• xKey — key name for x-axis labels in each data object
• yKey — key name for single-series numeric values
• yKeys — array of key names for multi-series (grouped-bar, multi-line)
• annotations — optional reference lines (type: "line") and shaded ranges (type: "range")

Enable Visualizations in the API

curl https://evidencemd.ai/api/v1/chat/completions \
  -H "Authorization: Bearer $API_KEY" \
  -d '{
    "model": "evidencemd-pro",
    "messages": [
      {"role": "system", "content": "Generate charts when comparing drug data."},
      {"role": "user", "content": "Compare GLP-1 receptor agonists"}
    ],
    "include_visualizations": true
  }'

Chart generation is controlled by your system prompt. Set include_visualizations: true to enable it, then instruct the model via the system message.

Peer Dependencies

• react >= 16.8.0

License

MIT