-
Main
- Dashboard No active orders
- Layouts
- Themes
- Starter kit
- Changelog2.0
- RTL version
-
Forms
- Form components
- JSON forms
- Text editors
- Pickers
- Form layouts
-
Components
- Basic components
- Content styling
- Extra components
- Color system
- Animations
- Icons
-
Layout
- Page layouts
- Sidebars
- Navbars
- Vertical navigation
- Horizontal navigation
- Menu levels
-
Data visualization
- Echarts library
- D3 library
- Dimple library
- C3 library
- Google charts
- Maps integration
-
Extensions
- Extensions
- JQuery UI
- File uploaders
- Event calendars
- Internationalization
-
Tables
- Basic tables
- Data tables
- Data tables extensions
- Handsontable
- Responsive tables
-
Page kits
- General pages
- Service pages
- User pages
- Application pages
- Widgets
This interactive
bar chart demonstrates basic interactivity: tooltips that display bar value; multiple data sets with smooth animation between them; color range option; bar value position and appearance. "Change data set" checkbox changes data sets and launches smooth transition between them, uncheck this checkbox to change data set to the first one. Tooltip
is a D3 plugin that is called directly in chart settings.
This variation of a simple bar chart adds sorting
with staggered delay and translucency to improve readability during the transition. Use the checkbox in the top right to turn sorting on or off. During the sort, bars keep their default colors for better visibility. There's an additional side padding added to the chart area, distance between bars as well as their size are fully customizable.
Another example demonstrating how to sort
a horizontal bar chart and animate the reordering. The staggered delay makes it easier to follow individual bars. As in horizontal bar chart example, bars keep their original colors. Optional value text can be placed on the left and right sides or centered. Bar height depend on chart container height and bar number displayed.
This variation of a stacked bar chart adds an option to change stacked
bar chart to multiple
on the fly by selecting the radio button. Chart labels move according to the bar group position. This type of layout and transitions are available for both bar directions - vertical and horizontal. It uses one data set for both chart types. Vertical axes labels are optional and hidden by default.
This example shows basic histogram
with optional tooltip. The data is randomly generated. The values are then binned at regular intervals using D3’s histogram layout. The x-axis uses a linear scale, such that the tick values appear between bars; this provides better indication that each bar represents the count of values between its surrounding tick values.
This bar chart visualizes hierarchical data using D3. Each blue bar represents a folder, whose length encodes the total size of all files in that folder (and all subfolders). Clicking on a bar dives into that folder, while clicking on the background bubbles back up to the parent folder. Data stored in JSON file.