Generate Chart.JS charts as image and embed them everywhere in emails, pdf reports, chat bots...!
Getting started
1. Install Chart.JS Image npm Package
npm install chart.js-image --save
2. Import Chart.JS Image
CommonJS
const ChartJSImage = require('chart.js-image');
ES6
import ChartJSImage from 'chart.js-image';
3. Generate a chart image
const line_chart = ChartJSImage().chart({
"type": "line",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July"
],
"datasets": [
{
"label": "My First dataset",
"borderColor": "rgb(255,+99,+132)",
"backgroundColor": "rgba(255,+99,+132,+.5)",
"data": [
57,
90,
11,
-15,
37,
-37,
-27
]
},
{
"label": "My Second dataset",
"borderColor": "rgb(54,+162,+235)",
"backgroundColor": "rgba(54,+162,+235,+.5)",
"data": [
71,
-36,
-94,
78,
98,
65,
-61
]
},
{
"label": "My Third dataset",
"borderColor": "rgb(75,+192,+192)",
"backgroundColor": "rgba(75,+192,+192,+.5)",
"data": [
48,
-64,
-61,
98,
0,
-39,
-70
]
},
{
"label": "My Fourth dataset",
"borderColor": "rgb(255,+205,+86)",
"backgroundColor": "rgba(255,+205,+86,+.5)",
"data": [
-58,
88,
29,
44,
3,
78,
-9
]
}
]
},
"options": {
"title": {
"display": true,
"text": "Chart.js Line Chart"
},
"scales": {
"xAxes": [
{
"scaleLabel": {
"display": true,
"labelString": "Month"
}
}
],
"yAxes": [
{
"stacked": true,
"scaleLabel": {
"display": true,
"labelString": "Value"
}
}
]
}
}
})
.backgroundColor('white')
.width(500)
.height(300);
line_chart.toURL();
line_chart.toFile('/path/to/chart.png');
line_chart.toDataURI();
line_chart.toBuffer();
Table of Contents
Constructor
Create an instance, the argument within [ ] is optional. See usage
ChartJSImage( [ Object opt ] )
new ChartJSImage( [ Object opt ] )
Options
Default options are listed below.
opt = {
timeout: 5000,
secret: null,
host: 'image-charts.com',
protocol: 'https',
port: 443,
pathname: '/chart.js/2.8.0'
}
Methods
toURL()
: String
Get the full Image-Charts API url (signed and encoded if necessary)
Usage
const ChartJSImage = require('..');
const chart_url = ChartJSImage()
.chart({
type: 'bar',
data: { labels: ['Hello world', 'Foo bar'], datasets: [{ label: 'Foo', data: [1, 2] }] },
})
.width(300)
.height(300)
.toURL();
console.log(chart_url);
toFile(file)
: Promise<()>
Creates a file containing generated chart image and yield a promise.
When file
is a filename, asynchronously writes data to the file, replacing the file if it already exists.
When file
is a file descriptor, the behavior is similar to calling fs.write() directly (which is recommended).
Usage
const ChartJSImage = require('..');
const chart_path = '/tmp/chart.png';
ChartJSImage()
.chart({
"type": "radar",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August"
],
"datasets": [
{
"backgroundColor": "rgba(255, 99, 132, 0.5)",
"borderColor": "rgb(255, 99, 132)",
"data": [
15.09,
15.67,
12.5,
12.77,
13.62,
13.68,
13.93,
15.95
],
"label": "D0"
},
{
"backgroundColor": "rgba(255, 159, 64, 0.5)",
"borderColor": "rgb(255, 159, 64)",
"data": [
24.55,
28.91,
21.81,
23.27,
26.98,
26.05,
25.39,
24.92
],
"label": "D1",
"fill": "-1"
},
{
"backgroundColor": "rgba(255, 205, 86, 0.5)",
"borderColor": "rgb(255, 205, 86)",
"data": [
36.35,
43.93,
32.54,
33.54,
42.82,
39.34,
35.84,
33.5
],
"label": "D2",
"fill": 1
},
{
"backgroundColor": "rgba(75, 192, 192, 0.5)",
"borderColor": "rgb(75, 192, 192)",
"data": [
47.7,
58.92,
44.45,
49.08,
53.39,
51.85,
48.4,
49.36
],
"label": "D3",
"fill": false
},
{
"backgroundColor": "rgba(54, 162, 235, 0.5)",
"borderColor": "rgb(54, 162, 235)",
"data": [
60.73,
71.97,
53.96,
57.22,
65.09,
62.06,
56.91,
60.52
],
"label": "D4",
"fill": "-1"
},
{
"backgroundColor": "rgba(153, 102, 255, 0.5)",
"borderColor": "rgb(153, 102, 255)",
"data": [
73.33,
80.78,
68.05,
68.59,
76.79,
77.24,
66.08,
72.37
],
"label": "D5",
"fill": "-1"
}
]
},
"options": {
"maintainAspectRatio": true,
"spanGaps": false,
"elements": {
"line": {
"tension": 0.000001
}
},
"plugins": {
"filler": {
"propagate": false
},
"samples-filler-analyser": {
"target": "chart-analyser"
}
}
}
})
.bkg('white')
.width(700)
.height(390)
.toFile(chart_path)
.then(() => console.log('Image chart written at %s', chart_path))
Do a request to Image-Charts API with current configuration and yield a promise of a NodeJS buffer
Usage
const ChartJSImage = require('..');
const buffer = ChartJSImage()
.chart({
"type": "radar",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August"
],
"datasets": [
{
"backgroundColor": "rgba(255, 99, 132, 0.5)",
"borderColor": "rgb(255, 99, 132)",
"data": [
15.09,
15.67,
12.5,
12.77,
13.62,
13.68,
13.93,
15.95
],
"label": "D0"
},
{
"backgroundColor": "rgba(255, 159, 64, 0.5)",
"borderColor": "rgb(255, 159, 64)",
"data": [
24.55,
28.91,
21.81,
23.27,
26.98,
26.05,
25.39,
24.92
],
"label": "D1",
"fill": "-1"
},
{
"backgroundColor": "rgba(255, 205, 86, 0.5)",
"borderColor": "rgb(255, 205, 86)",
"data": [
36.35,
43.93,
32.54,
33.54,
42.82,
39.34,
35.84,
33.5
],
"label": "D2",
"fill": 1
},
{
"backgroundColor": "rgba(75, 192, 192, 0.5)",
"borderColor": "rgb(75, 192, 192)",
"data": [
47.7,
58.92,
44.45,
49.08,
53.39,
51.85,
48.4,
49.36
],
"label": "D3",
"fill": false
},
{
"backgroundColor": "rgba(54, 162, 235, 0.5)",
"borderColor": "rgb(54, 162, 235)",
"data": [
60.73,
71.97,
53.96,
57.22,
65.09,
62.06,
56.91,
60.52
],
"label": "D4",
"fill": "-1"
},
{
"backgroundColor": "rgba(153, 102, 255, 0.5)",
"borderColor": "rgb(153, 102, 255)",
"data": [
73.33,
80.78,
68.05,
68.59,
76.79,
77.24,
66.08,
72.37
],
"label": "D5",
"fill": "-1"
}
]
},
"options": {
"maintainAspectRatio": true,
"spanGaps": false,
"elements": {
"line": {
"tension": 0.000001
}
},
"plugins": {
"filler": {
"propagate": false
},
"samples-filler-analyser": {
"target": "chart-analyser"
}
}
}
})
.bkg('white')
.width(700)
.height(390)
.toBuffer()
.then((buffer) => console.log(buffer))
toDataURI()
: String
Do a request to Image-Charts API with current configuration and yield a promise of a base64 encoded data URI
Usage
const ChartJSImage = require('..');
const chart_url = ChartJSImage()
.chart({
"type": "radar",
"data": {
"labels": [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August"
],
"datasets": [
{
"backgroundColor": "rgba(255, 99, 132, 0.5)",
"borderColor": "rgb(255, 99, 132)",
"data": [
15.09,
15.67,
12.5,
12.77,
13.62,
13.68,
13.93,
15.95
],
"label": "D0"
},
{
"backgroundColor": "rgba(255, 159, 64, 0.5)",
"borderColor": "rgb(255, 159, 64)",
"data": [
24.55,
28.91,
21.81,
23.27,
26.98,
26.05,
25.39,
24.92
],
"label": "D1",
"fill": "-1"
},
{
"backgroundColor": "rgba(255, 205, 86, 0.5)",
"borderColor": "rgb(255, 205, 86)",
"data": [
36.35,
43.93,
32.54,
33.54,
42.82,
39.34,
35.84,
33.5
],
"label": "D2",
"fill": 1
},
{
"backgroundColor": "rgba(75, 192, 192, 0.5)",
"borderColor": "rgb(75, 192, 192)",
"data": [
47.7,
58.92,
44.45,
49.08,
53.39,
51.85,
48.4,
49.36
],
"label": "D3",
"fill": false
},
{
"backgroundColor": "rgba(54, 162, 235, 0.5)",
"borderColor": "rgb(54, 162, 235)",
"data": [
60.73,
71.97,
53.96,
57.22,
65.09,
62.06,
56.91,
60.52
],
"label": "D4",
"fill": "-1"
},
{
"backgroundColor": "rgba(153, 102, 255, 0.5)",
"borderColor": "rgb(153, 102, 255)",
"data": [
73.33,
80.78,
68.05,
68.59,
76.79,
77.24,
66.08,
72.37
],
"label": "D5",
"fill": "-1"
}
]
},
"options": {
"maintainAspectRatio": true,
"spanGaps": false,
"elements": {
"line": {
"tension": 0.000001
}
},
"plugins": {
"filler": {
"propagate": false
},
"samples-filler-analyser": {
"target": "chart-analyser"
}
}
}
})
.bkg('white')
.width(700)
.height(390)
.toDataURI()
.then(chart_url => console.log(chart_url));
Enterprise Support
Image-Charts Enterprise and Enterprise+ subscriptions remove the watermark and enable advanced features like custom-domain, high-resolution charts, custom fonts, multiple axis and mixed charts.
Usage
Once subscribed to a plan you will receive an ACCOUNT_ID
and a SECRET_KEY
.
These two parameters are mandatory to sign your request and remove the watermark.
Replace both values in the code example below:
const ChartJSImage = require('..');
const chart_url = ChartJSImage({secret: process.env.SECRET_KEY || 'SECRET_KEY'})
.icac(process.env.ACCOUNT_ID || 'ACCOUNT_ID')
.chart({
type: 'line',
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'My First dataset',
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, .5)',
data: [57, 90, 11, -15, 37, -37, -27],
},
{
label: 'My Second dataset',
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, .5)',
data: [71, -36, -94, 78, 98, 65, -61],
},
{
label: 'My Third dataset',
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, .5)',
data: [48, -64, -61, 98, 0, -39, -70],
},
{
label: 'My Third dataset',
borderColor: 'rgb(255, 205, 86)',
backgroundColor: 'rgba(255, 205, 86, .5)',
data: [-58, 88, 29, 44, 3, 78, -9],
},
],
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart - Stacked Area',
},
tooltips: {
mode: 'index',
},
hover: {
mode: 'index',
},
scales: {
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'Month',
},
},
],
yAxes: [
{
stacked: true,
scaleLabel: {
display: true,
labelString: 'Value',
},
},
],
},
},
})
.bkg('white')
.width(700)
.height(390)
.icretina('1')
.toURL();
console.log(chart_url);
On-Premise Support
Image-Charts virtual appliance can be deployed anywhere inside a customer network.
import ChartJSImage from 'chart.js-image';
const chart_url = ChartJSImage({
secret: 'SECRET_KEY',
host: 'custom-domain.tld'
})
.chart({})
.icretina('1')
.toURL();
console.log(chart_url);
Javascript/JSON definition of the chart. Use a Chart.js configuration object.
Usage
.c("{type:'bar',data:{labels:['Q1','Q2','Q3','Q4'],datasets:[{label:'Users',data:[50,60,70,180]},{label:'Revenue',data:[100,200,300,400]}]}}")
Javascript/JSON definition of the chart. Use a Chart.js configuration object.
Usage
.chart("{type:'bar',data:{labels:['Q1','Q2','Q3','Q4'],datasets:[{label:'Users',data:[50,60,70,180]},{label:'Revenue',data:[100,200,300,400]}]}}")
Width of the chart
Usage
.width("400")
Height of the chart
Usage
.height("300")
backgroundColor( value )
: ChartJSImage
Background of the chart canvas. Accepts rgb (rgb(255,255,120)), colors (red), and url-encoded hex values (%23ff00ff). Abbreviated as "bkg"
Usage
.backgroundColor("black")
.backgroundColor("rgb(255,255,120)")
.backgroundColor("%23ff00ff")
Background of the chart canvas. Accepts rgb (rgb(255,255,120)), colors (red), and url-encoded hex values (%23ff00ff). Abbreviated as "bkg"
Usage
.bkg("black")
.bkg("rgb(255,255,120)")
.bkg("%23ff00ff")
Encoding of your "chart" parameter. Accepted values are url and base64.
Allowed values:
.encoding("url")
.encoding("base64")
image-charts enterprise account_id
Reference
Usage
.icac("accountId")
HMAC-SHA256 signature required to activate paid features
Reference
Usage
.ichm("0785cf22a0381c2e0239e27c126de4181f501d117c2c81745611e9db928b0376")
retina mode
Reference
Allowed values:
.icretina("0")
.icretina("1")