TruGraph

Getting Started

To use TruGraph in your project, first import the modules into your project using:

import TruGraph from 'trugraph'

Basic Usage

To add a graph to your page call TruGraph as follows:

let graph = new TruGraph(id, data, layout)

• REQUIRED: id is the id of the container element you wish to append your graph to.
• REQUIRED: data is an object (or array of objects) containing the information about the expressions you wish to graph, such as the mathematical function, color, stroke, arrowheads, etc.
• OPTIONAL: layout is an object used to set the properties of the graph, such as the axes, legends, etc.

Data Object Properties

Property	Type	Options	Default
expression	string	see math-expressions package	x^2
colour	string	hex, rgb, or rgba color scheme	#FF0000
thickness	integer	any integer value	2
style	string	solid	solid
domain	array	Must contain 2 values. Any number or the string values 'negative infinity' and 'infinity'	['negative infinity', 'infinity']
range	array	Must contain 2 values. Any number or the string values 'negative infinity' and 'infinity'	['negative infinity', 'infinity']
endpoints	Boolean	true or false	true
endpointLeft	string	'arrow', 'open-circle', 'closed-circle'	'arrow'
endpointRight	string	'arrow', 'open-circle', 'closed-circle'	'arrow'

Layout Object Properties

Property	Type	Options	Default
visibleDomain	array	Must contain 2 values. Any number or the string values 'negative infinity' and 'infinity'	[-10,10]
visibleRange	array	Must contain 2 values. Any number or the string values 'negative infinity' and 'infinity'	[-10,10]
dependentVar	string	Set the variable to be labelled on the horizontal axis of the graph	'x'
independentVar	string	Set the variable to be labelled on the vertical axis of the graph	'y'
border	boolean	Set to true to show a border around the graph, false for no border	true
borderColour	string	hex, rgb, or rgba color scheme	'#000000'
borderWidth	integer	Value to set the thickness of the border	2
square	boolean	When set to true the graph will always render in a square regardless of the container dimensions	false
x	object	See axis properties below
y	object	See axis properties below
graphTitle	string	Any string of characters	'This is the Title'

Axis Properties

Property	Type	Options	Default
gridLines	boolean	Set to true to show the axis gridlines on the graph, or false to remove them	true
gridstart	number	A reference value on the axis for gridlines to start from	0
gridspace	number	A value for the spacing between gridlines	0.5
tickStart	number	A reference value on the axis for axis ticks to start from	0
tickSpace	number	A value for the spacing between gridlines	0.5