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
<div class="p-8 flex flex-col gap-6" style="max-width: 240px;">
  <div>
    <div class="text-xs text-gray-8 mb-1">Line sparkline</div>
    <figure class="midwest-chart chart-type-line is-sparkline" data-controller="midwest-chart" data-midwest-chart-tooltip-enabled-value="false">
      <svg
      viewBox="0 0 160 40"
      width="160"
      height="40"
      role="img"
      aria-label=""
      class="chart-svg"
      data-midwest-chart-target="svg">
        <title></title>
        <desc>Visits; 8 data points</desc>
        <g class="chart-lines">
          <g class="chart-series">
            <path d="M 51,33.44 L 65,24.48 L 79,30.88 L 93,19.36 L 107,25.76 L 121,14.24 L 135,18.08 L 149,9.12" stroke="var(--theme-6)" fill="none" stroke-width="2" class="chart-line" style="--i: 0; --path-length: 114.81" />
          </g>
        </g>
      </svg>
    </figure>
  </div>
  <div>
    <div class="text-xs text-gray-8 mb-1">Area sparkline</div>
    <figure class="midwest-chart chart-type-area is-sparkline" data-controller="midwest-chart" data-midwest-chart-tooltip-enabled-value="false">
      <svg
      viewBox="0 0 160 40"
      width="160"
      height="40"
      role="img"
      aria-label=""
      class="chart-svg"
      data-midwest-chart-target="svg">
        <title></title>
        <desc>Revenue; 8 data points</desc>
        <g class="chart-areas">
          <g class="chart-series">
            <path d="M 51.0,31.2 L 65.0,26.4 L 79.0,29.6 L 93.0,20.0 L 107.0,23.2 L 121.0,24.8 L 135.0,15.2 L 149.0,8.8 L 149.0,36.0 L 51.0,36.0 Z" fill="var(--theme-6)" fill-opacity="0.2" stroke="none" class="chart-area-fill" style="--i: 0; --path-length: 106.96" />
            <path d="M 51,31.2 L 65,26.4 L 79,29.6 L 93,20 L 107,23.2 L 121,24.8 L 135,15.2 L 149,8.8" stroke="var(--theme-6)" fill="none" stroke-width="2" class="chart-line" style="--i: 0; --path-length: 106.96" />
          </g>
        </g>
      </svg>
    </figure>
  </div>
  <div>
    <div class="text-xs text-gray-8 mb-1">Downward trend (custom color)</div>
    <figure class="midwest-chart chart-type-line is-sparkline" data-controller="midwest-chart" data-midwest-chart-tooltip-enabled-value="false">
      <svg
      viewBox="0 0 160 40"
      width="160"
      height="40"
      role="img"
      aria-label=""
      class="chart-svg"
      data-midwest-chart-target="svg">
        <title></title>
        <desc>Churn; 8 data points</desc>
        <g class="chart-lines">
          <g class="chart-series">
            <path d="M 51,9.12 L 65,12.96 L 79,11.68 L 93,20.64 L 107,18.08 L 121,27.04 L 135,29.6 L 149,34.72" stroke="var(--red-9)" fill="none" stroke-width="2" class="chart-line" style="--i: 0; --path-length: 105.19" />
          </g>
        </g>
      </svg>
    </figure>
  </div>
</div>
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
<div class="p-8 flex flex-col gap-6" style="max-width: 240px;">
  <div>
    <div class="text-xs text-gray-8 mb-1">Line sparkline</div>
    <%= midwest_chart(
      sparkline: true,
      series: [{ name: "Visits", data: [12, 19, 14, 23, 18, 27, 24, 31] }]
    ) %>
  </div>
  <div>
    <div class="text-xs text-gray-8 mb-1">Area sparkline</div>
    <%= midwest_chart(
      :area,
      sparkline: true,
      series: [{ name: "Revenue", data: [8, 11, 9, 15, 13, 12, 18, 22] }]
    ) %>
  </div>
  <div>
    <div class="text-xs text-gray-8 mb-1">Downward trend (custom color)</div>
    <%= midwest_chart(
      sparkline: true,
      colors: ["var(--red-9)"],
      series: [{ name: "Churn", data: [31, 28, 29, 22, 24, 17, 15, 11] }]
    ) %>
  </div>
</div>

Sparkline

sparkline: true renders a compact, chrome-less trend line — no axes, legend, tooltip, or title. Defaults to a :line chart; pass :area for a filled variant. Every option preset (size, padding, hidden chrome) can be overridden explicitly. Ideal inside a StatComponent or a table cell.

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

Annotate a preview to embed its Figma design here:

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