You need to enable JavaScript to run this app.
/
Loading...
React
Html
Get Support
v1.0
Introduction
Credit
Customization
Utilities
Grid
Typography
Background
Border
Color
Shadow
Sizing
Spacing
Shapes
Seperators
Media Objects
Embeds
Images
Icon Fonts
Data Display
Avatar
Accordion
Badges
Advance Badges
Tooltip
Popovers
Modal
Cards
Carousel
Collapse
List Group
Ribbon
Drawers
Offcanvas
Empty States
Callout
Gallery
Data Entry
Buttons
Form Elements
Input Groups
Form Layout
Form Mask
Form Validation
Advance Form UI
Cropperjs
Dropzone
Date Picker
Color Picker
React Select
Range Slider
Input Spinner
Form Wizard
Tinymce
Chips
Ratings
Page Search
Feedback
Sweet Alert
Notifications
Toast Alerts
Tour
Timeout
Alerts
Placeholders
Spinners
Progress
Bootstrap Toast
Clipboard
Tables
Basic Tables
Advance Table UI
Charts
Charts
Maps
Google Maps
Vector Maps
Animated Maps
Navigation
Breadcrumbs
Dropdowns
Nav
Tabs
Pagination
Toolbar
BEHAVIORAL
Scroll Spy
Sticky Elements
Draggable
Scrollable Content
Fixed Footer
Load More
Layout
Menus
Classic Menu
Horizontal Menu
Navbar Menu
Navbar
Page Headers
Page Footers
×
Explore Templates
Column Charts
A
Column Chart
, is a vertical graphical representation of different data categories.
Basic example
Preview
120
120
90
90
60
60
30
30
0
0
$ (thousands)
Feb
Feb
Mar
Mar
Apr
Apr
May
May
Jun
Jun
Jul
Jul
Aug
Aug
Sep
Sep
Oct
Oct
Net Profit
Revenue
Free Cash Flow
Download SVG
Download PNG
Download CSV
Stacked Column
Preview
120
120
90
90
60
60
30
30
0
0
44
55
41
67
22
43
13
23
20
8
13
27
11
17
15
15
21
14
21
7
25
13
22
8
Jan '11
Jan '11
02 Jan
02 Jan
03 Jan
03 Jan
04 Jan
04 Jan
05 Jan
05 Jan
06 Jan
06 Jan
PRODUCT A
PRODUCT B
PRODUCT C
PRODUCT D
Download SVG
Download PNG
Download CSV
Column with negative values
Preview
20%
20%
0%
0%
-20%
-20%
-40%
-40%
-60%
-60%
Growth
Jul '11
Jul '11
2012
2012
Jul '12
Jul '12
2013
2013
Jul '13
Jul '13
Download SVG
Download PNG
Download CSV
Dynamic loaded chart
Preview
2011
2012
2013
2014
2015
2016
600
600
500
500
400
400
300
300
200
200
100
100
0
0
Yearly Results
(Click on bar to see details)
2011
2012
2013
2014
2015
2016
Download SVG
Download PNG
Download CSV
Quarterly Results
0
0
1
1
2
2
3
3
4
4
5
5
Distributed column chart
Preview
32
32
24
24
16
16
8
8
0
0
John
Doe
John Doe
Joe
Smith
Joe Smith
Jake
Williams
Jake Williams
Amber
Amber
Peter
Brown
Peter Brown
Mary
Evans
Mary Evans
David
Wilson
David Wilson
Lily
Roberts
Lily Roberts
Download SVG
Download PNG
Download CSV
Jump to
Basic example
Stacked Column
Column with negative values
Dynamic loaded chart
Distributed column chart