UI Lab

    Chart variants

    Live preview of all chart types and all variants in one page.

    Switch text direction for RTL/LTR preview.

    Bar Chart (9 variants)

    Default

    078155233310120Jan200Feb150Mar280Apr220May310Jun

    Stacked

    078155233310120Jan200Feb150Mar280Apr220May310Jun

    Horizontal

    Jan120
    Feb200
    Mar150
    Apr280
    May220
    Jun310

    Grouped

    078155233310120Jan200Feb150Mar280Apr220May310Jun

    Rounded

    078155233310120Jan200Feb150Mar280Apr220May310Jun

    Gradient

    078155233310120Jan200Feb150Mar280Apr220May310Jun

    Striped

    078155233310120Jan200Feb150Mar280Apr220May310Jun

    Glass

    078155233310120Jan200Feb150Mar280Apr220May310Jun

    Neon

    078155233310120Jan200Feb150Mar280Apr220May310Jun
    Line Chart (9 variants)

    Default

    024487195MonTueWedThuFriSatSun

    Smooth

    024487195MonTueWedThuFriSatSun

    Dashed

    024487195MonTueWedThuFriSatSun

    Area

    024487195MonTueWedThuFriSatSun

    Dots

    024487195MonTueWedThuFriSatSun

    Gradient Area

    024487195MonTueWedThuFriSatSun

    Multi Color

    024487195MonTueWedThuFriSatSun

    Glow

    024487195MonTueWedThuFriSatSun

    Stepped

    024487195MonTueWedThuFriSatSun
    Pie Chart (7 variants)

    Default

    Desktop55%
    Mobile30%
    Tablet15%

    Donut

    100Total
    Desktop55%
    Mobile30%
    Tablet15%

    Half

    Desktop55%
    Mobile30%
    Tablet15%

    Labeled

    Desktop55%
    Mobile30%
    Tablet15%

    Nested

    100Total
    Desktop55%
    Mobile30%
    Tablet15%

    Exploded

    Desktop55%
    Mobile30%
    Tablet15%

    Rose

    Desktop55%
    Mobile30%
    Tablet15%
    Area Chart (7 variants)

    Default

    018365472JanFebMarAprMayJun

    Gradient

    018365472JanFebMarAprMayJun

    Stacked

    018365472JanFebMarAprMayJun

    Stepped

    018365472JanFebMarAprMayJun

    Sparkline

    Range

    018365472JanFebMarAprMayJun

    Glow

    018365472JanFebMarAprMayJun
    Radar Chart (6 variants)

    Default

    SpeedReliabilityComfortSafetyEfficiencyDesign

    Filled

    SpeedReliabilityComfortSafetyEfficiencyDesign

    Dots

    SpeedReliabilityComfortSafetyEfficiencyDesign

    Multi

    SpeedReliabilityComfortSafetyEfficiencyDesign

    Rounded

    SpeedReliabilityComfortSafetyEfficiencyDesign

    Glow

    SpeedReliabilityComfortSafetyEfficiencyDesign
    Scatter Chart (6 variants)

    Default

    021436485ABCDE

    Bubble

    021436485ABCDE

    Colored

    021436485ABCDE

    Line Connected

    021436485ABCDE

    Clustered

    021436485ABCDE

    Glow

    021436485ABCDE
    Gauge Chart (6 variants)

    Default

    85of 100Revenue0100

    Gradient

    85of 100Revenue0100

    Segmented

    85Revenue

    Mini

    85%

    Multi Ring

    Revenue: 85Growth: 62Retention: 91

    Speedometer

    85of 100
    Funnel Chart (6 variants)

    Default

    Visitors1,200Leads640Qualified280Customers92

    Smooth

    Visitors1,200Leads640Qualified280Customers92

    Striped

    Visitors1,200Leads640Qualified280Customers92

    Gradient

    Visitors1,200Leads640Qualified280Customers92

    Flat

    Visitors1,200Leads640Qualified280Customers92

    Pyramid

    Visitors1,200Leads640Qualified280Customers92
    Treemap Chart (5 variants)

    Default

    Chrome64Safari18Edge9Firefox7

    Rounded

    Chrome64Safari18Edge9Firefox7

    Gradient

    Chrome64Safari18Edge9Firefox7

    Bordered

    Chrome64Safari18Edge9Firefox7

    Labeled

    Chrome64Safari18Edge9Firefox7
    Candlestick Chart (5 variants)

    Default

    12511811010395MonTueWedThu

    Hollow

    12511811010395MonTueWedThu

    Colored

    12511811010395MonTueWedThu

    Minimal

    12511811010395MonTueWedThu

    Heikin Ashi

    12511811010395MonTueWedThu
    Waterfall Chart (4 variants)

    Default

    +100Start+45Sales-20Returns-10Discounts+30Net

    Colored

    +100Start+45Sales-20Returns-10Discounts+30Net

    Stacked

    +100Start+45Sales-20Returns-10Discounts+30Net

    Bridge

    +100Start+45Sales-20Returns-10Discounts+30Net
    Heatmap Chart (4 variants)

    Default

    Rounded

    Gradient

    Labeled

    Mon12Tue8Wed15Thu20Fri7Sat3Sun10
    Polar Area Chart (4 variants)

    Default

    North55
    East70
    South42
    West63

    Outlined

    North55
    East70
    South42
    West63

    Gradient

    North55
    East70
    South42
    West63

    Spaced

    North55
    East70
    South42
    West63
    Radial Bar Chart (4 variants)

    Default

    215Total
    A60
    B45
    C80
    D30

    Gradient

    215Total
    A60
    B45
    C80
    D30

    Rounded

    215Total
    A60
    B45
    C80
    D30

    Thin

    215Total
    A60
    B45
    C80
    D30
    Bump Chart (4 variants)

    Default

    Alpha95Beta72Gamma88Delta56Epsilon81

    Smooth

    Alpha95Beta72Gamma88Delta56Epsilon81

    Dots

    Alpha95Beta72Gamma88Delta56Epsilon81

    Thick

    Alpha95Beta72Gamma88Delta56Epsilon81
    Sankey Chart (3 variants)

    Default

    Inbound (120)Stage A (85)Stage B (95)Outbound (72)Returns (28)

    Curved

    Inbound (120)Stage A (85)Stage B (95)Outbound (72)Returns (28)

    Gradient

    Inbound (120)Stage A (85)Stage B (95)Outbound (72)Returns (28)
    Donut Progress Chart (4 variants)

    Default

    100Total
    Complete65
    In Progress20
    Pending15

    Gradient

    100Total
    Complete65
    In Progress20
    Pending15

    Thin

    100Total
    Complete65
    In Progress20
    Pending15

    Thick

    100Total
    Complete65
    In Progress20
    Pending15