API

All MetricsGraphics charts are classes that can be instantiated with a set of parameters (e.g. new LineChart({ ... })). The chart is then mounted to the given target (see below), which is for example the id of an empty div in your DOM or a React ref.

Data formats

MetricsGraphics assumes that your data is either an array of objects or an array of arrays of objects. For example, your data could look like this:

[{
  date: '2020-02-01',
  value: 10
}, {
  date: '2020-02-02',
  value: 12
}]

Common Parameters

All charts inherit from an abstract chart, which has the following parameters (optional parameters marked with ?):

Name	Type	Default	Description
data	`Array<Data>`	-	Data that is to be visualized.
target	`string`	-	DOM node to which the graph will be mounted (compatible D3 selection or D3 selection specifier).
width	`number`	-	Total width of the graph.
height	`number`	-	Total height of the graph.
markers?	`Array<Data>`	-	Markers that should be added to the chart. Each marker object should be accessible through the xAccessor and contain a label field.
baselines?	`Array<Data>`	-	Baselines that should be added to the chart. Each baseline object should be accessible through the yAccessor and contain a label field.
xAccessor?	`string \| Accessor`	`date`	Either the name of the field that contains the x value or a function that receives a data object and returns its x value.
yAccessor?	`string \| Accessor`	`value`	Either the name of the field that contains the y value or a function that receives a data object and returns its y value.
margin?	`Margin`	`top: 10, left: 60, right: 20, bottom: 40`	Margin around the chart for labels.
buffer?	`number`	`10`	Amount of buffer space between the axes and the actual graph.
colors?	`Array<string>`	`d3.schemeCategory10`	Custom color scheme for the graph.
xScale?	`Partial<Scale>`	-	Overwrite parameters of the auto-generated x scale.
yScale?	`Partial<Scale>`	-	Overwrite parameters of the auto-generated y scale.
xAxis?	`Partial<Axis>`	-	Overwrite parameters of the auto-generated x axis.
yAxis?	`Partial<Axis>`	-	Overwrite parameters of the auto-generated y axis.
showTooltip?	`boolean`	`true`	Whether or not to show a tooltip.
tooltipFunction	`Accessor<Data, string>`	-	Generate a custom tooltip string.
legend?	`Array<string>`	-	Used if data is an array of arrays. Names of the sub-arrays of data, used as legend labels.
brush?	`"xy" \| "x" \| "y"`	-	Adds either a one- or two-dimensional brush to the chart.

Common Types

type Accessor<X = unknown, Y = unknown> = (dataObject: X) => Y

type Margin = {
  left: number
  right: number
  bottom: number
  top: number
}

type Scale = {
  type: 'linear' // this will be extended in the future
  range?: [number, number]
  domain?: [number, number]
}

type Axis = {
  scale: Scale
  buffer: number
  show?: boolean
  orientation?: 'top' | 'bottom' | 'left' | 'right'
  label?: string
  labelOffset?: number
  top?: number
  left?: number
  
  // a function to format a given tick, or one of the standard types (date, number, percentage), or string for d3-format
  tickFormat?: TextFunction | AxisFormat | string

  // defaults to 3 for vertical and 6 for horizontal axes
  tickCount?: number

  compact?: boolean

  // tick label prefix
  prefix?: string

  // tick label suffix
  suffix?: string

  // overwrite d3's default tick lengths
  tickLength?: number

  // draw extended tick lines
  extendedTicks?: boolean
}