Line Chart Widget of the Graphist plugin

Line Chart is a type of chart which displays information as a series of data points called ‘markers’ connected by straight line segments.

An example of the Graphist Line Chart

Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content Tab

On the Content tab of the Line Chart Elementor widget, you can manage the grid and graph settings, edit the title and description.

Title settings

Title settings of charts
  • Show title – the toggle to enable/disable the display of the title on the current chart.
  • Title – the field to input a title text.

Description settings

Description settings of charts
  • Show description – the toggle to enable/disable the display of the description on the current chart.
  • Description – the field to input a description text.
  • Show description after title – the toggle allows you to display the description after the title or if it off – after the graph.

Data type

The option that allows you to choose the type of data you want to use to build the chart. The available data types are:

  • Statistical – provides manual data entry for each line.
  • Dynamic – provides dynamic data input using the shortcode. Once you have selected Dynamic data in the Data type select Shortcode in the Dynamic Tags
Shortcode in Dynamic Tags settings

Click on the selected field and enter the Default shortcode

 [line_chart]
Default shortcode for dynamic data

The example of the shortcode with the default data:

add_shortcode('line_chart', 'line_chart_shortcode');

function line_chart_shortcode(){

$mas= [
     'labels' => ['Jan', 'Feb', 'Mar', 'Apr'], 
    'color' => ['red', 'black', 'blue', 'gray'], 
    'line_height' => [2, 2, 2, 3], 
    'line_width' => [2, 2, 2, 3], 
    'line_spacing' => [5, 0, 0, 5], 
    'point_width' => [7, 7, 7, 7], 
    'series' => [ 
       [12, 9, 7, 8, 5],
        [2, 1, 3.5, 7, 3], 
       [1, 3, 4, 5, 6, 13.5], 
       [3, 5, 6, 7, 8, 15] 
    ] 
   ]; 
   return json_encode($mas);
}

Add the sample of code to the function.php file of your theme and change the values according to your needs. You need to change the appropriate values ​​to create a shortcode with your own сhart values:

  • The ‘line_chart’ in the first line is the name of shortcode and you need to change it your unique name
  • labels‘ – names of labels along the x-axis. Сhange the parameters in brackets [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’] to yours.
  • color‘ – colors of the lines chart. Сhange the parameters in brackets [‘red’, ‘black’, ‘blue’, ‘gray’] to yours.
  • ‘line_height‘ – specify the line height if you want to use a dotted line. Сhange the parameters in brackets [2, 2, 2, 3] to yours.
  • ‘line_width’ – specify the line width. Сhange the parameters in brackets [2, 2, 2, 3] to yours.
  • line_spacing’ – specify the line space if you want to use a dotted line. Сhange the parameters in brackets [5, 0, 0, 5] to yours.
  • ‘point_width’ – specify the point width. Сhange the parameters in brackets [7, 7, 7, 7] to yours.
  • ‘series’ – specify point values ​​for each line of the chart. Values ​​for each line are wrapped in square brackets.

Number of lines and graph labels

Chart label list
  • The number of lines on the chart – the field to specify the number of lines to display on the chart. The number of lines depends on the number of data types used. Increasing the number, the new items are added automatically after the content settings.
  • Chart label list – add labels for the X-axis via the “Add Item” button. The items can be deleted, copied or ordered by dragging.

Chart Settings

  • Show grid X – the toggle to enable/disable the display of the grid along the X-axis
  • Show label X – the toggle to enable/disable the display of the labels for the X-axis. The labels can be added via the Chart label list.
  • Show grid Y – the toggle to enable/disable the display of the grid along the Y-axis.
  • Show label Y – the toggle to enable/disable the display of the labels for the Y-axis. The numerical step along the Y-axis is displayed automatically depending on the data you entered for each of a line.
  • Smoothing – specify how you want to smooth graph peaks. The smaller the number, the smoother the graph.
  • Chart сonventions – the toggle to enable/disable the display of the chart сonventions on the current chart.
  • Title graph сonventions – the field to input text for a chart сonventions title. Leave the field blank to display the chart сonventions without a title. The option is available if the Chart сonventions toggle is enabled.
  • Show animation – the toggle to enable/disable the animation for the current chart.
  • Line animation duration(ms) – specify the duration of the line animation as a separate element. The option is available if the Show animation toggle is enabled.
  • Line animation delay(ms) – specify the delay time for the line appearance. The option is available if the Show animation toggle is enabled.
  • Axis animation duration(ms) – specify the duration of the axis animation. The option is available if the Show animation toggle is enabled.
  • Axis animation delay(ms) – specify the delay time for the axis appearance. The option is available if the Show animation toggle is enabled.

Item Settings

To add a certain number of lines for the existing chart, you need to specify the corresponding number in the settings “The number of lines on the chart” Each new item is added as a new tab at the end of the Content section.

The tabs with line settings

The item has such options:

  • Item name – specify the data name you want to display with this line
  • Line style – the toggle to enable/disable the display of additional styles for the line. When it is enabled, you can set the Line width, Line height, Spacing, and Point width
  • Line color – specify color and transparency of the line using the color picker
  • Points on the chart – add points with values ​​for the current line using the “Add Item” button. The items can be deleted, copied or ordered by dragging.

Style Tab

On the styles tab, you can configure everything related to the visual style of the Line Chart title, description, and conventions elements: colors, typography, alignment, margins, and more.

Header

  • Typography – a group of settings controls everything about typography: family, font-size, font-weight, line-height and other parameters of the current section.
Typography settings
Typography settings of the Graphist
  • Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Text shadow settings of the Graphist
  • ColorSpecify the font color and opacity for the text of the current block using the color picker.
Font color settings of the Graphist
  • Alignment – manage the alignment( left, center, right ) of block text for desktop, tablet or mobile.
Text alignment of the Graphist
  • Margin – the setting allows managing the margin of the block in different units(px, em, %) for desktop, tablets or phones.
Margin settings of the Graphist

Description

  • Typography – a group of settings controls everything about typography: family, font-size, font-weight, line-height and other parameters of the current section.
  • ColorSpecify the font color and opacity for the text of the current block using the color picker.
  • Alignment – manage the alignment( justify, left, center, right ) of block text for desktop, tablet or mobile.
  • Margin – the setting allows managing the margin of the block in different units(px, em, %) for desktop, tablets or phones.

Conventions

  • Typography – a group of settings controls everything about typography: family, font-size, font-weight, line-height and other parameters of the current section.
  • Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
  • ColorSpecify the font color and opacity for the text of the current block using the color picker.
  • Alignment – manage the alignment( left, center, right ) of block text for desktop, tablet or mobile.
  • Margin – the setting allows managing the margin of the block in different units(px, em, %) for desktop, tablets or phones.

List conventions

  • Typography – a group of settings controls everything about typography: family, font-size, font-weight, line-height and other parameters of the current section.
  • ColorSpecify the font color and opacity for the text of the current block using the color picker.
  • Alignment – manage the alignment( left, center, right ) of block text for desktop, tablet or mobile.
  • Margin – the setting allows managing the margin of the block in different units(px, em, %) for desktop, tablets or phones.

Labels

  • Typography – a group of settings controls everything about typography: family, font-size, font-weight, line-height and other parameters of the current section.
  • Colorspecify the font color and opacity for the text of the labels using the color picker.

Advanced Tab

The settings in the advanced tab Worker Elementor widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor
Update page in the Elementor

Hosting for Elementor websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.

Was this article helpful to you?