svg-chartist

Generate SVG chart use Chartist on Node.js server side

svg-chartist is a node.js server-side wrapper for Chartist, it modified from chartist-svg. Can be used to generate static SVG charts, you can insert raw SVG charts into HTML pages or export PDFs.

Installation

npm install svg-chartist --save

API

svg-chartist is exported as a function, you can reference it like this:

const chartistSvg = require('svg-chartist');

chartistSvg(type, chartData, opts)

A top-level function for generating static SVG chart. Returns a Promise that fulfilled with the static chart HTML.

Parameters

• type {string} chart type. Values are: bar, line, pie
• chartData {object} Chartist's data. The data object used to pie/bar/line chart. See Chartist's API for more
• [opts] {object} optional options
• [opts.options] {object} Chartist's options. See Chartist's API for more
• [opts.resOptions] {array} Chartist's resOptions. See Chartist's API for more
• [opts.onDraw] {Function} Chartist's 'draw' event listener
• [opts.title] {object} chart's title options (height,width,fill etc). Title text is passed in by chartData.title
• [opts.subtitle] {object} chart's subtitle options (height,width,fill etc). Subtitle text is passed in by chartData.subtitle
• [opts.css] {string} Custom CSS will be appended to Chartist's CSS

Returns

• <Promise> promise that resolves with the static chart HTML

Examples

Simple line chart

const chartistSvg = require('svg-chartist');
const fs = require('fs');

const data = {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  series: [
    [12, 9, 7, 8, 5],
    [2, 1, 3.5, 7, 3],
    [1, 3, 4, 5, 6]
  ]
};

const options = {
  fullWidth: true,
  chartPadding: {
    right: 40
  }
}

const opts = {
	options: options
}

chartistSvg('line', data, opts).then((html) => {
	fs.writeFileSync('./examples/simpleLineChart.html', html)
})

Simple pie chart

const chartistSvg = require('svg-chartist');
const fs = require('fs');

const data = {
  series: [5, 3, 4]
};

var sum = function(a, b) { return a + b };
const options = {
	width: 500,
	height: 300,
  labelInterpolationFnc: function(value) {
    return Math.round(value / data.series.reduce(sum) * 100) + '%';
  }
}

const opts = {
	options: options
}

chartistSvg('pie', data, opts).then((html) => {
	fs.writeFileSync('./examples/simplePieChart.html', html)
})

Custom bar chart

const chartistSvg = require('svg-chartist');
const fs = require('fs');

const data = {
	title: 'Custom bar chart',
	subtitle: 'by: itbilu.com',
  labels: ['Q1','Q2','Q3','Q4'],
  series: [
    [80, 50, 100, 75]
  ]
};

const options = {
	width: 700, 
  height: 350,
  stackBars: true,
  axisX: {
    showLabel: true,
    showGrid: false,
  }
}

const opts = {
	options: options,
	title: {
		height: 50,
		fill: "#4A5572"
	},
  css: `.ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut{
    stroke: #4A5572
  }`,
  onDraw: function (data) {
    if(data.type === 'bar') {
      data.element.attr({
        style: 'stroke-width: 30px'
      });
    }
  }
}

chartistSvg('bar', data, opts).then((html) => {
	fs.writeFileSync('./examples/customBarChart.html', html)
})

• 中文本API