Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Guidelines
    • Getting started
    • Accessibility
    • Writing
    • Testing
  • Theming
    • Theme provider
    • Color mode
    • Borders
    • Breakpoints
    • Colors
    • Sizing
  • Templates
    • Page template
    • Sitewide search
    • Super date picker
  • Layout
    • Accordion
    • Bottom bar
    • Flex
    • Flyout
    • Header
    • Horizontal rule
    • Modal
    • Page components
    • Page header
    • Panel
    • Popover
    • Resizable container
    • Spacer
  • Navigation
    • Breadcrumbs
    • Button
    • Collapsible nav
    • Context menu
    • Facet
    • Key pad menu
    • Link
    • Pagination
    • Side nav
    • Steps
    • Tabs
    • Tree view
  • Display
    • Aspect ratio
    • Avatar
    • Badge
    • Callout
    • Card
    • Comment list
    • Description list
    • Drag and drop
    • Empty prompt
    • Health
    • Icons
    • Image
    • List group
    • Loading
    • Progress
    • Skeleton
    • Stat
    • Text
    • Timeline
    • Title
    • Toast
    • Tooltip
    • Tour
  • Forms
    • Auto refresh
    • Color selection
    • Combo box
    • Compressed forms
    • Date picker
    • Expression
    • Filter group
    • Form controls
    • Form layouts
    • Form validation
    • Inline edit
    • Range sliders
    • Search bar
    • Selectable
    • Selection controls
    • Super select
  • Tabular content
    • Data grid
    • Data grid advanced
    • Data grid cells & popovers
    • Data grid schema & columns
    • Data grid style & display
    • Data grid toolbar
    • In-memory tables
    • Tables
  • Editors & Syntax
    • Code
    • Markdown editor
    • Markdown format
    • Markdown plugins
  • Elastic Charts
    • Accessibility features
    • Categorical
    • Creating charts
    • Metric Chart
    • Part to whole comparisons
    • Sizing
    • Time series
  • EUI
  • Elastic Charts
  • Categorical

Categorical

External library: @elastic/charts v64.1.0

Categorical charts compare data between multiple distinct categories. Avoid using a line chart because it might create confusion with a time series chart. Use a bar chart instead.

Key configurations

  • Settings.rotation = 90
  • BarSeries.data = orderBy(DATASET, ['count'], ['desc'])
  • BarSeries.xAccessor = "vizType"
  • Axis.tickFormat = (d => Number(d)'k')

Edit this page
Previous
Accessibility features
Next
Creating charts
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic