image-charts - npm explorer

npm install image-charts

![image charts javascript library logo](#getting-started)

![NPM VERSION](https://www.npmjs.org/package/image-charts)

!Libraries.io dependency status for GitHub repo
!Code Climate maintainability

Official Image Charts API client.
Generate URLs of static image charts.
Embed them everywhere in emails, pdf reports, chat bots...!

$3

#### 1. Install Image-Charts npm Package

``bash npm install image-charts --save`

#### 2. Import Image-Charts library

> CommonJS

`javascript const ImageCharts = require('image-charts');`

> ES6

`javascript import ImageCharts from 'image-charts';`

#### 3. Generate a chart image

`js const pie = ImageCharts().cht('p').chd('a:2.5,5,8.3').chs('100x100');

pie.toURL(); // String: https://image-charts.com/chart?chd=a%3A2.5%2C5%2C8.3&chs=600x300&cht=p pie.toFile('/path/to/chart.png'); // Promise<()> pie.toDataURI(); // Promise : data:image/png;base64,iVBORw0KGgo... pie.toBuffer(); // Promise : Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 ...`

-----------------------------------------------------------------------

`$3`

- __Enterprise support__ - __On-Premise support__ - __Constructor__ - __Options__ - __Methods__ - __toURL()__ - __toFile()__ - __toBuffer()__ - __toDataURI()__ - __cht(value) - Chart type__ - __chd(value) - chart data__ - __chds(value) - data format with custom scaling__ - __choe(value) - QRCode data encoding__ - __chld(value) - QRCode error correction level and optional margin__ - __chxr(value) - Axis data-range__ - __chof(value) - Image output format__ - __chs(value) - Chart size (<width>x<height>)__ - __chdl(value) - Text for each series, to display in the legend__ - __chdls(value) - Chart legend text and style__ - __chg(value) - Solid or dotted grid lines__ - __chco(value) - series colors__ - __chtt(value) - chart title__ - __chts(value) - chart title colors and font size__ - __chxt(value) - Display values on your axis lines or change which axes are shown__ - __chxl(value) - Custom string axis labels on any axis__ - __chxs(value) - Font size, color for axis labels, both custom labels and default label values__ - __chm(value) - compound charts and line fills__ - __chls(value) - line thickness and solid/dashed style__ - __chl(value) - bar, pie slice, doughnut slice and polar slice chart labels__ - __chlps(value) - Position and style of labels on data__ - __chma(value) - chart margins__ - __chdlp(value) - Position of the legend and order of the legend entries__ - __chf(value) - Background Fills__ - __chbr(value) - Bar corner radius. Display bars with rounded corner.__ - __chan(value) - gif configuration__ - __chli(value) - doughnut chart inside label__ - __icac(value) - image-charts enterpriseaccount_id__ - __ichm(value) - HMAC-SHA256 signature required to activate paid features__ - __icff(value) - Default font family for all text from Google Fonts. Use same syntax as Google Font CSS API__ - __icfs(value) - Default font style for all text__ - __iclocale(value) - localization (ISO 639-1)__ - __icretina(value) - retina mode__ - __icqrb(value) - Background color for QR Codes__ - __icqrf(value) - Foreground color for QR Codes__

----------------------------------------------------------------------------------------------

`$3`

> Create an instance, the argument within [ ] is optional. See usage

`javascript ImageCharts( [ Object opt ] ) // or new ImageCharts( [ Object opt ] )`

#### Options

> Default options are listed below.

`javascript opt = { /* * Request timeout (in millisecond) when calling toBuffer() or toDataURI() */ timeout: 5000,

/* * (Enterprise and Enterprise+ subscription only) SECRET_KEY */ secret: null,

/* * (Enterprise, Enterprise+ and On-Premise subscription only) custom domain */ host: 'image-charts.com',

/* * (On-Premise subscription only) custom protocol */ protocol: 'https',

/* * (On-Premise subscription only) custom port */ port: 443,

/* * (On-Premise subscription only) custom pathname */ pathname: '/chart' }`

- _Back to Getting started_ - _Back to ToC_

----------------------------------------------------------------------------------------------

`$3`

----------------------------------------------------------------------------------------------

####toURL() : String

> Get the full Image-Charts API url (signed and encoded if necessary)

##### Usage

`javascript import ImageCharts from 'image-charts';

const chart_url = ImageCharts() .cht('bvg') // vertical bar chart .chs('300x300') // 300px x 300px .chd('a:60,40') // 2 data points: 60 and 40 .toURL(); // get the generated URL

console.log(chart_url); // https://image-charts.com/chart?cht=bvg&chs=300x300&chd=a%3A60%2C40

- _Back to Getting started_ - _Back to ToC_

----------------------------------------------------------------------------------------------

####toFile(file) : Promise<()>

> Creates a file containing generated chart image and yield a promise.

> When fileis a filename, asynchronously writes data to the file, replacing the file if it already exists. > Whenfile is a file descriptor, the behavior is similar to calling fs.write() directly (which is recommended).

##### Usage

`javascript import ImageCharts from 'image-charts';

const chart_path = '/tmp/chart.png';

ImageCharts() .cht('bvg') // vertical bar chart .chs('300x300') // 300px x 300px .chd('a:60,40') // 2 data points: 60 and 40 .toFile(chart_path) .then(() => console.log('Image chart written at %s', chart_path))

- _Back to Getting started_ - _Back to ToC_

----------------------------------------------------------------------------------------------

####toBuffer() : Promise<Buffer>

> Do a request to Image-Charts API with current configuration and yield a promise of a NodeJS buffer

##### Usage

`javascript import ImageCharts from 'image-charts';

const chart_url = ImageCharts() .cht('bvg') // vertical bar chart .chs('300x300') // 300px x 300px .chd('a:60,40') // 2 data points: 60 and 40 .toBuffer(); // download chart image as a buffer

console.log(chart_url); //

- _Back to Getting started_ - _Back to ToC_

----------------------------------------------------------------------------------------------

####toDataURI() : String

> Do a request to Image-Charts API with current configuration and yield a promise of a base64 encoded data URI

##### Usage

`javascript import ImageCharts from 'image-charts';

const chart_url = ImageCharts() .cht('bvg') // vertical bar chart .chs('300x300') // 300px x 300px .chd('a:60,40') // 2 data points: 60 and 40 .toDataURI(); // download chart image and generate a data URI string

console.log(chart_url); // "data:image/png;base64,iVBORw0KGgo...

- _Back to Getting started_ - _Back to ToC_

----------------------------------------------------------------------------------------------

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

- Pricing and plan comparison - Enterprise documentation

##### 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:

`javascript import ImageCharts from 'image-charts';

const chart_url = ImageCharts({secret: 'SECRET_KEY'}) .icac('ACCOUNT_ID') .cht('p3') // pie chart .chs('700x190') // 700px x 190px .chd('t:60,40') // 2 data points: 60 and 40 .chl('Hello|World') // 1 label per pie slice : "Hello" and "World" .chf('ps0-0,lg,45,ffeb3b,0.2,f44336,1|ps0-1,lg,45,8bc34a,0.2,009688,1') // 1 gradient per pie slice .icretina('1') // enable paid-only features like high-resolution charts .toURL(); // get the whole (HMAC signed) URL

console.log(chart_url); // https://image-charts.com/chart?chd=t%3A60%2C40&chf=ps0-0%2Clg%2C45%2Cffeb3b%2C0.2%2Cf44336%2C1%7Cps0-1%2Clg%2C45%2C8bc34a%2C0.2%2C009688%2C1&chl=Hello%7CWorld&chs=700x190&cht=p3&icac=documentation&icretina=1&ichm=122242bb700d825d69b3fafe4ec67193b45dcfe0ed93fcca307e0d0a84b73ea2

- _Back to Getting started_ - _Back to ToC_

----------------------------------------------------------------------------------------------

#### On-Premise Support

Image-Charts virtual appliance can be deployed anywhere inside a customer network.

`javascript import ImageCharts from 'image-charts';

const chart_url = ImageCharts({ secret: 'SECRET_KEY',

// override the host with your own endpoint host: 'custom-domain.tld' }) .icac('ACCOUNT_ID') .cht('p3') // pie chart .chs('700x190') // 700px x 190px .chd('t:60,40') // 2 data points: 60 and 40 .chl('Hello|World') // 1 label per pie slice : "Hello" and "World" .chf('ps0-0,lg,45,ffeb3b,0.2,f44336,1|ps0-1,lg,45,8bc34a,0.2,009688,1') // 1 gradient per pie slice .icretina('1') // enable paid-only features like high-resolution charts .toURL(); // get the whole (HMAC signed) URL

console.log(chart_url); // https://custom-domain.tld/chart?chd=t%3A60%2C40&chf=ps0-0%2Clg%2C45%2Cffeb3b%2C0.2%2Cf44336%2C1%7Cps0-1%2Clg%2C45%2C8bc34a%2C0.2%2C009688%2C1&chl=Hello%7CWorld&chs=700x190&cht=p3&icac=documentation&icretina=1&ichm=122242bb700d825d69b3fafe4ec67193b45dcfe0ed93fcca307e0d0a84b73ea2`

- _Back to Getting started_ - _Back to ToC_

----------------------------------------------------------------------------------------------

####cht( value ) : ImageCharts

> Chart type