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 is-animated 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; transform-origin: 300.0px 160.0px"> <path d="M 300.0,20.0 A 140.0,140.0 0 0,1 422.524,227.734 L 361.262,193.867 A 70.0,70.0 0 0,0 300.0,90.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; transform-origin: 300.0px 160.0px"> <path d="M 422.524,227.734 A 140.0,140.0 0 0,1 194.35,251.859 L 247.175,205.93 A 70.0,70.0 0 0,0 361.262,193.867 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; transform-origin: 300.0px 160.0px"> <path d="M 194.35,251.859 A 140.0,140.0 0 0,1 196.076,66.193 L 248.038,113.096 A 70.0,70.0 0 0,0 247.175,205.93 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; transform-origin: 300.0px 160.0px"> <path d="M 196.076,66.193 A 140.0,140.0 0 0,1 300.0,20.0 L 300.0,90.0 A 70.0,70.0 0 0,0 248.038,113.096 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="390.44" y="106.66" text-anchor="middle" dominant-baseline="middle" class="chart-data-label" aria-hidden="true">33.0%</text> <text x="311.04" y="264.42" text-anchor="middle" dominant-baseline="middle" class="chart-data-label" aria-hidden="true">30.6%</text> <text x="195.0" y="159.02" text-anchor="middle" dominant-baseline="middle" class="chart-data-label" aria-hidden="true">23.1%</text> <text x="257.35" y="64.05" text-anchor="middle" dominant-baseline="middle" class="chart-data-label" aria-hidden="true">13.3%</text> </g> </svg> <div id="midwest-chart-59704-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
<div class="p-8"> <%= midwest_chart( :pie, animated: true, inner_radius: 50, 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>Animated
Slices animate in on load when animated: 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/animated
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."