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.