The Dynamic Charts element allows Bricks users to display dynamic, customizable charts using simple or CSV-based data inputs. This feature is especially useful for visualizing datasets with minimal setup and offers a wide range of chart types and customization options.
Settings
Dynamic Charts offers the following settings under different sections:
Chart Configuration
Type: Choose from Bar, Line, Radar, Doughnut, or Pie chart types.
Input Type: Select between Simple (manual input) and CSV.
Height: Define chart height using px, %, or vh units.
CSV Input (if selected)
CSV From: Load data via URL or textarea.
CSV URL/Textarea: Provide CSV content via URL or pasted text.
Separator: Define the delimiter (default is comma).
Has Header: Toggle to skip the first row.
Column Indexes: Define which columns to use for labels and data.
Limit Records: Limit the number of rows to parse.
Manual Input (Simple)
Labels: Comma-separated list of labels.
Data: Comma-separated list of numerical values.
Display Options
Show Legend and Legend Text (not for pie/doughnut).
Show Title and Title Text (not for pie/doughnut).
Manipulation (CSV Only)
Labels Manipulation: Convert timestamps or change text case.
Add Text to Value: Append a suffix like "%" to data values.
Options (Line, Bar, Radar)
Begin at Zero: Force the y-axis to start at 0.
Grace: Add padding to the axis.
Step Size: Set custom y-axis step.
Style
Style options for the charts include:
Legend
Position: Top, Left, Bottom, Right.
Horizontal Alignment: Start, Center, End.
Color: Customize legend text color.
Axes (Bar, Line)
X/Y Grid Color: Set color for grid lines.
X/Y Labels Color: Set the color of the axis labels.
Content
Height: Responsive height control.
Random Colors: Toggle random color generation for backgrounds and borders.
Custom Colors: Define exact colors using a repeater field.
Border Width: Set the width of dataset borders.
Usage Summary
Use Dynamic Charts when you need quick and flexible chart visualizations directly within Bricks. Whether loading data manually or through a CSV, the configuration is intuitive and well-structured. Add styling and behavior options for a fully tailored output.
This element is ideal for dashboards, reports, or any content where data visualization enhances user experience.