The chart is available as Content-Type in Element Block.
After adding to the page, select one of the available presets. There are more than 20 presets because Chart content is based on Apex Chart script
You have access to direct chart Raw data in JSON format, and this field also has validation for JSON format. So, you can edit data directly in the field and then click on the Initialize button so the chart will grab this data. You can use any data from Apex Documentation.
Additionally, the UI for values is automatically generated based on data, so you can also use value fields to add data.
When you click on the Initialize button, the plugin will automatically detect data values and create also Dynamic attributes
Screenshot
Dynamic attributes will be created based on the data type of the chart. For example, if you have one series, data-series-0 will be added. You must put your data in the same format. Apex Chart always uses arrays in their format, so dynamic attributes automatically convert to arrays if you use comma-separated values.
Dynamic attributes can also be connected to dynamic site data. Check the video above for an example of how it’s connected to an ACF text field.
Please, note that ApexChart has several types of data, check them in documentation. You can see which data is used for specific chart types in the Raw data area. If you have their data: [23, 34, 12, 54, 32, … , 43] – then you can use comma-separated values. But if you have their data: [{ x: 20, y: 54 }, { x: 30, y: 66 }], then your dynamic field must also return an array with repeatable data where keys are “x” and “y”
Smart loading
The chart library is heavy, but Greenshift uses smart loading. The chart will load only after some user interactions. It’s also recommended to keep a static height in the block. You can also enable the immediate Loading option.
Watermarks
You can add your own watermark image to the chart. If a user downloads the chart, the image will be added to it.
It’s important to use base encoded watermark if you want to have it inside the downloaded image, otherwise, watermark will be visible on-site but not included in the downloaded image.
You can use the service For encoding. After uploading the image, click to show Code and copy the raw code. This is what you need to add to the path
Screenshot
You can also use Title to add text to chart. It will be also included in downloadable image
Mobile options
You can add different options to chart for each breakpoint, but we also added most common option “mobile height” for quick adding mobile height.
Download Button
Option to download chart as image or SVG is available in toolbar of chart. But you can also make custom button to download chart. For this, copy special class from options and add this class to any element on page, this element will be used as download button for chart
Import from CSV and Google Sheets
You can import data from CSV links or from google sheet. Just use next option
Screenshot
If you want to use Google Sheets, share the file with the public in File-Share. You don’t need to give edit capability; just view capability is enough.
After this, select the Chart type. Depending on your CSV structure, the plugin will try to convert it to Chart data.
Currently, next are supported:
Chart type 1
Each Row will be used as Series data. The first Column will be used as the Name of Serie. Each column will be used as a point of data, and the name in the first row will be used for labels on the horizontal axis
This is example CSV of such structure. Example of chart. This type is good for lines, area charts, heatmaps
Screenshot
Chart Type 2
This type will use the opposite – it will use first column As labels for horizontal axis and each next column will be used as series
Greenshift has inner API endpoints that can be used for the dynamic loading of CSV files. So, if you change your Google sheet or data in a CSV file, it will also be reflected in the chart.
You need to enable the Dynamic Loading option for this. This will update the chart on each page reload. You can also enable caching (put the number of caches in seconds; one day will be 86400 seconds).
<!-- wp:paragraph -->
<p>We have a Chart addon that can now be connected to dynamic data via <a href="https://greenshiftwp.com/dynamic-attributes/" data-type="post" data-id="5067">Dynamic Fields</a>, including <a href="https://greenshiftwp.com/api-connector/" data-type="post" data-id="5574">API Connector</a></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><span style="box-sizing: border-box; margin: 0px; padding: 0px;">The chart is available as Content-Type in <a href="https://greenshiftwp.com/element-tag-block/" target="_blank">Element Block</a>.</span> </p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/video {"id":"gsbp-94a9258","videoid":5669,"src":"https://greenshiftwp.com/wp-content/uploads/2025/03/charts.mp4","provider":"video","postDate":"2025-03-01T16:51:37+00:00"} -->
<div class="wp-block-greenshift-blocks-video gs-video video gspb_video-id-gsbp-94a9258" id="gs-video-gsbp-94a9258"><div class="gs-video-wrapper" itemscope><div class="gs-video-element" data-src="https://greenshiftwp.com/wp-content/uploads/2025/03/charts.mp4" data-autoplay="false" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-poster="" data-provider="video" data-overlay="false" data-lightbox="false"></div></div></div>
<!-- /wp:greenshift-blocks/video -->
<!-- wp:paragraph -->
<p>After adding to the page, select one of the available presets. There are more than 20 presets because Chart content is based on <a href="https://apexcharts.com/docs/chart-types/line-chart/">Apex Chart script</a></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>You have access to direct chart Raw data in JSON format, and this field also has validation for JSON format. So, you can edit data directly in the field and then click on the Initialize button so the chart will grab this data. You can use any data from Apex Documentation.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Additionally, the UI for values is automatically generated based on data, so you can also use value fields to add data.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>When you click on the Initialize button, the plugin will automatically detect data values and create also Dynamic attributes</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5670,"width":"300px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2025/03/[email protected]" alt="" class="wp-image-5670" style="width:300px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>Dynamic attributes will be created based on the data type of the chart. For example, if you have one series, data-series-0 will be added. You must put your data in the same format. Apex Chart always uses arrays in their format, so dynamic attributes automatically convert to arrays if you use comma-separated values.</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/element {"id":"gsbp-d207ef8","type":"chart","localId":"gsbp-d207ef8","dynamicAttributes":[{"name":"data-series-numbers","value":"","dynamicEnable":false},{"name":"data-series-0","value":"","dynamicEnable":false},{"name":"data-series-1","value":"","dynamicEnable":false}],"chartData":{"options":"{\n \u0022series\u0022: [\n {\n \u0022name\u0022: \u0022series1\u0022,\n \u0022data\u0022: [\n 31,\n 40,\n 28,\n 51,\n 42,\n 109,\n 100\n ]\n },\n {\n \u0022name\u0022: \u0022series2\u0022,\n \u0022data\u0022: [\n 11,\n 32,\n 45,\n 32,\n 34,\n 52,\n 41\n ]\n }\n ],\n \u0022chart\u0022: {\n \u0022height\u0022: \u0022350px\u0022,\n \u0022type\u0022: \u0022area\u0022\n },\n \u0022dataLabels\u0022: {\n \u0022enabled\u0022: false\n },\n \u0022stroke\u0022: {\n \u0022curve\u0022: \u0022smooth\u0022\n }\n}","init":true}} -->
<div data-chart-data=""{\n \"series\": [\n {\n \"name\": \"series1\",\n \"data\": [\n 31,\n 40,\n 28,\n 51,\n 42,\n 109,\n 100\n ]\n },\n {\n \"name\": \"series2\",\n \"data\": [\n 11,\n 32,\n 45,\n 32,\n 34,\n 52,\n 41\n ]\n }\n ],\n \"chart\": {\n \"height\": \"350px\",\n \"type\": \"area\"\n },\n \"dataLabels\": {\n \"enabled\": false\n },\n \"stroke\": {\n \"curve\": \"smooth\"\n }\n}"" data-chart-id="gsbp-d207ef8" data-series-numbers="" data-series-0="" data-series-1=""></div>
<!-- /wp:greenshift-blocks/element -->
<!-- wp:paragraph -->
<p>Dynamic attributes can also be connected to dynamic site data. Check the video above for an example of how it's connected to an ACF text field.</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/infobox {"id":"gsbp-7b59544"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-7b59544" id="gspb_infoBox-id-gsbp-7b59544"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>Please, note that ApexChart has several types of data, check them in <a href="https://apexcharts.com/docs/series/">documentation</a>. You can see which data is used for specific chart types in the Raw data area. If you have their data: [23, 34, 12, 54, 32, ... , 43] - then you can use comma-separated values. But if you have their data: [{ x: 20, y: 54 }, { x: 30, y: 66 }], then your dynamic field must also return an array with repeatable data where keys are "x" and "y"</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="smart-loading">Smart loading</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>The chart library is heavy, but Greenshift uses smart loading. The chart will load only after some user interactions. It's also recommended to keep a static height in the block. You can also enable the immediate Loading option.</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="watermarks">Watermarks</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>You can add your own watermark image to the chart. If a user downloads the chart, the image will be added to it. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>It's important to use base encoded watermark if you want to have it inside the downloaded image, otherwise, watermark will be visible on-site but not included in the downloaded image.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>You can use the service <a href="https://www.base64-image.de/">For encoding</a>. After uploading the image, click to show Code and copy the raw code. This is what you need to add to the path</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5672,"width":"500px","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2025/03/[email protected]" alt="" class="wp-image-5672" style="width:500px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>You can also use Title to add text to chart. It will be also included in downloadable image</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="mobile-options">Mobile options</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>You can add different options to chart <a href="https://apexcharts.com/docs/options/responsive/">for each breakpoint</a>, but we also added most common option "mobile height" for quick adding mobile height. </p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="download-button">Download Button</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Option to download chart as image or SVG is available in toolbar of chart. But you can also make custom button to download chart. For this, copy special class from options and add this class to any element on page, this element will be used as download button for chart</p>
<!-- /wp:paragraph -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="import-from-csv-and-google-sheets">Import from CSV and Google Sheets</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>You can import data from CSV links or from google sheet. Just use next option</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5698,"width":"300px","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2025/03/[email protected]" alt="" class="wp-image-5698" style="width:300px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>If you want to use Google Sheets, share the file with the public in File-Share. You don't need to give edit capability; just view capability is enough. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>After this, select the Chart type. Depending on your CSV structure, the plugin will try to convert it to Chart data.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Currently, next are supported:</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><strong>Chart type 1</strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Each Row will be used as Series data. The first Column will be used as the Name of Serie. Each column will be used as a point of data, and the name in the first row will be used for labels on the horizontal axis</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>This is example <a href="https://docs.google.com/spreadsheets/d/1oFoBo5Oqu4fLM7X5EOHkX8ULfxg8vrWyLEHe85Gb7mA/edit?gid=816059148#gid=816059148">CSV of such structure</a>. Example of chart. This type is good for lines, area charts, heatmaps</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5699,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2025/03/[email protected]" alt="" class="wp-image-5699"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p><strong>Chart Type 2</strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>This type will use the opposite - it will use first column As labels for horizontal axis and each next column will be used as series</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a href="https://docs.google.com/spreadsheets/d/15gaAokhKK8vUCzjefs-ReH0PN9AnqlB8IdmPLH-DuQ8/edit?gid=2127928897#gid=2127928897">Example of CSV file</a> This is great for Bar style, Radar, Heatmap</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5700,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2025/03/image-1024x547.png" alt="" class="wp-image-5700"/></figure>
<!-- /wp:image -->
<!-- wp:list {"ordered":true} -->
<ol class="wp-block-list"><!-- wp:list-item -->
<li></li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->
<!-- wp:paragraph -->
<p><strong>Chart 3</strong></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>This is simplest format when you have Label in first column and value in second</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p><a href="https://docs.google.com/spreadsheets/d/1AWd1wxMKuyO0m9P40nE_lqConnMyoACCpc2QtDaz6o4/edit?usp=sharing">Example of CSV</a> It's best for Donut/Pie Formats</p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5703,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://greenshiftwp.com/wp-content/uploads/2025/03/[email protected]" alt="" class="wp-image-5703"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:heading -->
<h2 class="wp-block-heading" id="dynamic-loading">Dynamic Loading</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Greenshift has inner API endpoints that can be used for the dynamic loading of CSV files. So, if you change your Google sheet or data in a CSV file, it will also be reflected in the chart. </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>You need to enable the Dynamic Loading option for this. This will update the chart on each page reload. You can also enable caching (put the number of caches in seconds; one day will be 86400 seconds). </p>
<!-- /wp:paragraph -->
<!-- wp:image {"id":5704,"width":"400px","sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2025/03/[email protected]" alt="" class="wp-image-5704" style="width:400px"/><figcaption class="wp-element-caption">Screenshot</figcaption></figure>
<!-- /wp:image -->
<!-- wp:paragraph -->
<p>Check video</p>
<!-- /wp:paragraph -->
<!-- wp:greenshift-blocks/video {"id":"gsbp-3297b09","src":"https://youtu.be/4rZIGur8t4U","provider":"youtube","poster":"https://i.ytimg.com/vi/4rZIGur8t4U/maxresdefault.jpg","isOverlay":true,"overlayOpacity":0.3,"overlayIcon":true,"postDate":"2025-03-01T16:51:37+00:00","bgColor":"#000000","bgGradient":null} -->
<div class="wp-block-greenshift-blocks-video gs-video youtube gspb_video-id-gsbp-3297b09" id="gs-video-gsbp-3297b09"><div class="gs-video-wrapper" itemscope><iframe class="gs-video-element" data-src="https://youtu.be/4rZIGur8t4U" data-provider="youtube" data-autoplay="true" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-overlay="true" data-lightbox="false" data-modestbranding="false" data-suggested="true" frameborder="0" allowfullscreen></iframe><div class="gs-video-overlay" style="background-image:url(https://i.ytimg.com/vi/4rZIGur8t4U/maxresdefault.jpg)" data-type="youtube" data-lightbox="false"><div class="gs-play-icon" style="background-color:#cc0000"><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0"></div><span></span><div style="content:"";display:block;position:absolute;border-radius:50%;border:1px solid #cc0000;left:-20px;right:-20px;bottom:-20px;top:-20px;animation:pulsevideobutton 1.5s linear infinite;opacity:0;animation-delay:0.5s"></div></div><div class="gs-overlay-color" style="background-color:#000000;background-image:;opacity:0.3"></div></div></div></div>
<!-- /wp:greenshift-blocks/video -->
