Midwest Component Library v0.24.0

Previews

No matching results.

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
<div class="p-8">
  <figure class="midwest-chart chart-type-stacked-bar legend-alignment-center" data-controller="midwest-chart" data-midwest-chart-tooltip-enabled-value="true">
    <figcaption class="chart-title">
      Revenue Share by Product (% of Total)
    </figcaption>
    <svg
      viewBox="0 0 600 320"
      width="600"
      height="320"
      role="img"
      aria-label="Revenue Share by Product (% of Total)"
      class="chart-svg"
      data-midwest-chart-target="svg">
      <title>Revenue Share by Product (% of Total)</title>
      <desc>3 series: Product A, Product B, Product C; 4 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="231.2"
                  x2="580.0" y2="231.2" />
        <line x1="60.0" y1="178.4"
                  x2="580.0" y2="178.4" />
        <line x1="60.0" y1="125.6"
                  x2="580.0" y2="125.6" />
        <line x1="60.0" y1="72.8"
                  x2="580.0" y2="72.8" />
        <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="125.0" y1="284.0"
                  x2="125.0" y2="288.0" />
        <text x="125.0" y="300.0"
                  text-anchor="middle"
                  transform="">
          Q1
        </text>
        <line x1="255.0" y1="284.0"
                  x2="255.0" y2="288.0" />
        <text x="255.0" y="300.0"
                  text-anchor="middle"
                  transform="">
          Q2
        </text>
        <line x1="385.0" y1="284.0"
                  x2="385.0" y2="288.0" />
        <text x="385.0" y="300.0"
                  text-anchor="middle"
                  transform="">
          Q3
        </text>
        <line x1="515.0" y1="284.0"
                  x2="515.0" y2="288.0" />
        <text x="515.0" y="300.0"
                  text-anchor="middle"
                  transform="">
          Q4
        </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="231.2"
                  x2="60.0" y2="231.2" />
        <text x="52.0" y="235.2"
                  text-anchor="end">20%</text>
        <line x1="56.0" y1="178.4"
                  x2="60.0" y2="178.4" />
        <text x="52.0" y="182.4"
                  text-anchor="end">40%</text>
        <line x1="56.0" y1="125.6"
                  x2="60.0" y2="125.6" />
        <text x="52.0" y="129.6"
                  text-anchor="end">60%</text>
        <line x1="56.0" y1="72.8"
                  x2="60.0" y2="72.8" />
        <text x="52.0" y="76.8"
                  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">100%</text>
      </g>
      <g class="chart-bars">
        <g class="chart-series" style="--i: 0">
          <rect x="66.5" y="153.55" width="117.0" height="130.45" fill="var(--theme-6)" data-tooltip-content="Product A: 42%" class="chart-bar" tabindex="0" role="img" aria-label="Product A: 42%" />
          <rect x="196.5" y="152.0" width="117.0" height="132.0" fill="var(--theme-6)" data-tooltip-content="Product A: 55%" class="chart-bar" tabindex="0" role="img" aria-label="Product A: 55%" />
          <rect x="326.5" y="184.67" width="117.0" height="99.33" fill="var(--theme-6)" data-tooltip-content="Product A: 38%" class="chart-bar" tabindex="0" role="img" aria-label="Product A: 38%" />
          <rect x="456.5" y="157.2" width="117.0" height="126.8" fill="var(--theme-6)" data-tooltip-content="Product A: 61%" class="chart-bar" tabindex="0" role="img" aria-label="Product A: 61%" />
        </g>
        <g class="chart-series" style="--i: 1">
          <rect x="66.5" y="66.59" width="117.0" height="86.96" fill="var(--complement-6)" data-tooltip-content="Product B: 28%" class="chart-bar" tabindex="0" role="img" aria-label="Product B: 28%" />
          <rect x="196.5" y="72.8" width="117.0" height="79.2" fill="var(--complement-6)" data-tooltip-content="Product B: 33%" class="chart-bar" tabindex="0" role="img" aria-label="Product B: 33%" />
          <rect x="326.5" y="67.05" width="117.0" height="117.62" fill="var(--complement-6)" data-tooltip-content="Product B: 45%" class="chart-bar" tabindex="0" role="img" aria-label="Product B: 45%" />
          <rect x="456.5" y="80.28" width="117.0" height="76.91" fill="var(--complement-6)" data-tooltip-content="Product B: 37%" class="chart-bar" tabindex="0" role="img" aria-label="Product B: 37%" />
        </g>
        <g class="chart-series" style="--i: 2">
          <rect x="66.5" y="20.0" width="117.0" height="46.59" fill="var(--theme-4)" data-tooltip-content="Product C: 15%" class="chart-bar" tabindex="0" role="img" aria-label="Product C: 15%" />
          <rect x="196.5" y="20.0" width="117.0" height="52.8" fill="var(--theme-4)" data-tooltip-content="Product C: 22%" class="chart-bar" tabindex="0" role="img" aria-label="Product C: 22%" />
          <rect x="326.5" y="20.0" width="117.0" height="47.05" fill="var(--theme-4)" data-tooltip-content="Product C: 18%" class="chart-bar" tabindex="0" role="img" aria-label="Product C: 18%" />
          <rect x="456.5" y="20.0" width="117.0" height="60.28" fill="var(--theme-4)" data-tooltip-content="Product C: 29%" class="chart-bar" tabindex="0" role="img" aria-label="Product C: 29%" />
        </g>
      </g>
    </svg>
    <div id="midwest-chart-64248-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>
      <li class="chart-legend-item">
        <span class="chart-legend-swatch" style="background: var(--theme-4)"></span>
        Product C
      </li>
    </ul>
  </figure>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="p-8">
  <%= midwest_chart(
    :stacked_bar,
    title: "Revenue Share by Product (% of Total)",
    stack_type: :percent,
    x_axis: { categories: %w[Q1 Q2 Q3 Q4] },
    y_axis: { suffix: "%" },
    series: [
      { name: "Product A", data: [42, 55, 38, 61] },
      { name: "Product B", data: [28, 33, 45, 37] },
      { name: "Product C", data: [15, 22, 18, 29] }
    ]
  ) %>
</div>

Stacked Bar Percent

Stacked column chart normalized to 100% per category.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Chart/stacked_bar_percent

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."