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 legend-alignment-center" data-controller="midwest-chart" data-midwest-chart-tooltip-enabled-value="true"> <figcaption class="chart-title"> Monthly Revenue </figcaption> <svg viewBox="0 0 600 320" width="600" height="320" role="img" aria-label="Monthly Revenue" class="chart-svg" data-midwest-chart-target="svg"> <title>Monthly Revenue</title> <desc>2 series: Product A, Product B; 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">20</text> <line x1="56.0" y1="152.0" x2="60.0" y2="152.0" /> <text x="52.0" y="156.0" text-anchor="end">40</text> <line x1="56.0" y1="86.0" x2="60.0" y2="86.0" /> <text x="52.0" y="90.0" text-anchor="end">60</text> <line x1="56.0" y1="20.0" x2="60.0" y2="20.0" /> <text x="52.0" y="24.0" text-anchor="end">80</text> </g> <g class="chart-bars"> <g class="chart-series" style="--i: 0"> <rect x="68.23" y="145.4" width="31.2" height="138.6" fill="var(--theme-6)" data-tooltip-content="Product A: 42" class="chart-bar" tabindex="0" role="img" aria-label="Product A: 42" /> <rect x="154.9" y="102.5" width="31.2" height="181.5" fill="var(--theme-6)" data-tooltip-content="Product A: 55" class="chart-bar" tabindex="0" role="img" aria-label="Product A: 55" /> <rect x="241.57" y="158.6" width="31.2" height="125.4" fill="var(--theme-6)" data-tooltip-content="Product A: 38" class="chart-bar" tabindex="0" role="img" aria-label="Product A: 38" /> <rect x="328.23" y="82.7" width="31.2" height="201.3" fill="var(--theme-6)" data-tooltip-content="Product A: 61" class="chart-bar" tabindex="0" role="img" aria-label="Product A: 61" /> <rect x="414.9" y="39.8" width="31.2" height="244.2" fill="var(--theme-6)" data-tooltip-content="Product A: 74" class="chart-bar" tabindex="0" role="img" aria-label="Product A: 74" /> <rect x="501.57" y="102.5" width="31.2" height="181.5" fill="var(--theme-6)" data-tooltip-content="Product A: 55" class="chart-bar" tabindex="0" role="img" aria-label="Product A: 55" /> </g> <g class="chart-series" style="--i: 1"> <rect x="107.23" y="191.6" width="31.2" height="92.4" fill="var(--complement-6)" data-tooltip-content="Product B: 28" class="chart-bar" tabindex="0" role="img" aria-label="Product B: 28" /> <rect x="193.9" y="175.1" width="31.2" height="108.9" fill="var(--complement-6)" data-tooltip-content="Product B: 33" class="chart-bar" tabindex="0" role="img" aria-label="Product B: 33" /> <rect x="280.57" y="135.5" width="31.2" height="148.5" fill="var(--complement-6)" data-tooltip-content="Product B: 45" class="chart-bar" tabindex="0" role="img" aria-label="Product B: 45" /> <rect x="367.23" y="161.9" width="31.2" height="122.1" fill="var(--complement-6)" data-tooltip-content="Product B: 37" class="chart-bar" tabindex="0" role="img" aria-label="Product B: 37" /> <rect x="453.9" y="112.4" width="31.2" height="171.6" fill="var(--complement-6)" data-tooltip-content="Product B: 52" class="chart-bar" tabindex="0" role="img" aria-label="Product B: 52" /> <rect x="540.57" y="125.6" width="31.2" height="158.4" fill="var(--complement-6)" data-tooltip-content="Product B: 48" class="chart-bar" tabindex="0" role="img" aria-label="Product B: 48" /> </g> </g> </svg> <div id="midwest-chart-75280-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> </ul> </figure></div>1
2
3
4
5
6
7
8
9
10
11
<div class="p-8"> <%= midwest_chart( :column, title: "Monthly Revenue", x_axis: { categories: %w[Jan Feb Mar Apr May Jun] }, series: [ { name: "Product A", data: [42, 55, 38, 61, 74, 55] }, { name: "Product B", data: [28, 33, 45, 37, 52, 48] } ] ) %></div>Column
Vertical bar chart with multiple series and category x-axis.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Chart/column
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."