{"id":1366,"date":"2025-03-12T20:50:27","date_gmt":"2025-03-12T20:50:27","guid":{"rendered":"https:\/\/digitalbees.net\/stg\/?p=1366"},"modified":"2026-04-02T13:46:51","modified_gmt":"2026-04-02T13:46:51","slug":"plugin-barcharts-piecharts","status":"publish","type":"post","link":"https:\/\/digitalbees.net\/stg\/project\/plugin-barcharts-piecharts\/","title":{"rendered":"Plugin BarCharts &amp; PieCharts"},"content":{"rendered":"\n<nav class=\"breadcrumbs\">\n  <a href=\"\/projects\/\" class=\"breadcrumb-link\">\u2190 All Projects<\/a>\n<\/nav>\n\n\n\n<div class=\"wp-block-columns bar-charts hero-single section is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:1380px\"><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns are-vertically-aligned-center bar-chart-intro-section section .parallax-fade has-base-3-background-color has-background is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center intro-bar-left-col-1 is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p><strong class=\"intro-barchrt-heading\">Input Fields:<br><\/strong>Use a visual input form to create one <br>global chart that you can display <br>across unlimited pages or posts.<br><br><strong class=\"intro-barchrt-heading\">Custom Shortcode:<\/strong><br>Use shortcodes to create unique charts <br>on unlimited pages or posts.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center intro-bar-right-col-2 is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:50%\">\n<p class=\"has-text-align-left intro-p-right-1\"><strong class=\"checkmark-wrapper\"> <img decoding=\"async\" class=\"checkmark-img\" src=\"\/wp-content\/uploads\/2025\/06\/mdi_check-bold@2x.png\"><\/strong> &nbsp;All charts are fully responsive \u2014 they adapt <br>automatically to all screen sizes.<br><br><\/p>\n\n\n\n<p class=\"has-text-align-left intro-p-right-2\"><strong class=\"checkmark-wrapper\"> <img decoding=\"async\" class=\"checkmark-img\" src=\"\/wp-content\/uploads\/2025\/06\/mdi_check-bold@2x.png\"><\/strong> &nbsp;Unlimited number of charts you can output on a page, post or template.<br><br><\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group alignfull section plugin-chart-section plugin-hero plugin-benefits has-background\" style=\"background-color:#e6feff\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns alignwide section parallax-fade bar-chart-col is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<h2 class=\"wp-block-heading plugin-chart-title has-large-font-size\"><strong>Bar Chart Manual<br><\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list list\">\n<li>Set the dimensions of the Bar chart<br><br><\/li>\n\n\n\n<li>Set the color via color picker or HEX code<br><br><\/li>\n\n\n\n<li>Set the animated percentage<br><br><\/li>\n\n\n\n<li>Add an outline to mark 100%<br><br><\/li>\n\n\n\n<li>Write a title for the chart<br><br><\/li>\n\n\n\n<li>Animate only on first page load (optional)<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center right-column-charts plugin-chart-img plugin-fade-in is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\">\r\n<div class=\"bp-charts-wrapper\"\r\nstyle=\"display: flex; text-align: center; flex-direction: column-reverse;\"\r\n>\r\n\t\t\t<div class=\"bp-barcharts-title\">\r\n\t\t\tThis is an animated barchart\t\r\n\t\t<\/div>\r\n\t\t<div class=\"bp-barcharts-container\"\r\n\t\tdata-percent=\"90\"\r\n\t\tdata-duration=\"4000\"\r\n\t\t\t\tstyle=\"\r\n\t\twidth: 300px;\r\n\t\theight: 40px;\r\n\t\t\t\tborder: 1px #20d6b1 solid;\r\n\t\t\t\t\t\tborder-radius: 12px;\r\n\t\t\t\">\r\n\t\t<div class=\"bp-barcharts-progress\" style=\"\r\n\t\t\tbackground-color: #20d6b1;\r\n\t\t\tanimation-duration: 4000ms;\r\n\t\t\twidth: 90%;\r\n\t\t\">\r\n\t\t\t<span><\/span>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group alignfull section plugin-chart-section plugin-hero plugin-benefits has-background\" style=\"background-color:#ffffe6\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns alignfull section parallax-fade bar-chart-col is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<h2 class=\"wp-block-heading plugin-chart-title has-large-font-size\"><strong>Pie Chart Manual<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list list\">\n<li>Set the dimensions of the Pie chart<br><br><\/li>\n\n\n\n<li>Set the color of the Pie chart by selecting it from the color picker or by pasting the HEX color code<br><br><\/li>\n\n\n\n<li>Set the percentage of the Pie chart that you want to be animated and displayed<br><br><\/li>\n\n\n\n<li>Create background around your Piechart to mark 100% of the chart<br><br><\/li>\n\n\n\n<li>You can center align the Pie chart<br><br><\/li>\n\n\n\n<li>Write the title of the Pie chart<br><br><\/li>\n\n\n\n<li>Setup the chart to fully animate only on the first page load.<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center right-column-charts plugin-chart-img plugin-fade-in is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\">\r\n<div class=\"bp-charts-wrapper\"\r\nstyle=\"display: flex; text-align: center; flex-direction: column-reverse;\"\r\n>\r\n\t\t\t<div class=\"bp-barcharts-title\">\r\n\t\t\tPie chart animation\t\r\n\t\t<\/div>\r\n\t\t<svg \r\n\t\t\tdata-percent=\"86\" data-duration=\"4000\"\r\n\t\tdata-size=\"250\" class=\"bp-pie-container\" width=\"250px\"\r\n\t\theight=\"250px\" viewBox=\"0 0 250 250\">\r\n\t\t<circle cx=\"125\" cy=\"125\" r=\"125\" fill=\"#ededed\" \/>\r\n\t\t<path class=\"bp-pie-sector\" fill=\"#f2d621\" d=\"\" \/>\r\n\t\t<text x=\"125\" y=\"125\" class=\"bp-pie-text\"><\/text>\r\n\t<\/svg>\r\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group alignfull section plugin-chart-section plugin-hero plugin-benefits has-background\" style=\"background-color:#fff3e0\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns alignfull section parallax-fade bar-chart-col is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<h2 class=\"wp-block-heading plugin-chart-title has-large-font-size\"><strong>Donut Chart Manual<\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list list\">\n<li>Set the dimensions of the Donut chart<br><br><\/li>\n\n\n\n<li>Set the color of the Donut chart by selecting it from <br>the color picker or by pasting the HEX color code<br><br><\/li>\n\n\n\n<li>Set the percentage of the Donut chart that you want to be animated and displayed.<br><br><\/li>\n\n\n\n<li>You can set Donut chart thickness<br><br><\/li>\n\n\n\n<li>Create background around your Donut chart to mark 100% of the chart<br><br><\/li>\n\n\n\n<li>Write the title of the Donut chart<br><br><\/li>\n\n\n\n<li>Setup the chart to fully animate only on the first page load.<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center right-column-charts plugin-chart-img plugin-fade-in is-layout-flow wp-block-column-is-layout-flow\">\r\n<div class=\"bp-charts-wrapper\"\r\nstyle=\"display: flex; text-align: center; flex-direction: column-reverse;\"\r\n>\r\n\t\t\t<div class=\"bp-barcharts-title\">\r\n\t\t\tDonut chart animation\t\r\n\t\t<\/div>\r\n\t\t<svg \r\n\t\t\t\tdata-percent=\"90\" \r\n\t\tdata-duration=\"4000\"\r\n\t\tdata-size=\"250\" \r\n\t\tdata-outline=\"63\" \r\n\t\tclass=\"bp-donut-container \" width=\"250px\" height=\"250px\"\r\n\t\tviewBox=\"0 0 250 250\">\r\n\t\t<circle cx=\"125\" cy=\"125\" r=\"93.5\" fill=\"none\" stroke-width=\"63\" style=\"stroke: #f7f7f7;\" \/>\r\n\t\t<circle class=\"bp-donut-progress\" cx=\"125\" cy=\"125\"\r\n\t\t\tr=\"93.5\" fill=\"none\" stroke-width=\"63\"\r\n\t\t\tstroke-linecap=\"butt\"\r\n\t\t\ttransform=\"rotate(-90 125 125)\"\r\n\t\t\tstyle=\"stroke: #dda433;\" \/>\r\n\t\t<text x=\"125\" y=\"125\" class=\"bp-donut-text\"><\/text>\r\n\t<\/svg>\r\n<\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group alignfull section plugin-chart-section plugin-hero plugin-benefits has-background\" style=\"background-color:#e9f5ff\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-columns alignfull section parallax-fade bar-chart-col is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:45%\">\n<h2 class=\"wp-block-heading has-text-align-left plugin-chart-title has-large-font-size\"><strong>Column Chart Manual coming soon<br><\/strong><\/h2>\n\n\n\n<ol class=\"wp-block-list list\">\n<li>Set the dimensions of the Column chart<br><br><\/li>\n\n\n\n<li>Set the color of the Column chart by selecting it from the color picker or by pasting the HEX color code<br><br><\/li>\n\n\n\n<li>Set the percentage of the Column chart that you want to be animated and displayed<br><br><\/li>\n\n\n\n<li>Create outline around your Column chart to mark 100% of the chart<br><br><\/li>\n\n\n\n<li>You can center align the Column chart<br><br><\/li>\n\n\n\n<li>Write the title of the Column chart<br><br><\/li>\n\n\n\n<li>Center align the title<br><br><\/li>\n\n\n\n<li>Setup the chart to fully animate only on the first page load.<\/li>\n<\/ol>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center col-chart right-column-charts plugin-chart-img plugin-fade-in is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\"><\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Easily insert different values and generate unique shortcodes to display dynamic charts. You can output a variety of charts on an unlimited number of pages or posts across your website. Each chart comes with its own shortcode, and there&#8217;s no limit to how many shortcodes you can create&#8230;. <a class=\"read-more-button\" href=\"https:\/\/digitalbees.net\/stg\/project\/plugin-barcharts-piecharts\/\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3778,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[8,9],"class_list":["post-1366","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-project","tag-code","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/digitalbees.net\/stg\/wp-json\/wp\/v2\/posts\/1366","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digitalbees.net\/stg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digitalbees.net\/stg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digitalbees.net\/stg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/digitalbees.net\/stg\/wp-json\/wp\/v2\/comments?post=1366"}],"version-history":[{"count":111,"href":"https:\/\/digitalbees.net\/stg\/wp-json\/wp\/v2\/posts\/1366\/revisions"}],"predecessor-version":[{"id":6455,"href":"https:\/\/digitalbees.net\/stg\/wp-json\/wp\/v2\/posts\/1366\/revisions\/6455"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/digitalbees.net\/stg\/wp-json\/wp\/v2\/media\/3778"}],"wp:attachment":[{"href":"https:\/\/digitalbees.net\/stg\/wp-json\/wp\/v2\/media?parent=1366"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digitalbees.net\/stg\/wp-json\/wp\/v2\/categories?post=1366"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digitalbees.net\/stg\/wp-json\/wp\/v2\/tags?post=1366"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}