line

• Quick Reference
• API

Quick Reference

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

API

Default options:

{
    chart: {
        type: 'line',
    },
    plots: {
        curve: 'linear',
        strokeWidth: 3,
        nodeRadius: 4,
        areaOpacity: 1,
        drawArea: false,
        showDots: true
    }
}

areaOpacity

Area opacity, 1 by default

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

nodeRadius

node radius, only take effect when node is displayed

drawArea

Draw area?

drawNode

Draw node or not