{"id":23636762,"url":"https://github.com/withxat/Chart-PNG","last_synced_at":"2025-08-31T11:33:59.082Z","repository":{"id":269995186,"uuid":"909099772","full_name":"Xatsh/Chart-PNG","owner":"Xatsh","description":"🏭 A simple Chart.js to Png image converter based on node-canvas / 一个基于 node-canvas 的 Chart.js -\u003e png 转换器","archived":false,"fork":false,"pushed_at":"2024-12-27T18:22:34.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-27T18:25:26.869Z","etag":null,"topics":["canvas","chart","chartjs","convert","converter","image","node-canvas","png"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/Xatsh.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-27T18:18:58.000Z","updated_at":"2024-12-27T18:25:19.000Z","dependencies_parsed_at":"2024-12-27T18:25:55.567Z","dependency_job_id":"d8653ab3-b86a-4c6e-b0b2-4cc73d5019f1","html_url":"https://github.com/Xatsh/Chart-PNG","commit_stats":null,"previous_names":["xatsh/chart-png"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xatsh%2FChart-PNG","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xatsh%2FChart-PNG/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xatsh%2FChart-PNG/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Xatsh%2FChart-PNG/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Xatsh","download_url":"https://codeload.github.com/Xatsh/Chart-PNG/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":231590709,"owners_count":18396934,"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","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":["canvas","chart","chartjs","convert","converter","image","node-canvas","png"],"created_at":"2024-12-28T06:14:46.676Z","updated_at":"2025-08-31T11:33:59.075Z","avatar_url":"https://github.com/Xatsh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chart-Png\n\n[![npm](https://img.shields.io/npm/v/chart-png?color=444\u0026label=)](https://npmjs.com/package/chart-png)\n\nThis is a simple lib that converts a Chart.js v3(.9.1)'s configuration to a png image.\n\n- Typescript\n- Chart.js v3(.9.1)\n  - Chart.js v4 has a [bug](https://github.com/chartjs/chartjs-plugin-datalabels/issues/422) with the datalabels plugin, and I think it's a very important plugin.\n  - ~~And the v3 maybe more stable.~~\n- Support plugins:\n  - [chartjs-plugin-datalabels](https://github.com/chartjs/chartjs-plugin-datalabels)\n  - [chartjs-plugin-annotation](https://github.com/chartjs/chartjs-plugin-annotation)\n  - [chartjs-plugin-autocolors](https://github.com/kurkle/chartjs-plugin-autocolors)\n  - [chartjs-plugin-gradient](https://github.com/kurkle/chartjs-plugin-gradient)\n  - And [inline plugins](https://www.chartjs.org/docs/3.9.1/developers/plugins.html#using-plugins)\n\n## Installation\n\n```bash\nnpm install chart-png\n```\n\nOr whatever package manager you use.\n\n\u003e [!IMPORTANT]\n\u003e Cuz this lib uses the `canvas` package, you need to install the `canvas` dependencies to make it work.\n\u003e\n\u003e [Node Canvas's README](https://github.com/Automattic/node-canvas/blob/master/Readme.md#compiling)\n\nFor this lib, you will only need blew dependencies (because we only produce png images):\n\nOS | Command\n----- | -----\nmacOS | `brew install pkg-config cairo pango pixman python-setuptools`\nUbuntu | `sudo apt-get install build-essential libcairo2-dev libpango1.0-dev`\nFedora | `sudo yum install gcc-c++ cairo-devel pango-devel`\nSolaris | `pkgin install cairo pango pkg-config xproto renderproto kbproto xextproto`\nOpenBSD | `doas pkg_add cairo pango png`\nWindows | See the [wiki](https://github.com/Automattic/node-canvas/wiki/Installation:-Windows)\nOthers | See the [wiki](https://github.com/Automattic/node-canvas/wiki)\n\n## Usage\n\n```typescript\nimport { ChartPng } from 'chart-png';\n\nconst config = {\n  type: 'bar',\n  data: {\n    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],\n    datasets: [{\n      label: '# of Votes',\n      data: [12, 19, 3, 5, 2, 3],\n      backgroundColor: [\n        'rgba(255, 99, 132, 0.2)',\n        'rgba(54, 162, 235, 0.2)',\n        'rgba(255, 206, 86, 0.2)',\n        'rgba(75, 192, 192, 0.2)',\n        'rgba(153, 102, 255, 0.2)',\n        'rgba(255, 159, 64, 0.2)'\n      ],\n      borderColor: [\n        'rgba(255, 99, 132, 1)',\n        'rgba(54, 162, 235, 1)',\n        'rgba(255, 206, 86, 1)',\n        'rgba(75, 192, 192, 1)',\n        'rgba(153, 102, 255, 1)',\n        'rgba(255, 159, 64, 1)'\n      ],\n      borderWidth: 1\n    }]\n  },\n  options: {\n    // support plugins\n    plugins: {\n      datalabels: {\n        color: 'black',\n        font: {\n          weight: 'bold'\n        }\n      }\n    }\n    scales: {\n      y: {\n        beginAtZero: true\n      }\n    }\n  },\n  plugins: {\n    // inline plugins\n    // Don't really use this, cuz ChartPng's options.backgroundColor has done this for you.\n    beforeDraw: (chart) =\u003e {\n      const ctx = chart.ctx;\n      ctx.save();\n      ctx.fillStyle = 'red';\n      ctx.fillRect(0, 0, 100, 100);\n      ctx.restore();\n    }\n  }\n}\n\nChartPng(config, \"chart.png\", \"output\")\n```\n\n## API\n\n```typescript\nChartPng(\n /**\n  * The chart configuration of Chart.js v3.\n  * @type {Config}\n  * @see https://www.chartjs.org/docs/3.9.1/configuration/\n  */\n config: Config,\n /**\n  * The name of the chart to render.\n  * @type {string}\n  * @example \"bar\"\n  */\n name: string,\n /**\n  * The directory name to save the chart.\n  * @type {string}\n  * @example \"chart\"\n  */\n dirName: string,\n options?: MainOptions,\n): void\n\ninterface MainOptions {\n /**\n  * Optional background color for the chart, otherwise it will be white.\n  * @optional\n  * @type {CanvasGradient | CanvasPattern | string}\n  * @default \"white\"\n  */\n backgroundColor?: CanvasGradient | CanvasPattern | string\n /**\n  * The device pixel ratio of the chart.\n  * @optional\n  * @type {number}\n  * @default 2\n  * @see https://www.chartjs.org/docs/3.9.1/configuration/device-pixel-ratio.html\n  */\n devicePixelRatio?: number\n /**\n  * The font to register for the chart.\n  * @type {Parameters\u003ctypeof registerFont\u003e}\n  * @optional\n  * @default undefined\n  * @see https://github.com/Automattic/node-canvas?tab=readme-ov-file#registerfont\n  * @example\n  * ```ts\n  * font: [\"./path/to/font.ttf\", { family: \"Font Family\" }]\n  * ```\n  */\n font?: Parameters\u003ctypeof registerFont\u003e\n /**\n  * The height of the charts to render, in pixels.\n  * @optional\n  * @type {number}\n  * @default 450\n  */\n height?: number\n /**\n  * The width of the charts to render, in pixels.\n  * @optional\n  * @type {number}\n  * @default 800\n  */\n width?: number\n}\n\nParameters\u003ctypeof registerFont\u003e = [\n  path: string,\n  fontFace: {\n    family: string;\n    weight?: string;\n    style?: string;\n  }\n]\n```\n\n## License\n\n[MIT](./LICENSE) License \u0026copy; 2024-PRESENT [Xat](https://github.com/Xatsh)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithxat%2FChart-PNG","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwithxat%2FChart-PNG","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwithxat%2FChart-PNG/lists"}