Charts Widget Tutorial

Intro

Premium Charts Widget allows you to create amazing data charts inside Elementor. You can create almost any kind of charts with tons of customization options. 

Click here to check Premium Charts Widget demo.

Requirements:

• You will need Premium Addons PRO plugin installed and activated on your website.
• Also, make sure that this widget/addon is enabled so you can find it in the Elementor editor. Check this article to know how to do that.
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.

Key Features

• Premium Charts
• X-Axis
• Y-Axis
• Title
• Advanced Settings

1. Premium Charts

• Data Type: Select data source
  • Custom: Add chart data from widget settings.
  • CSV File: Import chart data from CSV file.
• Layout: Select one of the following chart layouts. You can preview the layouts in the editor before applying the effect.
  • Line: Refers to “Line Chart”.
  • Bar: Refers to “Bar Chart”.
  • Horizontal Pie: Refers to “Horizontal Pie Chart”.
  • Pie: Refers to “Pie Chart”.
  • Radar: Refers to “Radar Chart”.
  • Doughnut: Refers to “Doughnut Chart”.
  • Polar Area: Refers to “Polar Area Chart”.
• File Type: Select how to import CSV file: upload to your website or from a remote file on google drive.
• Data Separator: Select the separator symbol in your imported file.
• Upload CSV File: Upload and select CSV file to your WP media.
• File URL: Insert CSV link to import data remotely.

2. X-Axis

• Show Axis Label: Enable or disable the x-axis label.
• Label: This option will appear when you enable the “X-Axis Label”. Here you can add the text that will be shown as an x-axis label.
• Data Labels: Add the text that will be shown as data labels for the x-axis, separated with the commas “,”.
• Show Grid Lines: You can show or hide the X-axis grid lines.
• Begin at Zero: Enable this if you want to start the X-axis labels from “0”.
• Label Rotation: You can rotate the x-axis labels by entering a value or you can just drag the slide to the right.
• Column Width: Set column width for bar chart.

3. Y-Axis

• Show Axis Label: Enable or disable the y-axis label.
• Label: This option will appear when you enable the “Y-Axis Label”. Here you can add the text that will be shown as a y-axis label.
• Data: Add the data items to be displayed in the chart.
  • Item #1
    • Title: Enter the dataset title.
    • Data: Enter the values of the data for the y-axis, separated with commas “,”.
    • URLs: Enter URLs for each Dataset separated with ‘ , ‘
    • First Fill Color: Select the first fill color for the chart.
    • Second Fill Color: Select the second fill color for the chart.
    • Fill Colors: Enter the colors manually separated with a comma, for Pie and Doughnut Charts.
    • Border Width: Select the border width for the bars in the selected chart.
    • Border Color: Choose the border color of the bars in the selected chart.
• Add Item: You can multiple items to display on the y-axis.
• Data Type: Select the data type between linear and algorithmic.
• Show Grid Lines: Show or hide y-axis grid lines.
• Begin at Zero: Enable this if you want to start the y-axis data from “0”.
• Open Links in a New Tab: Enable this if you want to open the links in the new tab.

4. Title

• Title: Enable or disable the chart title.
• Title Text: Enter the text that will be displayed as a chart title.
• HTML Tag: Select the HTML tag for the title, you can choose between H1 to H6.
• Position: Select the title’s position as you can select between top or bottom.
• Alignment: Align the title as you want as you can choose the left, center or right alignment.

5. Advanced Setting

• Minimum Value: Set Y-axis minimum value, this will be overriden if data has a smaller value
• Maximum Value: Set the y-axis maximum value, this will be overridden if the data has a larger value.
• Step Size: Define fixed step size for the scale
• Show Legend: By enabling this option, you will help your readers understand the charted data. Enable or disable the chart legend using this option.
• Legend Position: Select the legend position from the top, right, bottom and left.
• Reverse: You can enable or disable the legend data reverse option.
• Show Values on Hover: Enable or disable to show values on hover.
• Convert Values to Percent: This option will appear when you enable “Show Values on Hover”. You can enable it to convert the values into percentages when hover.
• Mode: You can choose to display different values when hover, you can choose from the point, linear, dataset, X & Y.
• Animation Duration (msec): Set the animation duration in milliseconds.
• Animation: Add the animation style to the chart. You can choose from the following options:
  • Linear
  • Ease In Quad
  • Ease Out Quad
  • Ease In Out Quad
  • Ease In Cubic
  • Ease Out Cubic
  • Ease In Out Cubic
  • Ease In Quart
  • Ease Out Quart
  • Ease In Out Quart
  • Ease In Quint
  • Ease Out Quint
  • Ease In Out Quint
  • Ease In Sine
  • Ease Out Sine
  • Ease In Out Sine
  • Ease In Expo
  • Ease Out Expo
  • Ease In Out Cubic
  • Ease In Circle
  • Ease Out Circle
  • Ease In Out Circle
  • Ease In Elastic
  • Ease Out Elastic
  • Ease In Out Elastic
  • Ease In Back
  • Ease Out Back
  • Ease In Out Back
  • Ease In Bounce
  • Ease Out Bounce
  • Ease In Out Bounce
• Load Chart On: Select load chat when the page loaded or when it enter the view port.
• Data Format Locale: Use this to format strings into specific locale format: English, French, Danish, German and Arabic.

Style

• General
• Title
• X-Axis
• Y-Axis
• Legend

1. General

• Height: Set the graph height in pixels.
• Background Type: You have two options for the background, classic and gradient.
  • Classic
    • Color: You can choose the background color.
    • Image: You can upload an image or select from the media library.
  • Gradient
    • Color: Choose the first background color.
    • Location: Set the location of the first background color.
    • Select Color: Choose the second background color.
    • Location: Set the location of the second background color.
    • Type: Choose the border type. The available options are Linear and Radial.
    • Position: If you choose radial type, this field will appear. You can select the position from the following options:
      • Center Center
      • Center Left
      • Center Right
      • Top Center
      • Top Left
      • Top Right
      • Bottom Center
      • Bottom Left
      • Bottom Right
• Border Type: Select between the following border types, as well as the color and the width of the border on each side of the chart container:
  • None
  • Solid
  • Double
  • Dotted
  • Dashed
  • Groove
• Border Radius: Increasing the border-radius will add circular corners to the chart container. You can adjust the border-radius in pixels, % or em.
• Box Shadow: Add a shadow around the chart container. Adjust the shadow using the following settings:
  • Horizontal Position
  • Vertical Position
  • Blur
  • Spread
  • Position: Outline or Inset
• Margin: Margin is the space between the chart container and the rest of the content. Adjust the margins in pixels, em or %.
• Padding: Padding is the space between the chart and the edge of the chart’s container. Increasing the padding will make the background larger. Adjust the padding using pixels, em or %.

2. Title

• Color: Add color to the Chart’s title.
• Typography: Adjust the font settings.
• Background Type: You have two options for the background, classic and gradient.
• Border Type: You have the ability to make the title look framed by adding a border to it.
• Border Radius: Increasing the border-radius will add circular corners to the title text. You can adjust the border-radius in pixels, % or em.
• Text Shadow: Add a shadow to the title text.
• Margin: Margin is the space between the title text and the rest of the content. Adjust the margins in pixels, em or %.
• Padding: Padding is the space between the title and the edge of the container. Increasing the padding will make the background larger. Adjust the padding using pixels, em or %.

3. X-Axis

• Axis Label: Select the color and size of the axis label.
• Data Label: Select the color and size of the data label.
• Grid: A grid is a space between 2 adjacent grid lines. Select the color of the grid from here.

4. Y-Axis

• Axis Label: Select the color and size of the axis label.
• Data: Select the color and size of the data.
• Grid: A grid is a space between 2 adjacent grid lines. Select the color of the grid from here.

5. Legend

• Color: Adjust the label color.
• Size: Resize the legend according to your needs.
• Item Width: Adjust legend width.