Bar

• Quick Reference
• API

Quick Reference

import { bar } 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: {
		x: { accessor: 'age', type: 'number', name: 'Age' },
		y: [ { accessor: 'income', type: 'number', name: 'Monthly Income' } ]
	},
};

const fakeData = [
	{ age: 19, income: 9 }
]

const chart = bar('#chart', options);
chart.render(fakeData);

API

Default options:

plots: {
    barLabel: {
      enabled: false,
      color: 'black',
    },
    metricLabel: {
      enabled: false, 
      color: 'black', 
      offset: 10,
    },
  },

barLabel.enabled

enable the dimension label within bars or not.

barLabel.color

color of bar label

metricLabel.enabled

display metric label on top of bars?

metricLabel.color

color of metric label

metricLabel.offset

Metric label offset against bar top