@devinit/charts
https://github.com/freelyformd/charts
This library is undergoing some major refactoring, so current implementation in the readme file is for previous old code which you can find atconfigurable d3 charts from csv like data
Install
Firstly, install @devinit/charts
npm install @devinit/charts
Developing
run yarn --ignore-scripts
for installing dependencies
To start contributing, clone this repository and run npm start
Browse to localhost:8080, to see some charts
Usage
This library exposes a draw
function that takes an object with the following properties;
- element: a DOM node
- config: a configuration object
- data: a list of entries
The function returns an object with the following methods
- update(data: Array): updates visualised data
Example:
draw({
element: document.getElementById('area_chart'),
config: {
title: 'Area Chart',
type: 'area',
colors: ['#ba0c2f', '#93328e', '#b7bf10', '#004862'],
linearAxis: {
showAxis: true,
showGridlines: true,
axisLabel: 'Country',
},
categoryAxis: {
showAxis: true,
axisLabel: 'Area',
}
},
data: [
{"Area": 100, "Country": "Uganda"},
{"Area": 200, "Country": "Kenya"},
{"Area": 120, "Country": "Tanzania"},
{"Area": 270, "Country": "Rwanda"},
{"Area": 230, "Country": "Burundi"},
]
})
With that you get an area chart inside the element with an id of area-chart
. The configuration fields depend on the chart type.
Configuration
The following sections outline the accepted configuration fields for each supported chart type
Linear vs Category Charts
These consist of a linear axis and a category axis
Chart types
- area
- bar
- line
- stacked-bar
- stacked-area
- full-stacked-bar
- full-stacked-area
- clustered-bar
const config = {
title: 'Line Chart',
// title alignment: left/center/right,
titleAlignment: 'left',
// orientation: vertical/horizontal,
orientation: 'vertical',
linearAxis: {
// Whether or not to show axis component
showAxis: false,
// Whether or not to show grid lines
showGridlines: false,
// Data field for this axis
axisLabel: 'Area',
// Minimum axis value
axisMinimum: null,
// Maximum axis value
axisMaximum: null,
},
categoryAxis: {
// Whether or not to show axis component
showAxis: false,
// Data field for this axis
axisLabel: 'Countries',
// Padding between categories
innerPadding: 0,
// Padding between axes and end data categories
outerPadding: 0
},
legend: {
// Whether or not to show legend
showLegend: false,
// Align of label items; left/center/right
alignment: 'left',
// Position of legend on chart: bottom/right
position: 'bottom',
// Shape of legend indicators:
// circle/square/cross/diamond/triangle/star/wye
symbol: 'square',
// Maximum entries per row
rowSpan: 1
}
}
Circular Charts
Circular charts include pie and donut charts
const data = {
type: 'pie',
title: 'Donut Chart',
titleAlignment: 'center',
colors: ['#ba0c2f', '#93328e', '#b7bf10', '#004862'],
circular: {
// Data field for label sectors
label: 'Country',
// Data field for sector values
value: 'Population',
// Inner radius for donut charts
innerRadius: 100,
// Stroke width and color around each sector
strokeWidth: 5,
strokeColor: '#fff',
},
// See previous section
legend: {
showLegend: true,
position: 'bottom',
alignment: 'center'
}
}
Hierarchy Charts
Hierachy charts represent tree data e.g tree-map
, partition
, grouped-vertical-stack
. Each series needs a parent identifier.
Chart types
- treemap
- partition
Configuration
const config = {
title: 'Partition Chart',
type: 'partition',
orientation: 'horizontal',
tree: {
// unique node reference field
id: 'label',
// node parent reference field
parent: 'parent',
// node value field
value: 'value',
// Maximum visible node depth
depth: Infinity,
},
// applies to type = treemap
treemap: {
// Tiling algorithm:
// binary/dice/slice/sliceDice/squarify/resquarify
tile: 'sliceDice',
},
}
3D Charts (TODO)
3D charts represent three dimensional data