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
<div class="p-8"> <figure class="midwest-chart chart-type-pie legend-alignment-center" data-controller="midwest-chart" data-midwest-chart-tooltip-enabled-value="true"> <figcaption class="chart-title"> Traffic Sources <span class="chart-subtitle">Q1 2025</span> </figcaption> <svg viewBox="0 0 600 320" width="600" height="320" role="img" aria-label="Traffic Sources" class="chart-svg" data-midwest-chart-target="svg"> <title>Traffic Sources</title> <desc>Direct: 33.0%, Email: 30.6%, Search: 23.1%, Other: 13.3%</desc> <g class="chart-slices"> <g class="chart-slice" style="--i: 0"> <path d="M 300.0,20.0 A 140.0,140.0 0 0,1 422.524,227.734 L 367.388,197.254 A 77.0,77.0 0 0,0 300.0,83.0 Z" fill="var(--theme-6)" data-tooltip-content="Direct: 335 (33.0%)" class="chart-slice-path" tabindex="0" role="img" aria-label="Direct: 335 (33.0%)" /> </g> <g class="chart-slice" style="--i: 1"> <path d="M 422.524,227.734 A 140.0,140.0 0 0,1 194.35,251.859 L 241.893,210.523 A 77.0,77.0 0 0,0 367.388,197.254 Z" fill="var(--complement-6)" data-tooltip-content="Email: 310 (30.6%)" class="chart-slice-path" tabindex="0" role="img" aria-label="Email: 310 (30.6%)" /> </g> <g class="chart-slice" style="--i: 2"> <path d="M 194.35,251.859 A 140.0,140.0 0 0,1 196.076,66.193 L 242.842,108.406 A 77.0,77.0 0 0,0 241.893,210.523 Z" fill="var(--theme-4)" data-tooltip-content="Search: 234 (23.1%)" class="chart-slice-path" tabindex="0" role="img" aria-label="Search: 234 (23.1%)" /> </g> <g class="chart-slice" style="--i: 3"> <path d="M 196.076,66.193 A 140.0,140.0 0 0,1 300.0,20.0 L 300.0,83.0 A 77.0,77.0 0 0,0 242.842,108.406 Z" fill="var(--complement-4)" data-tooltip-content="Other: 135 (13.3%)" class="chart-slice-path" tabindex="0" role="img" aria-label="Other: 135 (13.3%)" /> </g> </g> <g class="chart-data-labels" aria-hidden="true"> <text x="393.46" y="104.88" text-anchor="middle" dominant-baseline="middle" class="chart-data-label" aria-hidden="true">33.0%</text> <text x="311.41" y="267.9" text-anchor="middle" dominant-baseline="middle" class="chart-data-label" aria-hidden="true">30.6%</text> <text x="191.5" y="158.99" text-anchor="middle" dominant-baseline="middle" class="chart-data-label" aria-hidden="true">23.1%</text> <text x="255.93" y="60.85" text-anchor="middle" dominant-baseline="middle" class="chart-data-label" aria-hidden="true">13.3%</text> </g> </svg> <div id="midwest-chart-61888-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> Direct </li> <li class="chart-legend-item"> <span class="chart-legend-swatch" style="background: var(--complement-6)"></span> Email </li> <li class="chart-legend-item"> <span class="chart-legend-swatch" style="background: var(--theme-4)"></span> Search </li> <li class="chart-legend-item"> <span class="chart-legend-swatch" style="background: var(--complement-4)"></span> Other </li> </ul> </figure></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="p-8"> <%= midwest_chart( :pie, title: "Traffic Sources", subtitle: "Q1 2025", inner_radius: 55, series: [ { name: "Direct", data: [{ name: "Direct", value: 335 }] }, { name: "Email", data: [{ name: "Email", value: 310 }] }, { name: "Search", data: [{ name: "Search", value: 234 }] }, { name: "Other", data: [{ name: "Other", value: 135 }] } ] ) %></div>With Title
Pie chart with a title and subtitle.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Chart/with_title
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."