Dynamic Charts element by Max Addons for Bricks Builder lets you display data visually with interactive, customizable charts.
You can use it to present business metrics, survey results, website analytics, and other data in a clear and engaging way.
This element also supports dynamic data sources, enabling your charts to update automatically with live data. Supported sources include: Custom Data, WordPress Query, CSV File Upload, and Google Sheets Integration.
Getting Started#
Before using the Dynamic Charts element, make sure the following plugins are installed and activated on your WordPress website:
Adding the Dynamic Charts Element#
Follow these steps to add the Dynamic Charts element to a page:
- Open an existing page or create a new one using the Bricks Builder editor.
- In the elements panel, search for “Dynamic Charts”.
- Add the element to your page.
- Confirm the element has the 'MAX' label in the top-left corner; this ensures it belongs to Max Addons.
Once added, you’ll find multiple customization options under the Content and Style tabs. Let’s explore the Content Tab in detail.
Content Tab Overview#
Content tab consists of several sub-sections. The available options may vary depending on the chart type you select.
CHART#
Chart Types Available:
- Line
- Bar
- Radar
- Pie
- Doughnut
- Polar Area
- Bubble
Options Based on Chart Type#
If you choose Line:
- Stepped Line Chart: Enable to show segmented steps between data points.
- Line Tension: Adjust the smoothness of the line’s curve.
- Line Border Width: Define the line’s thickness.
If you choose Bar:
- Orientation: Choose between Vertical or Horizontal bars.
- Stacked: Enable to display bars stacked on top of each other.
- Bar Border Width: Set the border thickness for bars.
- Border Radius: Round the bar corners.
- Bar Size: Define the width of each bar.
- Bar Space: Adjust spacing between bars.
If you choose Radar:
- Line Border Width: Set the width of the lines forming the radar.
If you choose Pie, Doughnut, or Polar Area:
- Arc Border Width: Adjust the border width of each segment.
If you choose Bubble:
- Bubble Border Width: Set the outline width around each bubble.
Common Options for All Chart Types
These settings apply regardless of the selected chart type:
- Maintain Aspect Ratio: Keep the chart’s default aspect ratio.
- Chart Height: Set a fixed height for the chart.
- Chart Width: Define a custom width for the chart.
CHART DATA#
Chart Data section controls where your chart retrieves data and how it’s displayed.
- Source: Choose your data source: Custom, Query, CSV, or Google Sheets.
- Labels: Define the labels for your chart (e.g., January, February, March).
- Chart Data: Enter or edit numerical values for each label.
- Add Multiple Data Entries: Click + ADD CHART DATA to create multiple datasets (helpful in comparing multiple metrics).
GRID#
Configure how grid lines and axis titles appear on your chart.
X Axis
- Show Grid Lines: Display or hide horizontal grid lines.
- Show Title: Display a title for the X-axis.
- Grid Line Color: Choose the grid line color.
- Grid Line Width: Set the thickness of the grid lines.
Y Axis
- Begin at Zero: Start the Y-axis from zero.
- Show Grid Lines: Enable or disable vertical grid lines.
- Show Title: Display a title for the Y-axis.
- Grid Line Color: Define grid color.
- Grid Line Width: Set grid thickness.
- Minimum Value: Set a minimum Y-axis value (ignored if data goes below this value).
- Maximum Value: Set a maximum Y-axis value (ignored if data exceeds it).
LEGEND#
Control how the chart legend is displayed.
- Show Legend: Toggle the legend visibility.
- Reverse: Reverse the legend order.
- Position: Choose legend placement – Left, Top, Bottom, or Right.
- Alignment: Align legend items Start, Center, or End.
- Label Color: Customize legend text color.
- Font Size, Weight, Style, Line Height: Control typography settings for legend labels.
LABELS#
Customize axis labels for better readability.
X Axis
- Show Labels: Toggle label visibility.
- Labels Color: Choose color.
- Font Size, Weight, Style, Line Height: Control typography.
Y Axis
- Show Labels: Toggle label visibility.
- Labels Prefix / Suffix: Add symbols like “$” or “%” before or after values.
- Labels Color: Set label color.
- Font Size, Weight, Style, Line Height: Adjust text appearance.
TOOLTIP#
Tooltips display data details when a user hovers or clicks on a chart element.
- Show Tooltip: Enable or disable tooltips.
- Tooltip Event: Choose trigger, Hover, or Click.
- Tooltip Mode: Define how tooltips behave:
- Index: Show tooltips for all points in the same category.
- Point: Show only for the hovered data point.
- Dataset: Show all data for a dataset when hovering over one point.
- Background Color, Border Color, Border Width, Border Radius, Padding: Customize tooltip design.
- Title & Body: Control color and font size separately for tooltip titles and body text.
CHART TITLE#
Add a title to your chart for better context.
- Show Chart Title: Toggle title visibility.
- Chart Title: Enter your custom chart title.
- Position: Choose where to display the title.
- Alignment: Set title alignment – Left, Center, or Right.
- Color, Font Size, Weight, Style, Line Height: Adjust typography settings.
POINT STYLES (for Line and Radar Charts)#
Customize how individual data points appear.
- Custom Point Styles: Enable to use unique point markers.
- Point Style: Choose from multiple styles – Circle, Cross, CrossRot, Dash, Line, Rect, and more.
- Background Color: Set the point fill color.
- Border Color: Define outline color.
- Border Width: Adjust thickness.
- Point Size: Set point size.
- Point Hover Size: Define how large the point becomes on hover.
ANIMATION#
Make your charts visually engaging with smooth animations.
- Animation: Choose from 20+ animation styles.
- Duration: Set how long the animation lasts.
- Loop Animation: Enable continuous looping for dynamic visual effects.
So, this was a detailed overview of the Dynamic Charts by Max Addons. I hope the doc helps you understand the element’s features and functionality.