chartist-svg

0.2.8 • Public • Published

Generate SVG chart using Chartist.

You can paste the SVG code to a file directly.
Use SVGViewer to view the generated SVG.


const chartistSvg = require('chartist-svg');
// chartistSvg(<type>, <data>, [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:

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) */
// <svg xmlns="http://www.w3.org/2000/svg" ...
// ... text-anchor="middle">Player Unknown's Battleground</text></svg>


References

Readme

Keywords

Package Sidebar

Install

npm i chartist-svg

Weekly Downloads

15

Version

0.2.8

License

MIT

Unpacked Size

31.6 kB

Total Files

5

Last publish

Collaborators

  • wolfram77