Line Chart

How to use Line Chart Widget of Sky Addons for Elementor

The Line Chart widget is an advanced data visualizations tool that helps you present trends, progress, or comparisons clearly and interactively. Built using the Chart.js library, this widget integrates seamlessly with Elementor and offers complete flexibility in styling, layout, and data control. Whether you want to display sales growth, traffic stats, or analytical reports — Line Chart lets you do it all visually with precision and ease.

Features:

1. Based on lightweight and flexible Chart.js 4.x
2. Interactive chart with smooth lines and data points
3. Multiple dataset support with customizable styles
4. Responsive and mobile-friendly design
5. Tooltips, grid lines, and axis controls
6. Full customization using Elementor’s live editor

Insert Line Chart Widget

1. Open Elementor Editor. In the Elementor panel, search for “Line Chart” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

Chart Layout

1. Chart Height – Define the height of the chart in pixels.
2. Label Values – Enter labels separated by commas (e.g., January, February, March).
3. Add Repeater (Dataset) – Add one or more datasets with the following:
   • Label – Name of the dataset.
   • Data – Comma-separated values for each bar.
   • Background Color – Main color of bars.
   • Background Hover Color – Color on hover.
   • Border Color – Border color for each bar.
   • Hover Border Color – Border color on hover.

Additional Settings

1. X Axes Labels – Toggle X-axis labels.
2. Y Axes Labels – Toggle Y-axis labels.
3. X Axes Grid Lines – Show/hide grid lines on the X axis.
4. Y Axes Grid Lines – Show/hide grid lines on the Y axis.
5. Show Tooltips – Enable data tooltips on hover.
6. Show Title – Display a chart title.
7. Step Size – Define step increments on Y axis.

Legend Settings

1. Show Legend – Toggle the legend display.
2. Position – Select position: Top, Bottom, Left, or Right.
3. Reverse – Reverse the order of legend items.

Animation Settings

1. Select Animation – Choose animation style.
2. Duration – Set animation duration in milliseconds.

Style Customization

Chart Section

Customize the main chart area to align with your website’s layout and design.

1. Padding – Adjust space around the chart to prevent overflow or tight layout.
2. X Axes Grid Color – Change the horizontal grid line color to match your theme.
3. Y Axes Grid Color – Style the vertical grid lines for better visual hierarchy.
4. Line Border Width – Define the thickness of the data line.
5. Line Tension – Smooth out the lines between points by adjusting the curve.
6. Point Border Width – Set the outline thickness for each point.
7. Point Style – Choose from various point shapes like circle, triangle, cross, rect, etc.

Legend Section

Style the legend that displays dataset labels for better readability and aesthetics.

1. Text Color – Modify the color of the legend text to enhance visibility.
2. Box Height / Width – Adjust the size of the colored legend markers beside each label.
3. Typography – Fully control font family, size, weight, spacing, and style of legend text.

Labels Section

Design the axes labels to improve clarity and fit your site’s branding.

1. Padding – Manage space around label areas for clean layout.
2. X Axes Color / Typography – Change font and color for bottom axis labels (e.g., months).
3. Y Axes Color / Typography – Style the left axis labels (e.g., numbers/values) to improve contrast and legibility.

Tooltip Section

1. Alignment – Set how tooltip content aligns inside the box (left/center/right).
2. Padding – Add inner spacing so the content doesn’t feel cramped.
3. Background Color – Set a custom background to match or contrast your site.
4. Border Color / Width / Radius – Fine-tune the outline of the tooltip box.
5. Caret Size – Adjust the size of the little arrow pointing to the bar.
6. Title Color / Typography – Style the heading inside the tooltip.
7. Title Bottom Spacing – Add space between the title and body.
8. Body Color / Typography – Control the appearance of the detailed info shown in the tooltip.

Save and Preview

1. Once you’ve customized and styled your accordion, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired.

Troubleshooting

1. If chart doesn’t display: ensure label values and datasets match in count.
2. Check console for Chart.js related errors.
3. Make sure there are no conflicting scripts or caching issues.

Conclusion

The Line Chart widget gives you everything you need to display data in a professional, interactive, and visually appealing format. With full customization options and smooth integration with Elementor, it’s perfect for websites needing clear data representation — from business dashboards to educational platforms. Just insert your data, style it your way, and publish effortlessly!