{"id":13746932,"url":"https://github.com/vmpowerio/chartjs-node","last_synced_at":"2025-07-26T10:41:22.470Z","repository":{"id":56151524,"uuid":"69470208","full_name":"vmpowerio/chartjs-node","owner":"vmpowerio","description":"Create Chart.js Charts Server-side","archived":false,"fork":false,"pushed_at":"2020-11-24T01:59:05.000Z","size":201,"stargazers_count":227,"open_issues_count":37,"forks_count":51,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-07-21T04:41:43.579Z","etag":null,"topics":["chartjs","chartjs-node"],"latest_commit_sha":null,"homepage":"http://chartjs-demo.vmpower.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vmpowerio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-28T14:12:45.000Z","updated_at":"2025-02-08T04:32:54.000Z","dependencies_parsed_at":"2022-08-15T13:40:35.865Z","dependency_job_id":null,"html_url":"https://github.com/vmpowerio/chartjs-node","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/vmpowerio/chartjs-node","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmpowerio%2Fchartjs-node","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmpowerio%2Fchartjs-node/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmpowerio%2Fchartjs-node/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmpowerio%2Fchartjs-node/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vmpowerio","download_url":"https://codeload.github.com/vmpowerio/chartjs-node/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vmpowerio%2Fchartjs-node/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267150787,"owners_count":24043526,"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-07-26T02:00:08.937Z","response_time":62,"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-node"],"created_at":"2024-08-03T06:01:06.117Z","updated_at":"2025-07-26T10:41:22.397Z","avatar_url":"https://github.com/vmpowerio.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![Chartjs Node Header Image](./img/chartjsnode.png)](http://chartjs-demo.vmpower.io/)\n[![Build Status](https://travis-ci.org/vmpowerio/chartjs-node.svg?branch=master)](https://travis-ci.org/vmpowerio/chartjs-node)\n[![Code Climate](https://codeclimate.com/github/vmpowerio/chartjs-node/badges/gpa.svg)](https://codeclimate.com/github/vmpowerio/chartjs-node)\n\n# Chartjs-Node\n\nA simple library to make it easy to create Chartjs charts in Node.js (server-side).\n\nThis library puts together [jsdom](https://github.com/tmpvar/jsdom), [node-canvas](https://github.com/Automattic/node-canvas) and [chartjs](https://github.com/chartjs/Chart.js) to render Chartjs on the server.\n\n**[Live Demo](http://chartjs-demo.vmpower.io)**\n\n## Getting Started\n\n### Peer Dependencies\n\nYou'll need to npm install `chart.js`. This library will pick up the exact version you end up installing.\n\n### Cairo\n\nBefore installing this library you'll need to install Cairo for your system. The instructions for the most common platforms can be found [here](https://github.com/Automattic/node-canvas#installation).\n\nNow you're ready to install the package:\n\n```\nnpm install chartjs-node\n```\n\n## Creating a Chart\n\n```js\nconst ChartjsNode = require('chartjs-node');\n// 600x600 canvas size\nvar chartNode = new ChartjsNode(600, 600);\nreturn chartNode.drawChart(chartJsOptions)\n.then(() =\u003e {\n    // chart is created\n\n    // get image as png buffer\n    return chartNode.getImageBuffer('image/png');\n})\n.then(buffer =\u003e {\n    Array.isArray(buffer) // =\u003e true\n    // as a stream\n    return chartNode.getImageStream('image/png');\n})\n.then(streamResult =\u003e {\n    // using the length property you can do things like\n    // directly upload the image to s3 by using the\n    // stream and length properties\n    streamResult.stream // =\u003e Stream object\n    streamResult.length // =\u003e Integer length of stream\n    // write to a file\n    return chartNode.writeImageToFile('image/png', './testimage.png');\n})\n.then(() =\u003e {\n    // chart is now written to the file path\n    // ./testimage.png\n});\n```\n\n## Destroying the Chart\n\nEach time you create a chart, you will create a new virtual browser `window`. You should call the `destroy`\nmethod to release the native resources or you may leak memory:\n\n```\nchartNode.destroy();\n```\n\n## Global chart reference\n\nYou can access and modify the ChartJS reference before a chart is drawn via an event (`beforeDraw`).  ChartjsNode extends [EventEmitter](https://nodejs.org/api/events.html#events_class_eventemitter).\n\n```js\nvar chartNode = new ChartjsNode(600, 600);\nchartNode.on('beforeDraw', function (Chartjs) {\n\t//Chartjs.defaults\n\t//Chartjs.pluginService\n\t//Chartjs.scaleService\n\t//Chartjs.layoutService\n\t//Chartjs.helpers\n\t//Chartjs.controllers\n\t//etc\n});\nchartNode.drawChart(chartJsOptions)\t//beforeDraw is called in here\n...\n```\n\n## Adding draw plugins\n\nTo use draw plugins, simply use the ``options`` object to add your plugins, like so:\n```js\nvar myChartOptions = {\n    plugins: {\n        afterDraw: function (chart, easing) {\n            var self = chart.config;    /* Configuration object containing type, data, options */\n            var ctx = chart.chart.ctx;  /* Canvas context used to draw with */\n            ...\n        }\n    }\n}\n\nvar chartJsOptions = {\n    type: 'pie',\n    data: myChartData,\n    options: myChartOptions\n};\n```\n\n[Read here](http://www.chartjs.org/docs/latest/developers/plugins.html) to see what plugins you can write. In the context of drawing static images, ``beforeDraw`` and/or ``afterDraw`` methods makes most sense to implement.\n\n[Read here](https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D) to see which methods are available for the ``ctx`` object.\n\n## Adding custom charts\n\nTo use custom charts, also use the ``options`` object to add your chart config and controller, like so:\n```js\nvar myChartOptions = {\n  charts: [{\n    type: 'custom',\n    baseType: 'bar',\n    controller: {\n     draw: function (ease) {},\n      ...\n    },\n    defaults: {\n      ...\n    },\n  }]\n}\n\nvar chartJsOptions = {\n    type: 'custom',\n    data: myChartData,\n    options: myChartOptions\n};\n```\n\n[Read here](http://www.chartjs.org/docs/latest/developers/charts.html) to see how to write custom charts.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvmpowerio%2Fchartjs-node","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvmpowerio%2Fchartjs-node","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvmpowerio%2Fchartjs-node/lists"}