Dùng trong thẻ được không?

Được: GET /v1/chart-image?c= &api_key=… trả về ảnh PNG trực tiếp. Cấu hình dài nên gửi bằng POST.

Ảnh biểu đồ API

Vẽ biểu đồ cột, đường, vùng, tròn, vành khuyên, phân tán, sparkline từ cấu hình JSON (gần Chart.js) ra PNG, SVG; gắn URL vào <img> hay email.

GETPOSThttps://apibox.io.vn/v1/chart-image

Ảnh & Mã▶ Dùng thử online

Mô tả biểu đồ bằng JSON và nhận lại ảnh: {"type":"bar","data":{"labels":[…],"datasets":[{"label":"…","data":[…]}]},"options":{"title":"…"}}. Các loại: bar, horizontal-bar (hoặc indexAxis: "y" như Chart.js), line, area, pie, doughnut, scatter (điểm {x, y}) và sparkline. Nhiều dataset được vẽ cạnh nhau (hoặc chồng lên nhau với stacked: true), một dataset của biểu đồ cột có thể vẽ dạng line, giá trị null làm đứt đường, tension làm đường cong mềm. Tuỳ chọn: title, subtitle, legend (top, bottom, right, false), x_label / y_label, min / max, values (hiện số liệu), prefix / suffix (" ₫", "%"), locale (vi viết 1.234,5 và 12 tr / 3 tỷ trên trục), theme (light / dark), font_size và màu từng dataset (color, backgroundColor, hoặc mảng màu cho từng cột). Các khoá quen thuộc của Chart.js (plugins.title, plugins.legend, scales.y.min, scales.x.stacked…) đều được hiểu, nên phần lớn cấu hình kiểu QuickChart dùng được ngay.

API nhận GET với cấu hình JSON mã hoá URL trong tham số c, nên có thể đặt thẳng URL vào <img src>, email, tin nhắn Slack / Zalo hay báo cáo Markdown / PDF. Ảnh PNG (mặc định) và JPEG do bộ vẽ riêng của chúng tôi tạo với phông Be Vietnam Pro, chữ tiếng Việt hiển thị giống nhau ở mọi nơi; scale=2 cho ảnh nét trên màn hình retina. SVG mặc định chuyển chữ thành đường nét vector (hiển thị chính xác không cần phông), svg_text=text để dùng thẻ <text> thật.

Kích thước: width × height tới 2000 px và tối đa 4 megapixel tính cả scale, tối đa 20 dataset và 10.000 điểm. Bảng màu đã được kiểm tra cho người mù màu; bộ vẽ do chúng tôi tự viết (không dùng mã QuickChart hay Chart.js).

Tham số

Tên	Vị trí	Kiểu	Bắt buộc	Mặc định
`c`	query\|body	object	có		Cấu hình biểu đồ (JSON; mã hoá URL khi dùng GET): `type`, `data.labels`, `data.datasets`, `options`. Có thể dùng tên `chart`.
`format`	query\|body	string	không	`png`	`png`, `svg`, `jpeg` hoặc `json` (PNG dạng base64 + SVG).
`width`	query\|body	number	không	`600`	Chiều rộng, pixel (50–2000).
`height`	query\|body	number	không	`400`	Chiều cao, pixel (30–2000).
`scale`	query\|body	number	không	`1`	Tỷ lệ điểm ảnh của PNG / JPEG (1–4), ví dụ 2 cho màn hình retina.
`theme`	query\|body	string	không	`light`	`light` hoặc `dark` (hoặc `options.theme`).
`locale`	query\|body	string	không	`en`	`vi` để định dạng số kiểu Việt Nam (1.234,5; 12 tr; 3 tỷ).
`background`	query\|body	string	không		Màu nền (`#fff`, `transparent`…).
`svg_text`	query\|body	string	không	`paths`	Chỉ với SVG: `paths` (chữ thành đường nét) hoặc `text` (thẻ `<text>`).

Ví dụ

curl "https://apibox.io.vn/v1/chart-image?c=%7B%22type%22%3A%22bar%22%2C%22data%22%3A%7B%22labels%22%3A%5B%22T1%22%2C%22T2%22%2C%22T3%22%5D%2C%22datasets%22%3A%5B%7B%22label%22%3A%22Doanh%20thu%22%2C%22data%22%3A%5B12%2C19%2C7%5D%7D%5D%7D%7D" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -o output

const res = await fetch('https://apibox.io.vn/v1/chart-image?c=%7B%22type%22%3A%22bar%22%2C%22data%22%3A%7B%22labels%22%3A%5B%22T1%22%2C%22T2%22%2C%22T3%22%5D%2C%22datasets%22%3A%5B%7B%22label%22%3A%22Doanh%20thu%22%2C%22data%22%3A%5B12%2C19%2C7%5D%7D%5D%7D%7D', {
  method: 'GET',
  headers: {
    Authorization: 'Bearer YOUR_API_KEY',
  },
});
const blob = await res.blob();

import requests

res = requests.get(
    "https://apibox.io.vn/v1/chart-image?c=%7B%22type%22%3A%22bar%22%2C%22data%22%3A%7B%22labels%22%3A%5B%22T1%22%2C%22T2%22%2C%22T3%22%5D%2C%22datasets%22%3A%5B%7B%22label%22%3A%22Doanh%20thu%22%2C%22data%22%3A%5B12%2C19%2C7%5D%7D%5D%7D%7D",
    headers={"Authorization": "Bearer YOUR_API_KEY"},
    timeout=30,
)
open("output", "wb").write(res.content)

<?php
$ch = curl_init('https://apibox.io.vn/v1/chart-image?c=%7B%22type%22%3A%22bar%22%2C%22data%22%3A%7B%22labels%22%3A%5B%22T1%22%2C%22T2%22%2C%22T3%22%5D%2C%22datasets%22%3A%5B%7B%22label%22%3A%22Doanh%20thu%22%2C%22data%22%3A%5B12%2C19%2C7%5D%7D%5D%7D%7D');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_HTTPHEADER => ['Authorization: Bearer YOUR_API_KEY'],
]);
$response = curl_exec($ch);
file_put_contents('output', $response);

Kết quả trả về

binary image/png

Ứng dụng

Biểu đồ trong email báo cáo hằng ngày (doanh thu, truy cập, đơn hàng)
Ảnh gửi kèm tin nhắn bot Slack, Zalo, Telegram
Biểu đồ trong file PDF, báo cáo Markdown tạo tự động
Sparkline, ảnh chỉ số KPI trên dashboard không cần thư viện JS

Hỏi đáp

Dùng trong thẻ <img> được không?

Được: GET /v1/chart-image?c=<JSON đã mã hoá URL>&api_key=… trả về ảnh PNG trực tiếp. Cấu hình dài nên gửi bằng POST.

Có tương thích cấu hình Chart.js / QuickChart không?

Phần thông dụng thì có: type, data.labels, datasets (label, data, backgroundColor, borderColor, fill, tension, type), indexAxis, plugins.title / legend, scales min / max / stacked.

Chữ tiếng Việt có bị lỗi font không?

Không, PNG và SVG vẽ chữ từ đường nét của phông Be Vietnam Pro nên dấu tiếng Việt luôn chính xác, không phụ thuộc phông cài trên máy.

Ảnh biểu đồ API

Tham số

Ví dụ

Kết quả trả về

Ứng dụng

Hỏi đáp

API liên quan

Tạo mã QR

Tạo mã vạch

Ảnh placeholder