https://github.com/nodef/chartist-svg
Generate SVG chart using chartist on node.js.
https://github.com/nodef/chartist-svg
chart chartist svg
Last synced: about 1 year ago
JSON representation
Generate SVG chart using chartist on node.js.
- Host: GitHub
- URL: https://github.com/nodef/chartist-svg
- Owner: nodef
- License: mit
- Created: 2018-04-26T11:46:20.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2025-04-08T16:36:35.000Z (about 1 year ago)
- Last Synced: 2025-04-14T07:07:20.409Z (about 1 year ago)
- Topics: chart, chartist, svg
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/chartist-svg
- Size: 126 KB
- Stars: 7
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Generate SVG chart using [Chartist].
> You can paste the SVG code to a file directly. \
> Use [SVGViewer](https://www.svgviewer.dev) to view the generated SVG.
```javascript
const chartistSvg = require('chartist-svg');
// chartistSvg(, , [options])
// -> Promise: "svg code"
type: 'line' // 'line'||'bar'||'pie'
data: {
title: 'title', subtitle: 'subtitle',
labels: ['A', 'B', 'C'], series: [
[1, 2, 3],
[4, 5, 6]
]
}
options: {
chart: {
width: 1200, height: 600,
chartPadding: {left: 20, right: 100}
},
title: {
x: 0, y: 0, height: 48,
'font-size': '18px', 'font-family': 'Verdana', 'font-weight': 'bold',
fill: 'crimson', 'text-anchor': 'middle', (... other svg attributes)
},
subtitle: {
x: 0, y: 0, height: 24,
'font-size': '12px', 'font-family': 'Verdana', 'font-weight': 'bold',
fill: 'indianred', 'text-anchor': 'middle', (... other svg attrbiutes)
},
css: ''
}
```
Example:
```javascript
const Chartist = require('chartist');
const chartistSvg = require('chartist-svg');
var data = {
title: 'Time to play PUBG',
subtitle: 'Player Unknown\'s Battleground',
labels: ['P', 'U', 'B', 'G'],
series: [
[1, 2, 3, 4],
[3, 5, 5, 6],
]
};
var options = {
css: '.ct-chart-line .ct-series .ct-point { stroke: green; }',
chart: {lineSmooth: Chartist.Interpolation.step()},
};
chartistSvg('line', data, options).then(svg => console.log(svg));
/* (generated svg can be used independently) */
/* (it is not dependent upon any external css) */
// Player Unknown's Battleground
```
## References
- [chartist :: Gion Kunz][Chartist]
- [svg-chartist :: itbilu](https://www.npmjs.com/package/svg-chartist)
[Chartist]: https://www.npmjs.com/package/chartist
