Skip to content



ChartGL leverages hardware acceleration to enable the visualization of very large datasets.

WebGL is used to access the graphics hardware on the local computer accelerating the rendering process by a factor of many thousand. In WebGL2 a combination of vertex shaders (position) and fragment shaders (color) are used to render data points providing the capability to display millions of data points in milliseconds.

Multiple large data sources can be plotted on the same chart with high speed and performance using layers.

Data Types

The ChartGL component supports the plotting of scalar values (datetimes and numbers) from multiple different large data sources on the same chart.


The Zoom feature enables the ability to zoom on a region within both x and y axis, or individually on each x or y axis Double-Clicking the chart resets the chart to its initial state.

Screenshot Screenshot


Ability to display multiple different data sources on the same chart.


Data Source
Data sources

Select either the "Bubble" or "Line" option for each layer.


The "Bubble" option displays data as individual points and the "Line" option connects each data point resulting in a continuous line.


Y Axis
Select data columns to plot from the data source.
Y Axis includes a wildcard selection for multiple columns. Wildcard selection will use columns of the most common, single kdb type; for example, if a data set has a date type column, three integer type columns and five float type columns - only the five float columns will be plotted using the wildcard, the integer and date columns will be ignored.
When wildcard is used, the Color Palette defines point color for each added column.

Data Types

Only scaler data types can be used for X-Axis and Y-Axis

Define color of plotted points when a wildcard is not used, including 'no color'.
Point Size
The size of the points (or icons).

The icon selector allows for the choice of icons from a predetermined list.


The icons are then displayed in the position of the data points on the chart.

Icons also support a base64 image in a view state parameter.


Legend Enabled
Toggles display of data legend.




The tooltip feature can be used to display the coordinates of individual data points on the chart.


The tooltip feature can be used in tandem with the zoom hence allowing for the identificaiton of any single point on the chart.

X-Axis and Y-Axis


X-Axis Type
Dropdown select: Linear, Category, Time
X-Axis Height
Y-Axis Width
Adjust pixel height of axis to edge of component.
Number of Ticks
Number of ticks to display in the axis.


Use min max
Define min and max range values for x- and y-axis.
Selection Min
Selection Max
Displays user-zoom min and max values; can be mapped to view state parameters.


Offset Gridlines
Check to shift gridlines from centre alignment to left-alignment.
Gridlines Color
Gridlines Opacity
Define visual style of chart gridlines.


Hide Trailing Zeroes
Remove extra zeroes from axis labels.
Toggle display of axis.
Numeric Format
Define axis format; select between Number,Smart Number,Formatted Number.
Decimal Places
For numeric axis formats, define the number of decimal places to display.
Font Size
Define font size (px) of axis tick labels.
Append text or symbol content before or after axis value.


Toggle display of axis label.
Label String
Text description of axis.
Font Size
Define font size (px) of axis label.


Show Crosshairs
Check to show crosshair on chart
Use custom tooltip
Enable custom tooltip
Custom tooltip
Define tooltip
  {{#each this}}
    {{#eq @index 0}}
      <td width="{{width}}">
        <i class="{{icon}}" style="color:{{color}}"></i>

Colour Palette


Sets plot point colors for wildcard y-axis.

Style, Margins, Format

Style for common settings