{"id":17124905,"url":"https://github.com/shellyln/chart.js-node-ssr-example","last_synced_at":"2025-08-22T00:36:45.917Z","repository":{"id":34039024,"uuid":"149048662","full_name":"shellyln/chart.js-node-ssr-example","owner":"shellyln","description":"Chart.js server side rendering example. (pure JavaScript; no native modules)","archived":false,"fork":false,"pushed_at":"2023-03-14T15:10:25.000Z","size":1235,"stargazers_count":50,"open_issues_count":13,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-13T06:11:35.554Z","etag":null,"topics":["canvas","canvas2d","chart","chartjs","nodejs","server-side-rendering","ssr","svg"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/red-agate-svg-canvas","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shellyln.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2018-09-17T00:36:28.000Z","updated_at":"2025-01-18T05:28:20.000Z","dependencies_parsed_at":"2024-10-14T18:43:42.078Z","dependency_job_id":"f1c950ec-f359-4af7-a115-1a7e8387c183","html_url":"https://github.com/shellyln/chart.js-node-ssr-example","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"05610286500efdcaba305f67e26473cd222cff32"},"previous_names":[],"tags_count":6,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellyln%2Fchart.js-node-ssr-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellyln%2Fchart.js-node-ssr-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellyln%2Fchart.js-node-ssr-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shellyln%2Fchart.js-node-ssr-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shellyln","download_url":"https://codeload.github.com/shellyln/chart.js-node-ssr-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248670434,"owners_count":21142904,"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","canvas2d","chart","chartjs","nodejs","server-side-rendering","ssr","svg"],"created_at":"2024-10-14T18:43:39.738Z","updated_at":"2025-04-13T06:11:40.207Z","avatar_url":"https://github.com/shellyln.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chart.js server side rendering example on the node.js environment.\n\n**Render various charts using Chart.js into the SVG format.**\n\nChart.js uses the HTML5 Canvas API.  \nHowever, the node.js environment does not have the Canvas API by default.  \nWith [red-agate-svg-canvas](https://www.npmjs.com/package/red-agate-svg-canvas),\nyou can render the charts on the server side.\n\n**This example uses no native modules, so it can be easily installed on various platforms.**\n\n## Get started\n\n```bash\n$ git clone https://github.com/shellyln/chart.js-node-ssr-example.git\n$ cd chart.js-node-ssr-example\n$ rm -rf ./.git\n\n$ npm install\n$ npm run build\n$ npm start           # run webpacked\n$ npm run start:v12   # run non-webpacked ES Modules (Node.js \u003e= 12.0.0)\n$ npm run start:v14   # run non-webpacked ES Modules (Node.js \u003e= 13.0.0)\n```\n\n\n## Example\n\n```ts\nimport { SvgCanvas,\n         Rect2D,\n         SvgCanvas2DGradient } from 'red-agate-svg-canvas/modules';\n\n// NOTE: hack bad .d.ts definition for ESM.\n// import * as ChartJs from 'chart.js'; // \u003c- This is fine if you only use webpack.\nimport * as ChartJs_ from 'chart.js';\nconst ChartJs: typeof ChartJs_ = (ChartJs_ as any).default || ChartJs_;\n\n\n// Get the global scope.\n// If running on a node, \"g\" points to a \"global\" object.\n// When running on the browser, \"g\" points to the \"window\" object.\nconst g = Function('return this')();\n\n// Chart options\n// https://www.chartjs.org/docs/latest/getting-started/usage.html\nconst opts: any = { ... };\n\n\nfunction main() {\n    // SvgCanvas has a \"CanvasRenderingContext2D\"-compatible interface.\n    const ctx = new SvgCanvas();\n\n    // SvgCanvas lacks the canvas property.\n    (ctx as any).canvas = {\n        width: 800,\n        height: 400,\n        style: {\n            width: '800px',\n            height: '400px',\n        },\n    };\n\n    // SvgCanvas does not have font glyph information,\n    // so manually set the ratio of (font height / font width).\n    ctx.fontHeightRatio = 2;\n\n    // Chart.js needs a \"HTMLCanvasElement\"-like interface that has \"getContext()\" method.\n    // \"getContext()\" should returns a \"CanvasRenderingContext2D\"-compatible interface.\n    const el = { getContext: () =\u003e ctx };\n\n    // If \"devicePixelRatio\" is not set, Chart.js get the devicePixelRatio from \"window\" object.\n    // node.js environment has no window object.\n    opts.options.devicePixelRatio = 1;\n\n    // Disable animations.\n    opts.options.animation = false;\n    opts.options.events = [];\n    opts.options.responsive = false;\n\n    // Chart.js needs the \"CanvasGradient\" in the global scope.\n    const savedGradient = g.CanvasGradient;\n    g.CanvasGradient = SvgCanvas2DGradient;\n    try {\n        const chart = new ChartJs.Chart(el as any, opts);\n    } finally {\n        if (savedGradient) {\n            g.CanvasGradient = savedGradient;\n        }\n    }\n\n    // Render as SVG.\n    const svgString = ctx.render(new Rect2D(0, 0 , 800, 400), 'px');\n    console.log(svgString);\n}\n```\n\n\n## Rendering results\n\n### [Bar](https://www.chartjs.org/docs/latest/getting-started/usage.html)\n![1](https://raw.githubusercontent.com/shellyln/chart.js-node-ssr-example/master/results/1.svg?sanitize=true)\n\n### [Donut](http://www.chartjs.org/samples/latest/charts/pie.html)\n![2](https://raw.githubusercontent.com/shellyln/chart.js-node-ssr-example/master/results/2.svg?sanitize=true)\n\n### [Line](http://www.chartjs.org/samples/latest/charts/line/point-sizes.html)\n![3](https://raw.githubusercontent.com/shellyln/chart.js-node-ssr-example/master/results/3.svg?sanitize=true)\n\n### [Area](http://www.chartjs.org/samples/latest/charts/area/line-stacked.html)\n![4](https://raw.githubusercontent.com/shellyln/chart.js-node-ssr-example/master/results/4.svg?sanitize=true)\n\n\n## Notes\n\nTo import the [red-agate-svg-canvas](https://www.npmjs.com/package/red-agate-svg-canvas), ~~you need to use `babel` + `webpack`.~~  \n(We have used the `import` statements for doing the [tree-shaking](https://webpack.js.org/guides/tree-shaking/). ~~The `import` statements in the `.js` not the `.mjs` files cannot import from the vanilla node.js.~~)\n\n`red-agate-svg-canvas/modules` directory has a `package.json` file and determines that the source files are `ES Modules`.  \nSee [Node.js Documentation - ECMAScript Modules](https://nodejs.org/api/modules.html).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshellyln%2Fchart.js-node-ssr-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshellyln%2Fchart.js-node-ssr-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshellyln%2Fchart.js-node-ssr-example/lists"}