User Interface

CanvasXpress is a market-leading choice for full-cycle data analytics. The JavaScript library provides full data audit capabilities fitted with an advanced, user-friendly interface. Everything you need to perform simple graph configurations, audit trails, and straightforward user interactions are well integrated into widgets found on every visualization.

The different widgets found on the CanvasXpress visualization contain helpful functions that make your data analysis process very seamless.

# Toolbar

  • The CanvasXpress platform toolbar is positioned perfectly at the top of the visualization interface. Its properties can be seen by hovering the mouse over the toolbar area.
  • It gives users access to different options that can be opened by clicking the icons on the visualization.

These icons help you perform the following functions.


  1. Camera icon: When clicked, this icon saves your images in PNG format. Other format options include SVG and JSON, which can be selected in the File Menu button on the interface.
  2. Audit icon: With this icon, programmatic modifications made on an original graph can be reproduced along with the original graph itself.
  3. Move icon: This option repositions the Canvas
  4. Table icon: Offers a toggle switch for viewing information as a table or a graph
  5. Funnel icon: This icon gives users access to data filters and data tables used for data exploration.
  6. Lasso icon: : Switch used to toggle between rectangular selection and free-hand selection in Scatter plots.
  7. Tools icon: Provides access to the wide variety of widgets and tools to customize the graph
  8. Resize icon: Used to increase or decrease the size of the visualization interface for a better view.

To access the menu items on each graph, right-click on any white space within the graph. You’ll find options such as scatter plots, bar graphs, and more.


Moving Menus


Navigate menus containing several layers by dragging


  1. Right-click to open the context menu
  2. Grab the menu by left-clicking on any non-terminal node
  3. Drag the menu to the desired position.
  4. Select the intended parameter.

Pining Menus


Pin the menus to the primary toolbar.


  1. Right-click to open the context menu and move your mouse to any sub-menu.
  2. Left-clicking on the submenu reveals a pop-up that will prompt the user to pin a particular level to the main toolbar.
  3. Open the toolbar to reveal the various custom items and to allow access to any desired parameters.
  4. Removing any of the custom menus from the toolbar can be done by right-clicking on it and following the prompts.

# Configurator

Use the configuration widget by double-clicking on any empty space in the visualization. This tool helps you to easily find and replace the value of parameters.


# Data Customizer

Access several user customizations using this drag and drop function.

Here are some screenshots:




# Data Filters

Automatically configure numeric and discrete data filters on the visualization.

The filter might appear as a checkbox, or a searchable drop-down menu with multiple sections, depending on the number of categories available. With the numerical filters, the user can toggle between both the log and the normal space.

Easily reset all filters using the crossed icon at the top.


# Data Table

View data and metadata on the visualization using this widget.