Trends: Basic Usage

Trends visualizes data trends over time or categories, using lines and dots.

It requires `trends` data, which are arrays of objects with keys and values, and a `keyToColorFn` to assign colors to each trend.

Custom themes can be applied by providing a `theme` object to control the aesthetics of curves, frames, grids, and text.

Choose an example

Usage

<Trends
  {geometry}
  {keyToColorFn}
  {valueFormatFn}
  trends={exampleTrends}
/>

Props

geometry

    ▶ { safetyBottom: 50 ,safetyLeft: 50 ,safetyRight: 50 ,safetyTop: 50 }
    • safetyBottom: 50
    • safetyLeft: 50
    • safetyRight: 50
    • safetyTop: 50

trends

    ▶ (5) [ {…} ,{…} ,{…} ,{…} ,{…} ]
    • 0: { key: "Average" ,values: Array(18) }
    • 1: { key: "Good" ,values: Array(18) }
    • 2: { key: "Very Good" ,values: Array(18) }
    • 3: { key: "Poor" ,values: Array(18) }
    • 4: { key: "Very Poor" ,values: Array(18) }
    • length: 5

keyToColorFn

    ▶ ƒ undefined
    • length: 1
    • [[Function]]: key => keyToColorMap[key]
    • [[Prototype]]: ƒ ()

valueFormatFn

    ▶ ƒ value => Math.round(value)
    • length: 1
    • name: "valueFormatFn"
    • [[Function]]: value => Math.round(value)
    • [[Prototype]]: ƒ ()