{"id":21879152,"url":"https://github.com/typpo/quickchart-js","last_synced_at":"2025-04-13T00:48:22.189Z","repository":{"id":42036377,"uuid":"264223120","full_name":"typpo/quickchart-js","owner":"typpo","description":"Javascript client for quickchart.io","archived":false,"fork":false,"pushed_at":"2025-02-10T18:47:29.000Z","size":982,"stargazers_count":65,"open_issues_count":3,"forks_count":11,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-13T00:48:15.973Z","etag":null,"topics":["chart-api","chartjs","chartjs-node","chartjs-to-image","js-charts"],"latest_commit_sha":null,"homepage":"https://quickchart.io","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/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-05-15T15:01:37.000Z","updated_at":"2025-03-23T10:27:37.000Z","dependencies_parsed_at":"2023-02-08T12:45:28.597Z","dependency_job_id":"b923c648-ac9b-4a14-af3b-bc7576c89950","html_url":"https://github.com/typpo/quickchart-js","commit_stats":{"total_commits":86,"total_committers":5,"mean_commits":17.2,"dds":0.3023255813953488,"last_synced_commit":"53eaae9e028dff71d2c961565e384f46928fc135"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fquickchart-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fquickchart-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fquickchart-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/typpo%2Fquickchart-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/typpo","download_url":"https://codeload.github.com/typpo/quickchart-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650437,"owners_count":21139672,"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":["chart-api","chartjs","chartjs-node","chartjs-to-image","js-charts"],"created_at":"2024-11-28T08:15:26.371Z","updated_at":"2025-04-13T00:48:22.159Z","avatar_url":"https://github.com/typpo.png","language":"TypeScript","readme":"QuickChart for Javascript\n---\n[![npm](https://img.shields.io/npm/v/quickchart-js)](https://www.npmjs.com/package/quickchart-js)\n[![npm](https://img.shields.io/npm/dt/quickchart-js)](https://www.npmjs.com/package/quickchart-js)\n[![Build Status](https://travis-ci.com/typpo/quickchart-js.svg?branch=master)](https://travis-ci.com/typpo/quickchart-js)\n\nThis is a Javascript client for [quickchart.io](https://quickchart.io), a 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 quickchart-js\n```\n\n# Usage\n\nThis library provides a **QuickChart** object.  Import it, instantiate it, and set your [Chart.js](https://www.chartjs.org) config:\n\n```js\nconst QuickChart = require('quickchart-js');\n\nconst myChart = new QuickChart();\nmyChart.setConfig({\n  type: 'bar',\n  data: { labels: ['Hello world', 'Foo bar'], datasets: [{ label: 'Foo', data: [1, 2] }] },\n});\n```\n\nUse `getUrl()` on your quickchart object to get the encoded URL that renders your chart:\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\nIf you have a large or complicated chart, use `getShortUrl()` on your quickchart object to get a fixed-length URL using the quickchart.io web service:\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\nOr write it to disk:\n```js\nmyChart.toFile('/tmp/mychart.png');\n```\n\nThe URLs produce this chart 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## Creating a QuickChart object\n\nIf you have an account ID and API key, authenticate using the QuickChart constructor:\n\n```js\nconst qc = new QuickChart(apiKey, accountId);\n```\n\nTo use the free (community) version, leave it blank:\n\n```js\nconst qc = new QuickChart();\n```\n\n## Customizing your chart\n\n### setConfig(chart: Object | string)\n\nUse this config to customize the Chart.js config object that defines your chart.  You must set this before generating a URL!\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` is 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### setVersion(version: string)\n\nSets the Chart.js version to use (e.g. `2.9.4` or `3.4.0`).  Valid options are shown in the [documentation](https://quickchart.io/documentation/#parameters).\n\n### setHost(host: string)\n\nSets the host of generated URLs.  `quickchart.io` by default.\n\n### setScheme(scheme: string)\n\nSets the scheme of generated URLs.  `https` by default.\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### getSignedUrl(): string\n\nReturns a URL that displays the chart image. It is signed with your user account to bypass rate limitations.\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: PathLike | FileHandle): Promise\n\nGiven a filepath string or a writable file handle, creates 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 qc = new QuickChart();\n\nqc.setConfig({\n  type: 'bar',\n  data: { labels: ['Hello world', 'Foo bar'], datasets: [{ label: 'Foo', data: [1, 2] }] },\n});\nqc.setWidth(500).setHeight(300).setBackgroundColor('transparent');\n\nconsole.log(qc.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```\n\nHere's a more complicated chart that includes some Javascript:\n\n```js\nqc.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});\nqc.setWidth(500).setHeight(300).setBackgroundColor('#0febc2');\n\nconsole.log(qc.getUrl());\n// https://quickchart.io/chart?c=%7Btype%3A%27bar%27%2Cdata%3A%7Blabels%3A%5B%27January%27%2C%27February%27%2C%27March%27%2C%27April%27%2C%27May%27%5D%2Cdatasets%3A%5B%7Blabel%3A%27Dogs%27%2Cdata%3A%5B50%2C60%2C70%2C180%2C190%5D%7D%5D%7D%2Coptions%3A%7Bscales%3A%7ByAxes%3A%5B%7Bticks%3A%7Bcallback%3Afunction+%28value%29+%7B%0A++return+%27%24%27+%2B+value%3B%0A%7D%7D%7D%5D%7D%7D%7D\u0026w=500\u0026h=300\u0026bkg=%230febc2\u0026f=png\n```\n\nAs we customize these charts, the URLs are getting a little long for my liking.  There's a `getShortUrl` function that uses the QuickChart.io web service to generate a short(er), fixed-length URL:\n\n```js\n// Fill the chart with data from 0 to 100\nconst data = [...Array(100).keys()];\nqc.setConfig({\n  type: 'bar',\n  data: { labels: ['Hello world', 'Foo bar'], datasets: [{ label: 'Foo', data }] },\n});\n\nasync function printShortUrl() {\n  const url = await qc.getShortUrl();\n  console.log(url);\n}\nprintShortUrl();\n// https://quickchart.io/chart/render/f-a1d3e804-dfea-442c-88b0-9801b9808401\n```\n\n## Using built-in QuickChart functions\n\nQuickChart has builtin functions: `getImageFill`, `getGradientFill`, `getGradientFillHelper`, and `pattern.draw`.  These functions can be accessed via the `QuickChart` class.  For example:\n\n```js\nconst qc = new QuickChart();\nqc.setConfig({\n  type: 'bar',\n  data: {\n    labels: ['Hello world', 'Foo bar'],\n    datasets: [\n      {\n        label: 'Foo',\n        data: [1, 2],\n        backgroundColor: QuickChart.getGradientFillHelper('horizontal', ['red', 'green']),\n      },\n    ],\n  },\n});\n```\n\n# Building the library\n\nTo build this library locally, run:\n\n```\nyarn build\n```\n\nTo run tests:\n\n```\nyarn test\n```\n\nIf you're editing the library and running examples, you may want to continuously build the library in the background:\n\n```\nyarn build:watch\n\n# ...\n\nnode examples/simple_example.js\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyppo%2Fquickchart-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftyppo%2Fquickchart-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftyppo%2Fquickchart-js/lists"}