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
<div class="p-8"> <figure class="midwest-chart chart-type-stacked-bar legend-alignment-center" data-controller="midwest-chart" data-midwest-chart-tooltip-enabled-value="true"> <figcaption class="chart-title"> Quarterly Revenue by Product </figcaption> <svg viewBox="0 0 600 320" width="600" height="320" role="img" aria-label="Quarterly Revenue by Product" class="chart-svg" data-midwest-chart-target="svg"> <title>Quarterly Revenue by Product</title> <desc>3 series: Product A, Product B, Product C; 4 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="196.0" x2="580.0" y2="196.0" /> <line x1="60.0" y1="108.0" x2="580.0" y2="108.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="125.0" y1="284.0" x2="125.0" y2="288.0" /> <text x="125.0" y="300.0" text-anchor="middle" transform=""> Q1 </text> <line x1="255.0" y1="284.0" x2="255.0" y2="288.0" /> <text x="255.0" y="300.0" text-anchor="middle" transform=""> Q2 </text> <line x1="385.0" y1="284.0" x2="385.0" y2="288.0" /> <text x="385.0" y="300.0" text-anchor="middle" transform=""> Q3 </text> <line x1="515.0" y1="284.0" x2="515.0" y2="288.0" /> <text x="515.0" y="300.0" text-anchor="middle" transform=""> Q4 </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="196.0" x2="60.0" y2="196.0" /> <text x="52.0" y="200.0" text-anchor="end">50</text> <line x1="56.0" y1="108.0" x2="60.0" y2="108.0" /> <text x="52.0" y="112.0" text-anchor="end">100</text> <line x1="56.0" y1="20.0" x2="60.0" y2="20.0" /> <text x="52.0" y="24.0" text-anchor="end">150</text> </g> <g class="chart-bars"> <g class="chart-series" style="--i: 0"> <rect x="66.5" y="210.08" width="117.0" height="73.92" fill="var(--theme-6)" data-tooltip-content="Product A: 42" class="chart-bar" tabindex="0" role="img" aria-label="Product A: 42" /> <rect x="196.5" y="187.2" width="117.0" height="96.8" fill="var(--theme-6)" data-tooltip-content="Product A: 55" class="chart-bar" tabindex="0" role="img" aria-label="Product A: 55" /> <rect x="326.5" y="217.12" width="117.0" height="66.88" fill="var(--theme-6)" data-tooltip-content="Product A: 38" class="chart-bar" tabindex="0" role="img" aria-label="Product A: 38" /> <rect x="456.5" y="176.64" width="117.0" height="107.36" fill="var(--theme-6)" data-tooltip-content="Product A: 61" class="chart-bar" tabindex="0" role="img" aria-label="Product A: 61" /> </g> <g class="chart-series" style="--i: 1"> <rect x="66.5" y="160.8" width="117.0" height="49.28" fill="var(--complement-6)" data-tooltip-content="Product B: 28" class="chart-bar" tabindex="0" role="img" aria-label="Product B: 28" /> <rect x="196.5" y="129.12" width="117.0" height="58.08" fill="var(--complement-6)" data-tooltip-content="Product B: 33" class="chart-bar" tabindex="0" role="img" aria-label="Product B: 33" /> <rect x="326.5" y="137.92" width="117.0" height="79.2" fill="var(--complement-6)" data-tooltip-content="Product B: 45" class="chart-bar" tabindex="0" role="img" aria-label="Product B: 45" /> <rect x="456.5" y="111.52" width="117.0" height="65.12" fill="var(--complement-6)" data-tooltip-content="Product B: 37" class="chart-bar" tabindex="0" role="img" aria-label="Product B: 37" /> </g> <g class="chart-series" style="--i: 2"> <rect x="66.5" y="134.4" width="117.0" height="26.4" fill="var(--theme-4)" data-tooltip-content="Product C: 15" class="chart-bar" tabindex="0" role="img" aria-label="Product C: 15" /> <rect x="196.5" y="90.4" width="117.0" height="38.72" fill="var(--theme-4)" data-tooltip-content="Product C: 22" class="chart-bar" tabindex="0" role="img" aria-label="Product C: 22" /> <rect x="326.5" y="106.24" width="117.0" height="31.68" fill="var(--theme-4)" data-tooltip-content="Product C: 18" class="chart-bar" tabindex="0" role="img" aria-label="Product C: 18" /> <rect x="456.5" y="60.48" width="117.0" height="51.04" fill="var(--theme-4)" data-tooltip-content="Product C: 29" class="chart-bar" tabindex="0" role="img" aria-label="Product C: 29" /> </g> </g> </svg> <div id="midwest-chart-62496-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> Product A </li> <li class="chart-legend-item"> <span class="chart-legend-swatch" style="background: var(--complement-6)"></span> Product B </li> <li class="chart-legend-item"> <span class="chart-legend-swatch" style="background: var(--theme-4)"></span> Product C </li> </ul> </figure></div>1
2
3
4
5
6
7
8
9
10
11
12
<div class="p-8"> <%= midwest_chart( :stacked_bar, title: "Quarterly Revenue by Product", x_axis: { categories: %w[Q1 Q2 Q3 Q4] }, series: [ { name: "Product A", data: [42, 55, 38, 61] }, { name: "Product B", data: [28, 33, 45, 37] }, { name: "Product C", data: [15, 22, 18, 29] } ] ) %></div>Stacked Bar
Stacked column chart: series values accumulate within each category slot.
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_bar
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."