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.
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.
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.
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.
Enter the Label Values here. For Eg: Jan | Feb | March or 2018 | 2019 | 2020
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 to your charts which will be displayed on the top right,
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.
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.
Enable or Disable to add bordered affect your chart peak and trough borders.
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.
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.
Use the toggle buttons to enable or disable the label.
If you decide to show the labels, the color option pops up. Add a color to your label here.
Adjust the size of the labels here.
Use the toggle buttons to enable or disable the legends.
Change or add color for labels.
Adjust the size of the labels.
Align the positions of the labels.
Align the position of the labels.
Custom Point Styles
Enable to customize your dot styles.
We have provided various styles to choose from. Select any one style as per your preference.
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.
Enable to add a tooltip to the chart.
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.
Enable this option to see a smooth transition effect of the charts when they load.
Enable the Aspect Ratio here.
Maintain Aspect Ratio
Enable to maintain an Aspect Ratio of the chart based on the width and height.
Set the Animation type here. You can select from a range of various animations offered.
Increase or Decrease the duration of the animation here.