stacked bar

• Quick Reference
• API

Quick Reference

import { stackedBar } 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'} ],
	},
};

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

const chart = stackedBar('#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:

  animation: {
    duration: {
      layout: 500,
    },
  },
  chart: {
    type: 'bar_grouped',
  },
  plots: {
    stackLayout: false,
    stackMethod: 'zero',
    opacity: 1,
    barLabel: {
      enabled: true,
      color: 'black',
    },
    metricLabel: {
      enabled: true,
      color: 'black',
      offset: 10,
    },
  },

stackLayout

display grouped bars when stackLayout is false

stackMethod

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

opacity

bar opacity, 1 by default

barLabel.enabled

display dimension label within bars

barLabel.color

dimension label color

metricLabel.enabled

display metric label on top of bars

metricLabel.color

metric label color, black by default

metricLabel.offset

metric label offset against bar top