row

• Quick Reference
• API

Quick Reference

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

API

Default options:

const CoronaOptions = {
  chart: {
    type: 'corona',
    margin: {
      top: 10,
      bottom: 10,
      left: 10,
      right: 10,
    },
  },
  plots: {
    levels: 0, //How many levels or inner circles should there be drawn
    levelColor: '#CDCDCD',
    levelLabelColor: '#737373',
    levelLabelPosition: 'top', //'top', 'bottom', 'right'
    levelLabel: null,

    axisLabel: null,
    axisLabelColor: '#737373',
    axisLabelOffset: 15, //How much farther than the radius of the outer circle should the labels be placed

    highlightStrokeColor: '#000000',
    highlightNodeColor: '#F03E1E',
    highlightLabelColor: '#000000',

    strokeOpacity: 0,
    strokeWidth: 4, //The width of the stroke around each blob

    areaOpacity: 0.35, //The opacity of the area of the blob,
    gradientArea: true,

    drawBoundary: true,
    boundaryOffset: 10,
    boundaryOpacity: 0.5,
    boundaryGradient: ['white', '#eb3ba6'],

    innerRadiusRatio: 0.4,
    outerRadiusMargin: 10,

    stackLayout: false, // stack areas
    stackMethod: Stacks.Zero,
    isArea: true, //If true the area and stroke will follow a round path (cardinal-closed),
  },
};

levels

How many levels or inner circles should there be drawn

levelColor

Level color

levelLabelColor

Colors of level labels

levelLabelPosition

Position of level labels, could be: 'top', 'bottom', 'right'

levelLabel

Display level label?

axisLabel

display axis label?

axisLabelColor

axis label color

axisLabelOffset

How much farther than the radius of the outer circle should the labels be placed

highlightStrokeColor

When user hovers a layer, layer's outer line gets highlighted

highlightNodeColor

When user hovers a layer, layer's control nodes get highlighted

highlightLabelColor

When user hovers a layer, layer's label nodes get highlighted

strokeOpacity

Stroke opacity

strokeWidth

The width of the stroke around each blob

areaOpacity

The opacity of the area of the blob,

gradientArea

Fill area with gradient colors

drawBoundary

Draw boundary

boundaryOffset

boundary offset

boundaryOpacity

boundary offset

boundaryGradient

Fill boundary with gradient colors ['white', '#eb3ba6']

innerRadiusRatio

inner radius ratio

outerRadiusMargin

outer radius margin

stackLayout

stack areas?

stackMethod

'zero' by default

isArea

If true the area and stroke will follow a round path (cardinal-closed),