Advanced Chart

Advanced Chart

Block Used
Advanced Charts
Knowledge Required
Novice

Use this block to show your data in multiple ways using the collection of the most popular & advanced charts in Gutenberg page builder. You have options to showcase simple, analytics, three-dimensional and even more complex data using this Gutenberg block of charts & graphs.

Just plain content can boring, adding these charts will make your website much more interesting and you can add value.

Pro tip
Showing real statistics/data using plain numbers can be monotonous. Why not use these interactive and cool Pie Charts instead? Users engage with visual stuff and understand it way more better.

How to use the Advanced Charts Block of The Plus Addons For Gutenberg

The Advanced Charts block comes with 6 different chart layouts. Let’s understand how to use blocks in the tutorial below.

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Advanced Chart into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Advanced Chart after “/” sign, eg.“/Advanced Chart”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Chart

Select Chart

Select the type of chart you want to display. We offer 6 different types of charts to choose from. They are Line, Bar, Radar, Doughnut & Pie, Polar Area, and Bubble. You can check all these charts in our demo.

Label Values

Enter the Label Values here. For Eg: Jan | Feb | March or 2018 | 2019 | 2020

Dataset

Chart Data Boxes

Click on the Add item button. Then, start adding content to the data boxes. You are given the following options:

Add Label

Add Label to your charts which will be displayed on the top right,

Data

Add data where you want the chart to show its peak and trough.

Multiple Dot Background

Enable or Disable the dot background using the toggle button.

Dot Background

Add or change the background color of each dot. For eg: #ffa500 | #008000 | #0000ff

Multiple Dot Border

Enable or Disable the dot border using the toggle button.

Dot Border Color

Add or change the color of each border. For eg: #ffa500 | #008000 | #0000ff

Fill (Works only Line and Radar chart)

Enable or Disable to use the Fill Color option. It fills the chart with your selected colors above.

Border Dash

Enable or Disable to add bordered affect your chart peak and trough borders.

2. Style

Grid Lines

Grid Lines

Enable and set the Grid lines here. If you don’t want Grid Lines, disable it.

X Axis Tab

Set the cosmetic options for X Axis.

Grid Color X Axis

Set the color of the X Axis for your chart.

Zero Line Color

Set the color of the Zero Line for your chart.

Draw Border

Enable this option to show grid lines on the chart area.

Draw Border On Chart Area

Enable this option to show vertical grid lines on the chart area.

Y Axis Tab

Similarly, set the cosmetic options for the Y Axis.

Labels

Labels

Use the toggle buttons to enable or disable the label.

Label Color

If you decide to show the labels, the color option pops up. Add a color to your label here.

Label Size

Adjust the size of the labels here.

Labels

Labels

Use the toggle buttons to enable or disable the legends.

Color

Change or add color for labels.

Size

Adjust the size of the labels.

Position

Align the positions of the labels.

Alignment

Align the position of the labels.

Custom Point

Custom Point Styles

Enable to customize your dot styles.

Point Styles

We have provided various styles to choose from. Select any one style as per your preference.

Background Color

Add a background color to your point styles.

Point Border Color

Set the color of your point border.

Point Border Width

Set the width using the slider.

Point Normal Size / Point Hover Size

Set the size using the slider.

Tooltip

Tooltip

Enable to add a tooltip to the chart.

Event

Select the event of your tooltip. It can be a hover or click event.

Font Size, Title Color, Body Font Color and Tooltip Background

Change the appearance of your tooltip using these cosmetic options. You can adjust the size, change colors and add a background.

Extra Options

Smooth

Enable this option to see a smooth transition effect of the charts when they load.

Aspect Ratio

Enable the Aspect Ratio here.

Maintain Aspect Ratio

Enable to maintain an Aspect Ratio of the chart based on the width and height.

Animation

Set the Animation type here. You can select from a range of various animations offered.

Duration

Increase or Decrease the duration of the animation here.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.