NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

JavaScript Dashboard panel UI widget

JS Dashboard is a special user interface, that displays a set of indicators, graphs, digital data, related to a task. As a rule Dashboard shows KPIs of some business process and it is an entry point for most of the analytical systems. These dashboards consist of a set of widgets, that the user can customize and personalize. The Webix UI product includes a ready-made JavaScript Dashboard component, that can be built into any application. Webix Dashboard is an extended version of the GridLayout component and contains advanced tools for working with information panels.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Support of All Modern browsers
  • Samples of PHP, Node.js, .NET integration
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Draggable panels

You can let users decide where to put UI components. Dashboard panels can be dragged to any position within the grid by the header or by their inner part.

Drag panels to change their position.

Resizable panels

You can also make panels resizable, so that users can change sizes of panels to fit them into the grid.

Drag the ‘resize’ icon in the bottom right corner of panels.

Dashboard panels with menus

Add menus to panels for quick actions with them, for example deleting, exporting their data or displaying some additional information.

Click icons on the panels to open menus.

Changing the layout

Use Dashboard API for adding, moving and deleting panels from the grid. You can also define schemes for creating dynamic panels.

Drag panels from the list on the left to the dashboard.

Saving and restoring state

It’s possible to save and restore the current position and sizes of all panels.