Built with blockbuilder.org
forked from jwilber's block: roughViz StackedBar Demo
license: mit |
Built with blockbuilder.org
forked from jwilber's block: roughViz StackedBar Demo
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://unpkg.com/rough-viz@1.0.5"></script> | |
<style> | |
.wrapper { | |
display: flex; | |
flex: wrap; | |
order: row; | |
} | |
</style> | |
</head> | |
<body> | |
<br><br> | |
<div class="wrapper"> | |
<div id="vis0"></div> | |
</div> | |
<script> | |
new roughViz.StackedBar({ | |
element: '#vis0', | |
data: [ | |
{month:'Jan', A:20, B: 5, C: 10}, | |
{month:'Feb', A:25, B: 10, C: 20}, | |
{month:'March', A:30, B:50, C:10} | |
], | |
labels: 'month', | |
title: 'Monthly Revenue', | |
height: window.innerHeight * 0.7, | |
width: window.innerWidth * 0.8, | |
roughness: 2, | |
colors: [ | |
'blue', | |
'#f996ae', | |
'skyblue', | |
'#9ff4df', | |
], | |
fillWeight: 0.35, | |
strokeWidth: 0.5, | |
fillStyle: 'cross-hatch', | |
stroke: 'black', | |
}); | |
</script> | |
</body> | |