{"id":23494454,"url":"https://github.com/image-charts/chartjs-image-javascript","last_synced_at":"2026-01-27T13:13:49.696Z","repository":{"id":39627274,"uuid":"303799196","full_name":"image-charts/chartjs-image-javascript","owner":"image-charts","description":"Render Chart.JS chart as image","archived":false,"fork":false,"pushed_at":"2025-02-05T18:01:52.000Z","size":178,"stargazers_count":13,"open_issues_count":5,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-02-05T19:28:06.248Z","etag":null,"topics":["chartjs","chartjs-api","chartjs-image","chartjs-node"],"latest_commit_sha":null,"homepage":"https://documentation.image-charts.com/chart.js/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/image-charts.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-13T18:48:05.000Z","updated_at":"2025-02-05T18:01:54.000Z","dependencies_parsed_at":"2023-02-17T09:05:14.468Z","dependency_job_id":"ea7e08f0-d9fc-488d-86fa-5fec41e3bbb4","html_url":"https://github.com/image-charts/chartjs-image-javascript","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/image-charts/chartjs-image-javascript","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/image-charts%2Fchartjs-image-javascript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/image-charts%2Fchartjs-image-javascript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/image-charts%2Fchartjs-image-javascript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/image-charts%2Fchartjs-image-javascript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/image-charts","download_url":"https://codeload.github.com/image-charts/chartjs-image-javascript/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/image-charts%2Fchartjs-image-javascript/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272367688,"owners_count":24922229,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-27T02:00:09.397Z","response_time":76,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chartjs","chartjs-api","chartjs-image","chartjs-node"],"created_at":"2024-12-25T03:03:04.634Z","updated_at":"2026-01-27T13:13:49.654Z","avatar_url":"https://github.com/image-charts.png","language":"JavaScript","readme":"[![CHart.JS Image javascript library logo](./logo.jpg)](#getting-started)\n\n[![NPM VERSION](http://img.shields.io/npm/v/chart.js-image.svg?style=flat)](https://www.npmjs.org/package/chart.js-image)\n\n![Libraries.io dependency status for GitHub repo](https://img.shields.io/librariesio/github/image-charts/javascript)\n![Code Climate maintainability](https://img.shields.io/codeclimate/maintainability/image-charts/javascript)\n\n\n![Snyk Vulnerabilities for npm package](https://img.shields.io/snyk/vulnerabilities/npm/chart.js-image)\n\n\u003c!--\n[![NPM MONTHLY](http://img.shields.io/npm/dm/chart.js-image.svg?style=flat)](http://npm-stat.com/charts.html?package=chart.js-image)\n![NPM YEARLY](https://img.shields.io/npm/dy/chart.js-image.svg)\n![NPM TOTAL](https://img.shields.io/npm/dt/chart.js-image.svg)\n--\u003e\n\nGenerate [Chart.JS charts](https://www.chartjs.org/docs/latest/) as image and embed them everywhere in emails, pdf reports, chat bots...!\n\n### Getting started\n\n#### 1. Install Chart.JS Image [npm](https://www.npmjs.com/package/chart.js-image) Package\n\n```bash\nnpm install chart.js-image --save\n```\n\n#### 2. Import Chart.JS Image\n\n\u003e CommonJS\n\n```javascript\nconst ChartJSImage = require('chart.js-image');\n```\n\n\u003e ES6\n\n```javascript\nimport ChartJSImage from 'chart.js-image';\n```\n\n#### 3. Generate a chart image\n\n```js\nconst line_chart = ChartJSImage().chart({\n  \"type\": \"line\",\n  \"data\": {\n    \"labels\": [\n      \"January\",\n      \"February\",\n      \"March\",\n      \"April\",\n      \"May\",\n      \"June\",\n      \"July\"\n    ],\n    \"datasets\": [\n      {\n        \"label\": \"My First dataset\",\n        \"borderColor\": \"rgb(255,+99,+132)\",\n        \"backgroundColor\": \"rgba(255,+99,+132,+.5)\",\n        \"data\": [\n          57,\n          90,\n          11,\n          -15,\n          37,\n          -37,\n          -27\n        ]\n      },\n      {\n        \"label\": \"My Second dataset\",\n        \"borderColor\": \"rgb(54,+162,+235)\",\n        \"backgroundColor\": \"rgba(54,+162,+235,+.5)\",\n        \"data\": [\n          71,\n          -36,\n          -94,\n          78,\n          98,\n          65,\n          -61\n        ]\n      },\n      {\n        \"label\": \"My Third dataset\",\n        \"borderColor\": \"rgb(75,+192,+192)\",\n        \"backgroundColor\": \"rgba(75,+192,+192,+.5)\",\n        \"data\": [\n          48,\n          -64,\n          -61,\n          98,\n          0,\n          -39,\n          -70\n        ]\n      },\n      {\n        \"label\": \"My Fourth dataset\",\n        \"borderColor\": \"rgb(255,+205,+86)\",\n        \"backgroundColor\": \"rgba(255,+205,+86,+.5)\",\n        \"data\": [\n          -58,\n          88,\n          29,\n          44,\n          3,\n          78,\n          -9\n        ]\n      }\n    ]\n  },\n  \"options\": {\n    \"title\": {\n      \"display\": true,\n      \"text\": \"Chart.js Line Chart\"\n    },\n    \"scales\": {\n      \"xAxes\": [\n        {\n          \"scaleLabel\": {\n            \"display\": true,\n            \"labelString\": \"Month\"\n          }\n        }\n      ],\n      \"yAxes\": [\n        {\n          \"stacked\": true,\n          \"scaleLabel\": {\n            \"display\": true,\n            \"labelString\": \"Value\"\n          }\n        }\n      ]\n    }\n  }\n}) // Line chart\n.backgroundColor('white')\n.width(500) // 500px\n.height(300); // 300px\n\nline_chart.toURL(); // String: https://image-charts.com/chart.js/2.8.0?icac=documentation\u0026chart=%7Btype%3A%27line%27%2Cdata%3A%7Blabels%3A%5B%27January%27%2C%27February%27%2C%27March%27%2C%27April%27%2C%27May%27%2C%27June%27%2C%27July%27%5D%2Cdatasets%3A%5B%7Blabel%3A%27My+First+dataset%27%2CborderColor%3A%27rgb%28255%2C+99%2C+132%29%27%2CbackgroundColor%3A%27rgba%28255%2C+99%2C+132%2C+.5%29%27%2Cdata%3A%5B57%2C90%2C11%2C-15%2C37%2C-37%2C-27%5D%7D%2C%7Blabel%3A%27My+Second+dataset%27%2CborderColor%3A%27rgb%2854%2C+162%2C+235%29%27%2CbackgroundColor%3A%27rgba%2854%2C+162%2C+235%2C+.5%29%27%2Cdata%3A%5B71%2C-36%2C-94%2C78%2C98%2C65%2C-61%5D%7D%2C%7Blabel%3A%27My+Third+dataset%27%2CborderColor%3A%27rgb%2875%2C+192%2C+192%29%27%2CbackgroundColor%3A%27rgba%2875%2C+192%2C+192%2C+.5%29%27%2Cdata%3A%5B48%2C-64%2C-61%2C98%2C0%2C-39%2C-70%5D%7D%2C%7Blabel%3A%27My+Third+dataset%27%2CborderColor%3A%27rgb%28255%2C+205%2C+86%29%27%2CbackgroundColor%3A%27rgba%28255%2C+205%2C+86%2C+.5%29%27%2Cdata%3A%5B-58%2C88%2C29%2C44%2C3%2C78%2C-9%5D%7D%5D%7D%2Coptions%3A%7Bresponsive%3Atrue%2Ctitle%3A%7Bdisplay%3Atrue%2Ctext%3A%27Chart.js+Line+Chart+-+Stacked+Area%27%7D%2Ctooltips%3A%7Bmode%3A%27index%27%7D%2Chover%3A%7Bmode%3A%27index%27%7D%2Cscales%3A%7BxAxes%3A%5B%7BscaleLabel%3A%7Bdisplay%3Atrue%2ClabelString%3A%27Month%27%7D%7D%5D%2CyAxes%3A%5B%7Bstacked%3Atrue%2CscaleLabel%3A%7Bdisplay%3Atrue%2ClabelString%3A%27Value%27%7D%7D%5D%7D%7D%7D\u0026bkg=white\u0026width=700\u0026height=390\u0026icretina=1\u0026ichm=922e17b749b1ab7fab2a14cb742029dc46e50e658457913a9f548793910d2a0d\nline_chart.toFile('/path/to/chart.png'); // Promise\u003c()\u003e\nline_chart.toDataURI(); // Promise\u003cString\u003e : data:image/png;base64,iVBORw0KGgo...\nline_chart.toBuffer(); // Promise\u003cBuffer\u003e : Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 ...\n```\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.image-charts.com/\"\u003e\n        \u003cimg src=\"https://image-charts.com/chart.js/2.8.0?icac=documentation\u0026chart=%7Btype%3A%27line%27%2Cdata%3A%7Blabels%3A%5B%27January%27%2C%27February%27%2C%27March%27%2C%27April%27%2C%27May%27%2C%27June%27%2C%27July%27%5D%2Cdatasets%3A%5B%7Blabel%3A%27My+First+dataset%27%2CborderColor%3A%27rgb%28255%2C+99%2C+132%29%27%2CbackgroundColor%3A%27rgba%28255%2C+99%2C+132%2C+.5%29%27%2Cdata%3A%5B57%2C90%2C11%2C-15%2C37%2C-37%2C-27%5D%7D%2C%7Blabel%3A%27My+Second+dataset%27%2CborderColor%3A%27rgb%2854%2C+162%2C+235%29%27%2CbackgroundColor%3A%27rgba%2854%2C+162%2C+235%2C+.5%29%27%2Cdata%3A%5B71%2C-36%2C-94%2C78%2C98%2C65%2C-61%5D%7D%2C%7Blabel%3A%27My+Third+dataset%27%2CborderColor%3A%27rgb%2875%2C+192%2C+192%29%27%2CbackgroundColor%3A%27rgba%2875%2C+192%2C+192%2C+.5%29%27%2Cdata%3A%5B48%2C-64%2C-61%2C98%2C0%2C-39%2C-70%5D%7D%2C%7Blabel%3A%27My+Third+dataset%27%2CborderColor%3A%27rgb%28255%2C+205%2C+86%29%27%2CbackgroundColor%3A%27rgba%28255%2C+205%2C+86%2C+.5%29%27%2Cdata%3A%5B-58%2C88%2C29%2C44%2C3%2C78%2C-9%5D%7D%5D%7D%2Coptions%3A%7Bresponsive%3Atrue%2Ctitle%3A%7Bdisplay%3Atrue%2Ctext%3A%27Chart.js+Line+Chart+-+Stacked+Area%27%7D%2Ctooltips%3A%7Bmode%3A%27index%27%7D%2Chover%3A%7Bmode%3A%27index%27%7D%2Cscales%3A%7BxAxes%3A%5B%7BscaleLabel%3A%7Bdisplay%3Atrue%2ClabelString%3A%27Month%27%7D%7D%5D%2CyAxes%3A%5B%7Bstacked%3Atrue%2CscaleLabel%3A%7Bdisplay%3Atrue%2ClabelString%3A%27Value%27%7D%7D%5D%7D%7D%7D\u0026bkg=white\u0026width=700\u0026height=390\u0026icretina=1\u0026ichm=922e17b749b1ab7fab2a14cb742029dc46e50e658457913a9f548793910d2a0d\" /\u003e\n    \u003c/a\u003e\n\u003c/p\n\n-----------------------------------------------------------------------\n\n### Table of Contents\n\n- __[Enterprise support](#enterprise-support)__\n- __[On-Premise support](#on-premise-support)__\n- __[Constructor](#constructor)__\n    - __[Options](#options)__\n- __[Methods](#methods)__\n    - __[toURL()](#tourl)__\n    - __[toFile()](#tofile)__\n    - __[toBuffer()](#tobuffer)__\n    - __[toDataURI()](#todatauri)__\n   - __[c(value) - Javascript/JSON definition of the chart. Use a Chart.js configuration object.](#c)__\n   - __[chart(value) - Javascript/JSON definition of the chart. Use a Chart.js configuration object.](#chart)__\n   - __[width(value) - Width of the chart](#width)__\n   - __[height(value) - Height of the chart](#height)__\n   - __[backgroundColor(value) - Background of the chart canvas. Accepts rgb (rgb(255,255,120)), colors (red), and url-encoded hex values (%23ff00ff). Abbreviated as \u0026#34;bkg\u0026#34;](#backgroundcolor)__\n   - __[bkg(value) - Background of the chart canvas. Accepts rgb (rgb(255,255,120)), colors (red), and url-encoded hex values (%23ff00ff). Abbreviated as \u0026#34;bkg\u0026#34;](#bkg)__\n   - __[encoding(value) - Encoding of your \u0026#34;chart\u0026#34; parameter. Accepted values are url and base64.](#encoding)__\n   - __[icac(value) - image-charts enterprise `account_id`](#icac)__\n   - __[ichm(value) - HMAC-SHA256 signature required to activate paid features](#ichm)__\n   - __[icretina(value) - retina mode](#icretina)__\n\n----------------------------------------------------------------------------------------------\n\n### Constructor\n\n\u003e Create an instance, the argument within [ ] is optional. See [usage](#usage)\n\n```javascript\nChartJSImage( [ Object opt ] )\n// or\nnew ChartJSImage( [ Object opt ] )\n```\n\n#### Options\n\n\u003e Default options are listed below.\n\n```javascript\nopt = {\n    /*\n     * Request timeout (in millisecond) when calling toBuffer() or toDataURI()\n     */\n    timeout: 5000,\n\n    /*\n     * (Enterprise and Enterprise+ subscription only) SECRET_KEY\n     */\n    secret: null,\n\n    /*\n     * (Enterprise, Enterprise+ and On-Premise subscription only) custom domain\n     */\n    host: 'image-charts.com',\n\n    /*\n     * (On-Premise subscription only) custom protocol\n     */\n    protocol: 'https',\n\n    /*\n     * (On-Premise subscription only) custom port\n     */\n    port: 443,\n\n    /*\n     * (On-Premise subscription only) custom pathname\n     */\n    pathname: '/chart.js/2.8.0'\n}\n```\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n----------------------------------------------------------------------------------------------\n\n### Methods\n\n----------------------------------------------------------------------------------------------\n\n\u003ca name=\"tourl\"\u003e\u003c/a\u003e\n#### `toURL()` : `String`\n\n\u003e Get the full Image-Charts API url (signed and encoded if necessary)\n\n##### Usage\n\n```javascript\n// import ChartJSImage from 'chart.js-image';\nconst ChartJSImage = require('..');\n\nconst chart_url = ChartJSImage()\n.chart({\ntype: 'bar',\ndata: { labels: ['Hello world', 'Foo bar'], datasets: [{ label: 'Foo', data: [1, 2] }] },\n}) // vertical bar chart\n.width(300) // 300px\n.height(300) // 300px\n.toURL(); // get the generated URL\n\nconsole.log(chart_url); // https://image-charts.com/chart?cht=bvg\u0026chs=300x300\u0026chd=a%3A60%2C40\n\n```\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n\n----------------------------------------------------------------------------------------------\n\n\u003ca name=\"toFile\"\u003e\u003c/a\u003e\n#### `toFile(file)` : `Promise\u003c()\u003e`\n\n\u003e Creates a file containing generated chart image and yield a promise.\n\n\u003e When `file` is a filename, asynchronously writes data to the file, replacing the file if it already exists.\n\u003e When `file` is a file descriptor, the behavior is similar to calling fs.write() directly (which is recommended).\n\n##### Usage\n\n```javascript\n//import ChartJSImage from 'chart.js-image';\nconst ChartJSImage = require('..');\n\nconst chart_path = '/tmp/chart.png';\n\nChartJSImage()\n.chart({\n  \"type\": \"radar\",\n  \"data\": {\n    \"labels\": [\n      \"January\",\n      \"February\",\n      \"March\",\n      \"April\",\n      \"May\",\n      \"June\",\n      \"July\",\n      \"August\"\n    ],\n    \"datasets\": [\n      {\n        \"backgroundColor\": \"rgba(255, 99, 132, 0.5)\",\n        \"borderColor\": \"rgb(255, 99, 132)\",\n        \"data\": [\n          15.09,\n          15.67,\n          12.5,\n          12.77,\n          13.62,\n          13.68,\n          13.93,\n          15.95\n        ],\n        \"label\": \"D0\"\n      },\n      {\n        \"backgroundColor\": \"rgba(255, 159, 64, 0.5)\",\n        \"borderColor\": \"rgb(255, 159, 64)\",\n        \"data\": [\n          24.55,\n          28.91,\n          21.81,\n          23.27,\n          26.98,\n          26.05,\n          25.39,\n          24.92\n        ],\n        \"label\": \"D1\",\n        \"fill\": \"-1\"\n      },\n      {\n        \"backgroundColor\": \"rgba(255, 205, 86, 0.5)\",\n        \"borderColor\": \"rgb(255, 205, 86)\",\n        \"data\": [\n          36.35,\n          43.93,\n          32.54,\n          33.54,\n          42.82,\n          39.34,\n          35.84,\n          33.5\n        ],\n        \"label\": \"D2\",\n        \"fill\": 1\n      },\n      {\n        \"backgroundColor\": \"rgba(75, 192, 192, 0.5)\",\n        \"borderColor\": \"rgb(75, 192, 192)\",\n        \"data\": [\n          47.7,\n          58.92,\n          44.45,\n          49.08,\n          53.39,\n          51.85,\n          48.4,\n          49.36\n        ],\n        \"label\": \"D3\",\n        \"fill\": false\n      },\n      {\n        \"backgroundColor\": \"rgba(54, 162, 235, 0.5)\",\n        \"borderColor\": \"rgb(54, 162, 235)\",\n        \"data\": [\n          60.73,\n          71.97,\n          53.96,\n          57.22,\n          65.09,\n          62.06,\n          56.91,\n          60.52\n        ],\n        \"label\": \"D4\",\n        \"fill\": \"-1\"\n      },\n      {\n        \"backgroundColor\": \"rgba(153, 102, 255, 0.5)\",\n        \"borderColor\": \"rgb(153, 102, 255)\",\n        \"data\": [\n          73.33,\n          80.78,\n          68.05,\n          68.59,\n          76.79,\n          77.24,\n          66.08,\n          72.37\n        ],\n        \"label\": \"D5\",\n        \"fill\": \"-1\"\n      }\n    ]\n  },\n  \"options\": {\n    \"maintainAspectRatio\": true,\n    \"spanGaps\": false,\n    \"elements\": {\n      \"line\": {\n        \"tension\": 0.000001\n      }\n    },\n    \"plugins\": {\n      \"filler\": {\n        \"propagate\": false\n      },\n      \"samples-filler-analyser\": {\n        \"target\": \"chart-analyser\"\n      }\n    }\n  }\n})\n.bkg('white')\n.width(700)\n.height(390)\n.toFile(chart_path)\n.then(() =\u003e console.log('Image chart written at %s', chart_path))\n\n\n\n```\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n----------------------------------------------------------------------------------------------\n\n\u003ca name=\"tobuffer\"\u003e\u003c/a\u003e\n#### `toBuffer()` : [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)\u003c[`Buffer`](https://nodejs.org/api/buffer.html)\u003e\n\n\u003e Do a request to Image-Charts API with current configuration and yield a promise of a NodeJS buffer\n\n##### Usage\n\n```javascript\n//import ChartJSImage from 'chart.js-image';\nconst ChartJSImage = require('..');\n\nconst buffer = ChartJSImage()\n.chart({\n  \"type\": \"radar\",\n  \"data\": {\n    \"labels\": [\n      \"January\",\n      \"February\",\n      \"March\",\n      \"April\",\n      \"May\",\n      \"June\",\n      \"July\",\n      \"August\"\n    ],\n    \"datasets\": [\n      {\n        \"backgroundColor\": \"rgba(255, 99, 132, 0.5)\",\n        \"borderColor\": \"rgb(255, 99, 132)\",\n        \"data\": [\n          15.09,\n          15.67,\n          12.5,\n          12.77,\n          13.62,\n          13.68,\n          13.93,\n          15.95\n        ],\n        \"label\": \"D0\"\n      },\n      {\n        \"backgroundColor\": \"rgba(255, 159, 64, 0.5)\",\n        \"borderColor\": \"rgb(255, 159, 64)\",\n        \"data\": [\n          24.55,\n          28.91,\n          21.81,\n          23.27,\n          26.98,\n          26.05,\n          25.39,\n          24.92\n        ],\n        \"label\": \"D1\",\n        \"fill\": \"-1\"\n      },\n      {\n        \"backgroundColor\": \"rgba(255, 205, 86, 0.5)\",\n        \"borderColor\": \"rgb(255, 205, 86)\",\n        \"data\": [\n          36.35,\n          43.93,\n          32.54,\n          33.54,\n          42.82,\n          39.34,\n          35.84,\n          33.5\n        ],\n        \"label\": \"D2\",\n        \"fill\": 1\n      },\n      {\n        \"backgroundColor\": \"rgba(75, 192, 192, 0.5)\",\n        \"borderColor\": \"rgb(75, 192, 192)\",\n        \"data\": [\n          47.7,\n          58.92,\n          44.45,\n          49.08,\n          53.39,\n          51.85,\n          48.4,\n          49.36\n        ],\n        \"label\": \"D3\",\n        \"fill\": false\n      },\n      {\n        \"backgroundColor\": \"rgba(54, 162, 235, 0.5)\",\n        \"borderColor\": \"rgb(54, 162, 235)\",\n        \"data\": [\n          60.73,\n          71.97,\n          53.96,\n          57.22,\n          65.09,\n          62.06,\n          56.91,\n          60.52\n        ],\n        \"label\": \"D4\",\n        \"fill\": \"-1\"\n      },\n      {\n        \"backgroundColor\": \"rgba(153, 102, 255, 0.5)\",\n        \"borderColor\": \"rgb(153, 102, 255)\",\n        \"data\": [\n          73.33,\n          80.78,\n          68.05,\n          68.59,\n          76.79,\n          77.24,\n          66.08,\n          72.37\n        ],\n        \"label\": \"D5\",\n        \"fill\": \"-1\"\n      }\n    ]\n  },\n  \"options\": {\n    \"maintainAspectRatio\": true,\n    \"spanGaps\": false,\n    \"elements\": {\n      \"line\": {\n        \"tension\": 0.000001\n      }\n    },\n    \"plugins\": {\n      \"filler\": {\n        \"propagate\": false\n      },\n      \"samples-filler-analyser\": {\n        \"target\": \"chart-analyser\"\n      }\n    }\n  }\n})\n.bkg('white')\n.width(700)\n.height(390)\n.toBuffer() // download chart image as a buffer\n.then((buffer) =\u003e console.log(buffer)) // \u003cBuffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 5\n\n\n```\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n----------------------------------------------------------------------------------------------\n\n\u003ca name=\"todatauri\"\u003e\u003c/a\u003e\n#### `toDataURI()` : `String`\n\n\u003e Do a request to Image-Charts API with current configuration and yield a promise of a base64 encoded [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)\n\n##### Usage\n\n```javascript\n//import ChartJSImage from 'chart.js-image';\nconst ChartJSImage = require('..');\n\nconst chart_url = ChartJSImage()\n.chart({\n  \"type\": \"radar\",\n  \"data\": {\n    \"labels\": [\n      \"January\",\n      \"February\",\n      \"March\",\n      \"April\",\n      \"May\",\n      \"June\",\n      \"July\",\n      \"August\"\n    ],\n    \"datasets\": [\n      {\n        \"backgroundColor\": \"rgba(255, 99, 132, 0.5)\",\n        \"borderColor\": \"rgb(255, 99, 132)\",\n        \"data\": [\n          15.09,\n          15.67,\n          12.5,\n          12.77,\n          13.62,\n          13.68,\n          13.93,\n          15.95\n        ],\n        \"label\": \"D0\"\n      },\n      {\n        \"backgroundColor\": \"rgba(255, 159, 64, 0.5)\",\n        \"borderColor\": \"rgb(255, 159, 64)\",\n        \"data\": [\n          24.55,\n          28.91,\n          21.81,\n          23.27,\n          26.98,\n          26.05,\n          25.39,\n          24.92\n        ],\n        \"label\": \"D1\",\n        \"fill\": \"-1\"\n      },\n      {\n        \"backgroundColor\": \"rgba(255, 205, 86, 0.5)\",\n        \"borderColor\": \"rgb(255, 205, 86)\",\n        \"data\": [\n          36.35,\n          43.93,\n          32.54,\n          33.54,\n          42.82,\n          39.34,\n          35.84,\n          33.5\n        ],\n        \"label\": \"D2\",\n        \"fill\": 1\n      },\n      {\n        \"backgroundColor\": \"rgba(75, 192, 192, 0.5)\",\n        \"borderColor\": \"rgb(75, 192, 192)\",\n        \"data\": [\n          47.7,\n          58.92,\n          44.45,\n          49.08,\n          53.39,\n          51.85,\n          48.4,\n          49.36\n        ],\n        \"label\": \"D3\",\n        \"fill\": false\n      },\n      {\n        \"backgroundColor\": \"rgba(54, 162, 235, 0.5)\",\n        \"borderColor\": \"rgb(54, 162, 235)\",\n        \"data\": [\n          60.73,\n          71.97,\n          53.96,\n          57.22,\n          65.09,\n          62.06,\n          56.91,\n          60.52\n        ],\n        \"label\": \"D4\",\n        \"fill\": \"-1\"\n      },\n      {\n        \"backgroundColor\": \"rgba(153, 102, 255, 0.5)\",\n        \"borderColor\": \"rgb(153, 102, 255)\",\n        \"data\": [\n          73.33,\n          80.78,\n          68.05,\n          68.59,\n          76.79,\n          77.24,\n          66.08,\n          72.37\n        ],\n        \"label\": \"D5\",\n        \"fill\": \"-1\"\n      }\n    ]\n  },\n  \"options\": {\n    \"maintainAspectRatio\": true,\n    \"spanGaps\": false,\n    \"elements\": {\n      \"line\": {\n        \"tension\": 0.000001\n      }\n    },\n    \"plugins\": {\n      \"filler\": {\n        \"propagate\": false\n      },\n      \"samples-filler-analyser\": {\n        \"target\": \"chart-analyser\"\n      }\n    }\n  }\n})\n.bkg('white')\n.width(700)\n.height(390)\n.toDataURI() // download chart image and generate a data URI string\n.then(chart_url =\u003e console.log(chart_url)); // \"data:image/png;base64,iVBORw0KGgoAAAANSUhE\"UgAABXgAAAMMCAIAAABmCliNAAHJnElEQVR42uzdeXjc1X3v8e/sq8baF2uXvMkbBmxibMALmN0FGiCBJpT0Ccnl0qRNnockT3vbOuT2Xkpzcxty0yZtnoQCqdliCKaktpEBG2+xkRfJlmzZsiXLlrWPRpp9u38c+DEZybYsy/KM9H794Uf6+aefRufMdj5zzvfo4vG4AAAAAAAAjAc9TQAAAAAAAMYLQQMAAAAAABPhyJEjf/RHf+T1elPkF12h20PQAAAAAADARCgvL1+3bp3Vap3cf6aRngYAAAAAYAK0trauW7fub/7mb37wgx8kHs/KynruuecKCgreeOONF198UR187bXXduzY8eMf/1j79p133lH/u27duuuuuy7p4q+//vpLL70kIn/7t39rt9tF5JFHHjnflVtbW7/zne988YtfVKd9//vfr6ysfPzxx2OxmDpBpSGJ11y8eLF2ERWXfO973xvxryBoAAAAAABgon3ve9/r6ur65S9/+Vd/9Vfnzp174okn1q1b9+KLL2rHjxw58uMf//hrX/taJBJR37744ot/+Zd/2d3dvW7dutdeey3xai0tLS+99JL62WeeeWbdunXarxjxyuvWrfve975nMBjUaaFQ6LHHHvvLv/xLm81msVjMZrNaWJF0Te0i69atS/wViX/Fa6+9RtAAAAAAAMBEu+aaa1pbW0Vk0aJFLS0tw48rc+bMCYVC2rf/9E//VFpa+vOf/9xisdx3333a8WeffVb9rMFgmD9/fjAYHH6p8317zTXX6HS6u+6665/+6Z8qKyu1ORTaaaO5ZuJfQdAAAAAAAEB6WLduXWZmZlFRkRYuJLFYLCUlJYnJxWjY7fYnn3xy5cqVp06d2r1799KlSy/nmhSDBAAAAAAgVRw8ePDYsWPat01NTYnfBgIBt9tdV1cXi8XmJtB+9re//e3DDz8cCAQueuXE4x0dHXV1dX6/PxgM/q//9b96enrq6uqi0ejwa57vIomY0QAAAAAAwNU3d+7ct99++/7771cVGdW3Tz755JkzZ4b/r1avMelny8vL33777SNHjl\n\n```\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n----------------------------------------------------------------------------------------------\n\n#### Enterprise Support\n\nImage-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.\n\n- [Pricing and plan comparison](https://www.image-charts.com/pricing)\n- [Enterprise documentation](https://documentation.image-charts.com/enterprise/)\n\n##### Usage\n\nOnce subscribed to a plan you will receive an `ACCOUNT_ID` and a `SECRET_KEY`.\nThese two parameters are mandatory to sign your request and remove the watermark.\nReplace both values in the code example below:\n\n```javascript\n//import ChartJSImage from 'chart.js-image';\nconst ChartJSImage = require('..');\n\nconst chart_url = ChartJSImage({secret: process.env.SECRET_KEY ||  'SECRET_KEY'})\n.icac(process.env.ACCOUNT_ID || 'ACCOUNT_ID')\n.chart({\n  type: 'line',\n  data: {\n    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],\n    datasets: [\n      {\n        label: 'My First dataset',\n        borderColor: 'rgb(255, 99, 132)',\n        backgroundColor: 'rgba(255, 99, 132, .5)',\n        data: [57, 90, 11, -15, 37, -37, -27],\n      },\n      {\n        label: 'My Second dataset',\n        borderColor: 'rgb(54, 162, 235)',\n        backgroundColor: 'rgba(54, 162, 235, .5)',\n        data: [71, -36, -94, 78, 98, 65, -61],\n      },\n      {\n        label: 'My Third dataset',\n        borderColor: 'rgb(75, 192, 192)',\n        backgroundColor: 'rgba(75, 192, 192, .5)',\n        data: [48, -64, -61, 98, 0, -39, -70],\n      },\n      {\n        label: 'My Third dataset',\n        borderColor: 'rgb(255, 205, 86)',\n        backgroundColor: 'rgba(255, 205, 86, .5)',\n        data: [-58, 88, 29, 44, 3, 78, -9],\n      },\n    ],\n  },\n  options: {\n    responsive: true,\n    title: {\n      display: true,\n      text: 'Chart.js Line Chart - Stacked Area',\n    },\n    tooltips: {\n      mode: 'index',\n    },\n    hover: {\n      mode: 'index',\n    },\n    scales: {\n      xAxes: [\n        {\n          scaleLabel: {\n            display: true,\n            labelString: 'Month',\n          },\n        },\n      ],\n      yAxes: [\n        {\n          stacked: true,\n          scaleLabel: {\n            display: true,\n            labelString: 'Value',\n          },\n        },\n      ],\n    },\n  },\n})\n.bkg('white')\n.width(700)\n.height(390)\n.icretina('1') // enable paid-only features like high-resolution charts\n.toURL(); // get the whole (HMAC signed) URL\n\nconsole.log(chart_url);\n// https://image-charts.com/chart.js/2.8.0?icac=documentation\u0026chart=%7Btype%3A%27line%27%2Cdata%3A%7Blabels%3A%5B%27January%27%2C%27February%27%2C%27March%27%2C%27April%27%2C%27May%27%2C%27June%27%2C%27July%27%5D%2Cdatasets%3A%5B%7Blabel%3A%27My+First+dataset%27%2CborderColor%3A%27rgb%28255%2C+99%2C+132%29%27%2CbackgroundColor%3A%27rgba%28255%2C+99%2C+132%2C+.5%29%27%2Cdata%3A%5B57%2C90%2C11%2C-15%2C37%2C-37%2C-27%5D%7D%2C%7Blabel%3A%27My+Second+dataset%27%2CborderColor%3A%27rgb%2854%2C+162%2C+235%29%27%2CbackgroundColor%3A%27rgba%2854%2C+162%2C+235%2C+.5%29%27%2Cdata%3A%5B71%2C-36%2C-94%2C78%2C98%2C65%2C-61%5D%7D%2C%7Blabel%3A%27My+Third+dataset%27%2CborderColor%3A%27rgb%2875%2C+192%2C+192%29%27%2CbackgroundColor%3A%27rgba%2875%2C+192%2C+192%2C+.5%29%27%2Cdata%3A%5B48%2C-64%2C-61%2C98%2C0%2C-39%2C-70%5D%7D%2C%7Blabel%3A%27My+Third+dataset%27%2CborderColor%3A%27rgb%28255%2C+205%2C+86%29%27%2CbackgroundColor%3A%27rgba%28255%2C+205%2C+86%2C+.5%29%27%2Cdata%3A%5B-58%2C88%2C29%2C44%2C3%2C78%2C-9%5D%7D%5D%7D%2Coptions%3A%7Bresponsive%3Atrue%2Ctitle%3A%7Bdisplay%3Atrue%2Ctext%3A%27Chart.js+Line+Chart+-+Stacked+Area%27%7D%2Ctooltips%3A%7Bmode%3A%27index%27%7D%2Chover%3A%7Bmode%3A%27index%27%7D%2Cscales%3A%7BxAxes%3A%5B%7BscaleLabel%3A%7Bdisplay%3Atrue%2ClabelString%3A%27Month%27%7D%7D%5D%2CyAxes%3A%5B%7Bstacked%3Atrue%2CscaleLabel%3A%7Bdisplay%3Atrue%2ClabelString%3A%27Value%27%7D%7D%5D%7D%7D%7D\u0026bkg=white\u0026width=700\u0026height=390\u0026icretina=1\u0026ichm=922e17b749b1ab7fab2a14cb742029dc46e50e658457913a9f548793910d2a0d\n\n\n```\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://image-charts.com/chart.js/2.8.0?icac=documentation\u0026chart=%7Btype%3A%27line%27%2Cdata%3A%7Blabels%3A%5B%27January%27%2C%27February%27%2C%27March%27%2C%27April%27%2C%27May%27%2C%27June%27%2C%27July%27%5D%2Cdatasets%3A%5B%7Blabel%3A%27My+First+dataset%27%2CborderColor%3A%27rgb%28255%2C+99%2C+132%29%27%2CbackgroundColor%3A%27rgba%28255%2C+99%2C+132%2C+.5%29%27%2Cdata%3A%5B57%2C90%2C11%2C-15%2C37%2C-37%2C-27%5D%7D%2C%7Blabel%3A%27My+Second+dataset%27%2CborderColor%3A%27rgb%2854%2C+162%2C+235%29%27%2CbackgroundColor%3A%27rgba%2854%2C+162%2C+235%2C+.5%29%27%2Cdata%3A%5B71%2C-36%2C-94%2C78%2C98%2C65%2C-61%5D%7D%2C%7Blabel%3A%27My+Third+dataset%27%2CborderColor%3A%27rgb%2875%2C+192%2C+192%29%27%2CbackgroundColor%3A%27rgba%2875%2C+192%2C+192%2C+.5%29%27%2Cdata%3A%5B48%2C-64%2C-61%2C98%2C0%2C-39%2C-70%5D%7D%2C%7Blabel%3A%27My+Third+dataset%27%2CborderColor%3A%27rgb%28255%2C+205%2C+86%29%27%2CbackgroundColor%3A%27rgba%28255%2C+205%2C+86%2C+.5%29%27%2Cdata%3A%5B-58%2C88%2C29%2C44%2C3%2C78%2C-9%5D%7D%5D%7D%2Coptions%3A%7Bresponsive%3Atrue%2Ctitle%3A%7Bdisplay%3Atrue%2Ctext%3A%27Chart.js+Line+Chart+-+Stacked+Area%27%7D%2Ctooltips%3A%7Bmode%3A%27index%27%7D%2Chover%3A%7Bmode%3A%27index%27%7D%2Cscales%3A%7BxAxes%3A%5B%7BscaleLabel%3A%7Bdisplay%3Atrue%2ClabelString%3A%27Month%27%7D%7D%5D%2CyAxes%3A%5B%7Bstacked%3Atrue%2CscaleLabel%3A%7Bdisplay%3Atrue%2ClabelString%3A%27Value%27%7D%7D%5D%7D%7D%7D\u0026bkg=white\u0026width=700\u0026height=390\u0026icretina=1\u0026ichm=922e17b749b1ab7fab2a14cb742029dc46e50e658457913a9f548793910d2a0d\"/\u003e\u003c/p\u003e\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n----------------------------------------------------------------------------------------------\n\n#### On-Premise Support\n\nImage-Charts virtual appliance can be deployed anywhere inside a customer network.\n\n\n```javascript\nimport ChartJSImage from 'chart.js-image';\n\nconst chart_url = ChartJSImage({\n        secret: 'SECRET_KEY',\n\n        // override the host with your own endpoint\n        host: 'custom-domain.tld'\n    })\n    .chart({/* chart.js configuration object */})\n    .icretina('1') // enable paid-only features like high-resolution charts\n    .toURL(); // get the whole (HMAC signed) URL\n\nconsole.log(chart_url);\n// https://image-charts.com/chart.js/2.8.0?icac=documentation\u0026chart=%7Btype%3A%27line%27%2Cdata%3A%7Blabels%3A%5B%27January%27%2C%27February%27%2C%27March%27%2C%27April%27%2C%27May%27%2C%27June%27%2C%27July%27%5D%2Cdatasets%3A%5B%7Blabel%3A%27Unfilled%27%2Cfill%3Afalse%2CbackgroundColor%3A%27rgb%2854%2C+162%2C+235%29%27%2CborderColor%3A%27rgb%2854%2C+162%2C+235%29%27%2Cdata%3A%5B-73%2C40%2C-4%2C27%2C26%2C53%2C-12%5D%7D%2C%7Blabel%3A%27Dashed%27%2Cfill%3Afalse%2CbackgroundColor%3A%27rgb%2875%2C+192%2C+192%29%27%2CborderColor%3A%27rgb%2875%2C+192%2C+192%29%27%2CborderDash%3A%5B5%2C5%5D%2Cdata%3A%5B99%2C-40%2C93%2C-56%2C0%2C25%2C45%5D%7D%2C%7Blabel%3A%27Filled%27%2CbackgroundColor%3A%27rgb%28255%2C+99%2C+132%29%27%2CborderColor%3A%27rgb%28255%2C+99%2C+132%29%27%2Cdata%3A%5B56%2C68%2C84%2C11%2C-96%2C-56%2C-51%5D%2Cfill%3Atrue%7D%5D%7D%2Coptions%3A%7Btitle%3A%7Bdisplay%3Atrue%2Ctext%3A%27Chart.js+Line+Chart%27%7D%2Cscales%3A%7BxAxes%3A%5B%7Bdisplay%3Atrue%2CscaleLabel%3A%7Bdisplay%3Atrue%2ClabelString%3A%27Month%27%7D%7D%5D%2CyAxes%3A%5B%7Bdisplay%3Atrue%2CscaleLabel%3A%7Bdisplay%3Atrue%2ClabelString%3A%27Value%27%7D%7D%5D%7D%7D%7D\u0026bkg=white\u0026width=700\u0026height=390\u0026icretina=1\u0026ichm=f272aa90e5ec691d41ac6c6c541f9d114c09dd38a1c7f114745c00074da72f69\n```\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n\n\n----------------------------------------------------------------------------------------------\n\n\u003ca name=\"c\"\u003e\u003c/a\u003e\n#### `c( value )` : [`ChartJSImage`](#constructor)\n\n\u003e Javascript/JSON definition of the chart. Use a Chart.js configuration object.\n\n\n\n##### Usage\n\n\n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026c=%7Btype%3A'bar'%2Cdata%3A%7Blabels%3A%5B'Q1'%2C'Q2'%2C'Q3'%2C'Q4'%5D%2Cdatasets%3A%5B%7Blabel%3A'Users'%2Cdata%3A%5B50%2C60%2C70%2C180%5D%7D%2C%7Blabel%3A'Revenue'%2Cdata%3A%5B100%2C200%2C300%2C400%5D%7D%5D%7D%7D\" target=\"_blank\"\u003e\u003cpre\u003e.c(\"{type:\u0026#39;bar\u0026#39;,data:{labels:[\u0026#39;Q1\u0026#39;,\u0026#39;Q2\u0026#39;,\u0026#39;Q3\u0026#39;,\u0026#39;Q4\u0026#39;],datasets:[{label:\u0026#39;Users\u0026#39;,data:[50,60,70,180]},{label:\u0026#39;Revenue\u0026#39;,data:[100,200,300,400]}]}}\")\u003c/pre\u003e\u003c/a\u003e\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n\n\n----------------------------------------------------------------------------------------------\n\n\u003ca name=\"chart\"\u003e\u003c/a\u003e\n#### `chart( value )` : [`ChartJSImage`](#constructor)\n\n\u003e Javascript/JSON definition of the chart. Use a Chart.js configuration object.\n\n\n\n##### Usage\n\n\n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026chart=%7Btype%3A'bar'%2Cdata%3A%7Blabels%3A%5B'Q1'%2C'Q2'%2C'Q3'%2C'Q4'%5D%2Cdatasets%3A%5B%7Blabel%3A'Users'%2Cdata%3A%5B50%2C60%2C70%2C180%5D%7D%2C%7Blabel%3A'Revenue'%2Cdata%3A%5B100%2C200%2C300%2C400%5D%7D%5D%7D%7D\" target=\"_blank\"\u003e\u003cpre\u003e.chart(\"{type:\u0026#39;bar\u0026#39;,data:{labels:[\u0026#39;Q1\u0026#39;,\u0026#39;Q2\u0026#39;,\u0026#39;Q3\u0026#39;,\u0026#39;Q4\u0026#39;],datasets:[{label:\u0026#39;Users\u0026#39;,data:[50,60,70,180]},{label:\u0026#39;Revenue\u0026#39;,data:[100,200,300,400]}]}}\")\u003c/pre\u003e\u003c/a\u003e\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n\n\n----------------------------------------------------------------------------------------------\n\n\u003ca name=\"width\"\u003e\u003c/a\u003e\n#### `width( value )` : [`ChartJSImage`](#constructor)\n\n\u003e Width of the chart\n\n\n\n##### Usage\n\n\n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026width=400\" target=\"_blank\"\u003e\u003cpre\u003e.width(\"400\")\u003c/pre\u003e\u003c/a\u003e\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n\n\n----------------------------------------------------------------------------------------------\n\n\u003ca name=\"height\"\u003e\u003c/a\u003e\n#### `height( value )` : [`ChartJSImage`](#constructor)\n\n\u003e Height of the chart\n\n\n\n##### Usage\n\n\n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026height=300\" target=\"_blank\"\u003e\u003cpre\u003e.height(\"300\")\u003c/pre\u003e\u003c/a\u003e\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n\n\n----------------------------------------------------------------------------------------------\n\n\u003ca name=\"backgroundColor\"\u003e\u003c/a\u003e\n#### `backgroundColor( value )` : [`ChartJSImage`](#constructor)\n\n\u003e Background of the chart canvas. Accepts rgb (rgb(255,255,120)), colors (red), and url-encoded hex values (%23ff00ff). Abbreviated as \u0026#34;bkg\u0026#34;\n\n\n\n##### Usage\n\n\n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026backgroundColor=black\" target=\"_blank\"\u003e\u003cpre\u003e.backgroundColor(\"black\")\u003c/pre\u003e\u003c/a\u003e\n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026backgroundColor=rgb(255%2C255%2C120)\" target=\"_blank\"\u003e\u003cpre\u003e.backgroundColor(\"rgb(255,255,120)\")\u003c/pre\u003e\u003c/a\u003e\n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026backgroundColor=%2523ff00ff\" target=\"_blank\"\u003e\u003cpre\u003e.backgroundColor(\"%23ff00ff\")\u003c/pre\u003e\u003c/a\u003e\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n\n\n----------------------------------------------------------------------------------------------\n\n\u003ca name=\"bkg\"\u003e\u003c/a\u003e\n#### `bkg( value )` : [`ChartJSImage`](#constructor)\n\n\u003e Background of the chart canvas. Accepts rgb (rgb(255,255,120)), colors (red), and url-encoded hex values (%23ff00ff). Abbreviated as \u0026#34;bkg\u0026#34;\n\n\n\n##### Usage\n\n\n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026bkg=black\" target=\"_blank\"\u003e\u003cpre\u003e.bkg(\"black\")\u003c/pre\u003e\u003c/a\u003e\n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026bkg=rgb(255%2C255%2C120)\" target=\"_blank\"\u003e\u003cpre\u003e.bkg(\"rgb(255,255,120)\")\u003c/pre\u003e\u003c/a\u003e\n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026bkg=%2523ff00ff\" target=\"_blank\"\u003e\u003cpre\u003e.bkg(\"%23ff00ff\")\u003c/pre\u003e\u003c/a\u003e\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n\n\n----------------------------------------------------------------------------------------------\n\n\u003ca name=\"encoding\"\u003e\u003c/a\u003e\n#### `encoding( value )` : [`ChartJSImage`](#constructor)\n\n\u003e Encoding of your \u0026#34;chart\u0026#34; parameter. Accepted values are url and base64.\n\n\n\n##### Allowed values: \n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026encoding=url\" target=\"_blank\"\u003e\u003cpre\u003e.encoding(\"url\")\u003c/pre\u003e\u003c/a\u003e\n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026encoding=base64\" target=\"_blank\"\u003e\u003cpre\u003e.encoding(\"base64\")\u003c/pre\u003e\u003c/a\u003e\n\n\n\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n\n\n----------------------------------------------------------------------------------------------\n\n\u003ca name=\"icac\"\u003e\u003c/a\u003e\n#### `icac( value )` : [`ChartJSImage`](#constructor)\n\n\u003e image-charts enterprise `account_id`\n\n\u003e [Reference](https://documentation.image-charts.com/enterprise/)\n\n\n\n##### Usage\n\n\n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026icac=accountId\" target=\"_blank\"\u003e\u003cpre\u003e.icac(\"accountId\")\u003c/pre\u003e\u003c/a\u003e\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n\n\n----------------------------------------------------------------------------------------------\n\n\u003ca name=\"ichm\"\u003e\u003c/a\u003e\n#### `ichm( value )` : [`ChartJSImage`](#constructor)\n\n\u003e HMAC-SHA256 signature required to activate paid features\n\n\u003e [Reference](https://documentation.image-charts.com/enterprise/)\n\n\n\n##### Usage\n\n\n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026ichm=0785cf22a0381c2e0239e27c126de4181f501d117c2c81745611e9db928b0376\" target=\"_blank\"\u003e\u003cpre\u003e.ichm(\"0785cf22a0381c2e0239e27c126de4181f501d117c2c81745611e9db928b0376\")\u003c/pre\u003e\u003c/a\u003e\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n\n\n----------------------------------------------------------------------------------------------\n\n\u003ca name=\"icretina\"\u003e\u003c/a\u003e\n#### `icretina( value )` : [`ChartJSImage`](#constructor)\n\n\u003e retina mode\n\n\u003e [Reference](https://documentation.image-charts.com/reference/retina/)\n\n\n\n##### Allowed values: \n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026icretina=0\" target=\"_blank\"\u003e\u003cpre\u003e.icretina(\"0\")\u003c/pre\u003e\u003c/a\u003e\n\u003ca href=\"https://editor.image-charts.com/#https:/image-charts.com/chart?chd=a%3A30010%2C-30000%2C50000%2C80000%2C20000\u0026chdl=Income\u0026chf=b0%2Clg%2C90%2CEA469EFF%2C1%2C03A9F47C%2C0.4\u0026chl=2014%7C2015%7C2016%7C2017%7C2018\u0026chs=700x300\u0026cht=bvs\u0026chxt=y\u0026icretina=1\" target=\"_blank\"\u003e\u003cpre\u003e.icretina(\"1\")\u003c/pre\u003e\u003c/a\u003e\n\n\n\n\n- _[Back to Getting started](#getting-started)_\n- _[Back to ToC](#table-of-contents)_\n\n\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimage-charts%2Fchartjs-image-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fimage-charts%2Fchartjs-image-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fimage-charts%2Fchartjs-image-javascript/lists"}