README

d3-rs-bars

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

Builds

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
`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
`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
`logValue`
`highlight`
`displayTip`
`legend`
`stacked`
`language`
`labelTime`
`label`
`value`
`grid`
`tickDisplayValue`
`tickFormatValue`, `tickFormatIndex`
`tickCountValue`, `tickCountIndex`
`inset`
`margin`

Usage no npm install needed!