Area

Basic configuration

React

component.tsx

import { VisXYContainer, VisArea } from '@unovis/react'

function Component(props) {
  const data: DataRecord[] = props.data
  const x = (d: DataRecord) => d.x
  const y = (d: DataRecord) => d.y

  return (
    <VisXYContainer data={data}>
      <VisArea x={x} y={y}/>
    </VisXYContainer>
  )
}

Angular

component.ts

@Component({
  templateUrl: 'template.html'
})
export class Component {
  @Input data: DataRecord[];
  x = (d: DataRecord) => d.x
  y = (d: DataRecord) => d.y
}

template.html

<vis-xy-container [data]="data">
  <vis-area [x]="x" [y]="y"></vis-area>
</vis-xy-container>

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisArea } from '@unovis/svelte'

  export let data: DataRecord[]
  const x = (d: DataRecord) => d.x
  const y = (d: DataRecord) => d.y
</script>

<VisXYContainer {data}>
  <VisArea {x} {y}/>
</VisXYContainer>

TypeScript

component.ts

import { XYContainer, Area } from '@unovis/ts'
import { data, DataRecord } from './data'

const container = new XYContainer<DataRecord>(node, {
  components: [
    new Area<DataRecord>({
    x: (d: DataRecord) => d.x, 
    y: (d: DataRecord) => d.y
  })
  ]
}, data)

Loading...

Multiple Areas

Area can accept an array of y accessors to display multiple areas at once:

React

component.tsx

import { VisXYContainer, VisArea } from '@unovis/react'

function Component(props) {
  const data: DataRecord[] = props.data
  const x = (d: DataRecord) => d.x
  const y = [
    (d: DataRecord) => d.y,
    (d: DataRecord) => d.y1,
    (d: DataRecord) => d.y2
  ]

  return (
    <VisXYContainer data={data}>
      <VisArea x={x} y={y}/>
    </VisXYContainer>
  )
}

Angular

component.ts

@Component({
  templateUrl: 'template.html'
})
export class Component {
  @Input data: DataRecord[];
  x = (d: DataRecord) => d.x
  y = [
    (d: DataRecord) => d.y,
    (d: DataRecord) => d.y1,
    (d: DataRecord) => d.y2
  ]
}

template.html

<vis-xy-container [data]="data">
  <vis-area [x]="x" [y]="y"></vis-area>
</vis-xy-container>

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisArea } from '@unovis/svelte'

  export let data: DataRecord[]
  const x = (d: DataRecord) => d.x
  const y = [
    (d: DataRecord) => d.y,
    (d: DataRecord) => d.y1,
    (d: DataRecord) => d.y2
  ]
</script>

<VisXYContainer {data}>
  <VisArea {x} {y}/>
</VisXYContainer>

TypeScript

component.ts

import { XYContainer, Area } from '@unovis/ts'
import { data, DataRecord } from './data'

const container = new XYContainer<DataRecord>(node, {
  components: [
    new Area<DataRecord>({
    x: (d: DataRecord) => d.x, 
    y: [
      (d: DataRecord) => d.y,
      (d: DataRecord) => d.y1,
      (d: DataRecord) => d.y2
    ]
  })
  ]
}, data)

Loading...

Curve Types

Using the curveType: CurveType property you can set various curve type options. For example:

curveType: basislinearstep

React

<VisArea curveType="basis" x={x} y={y}/>

Angular

<vis-area curveType="basis" [x]="x" [y]="y"></vis-area>

Svelte

<VisArea curveType="basis" {x} {y}/>

TypeScript

const area = new Area<DataRecord>({ curveType: "basis", x, y })

Loading...

Learn more about configurable curves from D3's documentation

Color

Setting color for a single Area component is simple, you can achieve that just by setting the color property of the component to a hex string.

color:

React

<VisArea color="#19cb9a" x={x} y={y}/>

Angular

<vis-area color="#19cb9a" [x]="x" [y]="y"></vis-area>

Svelte

<VisArea color="#19cb9a" {x} {y}/>

TypeScript

const area = new Area<DataRecord>({ color: "#19cb9a", x, y })

Loading...

Multiple Colors

If you want to configure multiple colors for your Area component, you'll have to create a color accessor function, similar to x and y accessors described in the base configuration:

React

component.tsx

function Component(props) {
  const data: DataRecord[] = props.data
  const x = (d: DataRecord) => d.x
  const y = [
    (d: DataRecord) => d.y,
    (d: DataRecord) => d.y1,
    (d: DataRecord) => d.y2
  ]
  const color = (d: DataRecord, i: number) => ['#6A9DFF','#1acb9a','#f88080'][i]

  return (
    <VisArea x={x} y={y} color={color}/>
  )
}

Angular

component.ts

@Component({
  template: '<vis-area [x]="x" [y]="y" [color]="color"></vis-area>'
})
export class Component {
  @Input data: DataRecord[];
  x = (d: DataRecord) => d.x
  y = [
    (d: DataRecord) => d.y,
    (d: DataRecord) => d.y1,
    (d: DataRecord) => d.y2
  ]
  color = (d: DataRecord, i: number) => ['#6A9DFF','#1acb9a','#f88080'][i]
}

Svelte

component.svelte

<script lang='ts'>
  import { VisXYContainer, VisArea } from '@unovis/svelte'

  export let data: DataRecord[]
  const x = (d: DataRecord) => d.x
  const y = [
    (d: DataRecord) => d.y,
    (d: DataRecord) => d.y1,
    (d: DataRecord) => d.y2
  ]
  const color = (d: DataRecord, i: number) => ['#6A9DFF','#1acb9a','#f88080'][i]
</script>

<VisArea {x} {y} {color}/>

TypeScript

component.ts

const area = new Area<DataRecord>({
  x: (d: DataRecord) => d.x, 
  y: [
    (d: DataRecord) => d.y,
    (d: DataRecord) => d.y1,
    (d: DataRecord) => d.y2
  ], 
  color: (d: DataRecord, i: number) => ['#6A9DFF','#1acb9a','#f88080'][i]
})

Loading...

Dealing with small values

If your data has small or zero values leading to some parts of the area to become invisible, you can force those area segments to have 1px height despite their actual value by setting minHeight1Px to true. This can be useful if you want to visually emphasize that the data behind the chart is defined but just very small.

minHeight1Px:

React

<VisArea minHeight1Px={true} x={x} y={y}/>

Angular

<vis-area [minHeight1Px]="true" [x]="x" [y]="y"></vis-area>

Svelte

<VisArea minHeight1Px={true} {x} {y}/>

TypeScript

const area = new Area<DataRecord>({ minHeight1Px: true, x, y })

Loading...

Additional Styling: CSS Variables

The Area component supports additional styling via CSS variables that you can define for your visualization container. For example:

styles.css

.custom-area {
  --vis-area-fill-opacity: 0.5;
  --vis-area-hover-fill-opacity: 1;
  --vis-area-stroke-width: 1px;

React

<VisArea x={x} y={y}/>

Angular

<vis-area [x]="x" [y]="y"></vis-area>

Svelte

<VisArea {x} {y}/>

TypeScript

const area = new Area<DataRecord>({ x, y })

Loading...

Supported CSS variables and their default values

--vis-area-cursor: default;
--vis-area-fill-opacity: 1;
--vis-area-stroke-color: none;
--vis-area-stroke-width: 0px;
--vis-area-stroke-dasharray: none;
--vis-area-stroke-opacity: 1;
--vis-area-hover-fill-opacity: none;
--vis-area-hover-stroke-width: none;
 
/* Dark Theme */
--vis-dark-area-stroke-color: none;

Events

The Area component supports the following events:

import { Area } from '@unovis/ts'

events = [Area.selectors.area]: {
  click: (data: DataRecord[]) => {},
  mouseover: (data: DataRecord[]) => {},
  mouseleave: (data: DataRecord[]) => {}
}

React

<VisArea x={x} y={y} events={events}/>

Angular

<vis-area [x]="x" [y]="y" [events]="events"></vis-area>

Svelte

<VisArea {x} {y} {events}/>

TypeScript

const area = new Area<DataRecord>({ x, y, events })

Component Props

Name	Type	Description
* required property