@redsift/d3-rs-lines

d3-rs-lines

d3-rs-lines generate a range of line charts. Supports area fills, hovers and highlights.

Builds

Example

View @redsift/d3-rs-lines on Codepen

Line chart

Area chart

Combination

Usage

Browser

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

ES6

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

Require

var chart = require("@redsift/d3-rs-lines");
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
tickCountIndex	Supports strings, https://github.com/d3/d3-time#intervals
curve	String, Function, https://github.com/d3/d3-shape#curves, excluding closed and open curves. If a function is supplied, it should implement https://github.com/d3/d3-shape#custom-curves
symbol	(Array of) String, Function https://github.com/d3/d3-shape#symbolCircle or https://github.com/d3/d3-shape#custom-symbol-types