trugraph

3.0.1 • Public • Published

TruGraph

Getting Started

Image of a graph generated by TruGraph

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

Readme

Keywords

Package Sidebar

Install

npm i trugraph

Weekly Downloads

1

Version

3.0.1

License

ISC

Unpacked Size

861 kB

Total Files

11

Last publish

Collaborators

  • ronald.w.business