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-column is-horizontal legend-alignment-center" data-controller="midwest-chart" data-midwest-chart-tooltip-enabled-value="true"> <figcaption class="chart-title"> Q2 Sales by Region </figcaption> <svg viewBox="0 0 600 320" width="600" height="320" role="img" aria-label="Q2 Sales by Region" class="chart-svg" data-midwest-chart-target="svg"> <title>Q2 Sales by Region</title> <desc>2 series: Online, In-Store; 5 data points</desc> <g class="chart-grid" aria-hidden="true"> <line x1="69.0" y1="20.0" x2="69.0" y2="284.0" /> <line x1="171.2" y1="20.0" x2="171.2" y2="284.0" /> <line x1="273.4" y1="20.0" x2="273.4" y2="284.0" /> <line x1="375.6" y1="20.0" x2="375.6" y2="284.0" /> <line x1="477.8" y1="20.0" x2="477.8" y2="284.0" /> <line x1="580.0" y1="20.0" x2="580.0" y2="284.0" /> </g> <g class="chart-axis chart-axis-x" aria-hidden="true"> <line x1="69.0" y1="284.0" x2="69.0" y2="288.0" /> <text x="69.0" y="300.0" text-anchor="middle" transform=""> 0 </text> <line x1="171.2" y1="284.0" x2="171.2" y2="288.0" /> <text x="171.2" y="300.0" text-anchor="middle" transform=""> 25 </text> <line x1="273.4" y1="284.0" x2="273.4" y2="288.0" /> <text x="273.4" y="300.0" text-anchor="middle" transform=""> 50 </text> <line x1="375.6" y1="284.0" x2="375.6" y2="288.0" /> <text x="375.6" y="300.0" text-anchor="middle" transform=""> 75 </text> <line x1="477.8" y1="284.0" x2="477.8" y2="288.0" /> <text x="477.8" y="300.0" text-anchor="middle" transform=""> 100 </text> <line x1="580.0" y1="284.0" x2="580.0" y2="288.0" /> <text x="580.0" y="300.0" text-anchor="middle" transform=""> 125 </text> </g> <g class="chart-axis chart-axis-y" aria-hidden="true"> <line x1="65.0" y1="46.4" x2="69.0" y2="46.4" /> <text x="61.0" y="50.4" text-anchor="end">North</text> <line x1="65.0" y1="99.2" x2="69.0" y2="99.2" /> <text x="61.0" y="103.2" text-anchor="end">South</text> <line x1="65.0" y1="152.0" x2="69.0" y2="152.0" /> <text x="61.0" y="156.0" text-anchor="end">East</text> <line x1="65.0" y1="204.8" x2="69.0" y2="204.8" /> <text x="61.0" y="208.8" text-anchor="end">West</text> <line x1="65.0" y1="257.6" x2="69.0" y2="257.6" /> <text x="61.0" y="261.6" text-anchor="end">Central</text> </g> <g class="chart-bars"> <g class="chart-series" style="--i: 0"> <rect x="69.0" y="25.02" width="490.56" height="19.01" fill="var(--theme-6)" data-tooltip-content="Online: 120" class="chart-bar" tabindex="0" role="img" aria-label="Online: 120" /> <rect x="69.0" y="77.82" width="347.48" height="19.01" fill="var(--theme-6)" data-tooltip-content="Online: 85" class="chart-bar" tabindex="0" role="img" aria-label="Online: 85" /> <rect x="69.0" y="130.62" width="388.36" height="19.01" fill="var(--theme-6)" data-tooltip-content="Online: 95" class="chart-bar" tabindex="0" role="img" aria-label="Online: 95" /> <rect x="69.0" y="183.42" width="449.68" height="19.01" fill="var(--theme-6)" data-tooltip-content="Online: 110" class="chart-bar" tabindex="0" role="img" aria-label="Online: 110" /> <rect x="69.0" y="236.22" width="306.6" height="19.01" fill="var(--theme-6)" data-tooltip-content="Online: 75" class="chart-bar" tabindex="0" role="img" aria-label="Online: 75" /> </g> <g class="chart-series" style="--i: 1"> <rect x="69.0" y="48.78" width="327.04" height="19.01" fill="var(--complement-6)" data-tooltip-content="In-Store: 80" class="chart-bar" tabindex="0" role="img" aria-label="In-Store: 80" /> <rect x="69.0" y="101.58" width="388.36" height="19.01" fill="var(--complement-6)" data-tooltip-content="In-Store: 95" class="chart-bar" tabindex="0" role="img" aria-label="In-Store: 95" /> <rect x="69.0" y="154.38" width="286.16" height="19.01" fill="var(--complement-6)" data-tooltip-content="In-Store: 70" class="chart-bar" tabindex="0" role="img" aria-label="In-Store: 70" /> <rect x="69.0" y="207.18" width="245.28" height="19.01" fill="var(--complement-6)" data-tooltip-content="In-Store: 60" class="chart-bar" tabindex="0" role="img" aria-label="In-Store: 60" /> <rect x="69.0" y="259.98" width="367.92" height="19.01" fill="var(--complement-6)" data-tooltip-content="In-Store: 90" class="chart-bar" tabindex="0" role="img" aria-label="In-Store: 90" /> </g> </g> </svg> <div id="midwest-chart-59768-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> Online </li> <li class="chart-legend-item"> <span class="chart-legend-swatch" style="background: var(--complement-6)"></span> In-Store </li> </ul> </figure></div>1
2
3
4
5
6
7
8
9
10
11
<div class="p-8"> <%= midwest_chart( :bar, title: "Q2 Sales by Region", y_axis: { categories: %w[North South East West Central] }, series: [ { name: "Online", data: [120, 85, 95, 110, 75] }, { name: "In-Store", data: [ 80, 95, 70, 60, 90] } ] ) %></div>Bar (Horizontal)
Horizontal bar chart — same as :column with horizontal: true.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Chart/bar
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."