x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<div class="p-8"> <figure class="midwest-chart chart-type-stacked-area legend-alignment-center" data-controller="midwest-chart" data-midwest-chart-tooltip-enabled-value="true"> <figcaption class="chart-title"> Monthly Active Users by Platform </figcaption> <svg viewBox="0 0 600 320" width="600" height="320" role="img" aria-label="Monthly Active Users by Platform" class="chart-svg" data-midwest-chart-target="svg"> <title>Monthly Active Users by Platform</title> <desc>3 series: Mobile, Desktop, Tablet; 6 data points</desc> <g class="chart-grid" aria-hidden="true"> <line x1="60.0" y1="284.0" x2="580.0" y2="284.0" /> <line x1="60.0" y1="218.0" x2="580.0" y2="218.0" /> <line x1="60.0" y1="152.0" x2="580.0" y2="152.0" /> <line x1="60.0" y1="86.0" x2="580.0" y2="86.0" /> <line x1="60.0" y1="20.0" x2="580.0" y2="20.0" /> </g> <g class="chart-axis chart-axis-x" aria-hidden="true"> <line x1="103.33" y1="284.0" x2="103.33" y2="288.0" /> <text x="103.33" y="300.0" text-anchor="middle" transform=""> Jan </text> <line x1="190.0" y1="284.0" x2="190.0" y2="288.0" /> <text x="190.0" y="300.0" text-anchor="middle" transform=""> Feb </text> <line x1="276.67" y1="284.0" x2="276.67" y2="288.0" /> <text x="276.67" y="300.0" text-anchor="middle" transform=""> Mar </text> <line x1="363.33" y1="284.0" x2="363.33" y2="288.0" /> <text x="363.33" y="300.0" text-anchor="middle" transform=""> Apr </text> <line x1="450.0" y1="284.0" x2="450.0" y2="288.0" /> <text x="450.0" y="300.0" text-anchor="middle" transform=""> May </text> <line x1="536.67" y1="284.0" x2="536.67" y2="288.0" /> <text x="536.67" y="300.0" text-anchor="middle" transform=""> Jun </text> </g> <g class="chart-axis chart-axis-y" aria-hidden="true"> <line x1="56.0" y1="284.0" x2="60.0" y2="284.0" /> <text x="52.0" y="288.0" text-anchor="end">0</text> <line x1="56.0" y1="218.0" x2="60.0" y2="218.0" /> <text x="52.0" y="222.0" text-anchor="end">100</text> <line x1="56.0" y1="152.0" x2="60.0" y2="152.0" /> <text x="52.0" y="156.0" text-anchor="end">200</text> <line x1="56.0" y1="86.0" x2="60.0" y2="86.0" /> <text x="52.0" y="90.0" text-anchor="end">300</text> <line x1="56.0" y1="20.0" x2="60.0" y2="20.0" /> <text x="52.0" y="24.0" text-anchor="end">400</text> </g> <g class="chart-areas"> <g class="chart-series"> <path d="M 103.33,204.8 L 190.0,188.3 L 276.67,196.88 L 363.33,173.12 L 450.0,158.6 L 536.67,145.4 L 536.67,284.0 L 450.0,284.0 L 363.33,284.0 L 276.67,284.0 L 190.0,284.0 L 103.33,284.0 Z" fill="var(--theme-6)" fill-opacity="0.2" stroke="none" class="chart-area-fill" style="--i: 0; --path-length: 440.73" /> <path d="M 103.33,204.8 L 190,188.3 L 276.67,196.88 L 363.33,173.12 L 450,158.6 L 536.67,145.4" stroke="var(--theme-6)" fill="none" stroke-width="2" class="chart-line" style="--i: 0; --path-length: 440.73" /> </g> <g class="chart-series"> <path d="M 103.33,148.7 L 190.0,127.58 L 276.67,127.58 L 363.33,108.44 L 450.0,82.7 L 536.67,60.92 L 536.67,145.4 L 450.0,158.6 L 363.33,173.12 L 276.67,196.88 L 190.0,188.3 L 103.33,204.8 Z" fill="var(--complement-6)" fill-opacity="0.2" stroke="none" class="chart-area-fill" style="--i: 1; --path-length: 444.4" /> <path d="M 103.33,148.7 L 190,127.58 L 276.67,127.58 L 363.33,108.44 L 450,82.7 L 536.67,60.92" stroke="var(--complement-6)" fill="none" stroke-width="2" class="chart-line" style="--i: 1; --path-length: 444.4" /> </g> <g class="chart-series"> <path d="M 103.33,122.3 L 190.0,102.5 L 276.67,98.54 L 363.33,74.78 L 450.0,50.36 L 536.67,24.62 L 536.67,60.92 L 450.0,82.7 L 363.33,108.44 L 276.67,127.58 L 190.0,127.58 L 103.33,148.7 Z" fill="var(--theme-4)" fill-opacity="0.2" stroke="none" class="chart-area-fill" style="--i: 2; --path-length: 445.98" /> <path d="M 103.33,122.3 L 190,102.5 L 276.67,98.54 L 363.33,74.78 L 450,50.36 L 536.67,24.62" stroke="var(--theme-4)" fill="none" stroke-width="2" class="chart-line" style="--i: 2; --path-length: 445.98" /> </g> </g> </svg> <div id="midwest-chart-74208-tooltip" class="midwest-chart-tooltip" data-midwest-chart-target="tooltip" role="tooltip"></div> <ul class="chart-legend" aria-label="Chart legend"> <li class="chart-legend-item"> <span class="chart-legend-swatch" style="background: var(--theme-6)"></span> Mobile </li> <li class="chart-legend-item"> <span class="chart-legend-swatch" style="background: var(--complement-6)"></span> Desktop </li> <li class="chart-legend-item"> <span class="chart-legend-swatch" style="background: var(--theme-4)"></span> Tablet </li> </ul> </figure></div>1
2
3
4
5
6
7
8
9
10
11
12
<div class="p-8"> <%= midwest_chart( :stacked_area, title: "Monthly Active Users by Platform", x_axis: { categories: %w[Jan Feb Mar Apr May Jun] }, series: [ { name: "Mobile", data: [120, 145, 132, 168, 190, 210] }, { name: "Desktop", data: [85, 92, 105, 98, 115, 128] }, { name: "Tablet", data: [40, 38, 44, 51, 49, 55] } ] ) %></div>Stacked Area
Stacked area chart: filled layers accumulate upward from a zero baseline.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Chart/stacked_area
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."