multi line

• Quick Reference
• API

Quick Reference

import { multiLine } 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 = multiLine('#chart', options);
chart.render(data);

API

Default Options:

const DefaultOptions = {
  chart: {
    type: 'line_multi',
  },
  plots: {
    curve: 'linear',
    highlightNodeColor: '#F03E1E',
    strokeWidth: 3,
    showDots: false,
    dotRadius: 4,
  },
};

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

line width, 4 by default

dotRadius

node radius, only take effect when node is displayed

showDots

Draw dots or not

highlightNodeColor

Node highlighted color