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
<div class="p-8">
  <figure class="midwest-chart chart-type-column legend-alignment-center" data-controller="midwest-chart" data-midwest-chart-tooltip-enabled-value="true">
    <figcaption class="chart-title">
      Net Profit / Loss by Quarter
    </figcaption>
    <svg
      viewBox="0 0 600 320"
      width="600"
      height="320"
      role="img"
      aria-label="Net Profit / Loss by Quarter"
      class="chart-svg"
      data-midwest-chart-target="svg">
      <title>Net Profit / Loss by Quarter</title>
      <desc>2 series: 2024, 2025; 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="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="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">-20</text>
        <line x1="56.0" y1="218.0"
                  x2="60.0" y2="218.0" />
        <text x="52.0" y="222.0"
                  text-anchor="end">0</text>
        <line x1="56.0" y1="152.0"
                  x2="60.0" y2="152.0" />
        <text x="52.0" y="156.0"
                  text-anchor="end">20</text>
        <line x1="56.0" y1="86.0"
                  x2="60.0" y2="86.0" />
        <text x="52.0" y="90.0"
                  text-anchor="end">40</text>
        <line x1="56.0" y1="20.0"
                  x2="60.0" y2="20.0" />
        <text x="52.0" y="24.0"
                  text-anchor="end">60</text>
      </g>
      <g class="chart-bars">
        <g class="chart-series" style="--i: 0">
          <rect x="72.35" y="102.5" width="46.8" height="115.5" fill="var(--theme-6)" data-tooltip-content="2024: 35" class="chart-bar" tabindex="0" role="img" aria-label="2024: 35" />
          <rect x="202.35" y="218.0" width="46.8" height="39.6" fill="var(--theme-6)" data-tooltip-content="2024: -12" class="chart-bar" tabindex="0" role="img" aria-label="2024: -12" />
          <rect x="332.35" y="59.6" width="46.8" height="158.4" fill="var(--theme-6)" data-tooltip-content="2024: 48" class="chart-bar" tabindex="0" role="img" aria-label="2024: 48" />
          <rect x="462.35" y="145.4" width="46.8" height="72.6" fill="var(--theme-6)" data-tooltip-content="2024: 22" class="chart-bar" tabindex="0" role="img" aria-label="2024: 22" />
        </g>
        <g class="chart-series" style="--i: 1">
          <rect x="130.85" y="218.0" width="46.8" height="59.4" fill="var(--complement-6)" data-tooltip-content="2025: -18" class="chart-bar" tabindex="0" role="img" aria-label="2025: -18" />
          <rect x="260.85" y="119.0" width="46.8" height="99.0" fill="var(--complement-6)" data-tooltip-content="2025: 30" class="chart-bar" tabindex="0" role="img" aria-label="2025: 30" />
          <rect x="390.85" y="168.5" width="46.8" height="49.5" fill="var(--complement-6)" data-tooltip-content="2025: 15" class="chart-bar" tabindex="0" role="img" aria-label="2025: 15" />
          <rect x="520.85" y="218.0" width="46.8" height="26.4" fill="var(--complement-6)" data-tooltip-content="2025: -8" class="chart-bar" tabindex="0" role="img" aria-label="2025: -8" />
        </g>
      </g>
    </svg>
    <div id="midwest-chart-75952-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>
        2024
      </li>
      <li class="chart-legend-item">
        <span class="chart-legend-swatch" style="background: var(--complement-6)"></span>
        2025
      </li>
    </ul>
  </figure>
</div>
1
2
3
4
5
6
7
8
9
10
11
<div class="p-8">
  <%= midwest_chart(
    :column,
    title: "Net Profit / Loss by Quarter",
    x_axis: { categories: %w[Q1 Q2 Q3 Q4] },
    series: [
      { name: "2024", data: [ 35, -12, 48, 22] },
      { name: "2025", data: [-18,  30, 15, -8] }
    ]
  ) %>
</div>

Column Negative

Column chart with mixed positive and negative values. The axis always includes 0 and bars extend in both directions.

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/column_negative

Annotate a preview to embed its Figma design here:

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