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.

Vẽ biểu đồ online từ JSON

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.

Kết quả

Bấm “Chạy” để xem kết quả.

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).

Dùng trong code của bạn

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);

Tài liệu API → Nhận API key miễn phí

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.