Skip to content

New: Chartory 1.0. 100 charts free in React, MIT licensed

Read the changelog

Charts / Glossary

Size class

A chart word, with the charts that use it.

Definition

A size class is one of four fixed chart sizes, XS to L, each laid out on its own. A chart is redrawn from its data at each size instead of being scaled.

Updated Nov 2, 2026

  • XS311 × 212

    Monthly card spendCard spend by month, January to September, in $K. September (month to date) is 40K; the highest month is July at 71K.48KJAN52K61KMAR57K66KMAY59K71KJUL68K40KSEPMONTH TO DATECLOSED MONTHS
    Monthly card spend
    MonthSpend
    JAN$48K
    FEB$52K
    MAR$61K
    APR$57K
    MAY$66K
    JUN$59K
    JUL$71K
    AUG$68K
    SEP$40K

  • S360 × 212

    Monthly card spendCard spend by month, January to September, in $K. September (month to date) is 40K; the highest month is July at 71K.48KJAN52KFEB61KMAR57KAPR66KMAY59KJUN71KJUL68KAUG40KSEPMONTH TO DATECLOSED MONTHS
    Monthly card spend
    MonthSpend
    JAN$48K
    FEB$52K
    MAR$61K
    APR$57K
    MAY$66K
    JUN$59K
    JUL$71K
    AUG$68K
    SEP$40K

  • M480 × 246

    Monthly card spendCard spend by month, January to September, in $K. September (month to date) is 40K; the highest month is July at 71K.48KJAN52KFEB61KMAR57KAPR66KMAY59KJUN71KJUL68KAUG40KSEPMONTH TO DATECLOSED MONTHS
    Monthly card spend
    MonthSpend
    JAN$48K
    FEB$52K
    MAR$61K
    APR$57K
    MAY$66K
    JUN$59K
    JUL$71K
    AUG$68K
    SEP$40K

  • L800 × 330

    Monthly card spendCard spend by month, January to September, in $K. September (month to date) is 40K; the highest month is July at 71K.48KJAN52KFEB61KMAR57KAPR66KMAY59KJUN71KJUL68KAUG40KSEPMONTH TO DATECLOSED MONTHS
    Monthly card spend
    MonthSpend
    JAN$48K
    FEB$52K
    MAR$61K
    APR$57K
    MAY$66K
    JUN$59K
    JUL$71K
    AUG$68K
    SEP$40K
  1. 01Redrawn, not scaledText and lines keep their size at every class.
  2. 02What changesLabels thin out and the legend moves as the card gets smaller.

Where you see it

  • Monthly card spendCard spend by month, January to September, in $K. September (month to date) is 40K; the highest month is July at 71K.48KJAN52KFEB61KMAR57KAPR66KMAY59KJUN71KJUL68KAUG40KSEPMONTH TO DATECLOSED MONTHS
    Monthly card spend
    MonthSpend
    JAN$48K
    FEB$52K
    MAR$61K
    APR$57K
    MAY$66K
    JUN$59K
    JUL$71K
    AUG$68K
    SEP$40K
    Monthly card spendCard spend by month, January to September, in $K. September (month to date) is 40K; the highest month is July at 71K.48KJAN52K61KMAR57K66KMAY59K71KJUL68K40KSEPMONTH TO DATECLOSED MONTHS
    Monthly card spend
    MonthSpend
    JAN$48K
    FEB$52K
    MAR$61K
    APR$57K
    MAY$66K
    JUN$59K
    JUL$71K
    AUG$68K
    SEP$40K

    001 · BarsCompare items · Fintech data

  • P95 latency, us-eastP95 time to first token in us-east, hourly over the last 24 hours: 1.30 s now, peak 1.45 s, low 0.85 s.1.8 S1.2 S0.6 S000:0006:0012:0018:00NOW
    P95 latency, us-east
    HourP95
    00:000.90 s
    01:001.10 s
    02:000.95 s
    03:001.20 s
    04:000.85 s
    05:001.00 s
    06:001.30 s
    07:001.05 s
    08:001.15 s
    09:000.90 s
    10:001.25 s
    11:001.40 s
    12:001.10 s
    13:001.00 s
    14:001.35 s
    15:001.20 s
    16:000.95 s
    17:001.10 s
    18:001.45 s
    19:001.15 s
    20:001.05 s
    21:001.30 s
    22:001.20 s
    Now1.30 s
    P95 latency, us-eastP95 time to first token in us-east, hourly over the last 24 hours: 1.30 s now, peak 1.45 s, low 0.85 s.1.8 S1.2 S0.6 S000:0006:0012:0018:00NOW
    P95 latency, us-east
    HourP95
    00:000.90 s
    01:001.10 s
    02:000.95 s
    03:001.20 s
    04:000.85 s
    05:001.00 s
    06:001.30 s
    07:001.05 s
    08:001.15 s
    09:000.90 s
    10:001.25 s
    11:001.40 s
    12:001.10 s
    13:001.00 s
    14:001.35 s
    15:001.20 s
    16:000.95 s
    17:001.10 s
    18:001.45 s
    19:001.15 s
    20:001.05 s
    21:001.30 s
    22:001.20 s
    Now1.30 s

    010 · LineChange over time · AI data

  • Cash bridge, Q3Cash from the opening balance of $1.82M to the closing balance of $1.91M: sales in, refunds, staff, cloud and tax out.4M3M2M1M0OPENSALES−0.71MSTAFF−0.12MTAXCLOSEBALANCEINFLOWOUTFLOW
    Cash bridge, Q3
    StepChangeBalance
    Open$1.82M
    Sales+$1.24M$3.06M
    Refund−$0.09M$2.97M
    Staff−$0.71M$2.26M
    Cloud−$0.23M$2.03M
    Tax−$0.12M$1.91M
    Close$1.91M
    Cash bridge, Q3Cash from the opening balance of $1.82M to the closing balance of $1.91M: sales in, refunds, staff, cloud and tax out.4M3M2M1M0OPENREFUNDCLOUDCLOSEBALANCEINFLOWOUTFLOW
    Cash bridge, Q3
    StepChangeBalance
    Open$1.82M
    Sales+$1.24M$3.06M
    Refund−$0.09M$2.97M
    Staff−$0.71M$2.26M
    Cloud−$0.23M$2.03M
    Tax−$0.12M$1.91M
    Close$1.91M

    042 · WaterfallFlow between steps · Fintech data

Common mistakes

Scaling a chart to fit a card

Text shrinks below readable. Pick the size class that fits.

Mixing size classes in one row

Cards in a row read best at one size.

Questions

How do I pick a size?

By the card's width: L from 800 px, M from 480, S from 360, XS from 311.

Is size a prop?

Yes: size="xs", "s", "m" or "l", the same as the Figma variant.

In the kit

Every type, in four size classes.

In Figma and React, in four sizes, light and dark. Pay once, every update.

See plans

Every chart word, A to Z.

Open the glossary