Skip to content
Release 2021.02
Get started
About
Design
Develop
Developer resources
Accessibility guide
Global CSS variables
Migrate
Red Hat font
Release notes
Upgrade guide
Guidelines
Bulk selection
Colors
Colors for charts
Filters
Icons
Spacers
Typography
UX writing
About
Brand voice and tone
Capitalization
Error messages
Numerics
Product tours
Punctuation
Sentence structure
Terminology
Truncation
Units and symbols
UX writing best practices
Writing design guidelines for PatternFly
Writing for all audiences
Components
About modal
Accordion
Action list
Alert
Alert group
Application launcher
Avatar
Backdrop
Background image
Badge
Banner
Brand
Breadcrumb
Button
Calendar month
Card
Checkbox
Chip
Chip group
Clipboard copy
Code editor
Context selector
Data list
Date picker
Description list
Divider
Drawer
Dropdown
Dual list selector
Empty state
Expandable section
File upload
Form
Form control
Form select
Hint
Inline edit
Input group
Jump links
Label
Label group
List
Login page
Masthead
Menu
Menu toggle
Modal
Navigation
Notification badge
Notification drawer
Number input
Options menu
Overflow menu
Page
Pagination
Popover
Progress
Radio
Search input
Select
Sidebar
Simple list
Skeleton
Skip to content
Slider
Spinner
Switch
Tab content
Table
Tabs
Text
Text area
Text input
Tile
Time picker
Title
Toggle group
Toolbar
Tooltip
Tree view
Wizard
Charts
About
Area chart
Bar chart
Bullet chart
Donut chart
Donut utilization chart
Legend chart
Line chart
Pie chart
Scatter chart
Sparkline chart
Stack chart
Themed charts
Threshold chart
Tooltip chart
Demos
Primary-detail
Layouts
Bullseye
Flex
Gallery
Grid
Level
Split
Stack
Utilities
Accessibility
Alignment
Background color
Box shadow
Display
Flex
Float
Sizing
Spacing
Text
Contribute
About
Design
Develop
Training
HTML
React
React charts
Community
React charts
Charts
Beginner
Area chart
10 minutes
Learn how to implement a React area chart.
Beginner
Bar chart
10 minutes
Learn how to implement a React bar chart.
Beginner
Bullet chart
10 minutes
Learn how to implement a React bullet chart.
Beginner
Donut chart
10 minutes
Learn how to implement a React donut chart.
Beginner
Donut utilization chart
12 minutes
Learn how to implement a React donut utilization chart.
Beginner
Line chart
10 minutes
Learn how to implement a React line chart.
Beginner
Pie chart
10 minutes
Learn how to implement a React pie chart.
Beginner
Stack chart
10 minutes
Learn how to implement a React pie chart.
Beginner
Sparkline chart
12 minutes
Learn how to implement a React sparkline chart.
View source on GitHub
QUICKLINKS
Get started
Components
Layouts
Styles
PatternFly 3
CONTRIBUTE
Designers
Developers
Code of Conduct
STAY IN TOUCH
Slack
Forum
Mailing list
PatternFly Medium
Copyright © 2019 Red Hat, Inc.
Privacy statement
Terms of use
All policies and guidelines