{
yield htl.html`<div style='display: flex'>
<div id="stackedbar-0" style="width: 400px; height: 400px;"></div>
<div id="stackedbar-1" style="width: 400px; height: 400px;"></div>
</div>`;
new roughViz.StackedBar(
{
element: '#stackedbar-0',
data: [
{ month: "Jan", A: 20, B: 5, C: 8 },
{ month: "Feb", A: 25, B: 10, C: 9 },
{ month: "March", A: 15, B: 5, C: 19 },
],
labels: "month",
roughness: 0,
fillStyle: 'cross-hatch',
margin: { top: 40, left: 40, right: 40, bottom: 40 },
stroke: 1,
color: 'red',
strokeWidth: 1,
axisStrokeWidth: 1,
innerStrokeWidth: 1,
fillWeight: 1,
axisRoughness: 1,
}
);
new roughViz.StackedBar(
{
element: '#stackedbar-1',
data: [
{ month: "Jan", A: 20, B: 5, C: 8 },
{ month: "Feb", A: 25, B: 10, C: 9 },
{ month: "March", A: 15, B: 5, C: 19 },
],
labels: "month",
roughness: 3,
fillStyle: 'hachure',
margin: { top: 40, left: 40, right: 40, bottom: 40 },
stroke: 1,
color: 'red',
strokeWidth: 1.5,
axisStrokeWidth: 1,
innerStrokeWidth: 1,
fillWeight: 1,
axisRoughness: 1,
}
);
}