stacked area

• Quick Reference
• API

Quick Reference

import { stackedArea } from 'vizart-basic';
import 'vizart-basic/dist/vizart-basic.css';

const options = {
	chart: {
		height: 420,
			margin: { left: 30, right: 30, top: 10, bottom: 30 }
		},

	data: {
		s: { name: 'Department', type: 'string', accessor: 'dep'},
		x: { name: 'Age', type: 'string', accessor: 'age'},
		y: [ { name: 'Monthly Income', type: 'number', accessor: 'income'} ],
	},
	plots: {
		stackLayout: true,
		stackMethod: 'zero',
		curve: 'natural',
		strokeWidth: 2,
		opacityArea: 0.7
	}
};

const _data = [
	{ age: 19, income: 9, dep: 'science' }
]

const _chart = stackedArea('#chart', options);
_chart.render(_data);

API

Method

group()

switch to group layout

expand()

switch to 100% percent expand layout

stack()

switch to stacked layout

Default options:

const StackedOptions = {
  chart: {
    type: 'area_stacked',
  },
  animation: {
    duration: {
      curve: 500,
    },
  },
  plots: {
    stackLayout: true,
    stackMethod: Stacks.Zero,
    showDots: false,
    curve: 'basis',
    strokeWidth: 2,
    highlightNodeColor: '#F03E1E',
    opacityArea: 0.7,
  },
};

stackLayout

display grouped bars when stackLayout is false

stackMethod

Stack method, takes effect only when stackLayout is set to true. can be 'zero', 'expand'

showDots

Display dots?

curve

line curves, currently support:

• 'linear'
• 'linear'
• 'linear-closed'
• 'step'
• 'step-before'
• 'step-after'
• 'basis'
• 'basis-open'
• 'basis-closed'
• 'bundle'
• 'cardinal'
• 'cardinal-open'
• 'cardinal-closed'
• 'monotoneX'
• 'monotoneY'
• 'natural'
• 'catmull-rom'
• 'catmull-rom-closed'
• 'catmull-rom-open'

strokeWidth

Outer stroke width

highlightNodeColor

Highlights nodes when user hovers a line

opacityArea

area opacity