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
<div class="p-8"> <figure class="midwest-chart chart-type-bubble legend-alignment-center" data-controller="midwest-chart" data-midwest-chart-tooltip-enabled-value="true"> <figcaption class="chart-title"> Product Performance <span class="chart-subtitle">x = price, y = satisfaction score, size = sales volume</span> </figcaption> <svg viewBox="0 0 600 320" width="600" height="320" role="img" aria-label="Product Performance" class="chart-svg" data-midwest-chart-target="svg"> <title>Product Performance</title> <desc>2 series: Category A, Category B; 0 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="60.0" y1="284.0" x2="60.0" y2="288.0" /> <text x="60.0" y="300.0" text-anchor="middle" transform=""> 10 </text> <line x1="164.0" y1="284.0" x2="164.0" y2="288.0" /> <text x="164.0" y="300.0" text-anchor="middle" transform=""> 20 </text> <line x1="268.0" y1="284.0" x2="268.0" y2="288.0" /> <text x="268.0" y="300.0" text-anchor="middle" transform=""> 30 </text> <line x1="372.0" y1="284.0" x2="372.0" y2="288.0" /> <text x="372.0" y="300.0" text-anchor="middle" transform=""> 40 </text> <line x1="476.0" y1="284.0" x2="476.0" y2="288.0" /> <text x="476.0" y="300.0" text-anchor="middle" transform=""> 50 </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=""> 60 </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">50</text> <line x1="56.0" y1="218.0" x2="60.0" y2="218.0" /> <text x="52.0" y="222.0" text-anchor="end">60</text> <line x1="56.0" y1="152.0" x2="60.0" y2="152.0" /> <text x="52.0" y="156.0" text-anchor="end">70</text> <line x1="56.0" y1="86.0" x2="60.0" y2="86.0" /> <text x="52.0" y="90.0" text-anchor="end">80</text> <line x1="56.0" y1="20.0" x2="60.0" y2="20.0" /> <text x="52.0" y="24.0" text-anchor="end">90</text> </g> <g class="chart-bubbles"> <g class="chart-series" style="--i: 0"> <circle cx="60.0" cy="138.8" r="21.1" fill="var(--theme-6)" fill-opacity="0.7" stroke="var(--theme-6)" stroke-width="1" data-tooltip-content="Category A: (10, 72.0)" class="chart-bubble" tabindex="0" role="img" aria-label="Category A: (10, 72.0)" /> <circle cx="216.0" cy="53.0" r="34.86" fill="var(--theme-6)" fill-opacity="0.7" stroke="var(--theme-6)" stroke-width="1" data-tooltip-content="Category A: (25, 85.0)" class="chart-bubble" tabindex="0" role="img" aria-label="Category A: (25, 85.0)" /> <circle cx="372.0" cy="211.4" r="17.46" fill="var(--theme-6)" fill-opacity="0.7" stroke="var(--theme-6)" stroke-width="1" data-tooltip-content="Category A: (40, 61.0)" class="chart-bubble" tabindex="0" role="img" aria-label="Category A: (40, 61.0)" /> </g> <g class="chart-series" style="--i: 1"> <circle cx="112.0" cy="251.0" r="26.93" fill="var(--complement-6)" fill-opacity="0.7" stroke="var(--complement-6)" stroke-width="1" data-tooltip-content="Category B: (15, 55.0)" class="chart-bubble" tabindex="0" role="img" aria-label="Category B: (15, 55.0)" /> <circle cx="268.0" cy="99.2" r="40.0" fill="var(--complement-6)" fill-opacity="0.7" stroke="var(--complement-6)" stroke-width="1" data-tooltip-content="Category B: (30, 78.0)" class="chart-bubble" tabindex="0" role="img" aria-label="Category B: (30, 78.0)" /> <circle cx="528.0" cy="20.0" r="15.33" fill="var(--complement-6)" fill-opacity="0.7" stroke="var(--complement-6)" stroke-width="1" data-tooltip-content="Category B: (55, 90.0)" class="chart-bubble" tabindex="0" role="img" aria-label="Category B: (55, 90.0)" /> </g> </g> </svg> <div id="midwest-chart-73048-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> Category A </li> <li class="chart-legend-item"> <span class="chart-legend-swatch" style="background: var(--complement-6)"></span> Category B </li> </ul> </figure></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="p-8"> <%= midwest_chart( :bubble, title: "Product Performance", subtitle: "x = price, y = satisfaction score, size = sales volume", series: [ { name: "Category A", data: [ { x: 10, y: 72, z: 120 }, { x: 25, y: 85, z: 340 }, { x: 40, y: 61, z: 80 } ] }, { name: "Category B", data: [ { x: 15, y: 55, z: 200 }, { x: 30, y: 78, z: 450 }, { x: 55, y: 90, z: 60 } ] } ] ) %></div>Bubble
Bubble chart: x/y position plus z-value encoded as bubble radius.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Chart/bubble
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."