@byu-oit/line-chart

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

Usage no npm install needed!

<script type="module">
  import byuOitLineChart from 'https://cdn.skypack.dev/@byu-oit/line-chart';
</script>

README

line-chart

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

example output

Single Value

svg output svg output

Muliple Values

svg output svg output

Custom colors with optional legend

svg output 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.