This tutorial describes the scope of the Line Chart widget features and gives all the necessary guidelines about how to create and add a good-looking line chart to your website’s page using the JetElements plugin.
The JetElements plugin includes a Line Chart widget for Elementor, allowing one to display information in a line chart and place it anywhere on the website.
This guide includes all Line Chart widget features and shows how to create one step by step.
Widget Activation
First, one should check if the widget is activated in the settings. To do so, one should open WordPress Dashboard > Crocoblock > JetPlugins Settings > JetElements > Widgets & Extensions.
Here, the Line Chart toggle should be activated.
Line Chart Widget Settings
Now, the widget can be added to the needed page/template in the Elementor page builder. In the left-side menu, one should find the Line Chart widget and drag it to the page.
After adding the widget to the page, a default look of the chart will be displayed. To change the demo data and customize the chart, one should click on it to open the settings.
Among the available settings fields are:
- Labels — a field for the titles of the x-axis points. The labels should be separated by commas;
- Max Scale Axis Range — a field for the maximum value of the y-axis scale. If the data used for data lines has a value bigger than the maximum of the scale, the chart will go over the border and won’t be seen;
- Min Scale Axis Range — a field for the minimum value of the y-axis scale. If the data used for data lines has a value lower than the minimum of the scale, the chart will go over the border and won’t be seen;
- Step Size — a field for the number that defines the distance between y-axis points and the number of points on the axis. For example, if the Max Scale Axis Range is set to 100 and the Step Size to 20, there will be five points on the axis;
- Use JetEngine query — a toggle that becomes visible only if the JetEngine plugin is installed and activated. If active, one can use a query built with the Query Builder as a source for this widget’s content (in the Select Query field).
Each data line that needs to be displayed in the chart is represented by an item in the Chart Data section.
One can add as many items as needed by clicking the “Add Item” button or delete all but one. Every item has two tabs:
- Content — in the Label field, one chooses the name of the data line. Regarding the values on the y-axis, they should be placed in the Data field. Be aware that the number of values should match the number of labels entered in the Labels field. All additional values won’t be visible in the chart;
- Style — in this tab, one can choose the colors for the background, points, and border.
Once the items are added, it is time to proceed to the Settings section of the Content menu tab. Here, one can set the general chart’s features:
- Chart Height — the height of the chart. By default, the chart has the height of the section in which it is placed. However, it can be changed by moving this slider or inserting the height in pixels;
- Grid Lines and Labels — toggles that make the grid lines and axis labels visible. If the minimalistic design is preferred, one can turn them off, and the user will see only the data lines;
- (Comparison) Display — a toggle that, when enabled, adds the comparison to the tooltips. The previous value will be displayed alongside the current one in the tooltip that appears when hovering. One can also choose to show labels or some custom data;
- (Legend) Display — a toggle that allows defining whether the legend should be shown. Besides that, the legend’s Position and Alignment can be defined, or one can display the datasets in reverse order with the help of the corresponding toggle;
- Prefix — a field where the tooltips’ prefix can be set;
- Suffix — a field where the tooltips’ suffix can be set;
- Thousand Separator — a field where the thousand separator for the tooltips can be set.
Once customization is complete, one can proceed to the Style menu tab to adjust the appearance of the line chart, if necessary.
Finally, the changes can be saved, and the result can be checked on the front end.
That’s all about the Line Chart widget available as a part of the JetElements plugin for WordPress websites.
