@ea-lab/reactive-json-docs
Version:
Complete documentation for Reactive-JSON - Components, examples and LLM-parsable guides
253 lines (244 loc) • 6.8 kB
YAML
renderView:
- type: h1
content: ChartJS components
- type: RjBuildDescriber
title: Bar chart
toDescribe:
renderView:
- type: div
attributes:
class: chart-container
style:
position: relative
height: 60vh
content:
- type: BarChart
options:
plugins:
legend:
position: bottom
data: ~~.barChartData
templates:
data:
barChartData:
labels:
- Students
- Teachers
- Employees
datasets:
- label: Private school
data: [ 10, 20, 3 ]
backgroundColor:
- rgb(255, 99, 132)
- rgb(54, 162, 235)
- rgb(255, 206, 86)
borderColor:
- rgba(255, 99, 132, 0.7)
- rgba(54, 162, 235, 0.7)
- rgba(255, 206, 86, 0.7)
borderWidth: 1
- type: RjBuildDescriber
title: Doughnut chart
toDescribe:
renderView:
- type: div
attributes:
class: chart-container
style:
position: relative
height: 60vh
content:
- type: DoughnutChart
options:
plugins:
legend:
position: right
data: ~~.doughnutChartData
templates:
data:
doughnutChartData:
labels:
- Male
- Female
datasets:
- label: Gender distribution
data: [ 60, 40 ]
backgroundColor:
- rgb(75, 192, 192)
- rgb(255, 205, 86)
borderColor:
- rgba(75, 192, 192, 0.7)
- rgba(255, 205, 86, 0.7)
borderWidth: 1
- type: RjBuildDescriber
title: Polar area chart
toDescribe:
renderView:
- type: div
attributes:
class: chart-container
style:
position: relative
height: 60vh
content:
- type: PolarAreaChart
options:
plugins:
legend:
position: right
data: ~~.polarAreaChartData
templates:
data:
polarAreaChartData:
labels:
- Red
- Blue
- Yellow
- Green
datasets:
- label: Colors
data: [ 12, 19, 10, 7 ]
backgroundColor:
- rgba(255, 99, 132, 0.6)
- rgba(54, 162, 235, 0.6)
- rgba(255, 206, 86, 0.6)
- rgba(75, 192, 192, 0.6)
borderColor:
- rgba(255, 99, 132, 1)
- rgba(54, 162, 235, 1)
- rgba(255, 206, 86, 1)
- rgba(75, 192, 192, 1)
borderWidth: 1
- type: RjBuildDescriber
title: Line chart
toDescribe:
renderView:
- type: div
attributes:
class: chart-container
style:
position: relative
height: 60vh
content:
- type: LineChart
options:
plugins:
legend:
position: bottom
data: ~~.lineChartData
templates:
data:
lineChartData:
labels:
- January
- February
- March
- April
- May
datasets:
- label: Sales
data:
- 30
- 45
- 28
- 50
- 75
backgroundColor: rgba(54, 162, 235, 0.2)
borderColor: rgba(54, 162, 235, 1)
borderWidth: 2
- type: RjBuildDescriber
title: Embedded line charts
toDescribe:
renderView:
- type: div
attributes:
class: chart-container
style:
position: relative
height: 60vh
content:
- type: LineChart
options:
plugins:
legend:
position: bottom
filler:
propagate: true
elements:
line:
tension: 0.4
borderWidth: 2
point:
radius: 0
scales:
y:
stacked: true
data: ~~.embeddedLineChartData
templates:
data:
embeddedLineChartData:
labels: [ Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday ]
datasets:
- label: "Presence"
data: [ 3, 7, 5, 12, 6, 2, 1 ]
fill: true
backgroundColor: rgba(0, 255, 0, 0.4)
borderColor: rgba(0, 255, 0, 1)
borderWidth: 2
- label: "Absence"
data: [ 2, 1, 3, 2, 4, 6, 7 ]
fill: true
backgroundColor: rgba(255, 0, 0, 0.4)
borderColor: rgba(255, 0, 0, 1)
borderWidth: 2
- type: RjBuildDescriber
title: Filled line chart
toDescribe:
renderView:
- type: div
attributes:
class: chart-container
style:
position: relative
height: 60vh
content:
- type: LineChart
options:
plugins:
legend:
position: bottom
filler:
propagate: true
elements:
line:
tension: 0.4
borderWidth: 2
point:
radius: 0
data: ~~.filledLineChartData
templates:
data:
filledLineChartData:
labels:
- January
- February
- March
- April
- May
- June
- July
datasets:
- label: "Revenue"
data: [ 5000, 7000, 6500, 8500, 9000, 3000, 2000 ]
fill: true
backgroundColor: rgba(0, 128, 255, 0.4)
borderColor: rgba(0, 128, 255, 1)
borderWidth: 2
- label: "Expenses"
data: [ 3000, 4000, 4200, 5000, 4800, 6200, 5800 ]
fill: true
backgroundColor: rgba(255, 99, 132, 0.4)
borderColor: rgba(255, 99, 132, 1)
borderWidth: 2
templates:
data: { }