0.4.0 • Public • Published


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


Circle CI npm MIT


View @redsift/d3-rs-bars on CodePen

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

View @redsift/d3-rs-bars Collection 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.cloud/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.cloud/reusable/d3-rs-bars.svg?_datum=[[100, 1000],[20000,30000],[30000, 10000],[10000, 10000]]&orientation=bottom&stacked=false&legend=Alpha&legend=Omega&highlight=15000)



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


import { html as bars } from "@redsift/d3-rs-bars";
import { select } from "d3-selection";

let chart = bars();
select('body').datum([ 1, 2, 3, 10, 100 ]).call(chart);


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


  • Simplest form, array of numbers: [1,2,3,4...] Datum Bricks Example
  • Using a set of array [[1,2],[20,4],[10,30]] to form stacked bar chart. Datum Bricks Example
  • The datum parameter can be altered using Index and Value to customise the ticks and the bar size. Index is used to customise the tick taking a String or an Integer as an argument and Value changes the bar size.The following datum uses a tick as a String [{"l":"Boys","v":30},{"l":"Girls","v":[83,20]}] where "v" can contain a single or an array of numbers. Datum Bricks Example
  • Epoch time can also be supplied to Index as such ["l":1466684012000,"v":300.5,"l":1466770412000,"v":4000,"l":1466856812000,"v":40000] to include customised Calendar date to chart and using String Specifiers as a parameter to labelTime property to set the date format. Datum Bricks Example


Property Description Transition Preview
classed String Customise SVG by adding, removing and toggling of CSS classes. N
background Sting, Array, Function Change the background colour of the SVG container. Background colour can be set using a colour name, rgb or hex value. Y Preview of background property
Examples: Bricks/CodePen
theme String Customise the chart theme including 'light'(default) and 'dark'. Y Preview of theme property
Examples: Bricks/ CodePen
fill Sting, Array, Function Change the bar chart colour using a String which can take colour name, rgb or hex value as an argument. Using an Array of custom colours or use 'global' to generate random colour or supply a custom function. Y Preview of fill property uisng an array of colours
Preview of fill using random colours
style String Custom CSS to inject into chart. N
width, height Integer Resize the height and width of the chart. Default width: 420 pixels. Y Preview of width and height property
Examples: Bricks/CodePen
size Integer Resize the chart to a certain size changing both the width and height maintaining a default aspect ratio. Y Preview of size property
Examples: Bricks/CodePen
scale Integer Scale the entire chart by the scaling value. Used to zoom the chart or compensate for high DPI displays when rasterized. Default scale: 1 Y Preview of the scale property
Examples: Bricks/CodePen
margin Number Change the chart margin inside of the SVG container. Default margin: 26. Y Preview of margin property
Examples: Bricks,CodePen
inset Number Resize the space inside the chart margin for the main chart element. This excludes items like legends. Comparing Margin & Inset legend where the legend get distorded while using margin on using a big value. Y Prview of inset property
Examples: Bricks/CodePen
highlight (Array of)Integer Highlight an array of value or a particular value. Y Preview of highlight property
Examples: Bricks/CodePen
minValue,maxValue Number Sets the minimum and maximum Value scale range. Note that for log scales, minValue must be > 0. Y Preview of minValue and maxValue properties
Examples: Bricks/CodePen
legend (Array of) String Add legends to the chart where array of String can be supply for multiple bar chart. N Preview of legend
Examples: Bricks/CodePen
legendOrientation String Position the legend, positions include top, bottom, left or right. Default orientation : 'bottom' Y Preview of legendOrientation property
Examples: Bricks/CodePen
orientation String Set the orientation of the labels. Default oriented : left. Parameters include right,left,top and bottom. Y Preview of orientation property
Examples: Bricks/CodePen
rotateValue,rotateIndex Integer Rotate the Index or Value ticks in degree where positive degree represent clockwise rotation and negative degree anticlockwise rotation. Default rotation : 0. Y Preview of rotateIndex & rotateValue
Examples: Bricks/CodePen
labelTime String Interpret the label as a millisecond epoch and format it using specified string. N labelTime=%a %b
Examples: Bricks/CodePen
barSize Interger Change the 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. Default size set to 6. Y Fixed bar size
Above Brick Example
Dynamic bar size
Above Brick Example / CodePen
tickDisplayValue String, Integer Rename all tick to a single argument by supplying a String or a Number. N Preview of tickDisplayValue property
Examples: Bricks/CodePen
label String Use the same labels for value using a String or an Integer. N Preview of label property
Examples: Bricks/CodePen
tickFormatValue, tickFormatIndex String, Function Set the formatting string or function for the ticks. N [Preview of tickFormatValue & tickFormatIndex
Examples: Bricks/ CodePen
tickCountValue, tickCountIndex Number, String, Interval Function Hints at the number of ticks to set in the corresponding axis. Supports strings for example split time intervals, apply when using epoch time format. Default tickCountIndex: 6 N Preview of tickCountIndex & tickCountValue propertes
Examples: Bricks/CodePens
displayTip Integer Position the tip display on the bar chart on hovering. Y CodePen Example
displayHtml String,Function Customise the tip info. Function parameters include (d,i), d represent data and i the dataset. N CodePen Example
stacked Boolean Enable bar chart to stack onto each other. Y Preview of Stacked
Examples: Bricks/CodePen
value Function Generate a bar chart from selecting an object values carrying the data to generate the bar chart. N CodePen Example
grid Boolean Enable grid to display on the chart. Default: true. N Preview of grid property
Examples: Bricks/CodePen
logValue Integer Alter the grid spacing for value. Y Preview of logValue
Examples: Bricks/CodePen
language String Change the language format of the chart affecting digit, currency and time formats. N CodePen Example


The two main time formatter available are UTC and Local Time. UTC uses the time standard applied across the world which is unaffected by Daylight Saving Time whereas Local Time is set to your local timezone. To use any of the formatters, string specifiers is passed to the labelTime function. To apply UTC format, d3.utcFormat(specifier) is used as a parameter to labelTime, specifier being the string specifiers. When using Local Time, only string specifiers can be passed to labelTime since by default the time format is set to Local Time.

Additional information about Time format for D3 can be found here.



Package Sidebar


npm i @redsift/d3-rs-bars

Weekly Downloads






Unpacked Size

2.13 MB

Total Files


Last publish


  • sega057
  • alkisredsift
  • kit-314
  • julian.picht
  • massimoparisi
  • sometimesitbetterstepasideandnotusejavascript
  • raul.lorenzo.redsift
  • asaf.lerner
  • luminous_cal
  • notmentat
  • pierredupuis
  • hortega_rs
  • anneshackelford
  • mcolladoredsift
  • redsift_operations
  • rahulpowar
  • randalpinto
  • njaremek
  • earada
  • nascimj
  • neilsaccardo
  • bmayolasredsift