node-chartist
SVG Charts on the server.
Node Chartist is a functional server-side wrapper for the popular Chartist library. It generates static svg charts and adds support for a few useful features such as axis titles and chart legends.
Installation
npm install node-chartist
The accompanying CSS can be found at dist/main.css
after installation.
Usage
const co = ;const generate = ; ;
API
generate ( type , options , data )
A curried function that generates a static svg chart.
Returns a Promise
that is fulfilled with the static chart HTML.
Arguments
-
type
- A string used to determine what type of chart to generate. Supported values are:bar
line
pie
-
options
- An object or a function that returns an object of chart options. If a function is used, it will be called with theChartist
object.Options are dependent on the chart
type
. All options in the Chartist Api Documentation are supported. In addition to those, the following options are supported by node-chartist:-
axisX.title
- A string to use as the x axis title. -
axisY.title
- A string to use as the y axis title. -
legend
- A boolean used to determine whether a legend should be generated. Defaults totrue
.
-
-
data
- An object containing data used to generate the chart. The structure of this object depends on charttype
. Please refer to the Chartist Api Documentation for complete details.For bar and line charts, this object contains the following properties
-
labels
- An array of string labels to apply to each value. -
series
- An array of arrays or objects containing the values to plot. If objects are used, the following properties are supported:-
name
- A string specifying the name of the series. The name will be used in the legend and will be set as the ct:series-name attribute on the series group. -
value
- An array of values for the series. -
className
- A string to override the CSS class name for the series group. -
meta
- Meta data is serialized and written to a ct:meta attribute on the series group.
Examples:
const data =labels: 'a' 'b' 'c' 'd' 'e'series:1 2 3 4 53 4 5 6 7;const data =labels: 'a' 'b' 'c' 'd' 'e'series:name: 'Series 1' value: 1 2 3 4 5name: 'Series 2' value: 3 4 5 6 7; -
For pie charts, this object contains the following properties:
-
series
- An array of values or objects containing values to plot. If objects are used, the following properties are supported:-
name
- A string specifying the name of the series. The name will be used in the legend and will be set as the ct:series-name attribute on the series group. -
value
- An array of values for the series. -
className
- A string to override the CSS class name for the series group. -
meta
- Meta data is serialized and written to a ct:meta attribute on the series group.
Examples:
const data =series: 15 25;const data =series:name: 'Series 1' value: 15name: 'Series 2' value: 25; -
-
Examples
Bar:
Line:
Pie: