{"id":11617,"library":"quickchart-js","title":"QuickChart JavaScript Client","description":"quickchart-js is the official JavaScript client library for QuickChart.io, a web service that renders static Chart.js images from a URL or POST request. It allows developers to programmatically generate highly customizable charts for various applications like email, SMS, or chat platforms. The library wraps the QuickChart API, simplifying the process of setting chart configurations (based on Chart.js syntax), dimensions, formats, and retrieving either long encoded URLs, short shareable URLs, or saving charts directly to a file. The current stable version is 3.1.3, with updates released periodically, typically every few months, reflecting active maintenance. A key differentiator is its ability to convert dynamic Chart.js configurations into static images, offering robust integration options where dynamic JavaScript charting is not feasible.","status":"active","version":"3.1.3","language":"javascript","source_language":"en","source_url":"https://github.com/typpo/quickchart-js","tags":["javascript","typescript"],"install":[{"cmd":"npm install quickchart-js","lang":"bash","label":"npm"},{"cmd":"yarn add quickchart-js","lang":"bash","label":"yarn"},{"cmd":"pnpm add quickchart-js","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"While CommonJS `require` works, ESM `import` is the recommended pattern in modern JavaScript and TypeScript projects. The package provides both CommonJS (`.cjs.js`) and ESM (`.mjs`) builds.","wrong":"const QuickChart = require('quickchart-js');","symbol":"QuickChart","correct":"import { QuickChart } from 'quickchart-js';"},{"note":"The constructor directly accepts `apiKey` and `accountId` as positional arguments, not an options object. Omit arguments for the free community version.","wrong":"new QuickChart({ apiKey: '...', accountId: '...' });","symbol":"QuickChart","correct":"new QuickChart(apiKey, accountId);"},{"note":"`getGradientFillHelper` is a static method on the `QuickChart` class, not an instance method. It's used for advanced Chart.js styling.","wrong":"myChart.getGradientFillHelper(...);","symbol":"QuickChart.getGradientFillHelper","correct":"QuickChart.getGradientFillHelper('horizontal', ['red', 'green']);"}],"quickstart":{"code":"import { QuickChart } from 'quickchart-js';\nimport * as fs from 'fs/promises';\n\nconst myChart = new QuickChart();\nmyChart.setConfig({\n  type: 'bar',\n  data: {\n    labels: ['January', 'February', 'March', 'April', 'May'],\n    datasets: [\n      { label: 'Dogs', data: [50, 60, 70, 180, 190] },\n      { label: 'Cats', data: [100, 200, 300, 400, 500] }\n    ],\n  },\n  options: {\n    plugins: {\n      legend: { position: 'top' },\n      title: { display: true, text: 'Monthly Pet Counts' },\n    },\n  },\n});\n\nmyChart.setWidth(800);\nmyChart.setHeight(400);\nmyChart.setFormat('png');\nmyChart.setBackgroundColor('#f8f8f8');\n\nasync function generateCharts() {\n  // Get the direct URL\n  console.log('Direct Chart URL:', myChart.getUrl());\n\n  // Get a short, fixed-length URL (requires network request)\n  try {\n    const shortUrl = await myChart.getShortUrl();\n    console.log('Short Chart URL:', shortUrl);\n  } catch (error) {\n    console.error('Failed to get short URL:', error);\n  }\n\n  // Write the chart to a file\n  const filePath = './mychart.png';\n  try {\n    await myChart.toFile(filePath);\n    console.log(`Chart saved to ${filePath}`);\n  } catch (error) {\n    console.error('Failed to save chart to file:', error);\n  }\n}\n\ngenerateCharts();\n","lang":"typescript","description":"This quickstart demonstrates how to configure a Chart.js bar chart, customize its properties, retrieve both long and short URLs, and save the generated image to a local file."},"warnings":[{"fix":"Upgrade your Node.js runtime to version 14 or newer.","message":"Version 3.0.0 dropped support for Node.js 12. Ensure your environment runs Node.js 14 or higher when upgrading to `quickchart-js` v3.x.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Update your imports and instantiations from `QuickChartClient` to `QuickChart`.","message":"In version 2.0.0, the main class name was changed from `QuickChartClient` to `QuickChart`. Older code using `new QuickChartClient()` will break.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"fix":"For long-term storage or high-traffic applications, consider a QuickChart.io subscription or use `getUrl()` for non-expiring direct URLs.","message":"Short URLs generated by `getShortUrl()` for free tier users expire after a few days. For persistent short URLs, a QuickChart.io subscription is required.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If your chart configuration includes JavaScript functions, ensure you pass the config as a JSON string to `setConfig()`: `myChart.setConfig(JSON.stringify({ /* config with functions */ }));`","message":"When using Chart.js functions (e.g., custom callbacks for tooltips or axis labels) within your chart configuration, the `setConfig` method expects the configuration to be a string, not a plain JavaScript object. The library internally uses `javascript-stringify` to handle this.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If encountering issues with advanced Chart.js features or custom plugins, consider upgrading to a QuickChart.io subscriber plan or self-hosting the QuickChart API for unrestricted access. Refer to the QuickChart documentation for specific limitations.","message":"The free (community) tier of QuickChart.io has limitations on certain Chart.js features and plugins due to compute restrictions. Access to the global `Chart` object and some advanced plugin properties might be restricted.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change `new QuickChartClient()` to `new QuickChart()`.","cause":"Attempting to use the old class name `QuickChartClient` after upgrading to `quickchart-js` v2.0.0 or later.","error":"TypeError: QuickChartClient is not a constructor"},{"fix":"Free up disk space or choose a different output location with enough available storage.","cause":"The system lacks sufficient disk space to write the chart image to a file using `toFile()`.","error":"Error: ENOSPC: no space left on device, write"},{"fix":"Stringify your chart configuration object if it contains JavaScript functions: `myChart.setConfig(JSON.stringify(myChartConfigObject));`","cause":"Passing a Chart.js configuration object directly to `setConfig()` that contains JavaScript functions (e.g., in `options.scales.yAxes.ticks.callback`) without stringifying it.","error":"SyntaxError: Unexpected token 'function'"}],"ecosystem":"npm"}