{"id":35949,"date":"2023-02-15T12:50:23","date_gmt":"2023-02-15T12:50:23","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=features&#038;p=35949"},"modified":"2026-04-07T13:01:13","modified_gmt":"2026-04-07T13:01:13","slug":"jetengine-dynamic-charts-builder-overview","status":"publish","type":"features","link":"https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/","title":{"rendered":"Dynamic Charts Builder"},"content":{"rendered":"\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>From this tutorial, one can find out everything about <strong>Dynamic Charts<\/strong> functionality from the <em>JetEngine<\/em> plugin. With <strong>Dynamic Charts<\/strong>, the data can be loaded dynamically from the previously created query and displayed in charts, such as \u201cBar,\u201d \u201cLine,\u201d \u201cPie,\u201d \u201cGeo,\u201d \u201cHistogram,\u201d and many others.<\/p>\n\n\n\n<p>The path to enable the <strong>Dynamic Charts Builder<\/strong> module is <strong><em>WordPress Dashboard &gt; JetEngine &gt; JetEngine &gt; Modules &gt; External Modules<\/em><\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-builder-enabled.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-builder-enabled-1024x640.webp\" alt=\"jetengine external modules\" class=\"wp-image-45648\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-builder-enabled-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-builder-enabled-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-builder-enabled-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-builder-enabled-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-builder-enabled-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-builder-enabled.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>After enabling the switcher, a pop-up will appear saying that <em>JetEngine<\/em> is installing and activating a related plugin <strong>JetEngine &#8211; dynamic charts builder<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-builder-plugin-installation.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-builder-plugin-installation-1024x640.webp\" alt=\"dynamic charts builder plugin installation\" class=\"wp-image-45649\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-builder-plugin-installation-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-builder-plugin-installation-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-builder-plugin-installation-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-builder-plugin-installation-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-builder-plugin-installation-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-builder-plugin-installation.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>After installation, the pop-up message will change to the success state with a button saying, \u201c<strong>Go to Charts Builder<\/strong>\u201d. Upon clicking the button, a redirection to the <strong>Charts Builder<\/strong> page will occur.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/go-to-chart-builder.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/go-to-chart-builder-1024x640.webp\" alt=\"charts builder popup\" class=\"wp-image-45650\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/go-to-chart-builder-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/go-to-chart-builder-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/go-to-chart-builder-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/go-to-chart-builder-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/go-to-chart-builder-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/go-to-chart-builder.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The <strong>Charts Builder<\/strong> section can be accessed from the <em>JetEngine<\/em> dashboard for further exploration.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"general-settings\">General Settings<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>This tab allows configuring the basic chart settings, including naming the chart, selecting or creating a data query, and fetching data to preview available columns.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-select-query.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-select-query-1024x640.webp\" alt=\"jetengine charts builder general settings tab\" class=\"wp-image-45651\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-select-query-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-select-query-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-select-query-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-select-query-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-select-query-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-select-query.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Name<\/strong> \u2014 this feature allows adding the name of the chart;<\/li>\n\n\n\n<li><strong>Data Query<\/strong> \u2014 this feature allows choosing the query that was created before with the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/query-builder-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Query Builder<\/strong><\/a>;&nbsp;<\/li>\n\n\n\n<li><strong>Fetch the data <\/strong>\u2014 when clicked, this button allows fetching a sample of the data to find all possible columns and preview the table.<\/li>\n<\/ul>\n\n\n\n<p>In our case scenario, we\u2019re going to build a women&#8217;s fashion price chart. For our chart, we\u2019re picking the query \u201cWoman Fashion Sales\u201d. This particular query is being used in this case, but depending on the context, another query is required. It\u2019s important to ensure that the query creation process is completed before moving forward with building the chart.&nbsp;<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">\"<strong>Re-fetch Data<\/strong>\" won\u2019t work with WooCommerce.<\/p><\/div><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"chart-type\">Chart Type<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>In this tab, the chart type can be selected from the available options, such as \u201cBar,\u201d \u201cLine,\u201d \u201cPie,\u201d \u201cGeo,\u201d \u201cHistogram,\u201d and many others. In our case, we\u2019ll choose the chart type \u201cColumns.\u201d<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-type.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-type-1024x640.webp\" alt=\"jetengine charts builder chart type tab\" class=\"wp-image-45652\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-type-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-type-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-type-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-type-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-type-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-type.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"columns\">Columns<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>Here, one can add the required data for the chart. It will work similarly to the meta fields.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">The first column is used for chart group labels. All following columns are used for chart data.<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-columns-tab.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"639\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-columns-tab-1024x639.webp\" alt=\"jetengine charts builder columns tab\" class=\"wp-image-45653\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-columns-tab-1024x639.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-columns-tab-300x187.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-columns-tab-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-columns-tab-1536x959.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-columns-tab-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/charts-builder-columns-tab.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Column Name <\/strong>\u2014 this feature allows one to set the name of the column;<\/li>\n\n\n\n<li><strong>Data Source <\/strong>\u2014 this feature allows choosing data sources for the column. Two options are available: \u201cPost\/Term\/User\/Object Field\u201d and \u201cMeta Field.\u201d<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/columns-editing.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/columns-editing-1024x640.webp\" alt=\"jetengine charts builder columns editing\" class=\"wp-image-45654\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/columns-editing-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/columns-editing-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/columns-editing-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/columns-editing-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/columns-editing-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/columns-editing.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Select Field <\/strong>\u2014 this feature allows selecting a field from the current objects to show in this column;<\/li>\n\n\n\n<li><strong>Filter Column Output<\/strong> \u2014 a feature that is deactivated by default. When toggling the switcher, one can change how information is shown in a specific column. For example, if a column displays dates, this feature can automatically change the format of those dates to present them differently. When activated, an additional field will appear:\n<ul>\n<li><strong>Filter Callback<\/strong> \u2014 this feature allows one to pick an option from the dropdown to choose the custom function to modify or adjust the data in a column;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Data Type<\/strong> \u2014 this feature allows converting column data into the selected type; choose between \u201cDefault,\u201d \u201cEnsure number,\u201d and \u201cEnsure string.\u201d<\/li>\n<\/ul>\n\n\n\n<p>For our column chart, we\u2019re going to create three columns:<\/p>\n\n\n\n<ul>\n<li>First column \u2014 <strong>Item name<\/strong>:\n<ul>\n<li><strong>Column Name <\/strong>\u2014 \u201dItem name\u201d;<\/li>\n\n\n\n<li><strong>Data Source <\/strong>\u2014 \u201cPost\/Term\/User\/Object Field\u201d;<\/li>\n\n\n\n<li><strong>Select Field <\/strong>\u2014 \u201dTitle\u201d;<\/li>\n\n\n\n<li><strong>Data Type <\/strong>\u2014 \u201dEnsure string\u201d;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Second column \u2014 <strong>Item price<\/strong>:\n<ul>\n<li><strong>Column Name <\/strong>\u2014 \u201dItem price\u201d;<\/li>\n\n\n\n<li><strong>Data Source <\/strong>\u2014 \u201cPost\/Term\/User\/Object Field\u201d;<\/li>\n\n\n\n<li><strong>Select Field <\/strong>\u2014 \u201dPlain Price\u201d;<\/li>\n\n\n\n<li><strong>Data Type <\/strong>\u2014 \u201dEnsure string\u201d;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Third column \u2014 <strong>Item sale price<\/strong>:\n<ul>\n<li><strong>Column Name <\/strong>\u2014 \u201dItem sale price\u201d;<\/li>\n\n\n\n<li><strong>Data Source <\/strong>\u2014 \u201cPost\/Term\/User\/Object Field\u201d;<\/li>\n\n\n\n<li><strong>Select Field <\/strong>\u2014 \u201dPlain Sale Price\u201d;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Data Type <\/strong>\u2014 \u201dEnsure string\u201d.<\/li>\n<\/ul>\n\n\n\n<p>Once the settings are configured, the \u201c<strong>Reload Preview<\/strong>\u201d button can be pressed to draw the chart.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-charts-builder-chart-preview.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-charts-builder-chart-preview-1024x640.webp\" alt=\"jetengine charts builder chart preview\" class=\"wp-image-45655\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-charts-builder-chart-preview-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-charts-builder-chart-preview-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-charts-builder-chart-preview-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-charts-builder-chart-preview-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-charts-builder-chart-preview-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-charts-builder-chart-preview.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">To see the preview, you\u2019ll need to set the <strong>Width<\/strong> for the chart in the <strong>Chart Styles<\/strong> section.<\/p><\/div><\/div>\n\n\n\n<p>To display fewer items in the chart, one can use the <strong>Pagination<\/strong> settings from the <strong>Query Builder<\/strong>. <strong>Query Builder <\/strong>is accessible via the path: <strong><em>WordPress Dashboard &gt; JetEngine &gt; Query Builder<\/em><\/strong>.<\/p>\n\n\n\n<p>In the list of available queries, there is an option that corresponds to the one selected on the <strong>General Settings<\/strong> tab of the <strong>Chart Builder,<\/strong> which can be edited.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-editing-the-query.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-editing-the-query-1024x640.webp\" alt=\"query builder list of queries\" class=\"wp-image-45656\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-editing-the-query-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-editing-the-query-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-editing-the-query-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-editing-the-query-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-editing-the-query-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-editing-the-query.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>In the <strong>WC Product Query,<\/strong> the appropriate <strong>Limit<\/strong> can be set in the <strong>Pagination<\/strong> tab.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-pagination-limit-10.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-pagination-limit-10-1024x640.webp\" alt=\"jetengine query builder pagination\" class=\"wp-image-45657\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-pagination-limit-10-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-pagination-limit-10-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-pagination-limit-10-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-pagination-limit-10-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-pagination-limit-10-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/query-builder-pagination-limit-10.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>The <strong>Pagination<\/strong> determines how many items (products, posts, appointments, etc.) are shown on each page. For example, when set to \u201c10,\u201d one will see ten products per page.<\/p>\n\n\n\n<p>We\u2019ve set the limit to \u201c10,\u201d and as a result, we\u2019ll see only ten products in the chart preview.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-preview-with-pagination-limit.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-preview-with-pagination-limit-1024x640.webp\" alt=\"jetengine charts builder with pagination enabled preview\" class=\"wp-image-45658\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-preview-with-pagination-limit-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-preview-with-pagination-limit-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-preview-with-pagination-limit-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-preview-with-pagination-limit-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-preview-with-pagination-limit-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-preview-with-pagination-limit.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"chart-config\">Chart Config<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>In this section, the appearance and behavior of the chart are customizable, including options for the legend position, stacking, and advanced settings through JSON for detailed adjustments.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-config-animation.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-config-animation-1024x640.webp\" alt=\"jetengine chart builder chart config tab\" class=\"wp-image-45659\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-config-animation-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-config-animation-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-config-animation-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-config-animation-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-config-animation-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-config-animation.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Legend<\/strong> \u2014 this feature allows one to set the chart legend position to the right or to the left or turn it off;<\/li>\n\n\n\n<li><strong>Is Stacked<\/strong> \u2014 this feature allows to combine chart elements into a stacked format;<\/li>\n\n\n\n<li><strong>Advanced Options <\/strong>\u2014 a feature that is deactivated by default. When the toggle is enabled, it allows one to set more configuration options manually. After enabling this feature, the <strong>Set Advanced Options<\/strong> field will appear. Here, one can set advanced options for the chart in JSON format. Please check the <a href=\"https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/columnchart#configuration-options\" target=\"_blank\" rel=\"noreferrer noopener\">Allowed options list<\/a> to see what can be added. We\u2019ll add the following:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"backgroundColor\": {\n    \"fill\": \"#FFF\",\n    \"strokeWidth\": 5\n  },\n  \"animation\": {\n    \"duration\": 3000,\n    \"easing\": \"linear\",\n    \"startup\": true\n  }\n}<\/code><\/pre>\n\n\n\n<p>To check the results, the \u201c<strong>Reload Preview<\/strong>\u201d button should be pressed.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video controls src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-animation-demo.webm\"><\/video><\/figure>\n\n\n\n<p>Without the <strong>Advanced Option<\/strong>, the chart can not be animated.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"chart-styles\">Chart Styles<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>In this tab, one can adjust the width and set the height for the chart in pixels.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-styles.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-styles-1024x640.webp\" alt=\"jetengine chart styles tab\" class=\"wp-image-45661\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-styles-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-styles-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-styles-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-styles-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-styles-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-styles.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Width<\/strong> \u2014 this feature allows setting the width of the chart canvas in pixels;<\/li>\n\n\n\n<li><strong>Height<\/strong> \u2014 this feature allows setting the height of the chart canvas in pixels.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dynamic-chart-widget-in-elementor\">Dynamic Chart Widget in Elementor <\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>There\u2019s an opportunity to display the chart on any page with a <strong>Dynamic Chart<\/strong> widget. The desired page should be accessed, with the \u201c<strong>Edit with Elementor\u201d<\/strong> clicked. The <strong>Dynamic Chart<\/strong> widget can be found in the list of widgets using the search function and added to the page.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor-1024x640.webp\" alt=\"dynamic chart widget elementor\" class=\"wp-image-45662\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>In the <strong>Chart<\/strong> field, one can choose the chart that was created before.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor-editing.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor-editing-1024x640.webp\" alt=\"dynamic chart widget elementor preview\" class=\"wp-image-45663\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor-editing-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor-editing-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor-editing-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor-editing-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor-editing-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-widget-elementor-editing.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dynamic-chart-block-in-gutenberg\">Dynamic Chart Block in Gutenberg <\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>One can also add the <strong>Dynamic Chart<\/strong> widget in Gutenberg. The necessary page can be opened, and the \u201c<strong>plus<\/strong>\u201d icon used to locate the <strong>Dynamic Chart<\/strong> block.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block-1024x640.webp\" alt=\"dynamic chart widget gutenberg\" class=\"wp-image-45664\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>After that, the block can then be added to the selected section for further customization. In the block\u2019s settings, one needs to choose the <strong>Chart<\/strong> that was created before.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block-2.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block-2-1024x640.webp\" alt=\"dynamic chart widget gutenberg preview\" class=\"wp-image-45665\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block-2-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block-2-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block-2-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block-2-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block-2-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dymanic-chart-gutenberg-block-2.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Let\u2019s take a look at the chart on the front end.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-gutenberg-preview.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-gutenberg-preview-1024x640.webp\" alt=\"dynamic chart widget gutenberg front-end preview\" class=\"wp-image-45666\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-gutenberg-preview-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-gutenberg-preview-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-gutenberg-preview-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-gutenberg-preview-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-gutenberg-preview-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/dynamic-chart-gutenberg-preview.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<p>That\u2019s all one needs to know about how to use <strong>Charts Builder<\/strong> from the <em>JetEngine<\/em> plugin to display data on the WordPress website with the help of charts.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This overview will describe the general settings of Dynamic Charts and how to create and customize them.<\/p>\n","protected":false},"author":9,"template":"","format":"standard","builder-category":[],"feature-category":[534],"article-category":[441],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Dynamic Charts Builder \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover the functionality of the WordPress dynamic Charts Builder and learn how to create and customize beautiful charts easily with the JetEngine plugin.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dynamic Charts Builder \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover the functionality of the WordPress dynamic Charts Builder and learn how to create and customize beautiful charts easily with the JetEngine plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-07T13:01:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-builder-enabled-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/\",\"name\":\"Dynamic Charts Builder \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-02-15T12:50:23+00:00\",\"dateModified\":\"2026-04-07T13:01:13+00:00\",\"description\":\"Discover the functionality of the WordPress dynamic Charts Builder and learn how to create and customize beautiful charts easily with the JetEngine plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Features\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/features\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dynamic Charts Builder\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dynamic Charts Builder \u2014 JetEngine | Crocoblock","description":"Discover the functionality of the WordPress dynamic Charts Builder and learn how to create and customize beautiful charts easily with the JetEngine plugin.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/","og_locale":"en_US","og_type":"article","og_title":"Dynamic Charts Builder \u2014 JetEngine | Crocoblock","og_description":"Discover the functionality of the WordPress dynamic Charts Builder and learn how to create and customize beautiful charts easily with the JetEngine plugin.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/","og_site_name":"Help Center","article_modified_time":"2026-04-07T13:01:13+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/chart-builder-enabled-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/","url":"https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/","name":"Dynamic Charts Builder \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-02-15T12:50:23+00:00","dateModified":"2026-04-07T13:01:13+00:00","description":"Discover the functionality of the WordPress dynamic Charts Builder and learn how to create and customize beautiful charts easily with the JetEngine plugin.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/features\/jetengine-dynamic-charts-builder-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Features","item":"https:\/\/crocoblock.com\/knowledge-base\/features\/"},{"@type":"ListItem","position":3,"name":"Dynamic Charts Builder"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/features\/35949"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/features"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/features"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=35949"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=35949"},{"taxonomy":"feature-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/feature-category?post=35949"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=35949"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}