Neurotoxin Powered Marketing

    @redsift/d3-rs-bars

    0.2.0 • Public • Published

    d3-rs-bars

    d3-rs-bars generate a range of bar charts. Supports stacked and un-stacked series, hovers and highlights.

    Builds

    Circle CI

    Example

    View @redsift/d3-rs-bars on Codepen

    Full example @redsift/d3-rs-bars as REFViewer on Codepen

    Bottom orientation

    Sample bars with a bottom orientation

    Left orientation as a series

    Sample bars with a left orientation

    Top orientation as time

    Sample bars with a top orientation and time label

    Right orientation as stacked time

    ![Sample bar stack with a right orientation](https://bricks.redsift.io/reusable/d3-rs-bars.svg?_datum=[[1, 10],[200,300],[3000, 100],[100, 1000]]&orientation=right&fill=series)

    Side-by-Side with highlight and legend

    ![Sample bars with a bottom orientation](https://bricks.redsift.io/reusable/d3-rs-bars.svg?_datum=[[100, 1000],[20000,30000],[30000, 10000],[10000, 10000]]&orientation=bottom&stacked=false&legend=Alpha&legend=Omega&highlight=15000)

    Usage

    Browser

    <script src="//static.redsift.io/reusable/d3-rs-bars/latest/d3-rs-bars.umd-es2015.min.js"></script>
    <script>
    	var chart = d3_rs_bars.html();
    	chart.fill('global');
    	d3.select('body').datum([ 1, 2, 3, 10, 100 ]).call(chart);
    </script>
    

    ES6

    import { chart } from "@redsift/d3-rs-bars";
    let eml = chart.html();
    ...
    

    Require

    var chart = require("@redsift/d3-rs-bars");
    var eml = chart.html();
    ...
    

    Datum

    • Simplest form, array of numbers: [1,2,3,4...]

    Parameters

    Property Description Transition Preview
    classed String SVG custom class N
    width, height, size, scale Integer SVG container sizes Y
    style String Custom CSS to inject into chart N
    minValue,maxValue Number Sets the minimum and maximum Value scale range. Note that for log scales, minValue must be > 0. Y
    orientation
    fill
    background
    theme
    labelTime Interpret the label as a millisecond epoch and format it using the specified string. N labelTime=%a %b
    barSize Size of the bar elements. Positive value set the absolute value in pixels. Negative values specify the scale relative to space between ticks. i.e. -0.5 will set the bar size to 50% of the width between the ticks. Y Fixed bar sizeDynamic bar size
    logValue
    highlight
    displayTip
    legend
    stacked
    language
    labelTime
    label
    value
    grid
    tickDisplayValue
    tickFormatValue, tickFormatIndex
    tickCountValue, tickCountIndex
    inset
    margin

    Install

    npm i @redsift/d3-rs-bars

    DownloadsWeekly Downloads

    152

    Version

    0.2.0

    License

    MIT

    Last publish

    Collaborators

    • luminous_cal
    • notmentat
    • pierredupuis
    • hortega_rs
    • alim-scott
    • anneshackelford
    • jrivaxrs
    • mcolladoredsift
    • redsift_operations
    • raul.lorenzo.redsift
    • rahulpowar
    • randalpinto
    • njaremek
    • earada
    • jordanw7
    • jmiralles
    • nascimj
    • kitty_vandergijp
    • neilsaccardo
    • bmayolasredsift