{"id":21879160,"url":"https://github.com/typpo/chartjs-to-image","last_synced_at":"2025-04-05T05:05:43.241Z","repository":{"id":42695478,"uuid":"304749939","full_name":"typpo/chartjs-to-image","owner":"typpo","description":"Simple library for converting Chart.js to image on backend and frontend","archived":false,"fork":false,"pushed_at":"2024-11-18T23:14:23.000Z","size":329,"stargazers_count":48,"open_issues_count":10,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T04:06:38.916Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/typpo.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":"2020-10-16T22:19:53.000Z","updated_at":"2025-01-18T04:32:14.000Z","dependencies_parsed_at":"2023-10-03T08:39:46.744Z","dependency_job_id":"bef4e75d-5739-49a5-a038-c7c354aea17e","html_url":"https://github.com/typpo/chartjs-to-image","commit_stats":{"total_commits":44,"total_committers":3,"mean_commits":"14.666666666666666","dds":0.4545454545454546,"last_synced_commit":"ed7e2e0efa012878467152f8f380e6f863c3bc42"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fchartjs-to-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fchartjs-to-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fchartjs-to-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fchartjs-to-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/typpo","download_url":"https://codeload.github.com/typpo/chartjs-to-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289426,"owners_count":20914464,"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":[],"created_at":"2024-11-28T08:15:26.577Z","updated_at":"2025-04-05T05:05:43.225Z","avatar_url":"https://github.com/typpo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Chart.js to Image\n---\n[![npm](https://img.shields.io/npm/v/chartjs-to-image)](https://www.npmjs.com/package/chartjs-to-image)\n[![npm](https://img.shields.io/npm/dt/chartjs-to-image)](https://www.npmjs.com/package/chartjs-to-image)\n[![Build Status](https://app.travis-ci.com/typpo/chartjs-to-image.svg?branch=main)](https://app.travis-ci.com/typpo/chartjs-to-image)\n\nThis is a wrapper for exporting Chart.js as an image.  It works on the server side as well as client side (although on the client you may prefer to use [toBase64Image](https://quickchart.io/documentation/chart-js/image-export/#use-tobase64image-in-the-browser)).\n\nThe renderer is based on QuickChart, a free and open-source web service for generating static charts.  View the main QuickChart repository [here](https://github.com/typpo/quickchart).\n\n# Installation\n\nIf you are using npm:\n\n```\nnpm install chartjs-to-image\n```\n\n# Usage\n\nThis library provides a **ChartJsImage** object.  Import it, instantiate it, and set your [Chart.js](https://www.chartjs.org) config:\n\n```js\nconst ChartJsImage = require('chartjs-to-image');\n\nconst myChart = new ChartJsImage();\nmyChart.setConfig({\n  type: 'bar',\n  data: { labels: ['Hello world', 'Foo bar'], datasets: [{ label: 'Foo', data: [1, 2] }] },\n});\n```\n\nWrite the image to disk:\n```js\nmyChart.toFile('/tmp/mychart.png');\n```\n\nConvert it to a data URL:\n```js\nconst dataUrl = await myChart.toDataUrl();\n```\n\nOr get a buffer that contains your chart image:\n```js\nconst buf = await myChart.toBinary();\n```\n\nChartJsImage supports some additional functions using a third party rendering service.  Use `getUrl()` on your ChartJsImage object to obtain a URL that will display your chart when visited:\n\n```js\nconsole.log(myChart.getUrl());\n// Prints:  https://quickchart.io/chart?c=%7Btype%3A%27bar%27%2Cdata%3A%7Blabels%3A%5B%27Hello+world%27%2C%27Foo+bar%27%5D%2Cdatasets%3A%5B%7Blabel%3A%27Foo%27%2Cdata%3A%5B1%2C2%5D%7D%5D%7D%7D\u0026w=500\u0026h=300\u0026bkg=transparent\u0026f=png\n```\n\nFor larger charts, you may not want to encode the chart in the URL. Use `getShortUrl()` to get a fixed-length URL:\n```js\nconst url = await myChart.getShortUrl();\nconsole.log(url);\n// Prints: https://quickchart.io/chart/render/f-a1d3e804-dfea-442c-88b0-9801b9808401\n```\n\nAll the above examples create this following Chart.js image:\n\n\u003cimg src=\"https://quickchart.io/chart?c=%7Btype%3A%27bar%27%2Cdata%3A%7Blabels%3A%5B%27Hello+world%27%2C%27Foo+bar%27%5D%2Cdatasets%3A%5B%7Blabel%3A%27Foo%27%2Cdata%3A%5B1%2C2%5D%7D%5D%7D%7D\u0026w=500\u0026h=300\u0026bkg=transparent\u0026f=png\" width=500 /\u003e\n\n## Customizing your chart\n\n### setConfig(chart)\n\nUse this config to customize the Chart.js config object that defines your chart.  You must set this before creating any outputs!\n\n### setChartJsVersion(version: string)\n\nSets the version of Chart.js to use.  Defaults to the latest version of Chart.js v2.  Other valid version settings include: \"3\", \"4\", \"3.9.1\", \"4.1.1\", etc.\n\n### setWidth(width: int)\n\nSets the width of the chart in pixels.  Defaults to 500.\n\n### setHeight(height: int)\n\nSets the height of the chart in pixels.  Defaults to 300.\n\n### setFormat(format: string)\n\nSets the format of the chart.  Defaults to `png`.  `svg` and `webp` are also valid.\n\n### setBackgroundColor(color: string)\n\nSets the background color of the chart.  Any valid HTML color works.  Defaults to `#ffffff` (white).  Also takes `rgb`, `rgba`, and `hsl` values.\n\n### setDevicePixelRatio(ratio: float)\n\nSets the device pixel ratio of the chart.  This will multiply the number of pixels by the value.  This is usually used for retina displays.  Defaults to 1.0.\n\n## Getting outputs\n\nThere are two ways to get a URL for your chart object.\n\n### getUrl(): string\n\nReturns a URL that will display the chart image when loaded.\n\n### getShortUrl(): Promise\u003cstring\u003e\n\nUses the quickchart.io web service to create a fixed-length chart URL that displays the chart image.  The Promise resolves with a URL such as `https://quickchart.io/chart/render/f-a1d3e804-dfea-442c-88b0-9801b9808401`.\n\nNote that short URLs expire after a few days for users of the free service.  You can [subscribe](https://quickchart.io/pricing/) to keep them around longer.\n\n### toBinary(): Promise\u003cBuffer\u003e\n\nCreates a binary buffer that contains your chart image.\n\n### toDataUrl(): Promise\u003cstring\u003e\n\nReturns a base 64 data URL beginning with `data:image/png;base64`.\n\n### toFile(pathOrDescriptor: string): Promise\n\nCreates a file containing your chart image.\n\n## More examples\n\nCheck out the `examples/` directory to see other usage.  Here's a simple test that uses some of the custom parameters:\n\n```js\nconst chart = new ChartJsImage();\n\nchart.setConfig({\n  type: 'bar',\n  data: { labels: ['Hello world', 'Foo bar'], datasets: [{ label: 'Foo', data: [1, 2] }] },\n});\nchart.setWidth(500).setHeight(300).setBackgroundColor('transparent');\n\nconsole.log(chart.getUrl());\n// https://quickchart.io/chart?c=%7Btype%3A%27bar%27%2Cdata%3A%7Blabels%3A%5B%27Hello+world%27%2C%27Foo+bar%27%5D%2Cdatasets%3A%5B%7Blabel%3A%27Foo%27%2Cdata%3A%5B1%2C2%5D%7D%5D%7D%7D\u0026w=500\u0026h=300\u0026bkg=transparent\u0026f=png\n\nchart.toFile('/tmp/test.png')\n```\n\nHere's a more complicated chart that includes some Javascript:\n\n```js\nchart.setConfig({\n  type: 'bar',\n  data: {\n    labels: ['January', 'February', 'March', 'April', 'May'],\n    datasets: [\n      {\n        label: 'Dogs',\n        data: [50, 60, 70, 180, 190],\n      },\n    ],\n  },\n  options: {\n    scales: {\n      yAxes: [\n        {\n          ticks: {\n            callback: function (value) {\n              return '$' + value;\n            },\n          },\n        },\n      ],\n    },\n  },\n});\nchart.setWidth(500).setHeight(300).setBackgroundColor('#0febc2');\n\nconst buf = await chart.toBinary();\n```\n\n# Troubleshooting\n\n**oQ.post is not a function**\n\nThis library does not support browser usage. For a drop-in replacement with browser support, see [quickchart-js](https://github.com/typpo/quickchart-js).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyppo%2Fchartjs-to-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftyppo%2Fchartjs-to-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyppo%2Fchartjs-to-image/lists"}