Layouts
Stacked components
Stacked components
This example shows you how you can stack components on top of each other using the Row component, and columns option set to 1.
{
"$schema":"https://hybiscuscdn.blob.core...."
"type":"Report"
"options":{
"report_title":"Stacked components"
"report_byline":"Template report"
"version_number":"v0.1.0"
}
"config":{
"n_pages":1
"enable_multi_page":false
"enable_pagination":false
"landscape":false
"color_theme":"ember"
"typography_theme":"albert-barlow"
}
"components":[
0:{
"type":"Section"
"options":{
"columns":2
"section_title":"Section title"
}
"components":[
0:{
"type":"Chart.Bar"
"options":{
"aspect_ratio":0.75
"color_scheme":"Tableau10"
"x_label":"Penguin species"
"y_label":"Body mass (g)"
"format_y_ticks":false
"data":[
0:{
"x":"Adelie"
"y":3300
}
1:{
"x":"Chinstrap"
"y":3800
}
2:{
"x":"Gentoo"
"y":5500
}
]
}
}
1:{
"type":"Row"
"options":{
"columns":1
}
"components":[
0:{
"type":"Table"
"options":{
"title":"Title for table"
"headings":[
0:"Heading one"
1:"Heading Two"
2:"Heading Three"
]
"rows":[
0:[
0:"Content"
1:"Content"
2:"Content"
]
1:[
0:"Content"
1:"Content"
2:"Content"
]
2:[
0:"Content"
1:"Content"
2:"Content"
]
]
}
}
1:{
"type":"Text"
"options":{
"text":"Lorem ipsum dolor sit amet"
"bg_colour":"background-faded"
}
}
2:{
"type":"Card"
"options":{
"title":"Click through rate"
"value":5
"units":"%"
"icon":"dashboard"
}
}
3:{
"type":"Card"
"options":{
"title":"Impressions"
"value":"1,364"
"units":"views"
"icon":"confetti"
"highlighted":true
}
}
]
}
]
}
]
}
To use this template, simply press the button in the top right corner to copy the JSON to your clipboard. You can paste it directly into the Cloud Editor to get started with this template.