@byu-oit/line-chart

line-chart

Generate a line chart in svg format to be used as an API response.

example output

Single Value

svg output

Muliple Values

svg output

Custom colors with optional legend

svg output

usage

import lineChart from '@byu-oit/line-chart'

const myData = [10, 12, 14, 24, 38]
const myDataLabels = ['A', 'B', 'C', 'D', 'E']
const chartSvg = lineChart({data: myData, labels: myDataLabels})

parameter definition

The line chart function takes a single configuration parameter.

key	type	required?	description
data	Array of Numbers, or 2 Dimensional Array of Numbers	required	An array of values to chart. For example, if you want to chart visits per day, your data could be [104, 78, 120, 88] with labels of ['May 13', 'May 14', 'May 15', 'May 16']. The values may themselves be arrays, but must all have the same length.
labels	Array of Strings	required	An array of string labels corresponding by index to the associated data element.
legendLabels	[string labels]	optional	An array of labels for the line colors. For example, you could chart visits per day, with each browser in a different color.
colors	Array of Strings	optional	Supply custom colors for the lines.