@redsift/d3-rs-lines

d3-rs-lines

d3-rs-lines generate a range of line charts via the D3 reusable chart convention. Supports area fills, hovers and highlights.

Example

View @redsift/d3-rs-lines on Codepen

Line chart

Multiple series

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 { html as chart } from "@redsift/d3-rs-lines";
let eml = chart();
...

Require

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

Datum

• Simplest form, array of numbers: [1,2,3,4...]
• Data series and how it relates to the API.

Parameters

This section gives an overview of all the properties available and how they can be used. Examples provided are linked to Codepens that can be easily edited.

Property	Description	Transition	Preview
classed	String Customise SVG by adding, removing and toggling of CSS classes.	N
background	String, Number Change the background colour of the chart.	Y	Examples: Bricks / CodePen
theme	String Change the chart theme which includes 'light'(default) and 'dark'.	Y	Examples: Bricks / CodePen
height, width	Integer Resize the height and width of chart. Default width: 420 pixels.	Y	Examples: Bricks / CodePen
size	Integer Resize the chart to a certain size changing both the width and height maintaining the default aspect ratio.	Y	Examples: Bricks / CodePen
scale	Number Scale the entire chart by the scaling value. Used to zoom the chart or compensate for high DPI displays when rasterized. Default scale: 1.0.	Y	Examples: Bricks / CodePen
margin	Number Resize the chart margin inside of the SVG container. Default margin: 26 pixels.	Y	Examples: Bricks / CodePen
inset	Number Resize the space inside the chart margin for the main chart element. This excludes items like legends.	Y	Examples: CodePen
style	String Custom CSS to inject into chart	N
trim	Integer Trim the datum array, use for slicing the data on the chart.	N	Examples: CodePen
minValue,maxValue	Number Sets the minimum and maximum Value range. Note that for log scales, minValue must be > 0.	Y	Examples: Bricks / CodePen
minIndex ,maxIndex	Number Sets the minimum and maximum Index range. Note that for log scales, minIndex must be > 0.	Y	Examples: Bricks / CodePen
tickCountIndex,tickCountValue	Number, String, Interval Function Hints at the number of ticks to set in the corresponding axis. Supports strings for example split time intervals when using epoch time Index values. Default tickCountIndex: 6	N	Examples: Bricks / CodePen
tickMinorIndex, tickMinorValue	Number, String, Interval Function Hints at the number of minor ticks to set in the corresponding axis.	N	Examples: Bricks / CodePen
tickFormatIndex, tickFormatValue	String, Function Sets the formatting string or function for the ticks.	N	Examples: Bricks / CodePen
tickDisplayIndex, tickDisplayValue	String, Integer Customise all tick presentation logic with this function.	N	Examples: Bricks / CodePen
curve	String, Function, Interpolation function for the line. Standard functions excluding closed and open curves are usable by name e.g. 'curveStep'. If a function is supplied, it should implement custom curves. Default curve: 'curveCatmullRom'	Y	Examples: Bricks / CodePen
symbol	(Array of) String, Function Change the points connecting the lines into customised symbols or custom symbol types	N	Examples: Bricks / CodePen
symbolSize	Number Resize the symbol to a specific size. Default size: 32	Y	Examples: Bricks / CodePen
fill	String, Array, Function If function, in addition to usual data, index parameters, a 3rd string parameter indicates the context - one of area, stroke, symbol, legend	Y	Examples: Bricks / CodePen
fillAreaOpacity	Unit Number Fill the area of the graph to a certain opacity	N	Examples: Bricks / CodePen
fillArea	Boolean, (Array of) Boolean Set the lines fill.	N	Examples: Bricks / CodePen
fillStroke	Boolean, (Array of) Boolean Set the lines stroke.	N	Examples: Bricks / CodePen
stacked	Boolean Enable stacking. Default value: false	Y	Examples: Bricks / CodePen
stackOffset	String, Function Shift the baseline of the chart to give more emphasis on the changing values using different offset properties.	Y	Examples: Bricks / CodePen
stackOrder	String, Function Stack the chart using different stack ordering properties.	Y	Examples: Bricks / CodePen
animation	String Change the animation interpolating between points. Parameters: reveal, value, default.	Y	Codepen Example
tipHtml	String, Function Add information to the tip of the chart. Parameters of the function are (d, i, s) where d is the data element, i is the index, s is the series of the data.	Y	Examples: CodePen
animateAxis, animateLabels	Boolean Set the animation of the axis and label. Default value: true.	N	Codepen Example
axisDisplayIndex,axisDisplayValue	Boolean Set the axes to display. Default axisDisplayIndex: true, axisDisplayValue: false.	N	Examples: Bricks / CodePen
axisPaddingValue,axisPaddingIndex	Number Set the padding size of the axis. Default axisPaddingValue: 8, axisPaddingIndex: 8.	N	Examples: Bricks / CodePen
axisValue	String Changes the axis label of value (on the y-axis) to the left or right. Default value: 'left'.	N	Examples: Bricks / CodePen
highlightIndex	(Array of)Number, Function Highlight a particular or an array of Index	Y	Examples: Bricks / CodePen
legend	(Array of)String, Number Add a legend for the lines in the chart.	N	Examples: Bricks / CodePen
legendOrientation	String Position the legend, positions include top, bottom, left, right or voronoi. Default orientation: 'bottom'	Y	Examples: Bricks / CodePen
legendOrientation('voronoi')	String Position the legend in an area containing the least number of intersecting lines.	N	Examples: Bricks / CodePen
voronoiAttraction	Number -1...0...1 Use when legendOrientation set to voronoi. Specifies the attraction of the label to the data line. 0 implies no dragging, -1 pushes the labels away. Default value: 0.33	Y	Examples: Bricks / CodePen
gridIndex, gridValue	Boolean Add guidelines for Index or Value. Default gridIndex: false, gridValue: true.	N	Examples: Bricks / CodePen
labelTime	String, Function Interpret the Index value as a timestamp and format it using string specifiers or the supplied function. 'multi' (string specifier) smartly displays the time.	N	Examples: Bricks / CodePen
language	String Change the language format of the chart affecting digit, currency and time formats.	N	Examples: Bricks/ CodePen
onClick	Function Handler for a click event on a data series.	N	Examples:

Time

TODO: Discuss timeMultiFormat and tickCountIndex with relation to UTC