The Line Chart widget for Elementor helps you visualize data effortlessly with customizable charts. Whether you’re tracking trends, analyzing performance, or showcasing comparisons, this widget offers flexible styling and real-time updates to present insights in an engaging way. With seamless integration into Elementor, you can tailor every detail to match your website’s design.
Let’s look at each of the options in the Line Chart widget for Elementor below.
Add a Line Chart Widget to Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Line Chart”
- Hover over the widget in the search results and click install
- Add the “Line Chart” widget to any Elementor Page
General Settings
Show Title (Pro)
Enable or disable the display of the chart title.
Title
Defines the text displayed as the chart title.
X Label
Sets the label for the X-axis of the chart.
Y Label
Sets the label for the Y-axis of the chart.
Curve Type
Defines the style of the curve in the chart.
Smooth Curves – Renders the chart with smooth, flowing curves.
Straight (Pro) – Uses straight lines for the chart.
Show Legend
Determines the position of the legend.
Bottom – Displays the legend at the bottom of the chart.
Top (Pro)– Places the legend at the top.
Left (Pro)– Positions the legend on the left.
Right (Pro) – Positions the legend on the right.
None – Hides the legend entirely.
X Axis Configurations Settings
X Axis Label
Defines the label for the X-axis.
Minimum Range
Specifies the minimum value for the X-axis range.
Maximum Value
Set the maximum value for the X-axis.
Gridlines
Control the number or spacing of gridlines on the X-axis.
Gridlines Color
Customize the gridline color.
Value Format
Define the format for X-axis values, with the following options:
Decimal – Display numbers in standard decimal format.
Scientific (Pro) – Use scientific notation.
Currency (Pro) – Format values as currency.
Percent (Pro) – Display values as percentages.
Short (Pro) – Use a compact numerical format.
Long (Pro) – Use an extended numerical format.
Y Axis Configurations Settings
Y Axis Label
Defines the label for the Y-axis.
Minimum Range
Specifies the minimum value for the Y-axis range.
Maximum Value
Set the maximum value for the Y-axis.
Gridlines
Control the number or spacing of gridlines on the Y-axis.
Gridlines Color
Customize the gridline color.
Value Format
Define the format for Y-axis values, with the following options:
Decimal – Display numbers in standard decimal format.
Scientific (Pro) – Use scientific notation.
Currency (Pro) – Format values as currency.
Percent (Pro) – Display values as percentages.
Short (Pro) – Use a compact numerical format.
Long (Pro) – Use an extended numerical format.
Items Settings
Manage the items of line chart using the repeater field.
- Add new items
- Duplicate items
- Delete items
- Reorder Items
- Edit Items
X Value
Define the X-axis value for the item.
Y Value
Define the Y-axis value for the item.
Line Chart Widget Styling
You can customize every aspect of the widget’s design, including colors, text, icons, fonts, and layout, to perfectly match your website’s style.
General Styling
Set the width, height, alignment and area of chart.
Title Styling
Set the font, size, and color of title.
Content Texts Styling
You can set the font family and font size of content texts.
Legend Styling
Set the legend alignment, font family, font size and color.
Tooltip Styling
Here, you can set the background color, font family, font size, and color of tooltip.
X Axis Styling
You can set the label color, title color and title font size for X axis.
Y Axis Styling
You can set the label color, title color and title font size for Y axis.
Line Chart Design Examples For Elementor
Here are the live use cases for the Line Chart Widget.
Line Chart for growth projection.
Line Chart for population growth.
We hope this guide helped you explore the powerful features of the Line Chart Widget. With its customizable design and data visualization capabilities, you can present trends and insights effortlessly. If you have any questions or need further assistance, feel free to reach out. Happy designing!
