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
<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"> <svg viewBox="0 0 600 320" width="600" height="320" role="img" aria-label="" class="chart-svg" data-midwest-chart-target="svg"> <title></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 373.514,200.641 A 84.0,84.0 0 0,0 300.0,76.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 236.61,215.116 A 84.0,84.0 0 0,0 373.514,200.641 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 237.646,103.716 A 84.0,84.0 0 0,0 236.61,215.116 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,76.0 A 84.0,84.0 0 0,0 237.646,103.716 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="396.47" y="103.1" text-anchor="middle" dominant-baseline="middle" class="chart-data-label" aria-hidden="true">33.0%</text> <text x="311.78" y="271.38" text-anchor="middle" dominant-baseline="middle" class="chart-data-label" aria-hidden="true">30.6%</text> <text x="188.0" y="158.96" text-anchor="middle" dominant-baseline="middle" class="chart-data-label" aria-hidden="true">23.1%</text> <text x="254.51" y="57.65" text-anchor="middle" dominant-baseline="middle" class="chart-data-label" aria-hidden="true">13.3%</text> </g> </svg> <div id="midwest-chart-79440-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
<div class="p-8"> <%= midwest_chart( :pie, inner_radius: 60, 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>Donut
Pie chart with an inner_radius to create a donut shape.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Chart/donut
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."