1.1.0 • Published 7 years ago
@motardo/bar-chart v1.1.0
bar-chart
Create a bar chart SVG
Installation
npm install @motardo/bar-chart
Basic Usage
const barChart = require('@motardo/bar-chart');
const data = [3.14, 4.54, 2.72, 8, 3.33];
const config = {
attributes: {
chart: [
/* the base image of the bars is 100 by 100 square
* so this leaves some left and right padding and room
* below for labels
*/
'viewBox="0 0 120 240"',
],
},
labels: ['Superman', 'Batman', 'Godzilla', 'Elmo', 'Thor'],
fill: ['#b88'],
};
const chart = barChart.svg(data, config);
The output is the <svg>
string for drawing the chart. It will look like this:
Express Demo
To run the demo:
git clone git@github.com:Motardo/bar-chart.git
cd bar-chart && npm install
node demo.js
And visit localhost:3000
in a web browser to see the example chart.r
Note: You will want to resize the browser window to be quite narrow for the demo chart to display reasonably.
API
The module exposes one method svg
which takes an array of numbers for data to
construct the bar chart. An optional config
object may be given as a second parameter.
Config
Properties may include:
attributes
: an object with three propertieschart
: an array of attributes to include in the outer svg tagbars
: an array of attributes to apply to the bars as a grouplabels
: likebars
but for the labels as a group
fill
: an array of strings representing fill colors to cycle through for each bar (default is["#ccc"]
)stroke
: likefill
, but for the stroke colorslabels
: an array of strings to label the datalabelOptions
: an object to configure the label appearancefontSize
: default is"10px"
rotate
: default is60
padding
: default is7