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.

Key Features

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

1. Premium Charts

  • 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”
    • Doughnut: Refers to “Doughnut Chart”
    • Polar Area: Refers to “Polar Area Chart”
The Available Layouts in Premium Charts Widget for Elementor

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.
X-Axis Label and Data Labels

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 the dataset for each URL separated with the comma “,”.
      • 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.
Y-Axis Label Settings

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.
Premium Charts Widget Title Option

5. Advanced Setting

  • Maximum Value: Set the y-axis maximum value, this will be overridden if the data has a larger value.
  • 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: 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
Elementor Charts Widget Advanced Settings

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 charts container. Increasing the padding will make the background larger. Adjust the padding using pixels, em or %.
Premium Charts General Styling Settings

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 %.
Chart’s Title Styling Settings

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.
Premium Charts Widget for Elementor Page Builder
X-Axis Customization Options

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.
Charts Widget Tutorial for Elementor
Y-Axis Customization Options

5. Legend

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