{"id":73506,"date":"2022-01-24T12:06:46","date_gmt":"2022-01-24T12:06:46","guid":{"rendered":"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/?page_id=73506"},"modified":"2023-05-17T11:03:02","modified_gmt":"2023-05-17T11:03:02","slug":"graphs","status":"publish","type":"page","link":"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/graphs\/","title":{"rendered":"Graphs block for Gutenberg"},"content":{"rendered":"\n<section class=\"wp-block-qi-blocks-columns qodef-gutenberg-section qodef--template qodef-block-bc42124d qodef-col-num--2 qodef-col-layout--50 qodef-content--full-width qodef-gutter--no\"><div class=\"qodef-section-background-overlay\"><\/div><div class=\"qodef-gutenberg-row\">\n<div class=\"wp-block-qi-blocks-column qodef-gutenberg-column qodef-block-0ff15a9c qodef-vertical-align--middle qodef-horizontal-align--start\"><div class=\"qodef-gutenberg-column-inner\">\n<div class=\"wp-block-qi-blocks-section-title qodef-block-container qodef-block-6ee78270 qodef-width--inline qodef-width--tablet--full-width\"><div class=\"qi-block-section-title qodef-block qodef-m qodef-link--underline-draw qodef-title-break-disabled--mobile qodef-text-break-disabled--mobile qodef-subtitle-icon--left\"><h1 class=\"qodef-m-title\">Graphs <br><span style=\"text-decoration: underline;\" class=\"qodef-underline-text\">GUTENBERG<\/span> block<\/h1><p class=\"qodef-m-text\">A great way to present beautifully styled line and bar <br>graphs in a wide variety of creative styles<\/p><div class=\"qodef-m-button qodef-block-clear\">\n<div class=\"wp-block-qi-blocks-button qodef-block-container qodef-block-c4654a87\"><a class=\"qi-block-button qodef-block qodef-m qodef-layout--filled qodef-type--standard qodef-text-underline qodef-underline--left qodef-hover--icon-move-horizontal-short\" href=\"https:\/\/qodeinteractive.com\/pricing\/?qi_product=blocks\" target=\"_blank\" rel=\"noopener noreferrer\"><span class=\"qodef-m-text\">TRY QI BLOCKS<\/span><\/a><\/div>\n<\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-qi-blocks-column qodef-gutenberg-column qodef-hide-on--tablet qodef-hide-on--mobile qodef-block-d5ad075d qodef-horizontal-align--center\"><div class=\"qodef-gutenberg-column-inner\">\n<div class=\"wp-block-qi-blocks-single-image qodef-block-container qodef-block-64b6f2dc qodef-width--custom\" data-width=\"686px\"><div class=\"qi-block-single-image qodef-block qodef-m\"><div class=\"qodef-m-image\"><img loading=\"lazy\" decoding=\"async\" width=\"686\" height=\"501\" class=\"wp-image-79356\"  src=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/wp-content\/uploads\/2022\/04\/graphs-title-image.png\" alt=\"a\" srcset=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/wp-content\/uploads\/2022\/04\/graphs-title-image.png 686w, https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/wp-content\/uploads\/2022\/04\/graphs-title-image-300x219.png 300w, https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/wp-content\/uploads\/2022\/04\/graphs-title-image-600x438.png 600w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div><\/section>\n\n\n\n<section class=\"wp-block-qi-blocks-columns qodef-gutenberg-section qodef--template qodef-block-0739dc2f qodef-col-num--1 qodef-col-layout--100 qodef-content--boxed\"><div class=\"qodef-section-background-overlay\"><\/div><div class=\"qodef-gutenberg-row\">\n<div class=\"wp-block-qi-blocks-column qodef-gutenberg-column qodef-block-58baaaaa\"><div class=\"qodef-gutenberg-column-inner\">\n<div class=\"wp-block-qi-blocks-section-title qodef-block-container qodef-block-0f67087a\"><div class=\"qi-block-section-title qodef-block qodef-m qodef-link--underline-draw qodef-subtitle-icon--left\"><h5 class=\"qodef-m-subtitle\"><span>Fully flexible graphs<\/span><\/h5><h2 class=\"qodef-m-title\">Stylize each item separately<\/h2><\/div><\/div>\n<\/div><\/div>\n<\/div><\/section>\n\n\n\n<section class=\"wp-block-qi-blocks-columns qodef-gutenberg-section qodef--template qodef-block-35680d5e qodef-col-num--1 qodef-col-layout--100 qodef-content--predefined qodef-content--1300\"><div class=\"qodef-section-background-overlay\"><\/div><div class=\"qodef-gutenberg-row\">\n<div class=\"wp-block-qi-blocks-column qodef-gutenberg-column qodef-block-ac6ad1ae\"><div class=\"qodef-gutenberg-column-inner\">\n<div class=\"wp-block-qi-blocks-graphs qodef-block-container qodef-block-f42c7de2\"><div class=\"qi-block-graphs qodef-block qodef-m qodef-graph-alignment--flex-start\" data-labels=\"[&quot;One&quot;,&quot;Two&quot;,&quot;Three&quot;,&quot;Four&quot;,&quot;Five&quot;]\" data-values=\"[&quot;55, 20,25,45,65&quot;,&quot;45, 55, 45,35, 50&quot;,&quot;25, 65, 60, 18, 75&quot;]\" data-item-labels=\"[&quot;Photography&quot;,&quot;Art Direction&quot;,&quot;Web Design&quot;]\" data-background-colors=\"[null,&quot;rgba(222,121,84,1)&quot;,&quot;rgba(202,202,202,1)&quot;]\" data-hover-background-colors=\"[null,null,null]\" data-border-colors=\"[&quot;rgba(30,30,30,1)&quot;,&quot;rgba(222,121,84,1)&quot;,&quot;rgba(202,202,202,1)&quot;]\" data-hover-border-colors=\"[&quot;rgba(30,30,30,1)&quot;,&quot;rgba(222,121,84,1)&quot;,&quot;rgba(202,202,202,1)&quot;]\" data-fill=\"[false,false,false]\" data-linear=\"[0.4,0.4,0.4]\" data-type=\"true\" data-border-width=\"3\" data-hover-border-width=\"3\" data-bar-size=\"0.4\" data-cat-size=\"0.65\" data-enable-legend=\"true\" data-legend-position=\"bottom\" data-legend-alignment=\"center\" data-legend-bar-width=\"43\" data-legend-bar-height=\"3\" data-legend-bar-margin=\"40\" data-legend-label-color=\"\" data-legend-label-font=\"DM Sans\" data-legend-label-font-size=\"16\" data-legend-label-font-weight=\"500\" data-ticks=\"{&quot;min&quot;:0,&quot;max&quot;:80,&quot;step&quot;:20}\"><div class=\"qodef-m-inner\"><div class=\"qodef-m-canvas-holder\"><div class=\"qodef-m-canvas\"><canvas><\/canvas><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div><\/section>\n\n\n\n<section class=\"wp-block-qi-blocks-columns qodef-gutenberg-section qodef--template qodef-block-fcdf6b55 qodef-col-num--2 qodef-col-layout--50 qodef-content--full-width qodef-gutter--no\"><div class=\"qodef-section-background-overlay\"><\/div><div class=\"qodef-gutenberg-row\">\n<div class=\"wp-block-qi-blocks-column qodef-gutenberg-column qodef-block-ff5d6f77\"><div class=\"qodef-gutenberg-column-inner\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-qi-blocks-column qodef-gutenberg-column qodef-block-e830bc2a qodef-vertical-align--middle qodef-horizontal-align--mobile--center\"><div class=\"qodef-gutenberg-column-inner\">\n<div class=\"wp-block-qi-blocks-graphs qodef-block-container qodef-block-5f00a27b qodef-width--full-width\"><div class=\"qi-block-graphs qodef-block qodef-m qodef-graph-alignment--flex-start\" data-labels=\"[&quot;One&quot;,&quot;Two&quot;,&quot;Three&quot;,&quot;Four&quot;,&quot;Five&quot;]\" data-values=\"[&quot;46, 58, 62,44,65&quot;,&quot;42, 54, 48,37, 53&quot;]\" data-item-labels=\"[&quot;Photography&quot;,&quot;Marketing&quot;]\" data-background-colors=\"[&quot;rgba(30,30,30,1)&quot;,&quot;rgba(222,121,84,1)&quot;]\" data-hover-background-colors=\"[null,null]\" data-border-colors=\"[&quot;rgba(30,30,30,1)&quot;,&quot;rgba(222,121,84,1)&quot;]\" data-hover-border-colors=\"[&quot;rgba(30,30,30,1)&quot;,&quot;rgba(222,121,84,1)&quot;]\" data-fill=\"[false,false]\" data-linear=\"[0,0]\" data-type=\"true\" data-border-width=\"3\" data-hover-border-width=\"3\" data-bar-size=\"0.4\" data-cat-size=\"0.65\" data-enable-legend=\"true\" data-legend-position=\"bottom\" data-legend-alignment=\"center\" data-legend-bar-width=\"43\" data-legend-bar-height=\"3\" data-legend-bar-margin=\"40\" data-legend-label-color=\"rgba(30,30,30,1)\" data-legend-label-font=\"DM Sans\" data-legend-label-font-size=\"16\" data-legend-label-font-weight=\"500\" data-ticks=\"{&quot;min&quot;:0,&quot;max&quot;:80,&quot;step&quot;:20}\"><div class=\"qodef-m-inner\"><div class=\"qodef-m-canvas-holder\"><div class=\"qodef-m-canvas\"><canvas><\/canvas><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div><\/section>\n\n\n\n<section class=\"wp-block-qi-blocks-columns qodef-gutenberg-section qodef--template qodef-block-d5285787 qodef-col-num--2 qodef-col-layout--50 qodef-content--full-width qodef-gutter--no\"><div class=\"qodef-section-background-overlay\"><\/div><div class=\"qodef-gutenberg-row\">\n<div class=\"wp-block-qi-blocks-column qodef-gutenberg-column qodef-block-7cc0fe59 qodef-vertical-align--middle\"><div class=\"qodef-gutenberg-column-inner\">\n<div class=\"wp-block-qi-blocks-graphs qodef-block-container qodef-block-97896ef7 qodef-width--full-width\"><div class=\"qi-block-graphs qodef-block qodef-m qodef-graph-alignment--flex-start\" data-labels=\"[&quot;One&quot;,&quot;Two&quot;,&quot;Three&quot;,&quot;Four&quot;,&quot;Five&quot;]\" data-values=\"[&quot;39, 62, 64, 51,58&quot;,&quot;39, 59, 58, 44, 54&quot;,&quot;39, 57, 55, 38, 45&quot;]\" data-item-labels=\"[&quot;Photography&quot;,&quot;Art Direction&quot;,&quot;Web Design&quot;]\" data-background-colors=\"[&quot;rgba(136,141,179,1)&quot;,&quot;rgba(193,195,215,1)&quot;,&quot;rgba(237,237,237,0.6)&quot;]\" data-hover-background-colors=\"[null,null,null]\" data-border-colors=\"[&quot;rgba(136,141,179,1)&quot;,&quot;rgba(193,195,215,1)&quot;,&quot;rgba(237,237,237,0.6)&quot;]\" data-hover-border-colors=\"[&quot;rgba(136,141,179,1)&quot;,&quot;rgba(193,195,215,1)&quot;,&quot;rgba(237,237,237,0.6)&quot;]\" data-fill=\"[&quot;+1&quot;,&quot;+1&quot;,&quot;origin&quot;]\" data-linear=\"[0.4,0.4,0.4]\" data-type=\"true\" data-border-width=\"3\" data-hover-border-width=\"3\" data-bar-size=\"0.4\" data-cat-size=\"0.65\" data-enable-legend=\"true\" data-legend-position=\"bottom\" data-legend-alignment=\"center\" data-legend-bar-width=\"8\" data-legend-bar-height=\"8\" data-legend-bar-margin=\"40\" data-legend-label-color=\"rgba(30,30,30,1)\" data-legend-label-font=\"DM Sans\" data-legend-label-font-size=\"16\" data-legend-label-font-weight=\"500\" data-ticks=\"{&quot;min&quot;:0,&quot;max&quot;:80,&quot;step&quot;:20}\"><div class=\"qodef-m-inner\"><div class=\"qodef-m-canvas-holder\"><div class=\"qodef-m-canvas\"><canvas><\/canvas><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-qi-blocks-column qodef-gutenberg-column qodef-block-1e23618c\"><div class=\"qodef-gutenberg-column-inner\"><\/div><\/div>\n<\/div><\/section>\n\n\n\n<section class=\"wp-block-qi-blocks-columns qodef-gutenberg-section qodef--template qodef-block-8c37aae8 qodef-col-num--1 qodef-col-layout--100 qodef-content--boxed\"><div class=\"qodef-section-background-overlay\"><\/div><div class=\"qodef-gutenberg-row\">\n<div class=\"wp-block-qi-blocks-column qodef-gutenberg-column qodef-block-4aa69a77\"><div class=\"qodef-gutenberg-column-inner\">\n<div class=\"wp-block-qi-blocks-section-title qodef-block-container qodef-block-c82534fc\"><div class=\"qi-block-section-title qodef-block qodef-m qodef-link--underline-draw qodef-subtitle-icon--left\"><h5 class=\"qodef-m-subtitle\"><span>Line &amp; area colors and more<\/span><\/h5><h2 class=\"qodef-m-title\">Line styles &amp; filling modes<\/h2><\/div><\/div>\n<\/div><\/div>\n<\/div><\/section>\n\n\n\n<section class=\"wp-block-qi-blocks-columns qodef-gutenberg-section qodef--template qodef-block-94e3d1a4 qodef-col-num--1 qodef-col-layout--100 qodef-content--predefined qodef-content--1300\"><div class=\"qodef-section-background-overlay\"><\/div><div class=\"qodef-gutenberg-row\">\n<div class=\"wp-block-qi-blocks-column qodef-gutenberg-column qodef-block-b6590fac\"><div class=\"qodef-gutenberg-column-inner\">\n<div class=\"wp-block-qi-blocks-graphs qodef-block-container qodef-block-4c30af03\"><div class=\"qi-block-graphs qodef-block qodef-m qodef-graph-alignment--flex-start\" data-labels=\"[&quot;One&quot;,&quot;Two&quot;,&quot;Three&quot;,&quot;Four&quot;,&quot;Five&quot;]\" data-values=\"[&quot;17, 49, 60, 15, 63&quot;,&quot;43, 56, 58,32, 53&quot;,&quot;24, 56, 49, 19, 77&quot;]\" data-item-labels=\"[&quot;Photography&quot;,&quot;Art Direction&quot;,&quot;Web Design&quot;]\" data-background-colors=\"[&quot;rgba(136,141,179,1)&quot;,&quot;rgba(222,121,84,1)&quot;,&quot;rgba(241,241,241,0.69)&quot;]\" data-hover-background-colors=\"[null,null,null]\" data-border-colors=\"[&quot;rgba(136,141,179,1)&quot;,&quot;rgba(222,121,84,1)&quot;,&quot;rgba(241,241,241,0.69)&quot;]\" data-hover-border-colors=\"[&quot;rgba(136,141,179,1)&quot;,&quot;rgba(222,121,84,1)&quot;,&quot;rgba(241,241,241,0.69)&quot;]\" data-fill=\"[false,false,&quot;origin&quot;]\" data-linear=\"[0,0,0]\" data-type=\"true\" data-border-width=\"3\" data-hover-border-width=\"3\" data-bar-size=\"0.4\" data-cat-size=\"0.65\" data-enable-legend=\"true\" data-legend-position=\"bottom\" data-legend-alignment=\"center\" data-legend-bar-width=\"43\" data-legend-bar-height=\"3\" data-legend-bar-margin=\"40\" data-legend-label-color=\"\" data-legend-label-font=\"DM Sans\" data-legend-label-font-size=\"16\" data-legend-label-font-weight=\"500\" data-ticks=\"{&quot;min&quot;:0,&quot;max&quot;:80,&quot;step&quot;:20}\"><div class=\"qodef-m-inner\"><div class=\"qodef-m-canvas-holder\"><div class=\"qodef-m-canvas\"><canvas><\/canvas><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div><\/section>\n\n\n\n<section class=\"wp-block-qi-blocks-columns qodef-gutenberg-section qodef--template qodef-block-1fd8c9e9 qodef-col-num--2 qodef-col-layout--50 qodef-content--full-width qodef-gutter--no\"><div class=\"qodef-section-background-overlay\"><\/div><div class=\"qodef-gutenberg-row\">\n<div class=\"wp-block-qi-blocks-column qodef-gutenberg-column qodef-block-fe9e7def\"><div class=\"qodef-gutenberg-column-inner\"><\/div><\/div>\n\n\n\n<div class=\"wp-block-qi-blocks-column qodef-gutenberg-column qodef-block-f694459e qodef-vertical-align--middle\"><div class=\"qodef-gutenberg-column-inner\">\n<div class=\"wp-block-qi-blocks-graphs qodef-block-container qodef-block-cc93dbd7 qodef-width--full-width\"><div class=\"qi-block-graphs qodef-block qodef-m qodef-graph-alignment--flex-start\" data-labels=\"[&quot;One&quot;,&quot;Two&quot;,&quot;Three&quot;,&quot;Four&quot;]\" data-values=\"[&quot;63, 38, 24, 56,&quot;,&quot;45, 76, 48, 36, 65&quot;]\" data-item-labels=\"[&quot;Photography&quot;,&quot;Art Direction&quot;]\" data-background-colors=\"[&quot;rgba(136,141,179,1)&quot;,&quot;rgba(193,195,215,1)&quot;]\" data-hover-background-colors=\"[&quot;rgba(136,141,179,1)&quot;,&quot;rgba(193,195,215,1)&quot;]\" data-border-colors=\"[&quot;rgba(136,141,179,1)&quot;,&quot;rgba(193,195,215,1)&quot;]\" data-hover-border-colors=\"[&quot;rgba(136,141,179,1)&quot;,&quot;rgba(193,195,215,1)&quot;]\" data-fill=\"[&quot;origin&quot;,&quot;origin&quot;]\" data-linear=\"[0.4,0.4]\" data-type=\"false\" data-border-width=\"0\" data-hover-border-width=\"0\" data-bar-size=\"0.88\" data-cat-size=\"0.6\" data-enable-legend=\"true\" data-legend-position=\"bottom\" data-legend-alignment=\"center\" data-legend-bar-width=\"11\" data-legend-bar-height=\"11\" data-legend-bar-margin=\"40\" data-legend-label-color=\"rgba(30,30,30,1)\" data-legend-label-font=\"DM Sans\" data-legend-label-font-size=\"16\" data-legend-label-font-weight=\"500\" data-ticks=\"{&quot;min&quot;:0,&quot;max&quot;:80,&quot;step&quot;:20}\"><div class=\"qodef-m-inner\"><div class=\"qodef-m-canvas-holder\"><div class=\"qodef-m-canvas\"><canvas><\/canvas><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div><\/section>\n\n\n\n<section class=\"wp-block-qi-blocks-columns qodef-gutenberg-section qodef--template qodef-block-ea811bd7 qodef-col-num--1 qodef-col-layout--100 qodef-content--predefined qodef-content--1300 qodef-gutter--no\"><div class=\"qodef-section-background-overlay\"><\/div><div class=\"qodef-gutenberg-row\">\n<div class=\"wp-block-qi-blocks-column qodef-gutenberg-column qodef-block-4e5cc4c4\"><div class=\"qodef-gutenberg-column-inner\">\n<div class=\"wp-block-qi-blocks-call-to-action qodef-block-container qodef-block-fc96fbfd\"><div class=\"qi-block-call-to-action qodef-block qodef-m qodef-layout--standard qodef-button-below--1024\"><div class=\"qodef-m-inner\"><div class=\"qodef-m-content\"><h5 class=\"qodef-m-title\">Get Qi Blocks for Gutenberg with 80 professionally designed custom blocks for creating modern websites the easy way. Experience Full Site Editing executed to perfection!<\/h5><\/div><div class=\"qodef-m-button\">\n<div class=\"wp-block-qi-blocks-button qodef-block-container qodef-block-928a890d\"><a class=\"qi-block-button qodef-block qodef-m qodef-layout--filled qodef-type--standard qodef-icon--right qodef-hover--icon-move-horizontal-short\" href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/\"><span class=\"qodef-m-text\">View More<\/span><span class=\"qodef-m-icon\"><span class=\"qodef-m-icon-inner\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\" x=\"0px\" y=\"0px\" width=\"6.7px\" height=\"11.4px\" viewBox=\"0 0 6.7 11.4\" style=\"enable-background:new 0 0 6.7 11.4; stroke:transparent;\" xml:space=\"preserve\" fill=\"currentColor\">\n<path d=\"M6.4,5L1.7,0.3c-0.4-0.4-1-0.4-1.3,0C0.1,0.5,0,0.7,0,1s0.1,0.5,0.4,0.7l3.8,4l-3.9,4C0.1,9.8,0,10.1,0,10.4 c0,0.3,0.1,0.5,0.3,0.7s0.4,0.3,0.7,0.3l0,0c0.2,0,0.5-0.1,0.7-0.3l4.7-4.7C6.5,6.2,6.7,6,6.7,5.7C6.7,5.4,6.6,5.1,6.4,5z\"><\/path>\n<\/svg><\/span><\/span><\/a><\/div>\n<\/div><\/div><\/div><\/div>\n<\/div><\/div>\n<\/div><\/section>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"qi-full-width.php","meta":{"footnotes":""},"class_list":["post-73506","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/wp-json\/wp\/v2\/pages\/73506","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/wp-json\/wp\/v2\/comments?post=73506"}],"version-history":[{"count":5,"href":"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/wp-json\/wp\/v2\/pages\/73506\/revisions"}],"predecessor-version":[{"id":85311,"href":"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/wp-json\/wp\/v2\/pages\/73506\/revisions\/85311"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/wp-json\/wp\/v2\/media?parent=73506"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}