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: 'Appid', type: 'string', accessor: 'appid'},
		x: { name: 'Hour', type: 'number', accessor: 'hour'},
		y: [
				{ name: 'Downloads', type: 'number', accessor: 'downloads', yAxis: 0},
		],
	},

	plots: {
		levels: 3,				//How many levels or inner circles should there be drawn
		levelColor: 'rgba(255, 255, 255, 0.2)',
		levelLabelColor: 'rgba(255, 255, 255, 0.8)',
		levelLabelPosition: 'top', //'top', 'bottom', 'right'
		levelLabel: function(d){ return d + ' downloads'},

		axisLabel: function(d, i){ return i===0 ? '' : d + 'am'},
		axisLabelOffset: 35,
		axisLabelColor: 'rgba(255, 255, 255, 0.8)',

		highlightStrokeColor: 'rgba(255, 255, 255, 0.7)',
		highlightLabelColor: 'rgba(255, 255, 255, 1)',
		highlightNodeColor: '#000000',

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

		areaOpacity: 0.5, 	//The opacity of the area of the blob
		gradientArea: false,

		drawBoundary: true,
		boundaryOffset: 30,
		boundaryOpacity: 0.5,
		boundaryGradient: ['rgba(31, 151, 231, 0)', '#1f97e7'],

		innerRadiusRatio: 0.5,
		outerRadiusMargin: 60,
		stackLayout: false, // stack areas
		stackMethod: 'zero',
		isArea: true	//If true the area and stroke will follow a round path (cardinal-closed),
	}
};

const data = [
	{ appid: 'com.scribd.Temp', downloads: 9, hour: 4 }
]

const chart = corona('#chart', options);
chart.render(data);