{"id":21831416,"url":"https://github.com/nodef/chartist-svg","last_synced_at":"2025-04-14T07:07:27.399Z","repository":{"id":57197149,"uuid":"131147671","full_name":"nodef/chartist-svg","owner":"nodef","description":"Generate SVG chart using chartist on node.js.","archived":false,"fork":false,"pushed_at":"2025-04-08T16:36:35.000Z","size":129,"stargazers_count":7,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-14T07:07:20.409Z","etag":null,"topics":["chart","chartist","svg"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/chartist-svg","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/nodef.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":"2018-04-26T11:46:20.000Z","updated_at":"2025-04-08T16:36:38.000Z","dependencies_parsed_at":"2024-06-21T05:43:25.958Z","dependency_job_id":"1496d9c3-6b43-4293-9797-8d5805da556c","html_url":"https://github.com/nodef/chartist-svg","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nodef%2Fchartist-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nodef%2Fchartist-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nodef%2Fchartist-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nodef%2Fchartist-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nodef","download_url":"https://codeload.github.com/nodef/chartist-svg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248837280,"owners_count":21169374,"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","chartist","svg"],"created_at":"2024-11-27T19:10:20.198Z","updated_at":"2025-04-14T07:07:27.389Z","avatar_url":"https://github.com/nodef.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Generate SVG chart using [Chartist].\n\u003e You can paste the SVG code to a file directly. \\\n\u003e Use [SVGViewer](https://www.svgviewer.dev) to view the generated SVG.\n\n\u003cbr\u003e\n\n```javascript\nconst chartistSvg = require('chartist-svg');\n// chartistSvg(\u003ctype\u003e, \u003cdata\u003e, [options])\n// -\u003e Promise: \"svg code\"\n\ntype: 'line' // 'line'||'bar'||'pie'\n\ndata: {\n  title: 'title', subtitle: 'subtitle',\n  labels: ['A', 'B', 'C'], series: [\n    [1, 2, 3],\n    [4, 5, 6]\n  ]\n}\n\noptions: {\n  chart: {\n    width: 1200, height: 600,\n    chartPadding: {left: 20, right: 100}\n  },\n  title: {\n    x: 0, y: 0, height: 48,\n    'font-size': '18px', 'font-family': 'Verdana', 'font-weight': 'bold',\n    fill: 'crimson', 'text-anchor': 'middle', (... other svg attributes)\n  },\n  subtitle: {\n    x: 0, y: 0, height: 24,\n    'font-size': '12px', 'font-family': 'Verdana', 'font-weight': 'bold',\n    fill: 'indianred', 'text-anchor': 'middle', (... other svg attrbiutes)\n  },\n  css: ''\n}\n```\n\n\u003cbr\u003e\n\nExample:\n\n```javascript\nconst Chartist    = require('chartist');\nconst chartistSvg = require('chartist-svg');\n\nvar data = {\n  title: 'Time to play PUBG',\n  subtitle: 'Player Unknown\\'s Battleground',\n  labels: ['P', 'U', 'B', 'G'],\n  series: [\n    [1, 2, 3, 4],\n    [3, 5, 5, 6],\n  ]\n};\n\nvar options = {\n  css: '.ct-chart-line .ct-series .ct-point { stroke: green; }',\n  chart: {lineSmooth: Chartist.Interpolation.step()},\n};\n\nchartistSvg('line', data, options).then(svg =\u003e console.log(svg));\n/* (generated svg can be used independently) */\n/* (it is not dependent upon any external css) */\n// \u003csvg xmlns=\"http://www.w3.org/2000/svg\" ...\n// ... text-anchor=\"middle\"\u003ePlayer Unknown's Battleground\u003c/text\u003e\u003c/svg\u003e\n```\n\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n## References\n\n- [chartist :: Gion Kunz][Chartist]\n- [svg-chartist :: itbilu](https://www.npmjs.com/package/svg-chartist)\n\n[Chartist]: https://www.npmjs.com/package/chartist\n\n![](https://ga-beacon.deno.dev/G-RC63DPBH3P:SH3Eq-NoQ9mwgYeHWxu7cw/github.com/nodef/chartist-svg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnodef%2Fchartist-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnodef%2Fchartist-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnodef%2Fchartist-svg/lists"}