@devinit/charts

    1.6.53 • Public • Published

    @devinit/charts

    Build Status Codacy Badge Dependency Status

    configurable d3 charts from csv like data

    Install

    Firstly, install @devinit/charts

    npm install @devinit/charts
    

    Developing

    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

    Keywords

    Install

    npm i @devinit/charts

    DownloadsWeekly Downloads

    118

    Version

    1.6.53

    License

    ISC

    Unpacked Size

    6.43 MB

    Total Files

    145

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar