Skip to content

Pictorial Bar Chart

The Pictorial Bar Chart is an advanced categorical chart type where bars are constructed using repeated or scaled symbols, shapes, or pictograms instead of solid columns. It retains the clarity of a bar chart while adding an illustrative, visually engaging element, ideal for storytelling dashboards or executive summaries.

This chart allows values to be displayed either horizontally or vertically, with optional grouping support for stacked or side-by-side comparisons. Each category along an axis is paired with a pictorial bar whose size or repetition count reflects its associated value. Optionally, color encoding and heatmap gradients can further enhance data interpretation.

Key Features:

  • Display values using custom symbols (images, icons, shapes) instead of solid bars.
  • Supports grouped series for side-by-side or stacked comparisons.
  • Orientation can be toggled between horizontal and vertical layouts.
  • Offers interactive tooltips, zoom controls, and drill-down support.
  • Heatmap gradients optionally highlight value intensity.
  • Dynamically colorizes single-series views for enhanced readability.

Typical use cases:

  • Representing sales volume by product using icons (e.g., bottles, cars, devices).
  • Visualizing employee headcounts by department.
  • Displaying financial metrics in a boardroom-friendly, illustrative format.
  • Creating executive dashboards with icon-based value representations.
  • Demonstrating survey responses or sentiment breakdowns with icons.

βš™οΈ Setup

  1. Drag the Pictorial Bar Chart widget from the chart library onto your designer workspace.
  2. Select the chart.
  3. Go to the Widget Configuration tab in the Customize panel.
  4. Under the Configuration tab, select the Basic Configuration option to access the essential settings for the pictoral bar chart.
  5. Select the Source which the chart will pull the data from the option.
  6. Map:
  7. (Optional) Add a Date field for time-based context or filtering.
  8. Choose orientation, symbol, stacking, and color options from the customization panel.

πŸ“Š Basic Configuration

Configuration ItemDescription
SourceSource providing the data for measures and dimensions.
ValueNumeric measure that determines the height/length of each pictorial bar.
AxisCategorical field to display along the axis.
Group (optional)Field for grouping multiple series within the chart.
Date Field (optional)Date dimension for time-based filtering.

🎨 Chart Customizations

CategoryOptions & Description
GeneralModify the chart’s general appearance, including the background color, borders, shadows, and drill-out choices.
TitleEnable and customize chart title text, alignment, font, and color.
TooltipControl tooltip content, formatting, and visibility on hover.
GridAdjust chart margins, grid spacing, and padding around the matrix area.
LegendToggle visibility, position, orientation, and customize legend labels and icons.
Categorical AxisConfigure axis label formatting, rotation, and category spacing.
Numerical AxisControl numeric axis range, formatting, and logarithmic scaling.
SeriesDefine symbol type, size, spacing, and stacking behavior.
HeatMapApply color gradients based on value intensity.
SortingCustom sort categories and groups.
OthersSet chart orientation (Horizontal/Vertical), stack mode, and single-series colorization toggle.

πŸ“Š Example Visualization

Pictorial bar chart