{"id":13385,"date":"2022-11-07T15:32:42","date_gmt":"2022-11-07T15:32:42","guid":{"rendered":"https:\/\/kriesi.at\/documentation\/enfold\/?p=13385"},"modified":"2022-11-22T11:23:00","modified_gmt":"2022-11-22T11:23:00","slug":"chart-element","status":"publish","type":"post","link":"https:\/\/kriesi.at\/documentation\/enfold\/chart-element\/","title":{"rendered":"Chart Element"},"content":{"rendered":"\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-l63l64mt-83d1b8127503e3eb8b222270ba2faab6\">\n#top .av-special-heading.av-l63l64mt-83d1b8127503e3eb8b222270ba2faab6{\npadding-bottom:10px;\n}\nbody .av-special-heading.av-l63l64mt-83d1b8127503e3eb8b222270ba2faab6 .av-special-heading-tag .heading-char{\nfont-size:25px;\n}\n.av-special-heading.av-l63l64mt-83d1b8127503e3eb8b222270ba2faab6 .av-subheading{\nfont-size:15px;\n}\n<\/style>\n<div  class='av-special-heading av-l63l64mt-83d1b8127503e3eb8b222270ba2faab6 av-special-heading-h2 blockquote modern-quote  avia-builder-el-0  el_before_av_hr  avia-builder-el-first  av-linked-heading'><h2 class='av-special-heading-tag '  itemprop=\"headline\"  >Chart Element<\/h2><div class=\"special-heading-border\"><div class=\"special-heading-inner-border\"><\/div><\/div><\/div>\n<div  class='hr av-4l81w9-b5b0c6c84c0027478f93af1559d8b8ff hr-default  avia-builder-el-1  el_after_av_heading  el_before_av_textblock '><span class='hr-inner '><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-4eoa8p-49c749fa47049f63950c83b553a1aa26 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Overview<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-49omnd-e444299ea1a77c6a27ffe0bb90e70c08 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>Added in Enfold 5.3, the Chart element is an easy way to display static data to your site visitors in a graphic manner.<\/p>\n<p>The element is based on <a href=\"https:\/\/www.chartjs.org\/docs\/latest\/\" target=\"_blank\" rel=\"noopener\">Chart JS<\/a> and the necessary js file is bundled. So there is no access to any external resource.<\/p>\n<p>You can change Chart type in Type of Chart field. There are 8 options.<\/p>\n<p>You can add as many datasets as you need under Chart Data section and add descriptions\/labels in X-Axis Labels field.<\/p>\n<p><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Bar-Chart-Overview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-13441 size-full\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Bar-Chart-Overview.png\" alt=\"\" width=\"2357\" height=\"1026\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Bar-Chart-Overview.png 2357w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Bar-Chart-Overview-300x131.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Bar-Chart-Overview-1030x448.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Bar-Chart-Overview-768x334.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Bar-Chart-Overview-1536x669.png 1536w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Bar-Chart-Overview-2048x891.png 2048w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Bar-Chart-Overview-1500x653.png 1500w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Bar-Chart-Overview-705x307.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Bar-Chart-Overview-600x261.png 600w\" sizes=\"auto, (max-width: 2357px) 100vw, 2357px\" \/><\/a><\/p>\n<p>You can change the colors of your chart in Styling tab<\/p>\n<p><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Chart-Styling.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13442\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Chart-Styling.png\" alt=\"\" width=\"2358\" height=\"748\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Chart-Styling.png 2358w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Chart-Styling-300x95.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Chart-Styling-1030x327.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Chart-Styling-768x244.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Chart-Styling-1536x487.png 1536w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Chart-Styling-2048x650.png 2048w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Chart-Styling-1500x476.png 1500w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Chart-Styling-705x224.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Chart-Styling-600x190.png 600w\" sizes=\"auto, (max-width: 2358px) 100vw, 2358px\" \/><\/a><\/p>\n<p>Here is an example with 2 datasets<\/p>\n<p><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Line-Chart-Overview.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13443\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Line-Chart-Overview.png\" alt=\"\" width=\"2355\" height=\"1068\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Line-Chart-Overview.png 2355w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Line-Chart-Overview-300x136.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Line-Chart-Overview-1030x467.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Line-Chart-Overview-768x348.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Line-Chart-Overview-1536x697.png 1536w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Line-Chart-Overview-2048x929.png 2048w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Line-Chart-Overview-1500x680.png 1500w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Line-Chart-Overview-705x320.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Line-Chart-Overview-600x272.png 600w\" sizes=\"auto, (max-width: 2355px) 100vw, 2355px\" \/><\/a><\/p>\n<p>You can edit your Datasets and go to Styling tab to adjust the colors. Simply pick the colors in color picker, copy their values and paste them into Border\/Line Colors or Background Colors fields.<\/p>\n<p><a href=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Dataset-Styling.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-13444\" src=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Dataset-Styling.png\" alt=\"\" width=\"1731\" height=\"847\" srcset=\"https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Dataset-Styling.png 1731w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Dataset-Styling-300x147.png 300w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Dataset-Styling-1030x504.png 1030w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Dataset-Styling-768x376.png 768w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Dataset-Styling-1536x752.png 1536w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Dataset-Styling-1500x734.png 1500w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Dataset-Styling-705x345.png 705w, https:\/\/kriesi.at\/documentation\/enfold\/wp-content\/uploads\/sites\/22\/2022\/11\/Dataset-Styling-600x294.png 600w\" sizes=\"auto, (max-width: 1731px) 100vw, 1731px\" \/><\/a><\/p>\n<p>In the following sections we will describe how you can turn this element to display data that is created dynamically during runtime. You have to exclude the page containing this element from caching as the necessary data is rendered in HTML. Depending on the data you want to show\u00a0 you can also invalidate a cached page on an hourly\/daily\/weekly\/&#8230; basis only.<\/p>\n<\/div><\/section>\n\n<style type=\"text\/css\" data-created_by=\"avia_inline_auto\" id=\"style-css-av-3zu17t-8c3813f5ddb91b84e799414e9da5413b\">\n#top .hr.av-3zu17t-8c3813f5ddb91b84e799414e9da5413b{\nmargin-top:30px;\nmargin-bottom:30px;\n}\n.hr.av-3zu17t-8c3813f5ddb91b84e799414e9da5413b .hr-inner{\nwidth:50px;\nmax-width:45%;\n}\n<\/style>\n<div  class='hr av-3zu17t-8c3813f5ddb91b84e799414e9da5413b hr-custom  avia-builder-el-4  el_after_av_textblock  el_before_av_textblock  hr-center hr-icon-yes'><span class='hr-inner inner-border-av-border-thin'><span class=\"hr-inner-style\"><\/span><\/span><span class='av-seperator-icon avia-iconfont avia-font-entypo-fontello' data-av_icon='\ue808' data-av_iconfont='entypo-fontello' ><\/span><span class='hr-inner inner-border-av-border-thin'><span class=\"hr-inner-style\"><\/span><\/span><\/div>\n<section  class='av_textblock_section av-la6xvc00-ba691dc6c43c0f9260848c518d76e114 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Add Dynamic Data Support<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-la6yhapg-0ea297ba71cb6c8b0c590c2caaa90ae1 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The following steps provide an overview but assume you have skills in php, WordPress and know how filters are working. You can find the code snippets in <a href=\"https:\/\/github.com\/KriesiMedia\/enfold-library\/blob\/master\/actions%20and%20filters\/ALB%20Elements\/Chart\/dynamic_chart_data.php\" target=\"_blank\" rel=\"noopener\">our Library<\/a><\/p>\n<ul>\n<li>We recommend that you use a <a href=\"https:\/\/kriesi.at\/documentation\/enfold\/child-theme\/\">child theme<\/a><\/li>\n<li>To keep your code seperate from other changes you make to functions.php of the child theme create an own file in the folder (or in a subfolder where you can also place files you need to connect to your data provider)<\/li>\n<li>Lets say we create\u00a0 <code> \/charts\/my_chart_data.php <\/code><\/li>\n<li>Inside the file my_chart_data.php add the code to connect to your data provider<\/li>\n<li>And the code we provide later to add the new data to the chart<\/li>\n<\/ul>\n<p>To activate your code you have to include the following in functions.php of the child theme:<\/p>\n<pre><code>require_once 'charts\/my_chart_data.php';<\/code><\/pre>\n<p>To easily identify a chart on your site we recommend to add a unique id for each chart in Advanced -&gt; Developer Settings -&gt; Custom ID Attribute (e.g. my-chart-1, my-chart-2, &#8230;.). Create your chart and setup your datasets, datapoints, &#8230; as if it it would be a static data chart. This will be the base to replace the static data with your dynamic data later.<\/p>\n<\/div><\/section>\n<section  class='av_textblock_section av-la8d1zz5-bd1578499548f6dd09a256cac8910cc5 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Update &#8216;<strong>Dataset Datapoints<\/strong>&#8216; of a dataset<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-la8cu7si-bffc4d9db5a8479ac743f7690017575c '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>A datapoint is a single numeric value (integer, float) except for:<\/p>\n<ul>\n<li>Bubble Chart: x;y;r where x,y,r is numeric<\/li>\n<li>Scatter Chart: x;y where x,y is numeric<\/li>\n<\/ul>\n<p>The new datapoints are placed in an array:<\/p>\n<pre><code>$dp = array( 5, 20, 45 );<\/code><\/pre>\n<p>or e.g. for a bubble chart:<\/p>\n<pre><code>$dp = array( '5;3;2', '20;15;4', '45;25;3' );<\/code><\/pre>\n<p>The following snippet will inject the dynamic dataset points:<\/p>\n<pre><code>\r\n\/**\r\n * Filter dataset datapoints and replace with dynamic datapoints.\r\n * Is called in a loop for every dataset defined in the ALB element.\r\n *\r\n * @since 5.3\r\n * @param array $data\t\t\tdata for dataset provided by ALB Element\r\n * @param int $index\t\t\t0 based index of dataset\r\n * @param array $attr\t\t\tshortcode attributes array\r\n * @return array\r\n *\/\r\nfunction my_chart_dataset_data_points( $data, $index, $attr )\r\n{\r\n\t\/\/\tcheck if this is a chart to modify (we check only for id=\"my-chart-1\", but any extended logic can be used)\r\n\t$id = $attr['id'];\r\n\r\n\tif( $id != 'my-chart-1' )\r\n\t{\r\n\t\t\/\/\treturn unmodified data\r\n\t\treturn $data;\r\n\t}\r\n\r\n\t\/**\r\n\t * your_provider_dataset_data_points is a function that connects to your data provider for dataset $index,\r\n\t * places the datapoints in an array and returns it.\r\n\t *\/\r\n\t$data_array = your_provider_dataset_data_points( $index );\r\n\r\n\treturn $data_array;\r\n}\r\n\r\nadd_filter( 'avf_chart_dataset_data', 'my_chart_dataset_data_points', 10, 3 );\r\n<\/code><\/pre>\n<\/div><\/section>\n<section  class='av_textblock_section av-la8d9qb9-a2e95e77ed25312f5467a68906eb2e0e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Update &#8216;<strong>Dataset Label<\/strong>&#8216; of a dataset<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-la8dx7on-88e79799c39db694772c7fbc7d034be9 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The Dataset Label is displayed above the chart and on hover in the tooltip box.<\/p>\n<p>The following snippet will inject the dynamic Dataset Label:<\/p>\n<pre><code>\r\n\/**\r\n * Filter dataset label and replace with dynamic label.\r\n * Is called in a loop for every dataset defined in the ALB element.\r\n *\r\n * @since 5.3\r\n * @param string $dataset_label\r\n * @param int $index\t\t\t0 based index of dataset\r\n * @param array $attr\t\t\tshortcode attributes array\r\n * @return string\r\n *\/\r\nfunction my_chart_dataset_label( $dataset_label, $index, $attr )\r\n{\r\n\t\/\/\tcheck if this is a chart to modify (we check only for id=\"my-chart-1\", but any extended logic can be used)\r\n\t$id = $attr['id'];\r\n\r\n\tif( $id != 'my-chart-1' )\r\n\t{\r\n\t\t\/\/\treturn unmodified data\r\n\t\treturn $dataset_label;\r\n\t}\r\n\r\n\t\/**\r\n\t * your_provider_dataset_data_label is a function that connects to your data provider for dataset $index,\r\n\t * gets the label for the dataset and returns it.\r\n\t *\/\r\n\t$label = your_provider_dataset_data_label( $index );\r\n\r\n\treturn $label;\r\n}\r\n\r\nadd_filter( 'avf_chart_dataset_label', 'my_chart_dataset_label', 10, 3 );\r\n<\/code><\/pre>\n<\/div><\/section>\n<section  class='av_textblock_section av-la8ef8sg-5ed86c1aba48785189a04556254f6ec0 '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Update X-Axis Labels<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-la8ekmno-3d25e153d2097df01498bfcd7961680a '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The following snippet will inject the dynamic X-Axis Labels:<\/p>\n<pre><code>\r\n\/**\r\n * Filter the x-axis labels and replace with dynamic labels.\r\n *\r\n * @since 5.3\r\n * @param array $chart_labels\r\n * @param array $attr\t\t\tshortcode attributes array\r\n * @return array\r\n *\/\r\nfunction my_x_axis_chart_labels( $chart_labels, $attr )\r\n{\r\n\t\/\/\tcheck if this is a chart to modify (we check only for id=\"my-chart-1\", but any extended logic can be used)\r\n\t$id = $attr['id'];\r\n\r\n\tif( $id != 'my-chart-1' )\r\n\t{\r\n\t\t\/\/\treturn unmodified data\r\n\t\treturn $chart_labels;\r\n\t}\r\n\r\n\t\/**\r\n\t * your_provider_chart_x_axis_labels is a function that connects to your data provider,\r\n\t * gets the x-axis labels and returns them in an array.\r\n\t *\r\n\t * e.g.:   array( 'Point1', 'Point2', 'Point3' )\r\n\t *\/\r\n\t$labels = your_provider_chart_x_axis_labels( $attr );\r\n\r\n\treturn $labels;\r\n}\r\n\r\nadd_filter( 'avf_chart_labels', 'my_x_axis_chart_labels', 10, 2 );\r\n<\/code><\/pre>\n<\/div><\/section>\n<section  class='av_textblock_section av-la8f5d2q-fe25bc14d82da0a82204c123764c2d0d '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><h3>Add More Options &#8211; Customize Chart<\/h3>\n<\/div><\/section>\n<section  class='av_textblock_section av-sxdkix-9d4563ffb1a7dd4fa3ed1c950bd03b1e '   itemscope=\"itemscope\" itemtype=\"https:\/\/schema.org\/BlogPosting\" itemprop=\"blogPost\" ><div class='avia_textblock'  itemprop=\"text\" ><p>The chart library provides a lot of more styling and layout features (<a href=\"https:\/\/www.chartjs.org\/docs\/latest\/\" target=\"_blank\" rel=\"noopener noreferrer\">Chart JS<\/a> ). You can modify anything you like with a filter.<\/p>\n<p>Our element builds the js config option in php and renders it to the frontend as a json string in a HTML data attribute (data-chart_config) which is passed 1:1 to the js chart object. Be careful not to break anything &#8211; there is no further check on the returned object.<\/p>\n<p>To implement a js object<\/p>\n<pre><code> {} <\/code><\/pre>\n<p>use<\/p>\n<pre><code>new stdClass(); <\/code><\/pre>\n<p>To implement a js array<\/p>\n<pre><code> [] <\/code><\/pre>\n<p>use<\/p>\n<pre><code>array(); <\/code><\/pre>\n<p>This is the filter which is called right before the php object is converted to json:<\/p>\n<pre><code>\r\n\/**\r\n * Filter the complete config array for the chart. See https:\/\/www.chartjs.org\/docs\/latest\/. Make sure not to break the structure.\r\n * Use \\stdClass for js {} and array for js [].\r\n *\r\n * @since 5.3\r\n * @param \\stdClass $config\r\n * @param array $attr\r\n * @param array $meta\r\n * @return \\stdClass\r\n *\/\r\nfunction my_chartjs_config_object( $config, $attr, $meta )\r\n{\r\n\t\/\/\tcheck if this is a chart to modify (we check only for id=\"my-chart-1\", but any extended logic can be used)\r\n\t$id = $attr['id'];\r\n\r\n\tif( $id != 'my-chart-1' )\r\n\t{\r\n\t\t\/\/\treturn unmodified data\r\n\t\treturn $config;\r\n\t}\r\n\r\n\t\/\/\tadd your custom settings in your function my_chart_modify_config\r\n\t$new_config = my_chart_modify_config( $config, $attr, $meta );\r\n\r\n\treturn $new_config;\r\n}\r\n\r\nadd_filter( 'avf_chartjs_config_object', 'my_chartjs_config_object', 10, 3 );\r\n\r\n<\/code><\/pre>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":11,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_lmt_disableupdate":"no","_lmt_disable":"","footnotes":""},"categories":[2,6],"tags":[],"class_list":["post-13385","post","type-post","status-publish","format-standard","hentry","category-documentation","category-content-elements","documentation","content-elements"],"modified_by":"Yigit","_links":{"self":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/13385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/comments?post=13385"}],"version-history":[{"count":32,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/13385\/revisions"}],"predecessor-version":[{"id":13446,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/posts\/13385\/revisions\/13446"}],"wp:attachment":[{"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/media?parent=13385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/categories?post=13385"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kriesi.at\/documentation\/enfold\/wp-json\/wp\/v2\/tags?post=13385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}