JBStrap comes with a robust suite of built-in charts. As with all JBStrap components, they are highly customizable. Charts are visual representations of data sets on the screen. Use charts to make your data easily understandable and clear to everyone.

General Chart overview

JBStrap charts are very versatile, but they all function similarly, and share functionalities. We will provide a general overview of these shared features.


This is the chart container class. You need to place your charts within a canvas in order to display them. You can display multiple charts within the same canvas. By default, the canvas comes with the following default settings:

  • The canvas border is not enabled
  • The default font color is gray
  • The title text font weight is 700
  • The title text is center aligned
  • The title text position is top
  • The legend font color is gray

You can customize these values to your liking. You can also use the ChartCanvas to retrieve information about a chart. Think of this as the paper on which the chart is drawn, this is where you can set the chart's title, font color, size, border, legend etc.


JBStrap charts come with 3 default tooltip types: Dot, Line and Simple. You can also implement your own tooltip. This can be chosen by using the setTooltipType() method, with a TooltipType enum constant. Not every chart supports every tooltip type, you can find information about which chart supports which tooltip type in their respective sections.

If you wish to implement your own tooltip, you need to use the TooltipRenderer class, as shown in this example:

Custom Tooltip implementation example

Chart click events

The JBStrap charts support click events This means that you can implement server-side code for the event that is triggered when a user clicks on chart data. This is when a ChartClick event is triggered. This event provides you information on where and which chart the user clicked on. This can be reused in various ways, e.g. to update a list.


The lasso feature allows the user to select one or more data points. You can select a data point by circling the data points on the chart. You can select multiple charts or series at the same time. If a user selects multiple data points on the chart, a Lasso event is triggered on the server side. This event is associated with every selection. If a user selects a data point on a chart, the event is triggered on every chart. The lasso event contains information on the selected chart and series. This piece of information can be then used in any business logic, e.g., to group data points or conduct further analysis.


The zoom feature allows the user to zoom in on a chart area by using the mouse wheel. If a user zooms in on the chart while the lasso feature is disabled, it is possible to move the chart horizontally by keeping the mouse button pressed. If the lasso feature is enabled, users are not allowed to move the chart as the lasso feature is active when keeping the mouse wheel pressed.


The brush feature works with the zoom feature. This allows a miniature version of the chart appear below the chart. Users can zoom in on the chart, but in this case the miniature version of the chart is not zoomed. Instead, a small dark area indicates the area of the chart currently displayed on the normal size chart. Users can move this darker area, at the same time moving the zoomed area on the normal size chart. If you use this feature alongside the lasso feature, users can use all functionalities of these features on the chart.

These last 3 features lets the users have additional interactivity with the charts. Please note that these three features are only available on vertical charts, they are not available on the Horizontal Bar, Horizontal Stacked Bar and Population Pyramid charts.

Multi charts

This feature allows you to put multiple charts on the same canvas. You can use the vertical charts with this feature. Both charts will share the same tooltip type. The Lasso, Zoom and Brush features are also usable on multi charts.

Multi Chart example


As with most JBStrap components, you can customize the look and feel of your charts. For more information, visit the Style customization section. A notable feature of some of the charts (axis based charts), is that you can set the individual color of each data point, even if they are in the same series. By default, every data point in a series has the same color, but if you want to, you can specify separate colors for each point.

Default Chart Types

JBStrap comes with the following chart types:

Example chart

Complete Line Chart example