corona
import { corona } 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: {
levels: 0, //How many levels or inner circles should there be drawn
maxValue: 0, //What is the value that the biggest circle will represent
labelFactor: 1.15, //How much farther than the radius of the outer circle should the labels be placed
wrapWidth: 60, //The number of pixels after which a label needs to be given a new line
opacityArea: 0.35, //The opacity of the area of the blob
dotRadius: 4, //The size of the colored circles of each blog
opacityCircles: 0.1, //The opacity of the circles of each blob
strokeWidth: 2, //The width of the stroke around each blob
innerRadiusRatio: 0.4,
showDots: false,
sortArea: true, // show smallest area on top
stackLayout: false, // stack areas
stackMethod: 'expand',
isArea: true //If true the area and stroke will follow a round path (cardinal-closed),
}
};
const data = [
{ age: 19, income: 9, dep: 'science' }
]
const chart = corona('#chart', options);
chart.render(_data);
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),
},
};How many levels or inner circles should there be drawn
Level color
Colors of level labels
Position of level labels, could be: 'top', 'bottom', 'right'
Display level label?
display axis label?
axis label color
How much farther than the radius of the outer circle should the labels be placed
When user hovers a layer, layer's outer line gets highlighted
When user hovers a layer, layer's control nodes get highlighted
When user hovers a layer, layer's label nodes get highlighted
Stroke opacity
The width of the stroke around each blob
The opacity of the area of the blob,
Fill area with gradient colors
Draw boundary
boundary offset
boundary offset
Fill boundary with gradient colors ['white', '#eb3ba6']
inner radius ratio
outer radius margin
stack areas?
'zero' by default
If true the area and stroke will follow a round path (cardinal-closed),