@byu-oit/bar-chart

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

Usage no npm install needed!

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

README

bar-chart

Generate a bar 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

Stacked

svg output svg output

usage

import barChart from '@byu-oit/bar-chart'

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

parameter definition

The bar 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 bar colors. For example, you could chart visits per day, with each browser in a different color.
stacked boolean optional, default is false If true, the bars will be stacked instead of side-by-side.
colors Array of Strings optional Supply custom colors for the bars.
showValues boolean optional, default is false If true, the value will be shown near the top of each bar.