Common Properties

Most widgets under Charts & Tables in Workmaster share a common structure and set of properties. These control how your data is sourced, grouped, visualized, and interacted with.

Data Model

Every chart or table widget connects to a Data Model that acts as the primary source of data. This is selected from the Data Model dropdown in the widget’s property editor.

Fixed Filters

Fixed Filters let you set default conditions to limit the data shown in your widget.

For Example:

If you only want to show products from the "Dresses" category, you can add a filter like: IF(category) is equal to "Dresses"

These filters work behind the scenes — users won’t see them, and they can’t change them while using the app. If you don’t set any filters here, the widget will display all records from the connected Data Model.

Filter on Selection

When turned ON, this allows one chart or table to filter other widgets based on what the user selects — perfect for building interactive dashboards.

Row (pivot)

The Row (pivot) field determines how your chart is grouped along the X-axis. You can select one or multiple fields from your Data Model.

  • The first field in Row becomes the primary grouping on the X-axis.

  • If drilldown is enabled, clicking on a data point (like a bar) reveals deeper levels based on the next field in the Row selection.

Example:

  • If you set Region and City in Row:

    • The main chart will show bars grouped by Region.

    • Clicking a bar for "Asia" will drill down and show a second-level chart grouped by City.

This makes Row the key to navigating hierarchical data within charts.

Datasets

The Datasets section allows you to configure how your data will be represented visually in a chart. It includes options for selecting the data column, summarization method, appearance, and axis mapping.

Each dataset you add contributes a series to your chart (like a set of bars in a bar chart or a line in a line chart). Multiple datasets can be added using the Add DataSets button.

Column

Selects the column from your connected Data Model to use for this dataset’s values. This is the Y-axis value by default unless changed. Typically represents numerical fields like soldQuantity, price, revenue, etc.

Summarize By

Defines the aggregation method used on the selected column.

Options:

  • SUM: Adds up all values in the column per group.

  • AVG: Averages all values per group.

  • MAX : Shows the highest value within each group.

  • MIN: Shows the lowest value within each group.

  • ABSSUM: Adds the absolute values (ignoring signs) of the column per group.

  • COUNT(Distinct): Counts how many unique values exist in the selected column per group.

  • Count(Rows) : Counts the number of rows (records) in each group.

  • Use Case Example: If soldQuantity is selected and SUM is chosen, the total quantity sold per group (like Region or Category) will be shown.

Count of Value

Specifies a field to count values for, only visible if COUNT is chosen in “Summarize By”.

For Example:

Count how many times a specific status or tag appears across rows.

Border Width

Controls the thickness of the dataset border (e.g., line thickness or bar border).

Use + and – buttons or enter a decimal value (e.g., 0.0, 1.5).

Border Color

Lets you pick the color used for the border (or stroke) of your dataset’s visuals. This setting enhances visual distinction when multiple datasets are shown on the same chart.

Legend Label

Custom label for the dataset that will appear in the chart legend.

Best Practice: Rename this to something meaningful like “Total Sales” or “Units Sold” for better user clarity.

Order

Determines the display priority of this dataset when multiple datasets are added. Numeric order where lower numbers appear first.

Add DataSets

Click the Add DataSets button to define and configure additional data series. Add multiple data metrics (e.g., Revenue vs. Quantity) to the same chart.

Drilldown

When the Drilldown is enabled, clicking on any data point (like a bar, column, or slice) in the chart will reveal a more detailed breakdown based on the next fields defined in Row (pivot).

How It Works:

  • The first field in Row (pivot) is used for the main chart grouping (e.g., Region).

  • If Drilldown is enabled and multiple fields are selected in Row, clicking on a data point drills into the next field in the sequence (e.g., City, then Store).

Use Case Example:

  • Row (pivot): Region, City, Store

  • Drilldown Enabled: Chart starts by showing total sales by Region. Clicking on "Asia" shows a new chart grouped by City within "Asia". Clicking on "Karachi" in that chart shows data grouped by Store.

Display & Layout Settings

ColorModel

The ColorModel section defines how colors are applied to chart elements like bars, lines, or pie slices. It offers various modes for controlling the visual encoding of color based on static selection or dynamic data logic.

Scales

The Scales section allows you to configure how your chart’s axes behave and appear. This includes settings for linearity, range, stacking, and positioning.

  • Type: Define the scaling type of the Y-axis:

    • Linear: default numeric data. alues increase evenly across the axis. Suitable for continuous measurements like sales, quantities, or temperature.

    • Category: treats the axis values as discrete labels (e.g., Product names, Regions, Days). Each label is evenly spaced regardless of its numeric value.

    • Logarithmic: Scales values exponentially instead of linearly. Useful when visualizing data with large differences in magnitude (e.g., 10, 100, 1000).

  • Begin Scale at Zero: When enabled, the Y-axis starts at 0, regardless of data values. Useful for consistency across charts.

  • Reverse Axis: Inverts the axis direction (e.g., descending instead of ascending).

  • Min & Max: Set custom minimum and maximum values for tighter or more relevant chart ranges.

  • Tick Settings: Customize tick intervals, sample size, font settings, minimum and maximum rotations, mirroring, format, max ticks limit, precision and step size.

  • Gridlines Settings: Gridlines improve chart readability by drawing lines across the chart background at each tick. Apply line and border settings

  • Scale Label: Customize scale labels

Title

This section lets you add a title to your chart for better context and clarity.

  • Display: Toggle to enable/disable the chart title.

  • Position: Set the position of chart title (Top, Bottom, Left, Right)

  • Alignment: Set alignment (Start, Center, End).

  • Text: Enter the main title text.

  • Font Settings: Adjust the title's font size, style, color, family, weight and line height.

Legends

The Legends section allows you to control how and where the chart legend appears, providing information about different datasets in the chart.

  • Display: Toggle to display/hide the legend.

  • Format:

  • Position: Choose where to place the legend (Top, Bottom, Left, Right).

  • Align: Control alignment within the selected position (Start, Center, End).

  • Stretch To Full Width: Forces the legend to expand across the entire width of the chart container

  • Reverse: Reverses the order of legend items. For example, if your datasets are Revenue, Cost, and Profit, enabling this will display them in reverse: Profit, Cost, Revenue.

  • Settings for Legend Labels and Legend Title: Font related settings .

Datalabels

Data labels show the actual value of each data point directly on the chart.

  • Display: Toggle to enable or disable datalabels on the chart.

  • Format: Defines how the datalabel values are displayed. This controls the appearance of numbers and can improve clarity depending on the data type.

    • Available options:

      • Compact Abbreviates large numbers using suffixes. Example:

        • 1,200 → 1.2K

        • 1,000,000 → 1M Ideal for saving space on charts with large numeric values.

      • Decimal Displays values in standard decimal format. Example:

        • 1234.567 → 1234.57 (rounded) Good for financial, metric, or scientific charts.

      • Currency Formats values with a currency symbol and appropriate decimals. Example:

        • 1234 → 1,234 Currency symbol may depend on locale or global settings.

      • Percentage Multiplies the value by 100 and adds a % sign. Example:

        • 0.25 → 25% Useful for charts showing proportions, ratios, or shares.

      • No Formatting Displays raw value without any modification. Example:

        • 1200 → 1200 Suitable when you want full control or have pre-formatted data.

  • Align: Controls horizontal alignment of the label relative to its anchor point.

    • Common options: Start, Center, End , Top, Bottom, Left, Right.

  • Anchor: Determines where the label is anchored on the chart element.

    • Common options: Start, Center, End

  • Offset: Adds space between the label and its anchor point. Useful to avoid visual overlap.

  • Rotation: Sets the angle (in degrees) of the label text. Useful for fitting longer text in tight spaces or stylizing the chart.

  • Clamp: When enabled, ensures labels are confined within the chart area — prevents overflow.

  • Clip: When enabled, hides labels that fall outside the visible chart area.

  • Padding: Customize the label text size.

  • Oppacity: Adjusts label transparency from 0 (fully transparent) to 1 (fully opaque).

  • Background Color: Lets you set a background color behind each datalabel for better contrast.

  • Font (Expandable Section): Adjust the font size, style, color, family, weight and line height.

Padding

Padding controls the space around the chart inside the widget container, helping improve layout and responsiveness.

  • Top / Bottom / Left / Right: Enter values (in px) to adjust spacing.

  • Auto Padding: Toggle to allow the system to automatically adjust padding based on chart size and labels.

  • Inner Padding: For pie/doughnut charts, control the spacing within the chart circle.

Sort

The Sort section lets you define the order in which data is displayed on the chart.

  • Sort By: Select the column used for sorting (from the Row or Dataset fields).

  • Order:

    • Ascending: A to Z or smallest to largest.

    • Descending: Z to A or largest to smallest.

  • Sort Aggregated Values: Enable if you want sorting to be based on summarized values instead of raw data.

  • Custom Order: Define a manual order of categories (e.g., Jan, Feb, Mar).

PreviousCharts & TablesNextWS Bar Chart

Last updated