lc_bars

Interactive Bar Chart Visualization with `lc_multiple_bars_`, `lc_funnel_bars_`, `lc_stacked_bars_*`

The bar chart components provide comprehensive interactive bar chart visualization with three distinct display modes. These components include advanced features like animated bar growth, interactive legends, tooltips, and responsive design, making them perfect for comparative analysis, hierarchical data visualization, and part-to-whole relationships.

lcmultiple_bars*: Series displayed side-by-side within each category for direct comparison

lcfunnel_bars*: Series displayed as concentric bars (largest to smallest) for hierarchical relationships

lcstacked_bars*: Series stacked vertically to show cumulative totals and part-to-whole relationships

Use Cases

lcmultiple_bars*:

Quarterly revenue vs expenses comparison
Department performance metrics side-by-side
Product sales comparison across regions
Multi-metric dashboards and scorecards
Year-over-year performance analysis

lcfunnel_bars*:

Budget vs actual vs target visualization
Hierarchical organizational data
Nested category analysis
Contained value relationships
Multi-level performance indicators
Concentric data comparisons

lcstacked_bars*:

Revenue breakdown by product lines
Time allocation across projects
Market share composition
Budget allocation visualization
Cumulative performance metrics
Part-to-whole relationship analysis

Element Identification

The target element must be a <rect> with an ID that starts with one of:

lc_multiple_bars_* for grouped column charts (side-by-side comparison)
lc_funnel_bars_* for nested column charts (concentric bars)
lc_stacked_bars_* for stacked column charts (cumulative totals)

Input Format

The input value must be provided as a JSON array of objects with the following structure:

JSON Format

A JSON string containing an array of objects with the following structure:

[
  {
    "x": "Q1",
    "name": "Revenue",
    "yvalue": 1000,
    "color": "#7cb5ec",
    "chart-title": "Quarterly Performance"
  },
  {
    "x": "Q1",
    "name": "Expenses",
    "yvalue": 800,
    "color": "#434348"
  },
  {
    "x": "Q2",
    "name": "Revenue",
    "yvalue": 1200,
    "color": "#7cb5ec"
  },
  {
    "x": "Q2",
    "name": "Expenses",
    "yvalue": 900,
    "color": "#434348"
  }
]

Dataset/CSV Format

Alternatively, you can use tabular data from your datasets with the following columns:

x	name	yvalue	color	chart-title	hideGridLines	barWidthPercent
Jan	Sales	850	#7cb5ec	Monthly Performance	-	-
Jan	Profit	320	#434348	-	-	-
Feb	Sales	920	#7cb5ec	-	-	-
Feb	Profit	380	#434348	-	-	-
Mar	Sales	1150	#7cb5ec	-	-	-
Mar	Profit	450	#434348	-	-	-

Advanced Example with Custom Settings:

x	name	yvalue	color	chart-title	backgroundColor	barWidthPercent	hideXAxisLabel
Team A	Score	85	#f15c80	Team Performance	#ffe6f0	60	-
Team B	Score	92	#f15c80	-	#ffe6f0	60	-
Team C	Score	78	#f15c80	-	#ffe6f0	60	-

Complex Multi-Series Example:

x	name	yvalue	color	backgroundColor	barWidthPercent	hideLegend	hideXAxisLabel	labelColor	gridLineColor
Q1 2023	Revenue	125000	#3498db	#ecf0f1	40	-	-	#2c3e50	#bdc3c7
Q1 2023	Profit	28000	#27ae60	#d5f4e6	40	-	-	-	-
Q1 2023	Internal Costs	15000	#e74c3c	-	20	true	-	-	-
Q2 2023	Revenue	142000	#3498db	#ecf0f1	40	-	-	-	-
Q2 2023	Profit	35000	#27ae60	#d5f4e6	40	-	true	-	-
Q2 2023	Internal Costs	18000	#e74c3c	-	20	-	-	-	-

Additional Property Examples:

x	name	yvalue	hideAllLegends	disableStaggering	showBackgroundBar	totalXSeries	highlightColor
2019	Growth	15.5	true	-	false	-	-
2020	Growth	-2.3	-	-	-	-	#ff6b6b
2021	Growth	8.7	-	true	-	4	-

Dataset Usage:

Connect your column chart to a dataset containing the required columns
The system will automatically map the columns to the appropriate chart properties
Filter data by categories or time ranges to show relevant comparisons
Multiple rows create comprehensive multi-series column visualizations

Important Notes:

Column names must match exactly as shown in the example (x, name, yvalue, color, etc.)
Column names are case-sensitive and must be spelled exactly as specified
If data is not passed in the correct format or column names don’t match, the element will display as a plain <rect> without any chart visualization
Series limit is capped at 10 to maintain chart readability and performance
Negative values are automatically clamped to 0 for proper visualization

Implementation Steps for Dataset Usage

To use dataset/CSV format with column charts, follow these steps:

Create Dataset: Import your data containing the required columns (x, name, yvalue, and optional styling columns)

Create Field: Create a field from your dataset that contains the column chart data

Set Value Formatting: In the field settings, set Value Formatting to “JSON” - this is crucial for proper data formatting

Override SVG Variables: In the SVG slide design tab, go to “Override SVG Variables”

Select Variable: Choose your column chart variable and use the format with your field

Include JSON Filter: Critical: Always include the | json filter with your field, otherwise the column chart will not work

Automatic Highlights Variable Generation

When you create SVG elements with lcmultiple_bars, lc*funnel_bars*, lcstacked_bars*, the designer automatically generates corresponding variables:

Generates highlighting variables with __x_ prefix for each category

Highlighting Variables:

For lcmultiple_bars*:

lc_multiple_bars_1 (2 items) → 
lc_multiple_bars_1__x_1 →  (Q1)
lc_multiple_bars_1__x_2 →  (Q2)

For lcfunnel_bars*:

lc_funnel_bars_1 (2 items) → 
lc_funnel_bars_1__x_1 →  (Q1)
lc_funnel_bars_1__x_2 →  (Q2)

For lcstacked_bars*:

lc_stacked_bars_1 (2 items) → 
lc_stacked_bars_1__x_1 →  (Q1)
lc_stacked_bars_1__x_2 →  (Q2)

totalXSeries Control

When totalXSeries is defined in your data, the designer creates that exact number of highlighting variables:

Example with totalXSeries: 4

{
  "x": "Q1",
  "name": "Revenue",
  "yvalue": 1000,
  "totalXSeries": 4
}

Generated Variables:

lc_multiple_bars_1__x_1 →  (Q1)
lc_multiple_bars_1__x_2 →  (Q2)
lc_multiple_bars_1__x_3 → 
lc_multiple_bars_1__x_4 → 

This ensures consistent variable availability even if your data doesn’t include all categories yet.

💡 Bonus Tip: You can determine the optimal totalXSeries value by querying your data:

SELECT COUNT(DISTINCT category) as unique_category_count
FROM your_table_name;

Use this count as your totalXSeries value to ensure all categories have corresponding highlighting variables.

Data Field Requirements

All chart types use the same data structure, but the designer optimizes the visualization based on the element type:

Required Fields:

x: Category labels
name: Series names
yvalue: Numeric values

Optional Fields:

All styling and configuration properties work across all chart types
Some properties (like showBackgroundBar) are optimized for specific chart types

Configuration Properties

Required Properties

x: Category label for x-axis (string, mandatory)
name: Series identifier/name (string, mandatory)
yvalue: Numeric value for the data point (number, mandatory, negative values clamped to 0)

Optional Chart-Level Properties (taken from first occurrence)

chart-title: Title displayed at the top of the chart (string, optional)

Optional Series-Level Properties (taken from first occurrence of each series)

Property	Type	Description
`color`	string	Color for this series (hex code or color name)
`backgroundColor`	string	Background color for this series
`highlightColor`	string	Color for category highlighting borders
`barWidthPercent`	number	Width as percentage of available space
`hideAllLegends`	boolean	Hide all legend items
`hideLegend`	boolean	Hide legend for this specific series
`labelColor`	string	Color for legend text of this series
`hideGridLines`	boolean	Hide all grid lines
`gridLineColor`	string	Override grid line color

Optional Global Settings (taken from first data object)

Property	Type	Description
`disableStaggering`	boolean	Prevent automatic label staggering
`showBackgroundBar`	boolean	Show/hide background bars (default: true, only for lcmultiple_bars*)
`labelColor`	string	Global color for all chart labels and text
`totalXSeries`	number	Define number of axis points for highlighting (overrides data calculation)

Optional Per-Category Settings (checked for each x-value)

Property	Type	Description
`hideXAxisLabel`	boolean	Hide the x-axis label for this specific category

Technical Implementation

Dynamic Text Fitting

Width-Based Truncation: Labels are truncated based on actual bar width, not fixed character limits

Data Structure Assumptions

Data Assumptions

X-axis values are categorical (strings) and represent distinct categories
Y-axis values are numeric and non-negative (negative values are clamped to 0)
Series limit is capped at 10 to maintain chart readability and performance
Missing values are treated as 0 in calculations and display
Chart title is optional but when provided, affects legend positioning

Display Assumptions

Minimum bar width is 1px to ensure visibility
Default colors cycle through a predefined palette when series exceed color count
Font family is extracted from the global story metadata (fontHint)
Text color is derived from the current chart’s image text color setting
Container dimensions are expected to be reasonable (minimum 100x100px)

Interaction Assumptions

Background bars are shown by default unless explicitly disabled (lcmultiple_bars* only)

Best Practices

Ensure consistent series names across all categories
Use meaningful category labels that fit within available space
Provide colors for series to maintain consistent branding
Keep series count under 10 for optimal performance
Include highlightColor properties for categories you plan to emphasize
Use totalXSeries when you need precise control over highlighting variables

Interactive Bar Chart Visualization with lc_multiple_bars_*, lc_funnel_bars_*, lc_stacked_bars_*