chart

presentation

slug: step-chart

Chart Step

Purpose

Creates dynamic, interactive data visualizations from tabular data using the hbgChartMaker class. Transforms complex datasets into clear visual insights through a variety of chart types optimized for data analysis and presentation.

When to Use

• Visualize trends and patterns in your data
• Compare performance across categories, time periods, or segments
• Identify correlations between variables
• Present data insights in an intuitive, visual format
• Build interactive dashboards and reports
• Visualize filter waterfalls and data transformations
• Create heatmaps to identify patterns in two-dimensional data
• Generate treemaps to visualize hierarchical data structures

How It Works

1. Takes input data and chart configuration parameters
2. Preprocesses the data based on the selected chart type using specialized data preparation methods
3. Renders the chart as SVG using the appropriate renderer for the selected chart type
4. Wraps the SVG with HTML container, title, and legend elements
5. Returns both the visualization and the prepared data for further analysis

Parameters

Required

• type (string) - Chart type to generate:
  • bar - Horizontal bar chart
  • column - Vertical bar chart
  • line - Line chart
  • scatter - Scatter plot
  • bubble - Bubble chart
  • heatmap - Heat map visualization
  • centered_heatmap - Heatmap with diverging color scale around a central value
  • treemap - Hierarchical rectangle-based visualization
  • waterfall - Waterfall chart showing sequential changes
• x_axis (string) - Column to use for the x-axis categories
• y_axis (string) - Column to use for the y-axis values

Optional

• title (string) - Chart title
• series (string) - Column to use for grouping data into series
• z_axis (string) - Column for bubble size (for bubble charts only)
• color_field (string) - Column determining color intensity (for heatmaps)
• options (object) - Additional chart configuration:
  • theme - Visual theme for the chart (default, dark, light)
  • width - Chart width (default: 100%)
  • height - Chart height (calculated based on data)
  • show_grid - Whether to display grid lines (default: true)
  • show_legend - Whether to display the legend (default: true)
  • x_label - Custom x-axis label
  • y_label - Custom y-axis label
  • x_scale - X-axis scale type (linear, log)
  • y_scale - Y-axis scale type (linear, log)
  • chart_id - Custom ID for the chart container

Chart Types

Bar/Column Charts

Ideal for comparing categorical data or time-based snapshots.

chart:
  type: column  # or bar for horizontal bars
  x_axis: region
  y_axis: revenue
  series: product_category  # optional for grouped bars

Line Charts

Best for showing trends over time or continuous data.

chart:
  type: line
  x_axis: month
  y_axis: sales
  series: product_line  # optional for multiple lines

Scatter/Bubble Charts

For exploring relationships between two (or three) variables.

chart:
  type: scatter  # or bubble
  x_axis: age
  y_axis: income
  series: region  # optional for grouping points
  z_axis: customer_count  # required for bubble charts

Heatmaps

Visualize two-dimensional data with color intensity.

chart:
  type: heatmap  # or centered_heatmap
  x_axis: month
  y_axis: product
  color_field: sales_variance  # determines color intensity

Treemaps

Hierarchical visualization with nested rectangles.

chart:
  type: treemap
  x_axis: product_name  # label field
  y_axis: revenue       # value field (size)
  series: category      # optional grouping field
  color_field: growth   # optional color intensity field

Waterfall Charts

Sequential visualization of cumulative effect of changes.

chart:
  type: waterfall
  x_axis: expression   # filter step expressions
  y_axis: removed_count  # values for each step

Special Features

• Auto Data Detection: The chart step can automatically detect and use waterfall data from filter steps
• Responsive Design: Charts automatically resize to fit containing elements
• Diverging Color Scales: For centered heatmaps, showing positive/negative variations
• Squarified Treemaps: Optimized rectangle layouts for better visualization
• Interactive Elements: Legends and data points with descriptive labels

Example Usage

Basic Column Chart

chart:
  type: column
  x_axis: month
  y_axis: sales
  title: "Monthly Sales Performance"

Multi-Series Line Chart with Custom Options

chart:
  type: line
  x_axis: date
  y_axis: revenue
  series: product_line
  title: "Revenue Trends by Product Line"
  options:
    theme: dark
    show_grid: true
    x_scale: linear
    y_scale: log

Bubble Chart for Multi-Dimensional Analysis

chart:
  type: bubble
  x_axis: market_share
  y_axis: growth_rate
  z_axis: revenue
  series: region
  title: "Market Analysis by Region"

Heatmap for Pattern Identification

chart:
  type: heatmap
  x_axis: day_of_week
  y_axis: hour_of_day
  color_field: transaction_count
  title: "Transaction Volume Patterns"

Output Components

HTML

• Chart Title: Styled heading with chart description
• SVG Visualization: Vector-based chart with axes, labels, and data elements
• Legend: Color-coded indicators for data series or categories
• Responsive Container: Wrapper ensuring proper display across device sizes

Data (Returned in Result)

• Prepared dataset optimized for the selected chart type
• Original input data preserved for reference or further processing

Extras

• Chart metadata and statistics stored for potential downstream use

Related Documentation

• filter step - Generate waterfall data for waterfall charts
• print step - Combine charts with tables in HTML reports
• dashboard step - Build multi-component dashboards with multiple charts