https://quickchart.io/documentation/assets/js/321f7845.40aed2f8.js

1/*! For license information please see 321f7845.40aed2f8.js.LICENSE.txt */
2"use strict";(self.webpackChunkquickchart_docs=self.webpackChunkquickchart_docs||[]).push([[8314],{8134:(r,a,t)=>{t.d(a,{Z:()=>s});var e=t(7294);const n="container_Nt4w",o="noBorder_zfZj",d="caption_czJ5",i="dropShadow_MaDw";function s(r){let{src:a,href:t,alt:s,caption:c,maxWidth:l,noBorder:g,noLazyLoad:C,dropShadow:p}=r;return e.createElement("div",{className:`${n} ${g?o:""} ${p?i:""}`},e.createElement("a",{href:t||a,target:"_blank",rel:"noopener noreferrer"},e.createElement("img",{loading:C?"eager":"lazy",src:a,alt:s||c,width:l})),e.createElement("div",{className:d},c))}},9071:(r,a,t)=>{t.r(a),t.d(a,{assets:()=>c,contentTitle:()=>i,default:()=>C,frontMatter:()=>d,metadata:()=>s,toc:()=>l});t(7294);var e=t(5893),n=t(1151),o=t(8134);const d={slug:"/chart-js/patterned-backgrounds/",title:"Add a patterned background (Chart.js)",tags:["chart.js","backgrounds and coloring"],sidebar_label:"Patterned backgrounds"},i=void 0,s={unversionedId:"guides/chart-js/patterned-backgrounds",id:"guides/chart-js/patterned-backgrounds",title:"Add a patterned background (Chart.js)",description:"Patterned backgrounds in Chart.js can be achieved using the patternomaly library. QuickChart includes built-in support for patterned chart backgrounds.",source:"@site/documentation/guides/chart-js/patterned-backgrounds.md",sourceDirName:"guides/chart-js",slug:"/chart-js/patterned-backgrounds/",permalink:"/documentation/chart-js/patterned-backgrounds/",draft:!1,editUrl:"https://github.com/typpo/quickchart-docs/edit/master/documentation/guides/chart-js/patterned-backgrounds.md",tags:[{label:"chart.js",permalink:"/documentation/tags/chart-js"},{label:"backgrounds and coloring",permalink:"/documentation/tags/backgrounds-and-coloring"}],version:"current",frontMatter:{slug:"/chart-js/patterned-backgrounds/",title:"Add a patterned background (Chart.js)",tags:["chart.js","backgrounds and coloring"],sidebar_label:"Patterned backgrounds"},sidebar:"docsSidebar",previous:{title:"Exporting images",permalink:"/documentation/chart-js/image-export/"},next:{title:"Polar chart labels",permalink:"/documentation/chart-js/polar-chart-labels/"}},c={},l=[];function g(r){const a=Object.assign({p:"p",a:"a",code:"code",pre:"pre"},(0,n.ah)(),r.components);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(a.p,{children:["Patterned backgrounds in Chart.js can be achieved using the ",(0,e.jsx)(a.a,{href:"https://github.com/ashiguruma/patternomaly",children:"patternomaly"})," library. QuickChart includes built-in support for patterned chart backgrounds."]}),"\n",(0,e.jsx)(a.p,{children:"The patternomaly library generates patterned canvases, and these patterns can be supplied directly as backgrounds."}),"\n",(0,e.jsxs)(a.p,{children:["In QuickChart, ",(0,e.jsx)(a.code,{children:"pattern"})," is a built-in global that lets you generate patterns. Here's a quick example:"]}),"\n",(0,e.jsx)(a.pre,{children:(0,e.jsx)(a.code,{className:"language-js",originalType:"code",children:"{\n  type: 'bar',\n    data: {\n      labels: ['January', 'February', 'March', 'April', 'May'],\n        datasets: [{\n          label: 'Dogs',\n          data: [10, 50, 80, 30, 10],\n          backgroundColor: pattern.draw('zigzag-horizontal', 'navy'),\n        }, {\n          label: 'Cats',\n          data: [100, 20, 10, 90, 80],\n          backgroundColor: pattern.draw('diagonal-right-left', 'darkgreen'),\n        }]\n    }\n}\n"})}),"\n",(0,e.jsx)(a.p,{children:"Which produces this patterned bar chart:"}),"\n",(0,e.jsx)(o.Z,{maxWidth:500,src:"https://quickchart.io/chart?c=%7B%0A%20%20type%3A%20%27bar%27%2C%0A%20%20%20%20data%3A%20%7B%0A%20%20%20%20%20%20labels%3A%20%5B%27January%27%2C%20%27February%27%2C%20%27March%27%2C%20%27April%27%2C%20%27May%27%5D%2C%0A%20%20%20%20%20%20%20%20datasets%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20%20%20label%3A%20%27Dogs%27%2C%0A%20%20%20%20%20%20%20%20%20%20data%3A%20%5B10%2C%2050%2C%2080%2C%2030%2C%2010%5D%2C%0A%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20pattern.draw(%27zigzag-horizontal%27%2C%20%27navy%27)%2C%0A%20%20%20%20%20%20%20%20%7D%2C%20%7B%0A%20%20%20%20%20%20%20%20%20%20label%3A%20%27Cats%27%2C%0A%20%20%20%20%20%20%20%20%20%20data%3A%20%5B100%2C%2020%2C%2010%2C%2090%2C%2080%5D%2C%0A%20%20%20%20%20%20%20%20%20%20backgroundColor%3A%20pattern.draw(%27diagonal-right-left%27%2C%20%27darkgreen%27)%2C%0A%20%20%20%20%20%20%20%20%7D%5D%0A%20%20%20%20%7D%0A%7D"}),"\n",(0,e.jsx)(a.p,{children:"Patterned backgrounds can be used in any chart type. Here's a more elaborate example with a customized polar chart:"}),"\n",(0,e.jsx)(a.pre,{children:(0,e.jsx)(a.code,{className:"language-js",originalType:"code",children:'{\n    "type": "polarArea",\n    "data": {\n        "datasets": [{\n            "borderColor": \'rgb(0,0,0,1)\',\n            "data": [3, 5, 5, 0, 0, 6, 0, 4, 0, 0, 0, 0],\n            "backgroundColor": [pattern.draw(\'diagonal-right-left\', \'rgb(20,38,123)\'), pattern.draw(\'dot\', \'rgb(0,152,161)\'), pattern.draw(\'z

2igzag\', \'rgb(150,192,58)\'), pattern.draw(\'diagonal-right-left\', \'rgb(20,38,123)\'), pattern.draw(\'dot\', \'rgb(0,152,161)\'), pattern.draw(\'zigzag\', \'rgb(150,192,58)\'), pattern.draw(\'diagonal-right-left\', \'rgb(20,38,123)\'), pattern.draw(\'dot\', \'rgb(0,152,161)\'), pattern.draw(\'zigzag\', \'rgb(150,192,58)\'), pattern.draw(\'diagonal-right-left\', \'rgb(20,38,123)\'), pattern.draw(\'dot\', \'rgb(0,152,161)\'), pattern.draw(\'zigzag\', \'rgb(150,192,58)\')]\n        }]\n    },\n    "options": {\n        "borderWidth": 2,\n        "borderColor": "rgba(0, 0, 0, 0.8)",\n        "startAngle": 0,\n        "scale": {\n            "ticks": {\n                "backdropColor": "rgba(255, 255, 255, 1)",\n                "min": 0,\n                "max": 6,\n                "stepSize": 1,\n                "fontColor": "rgb(254,72,0)",\n                "fontSize": 16,\n                "z": 2,\n                "padding": 10\n            },\n            "gridLines": {\n                "display": true,\n                "drawTicks": true,\n                "drawOnChartArea": true,\n                "drawBorder": true,\n                "borderDash": [4, 5],\n                "lineWidth": 2,\n                "color": "rgba(0, 0, 0, 0.5)",\n                "z": 1\n            },\n            "angleLines": {\n                "display": true,\n                "color": "rgba(0, 0, 0, 0.8)",\n                "lineWidth": 2\n            },\n            "pointLabels": {\n                "fontSize": 20\n            }\n        },\n        "legend": {\n            "display": false,\n            "position": "bottom"\n        }\n    }\n}\n'})}),"\n",(0,e.jsx)(a.p,{children:"Which produces the following:"}),"\n",(0,e.jsx)(o.Z,{maxWidth:500,src:"https://quickchart.io/chart?c=%7B%0A%20%20%20%20%22type%22%3A%20%22polarArea%22%2C%0A%20%20%20%20%22data%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22datasets%22%3A%20%5B%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%27rgb(0%2C0%2C0%2C1)%27%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22data%22%3A%20%5B3%2C%205%2C%205%2C%200%2C%200%2C%206%2C%200%2C%204%2C%200%2C%200%2C%200%2C%200%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22backgroundColor%22%3A%20%5Bpattern.draw(%27diagonal-right-left%27%2C%20%27rgb(20%2C38%2C123)%27)%2C%20pattern.draw(%27dot%27%2C%20%27rgb(0%2C152%2C161)%27)%2C%20pattern.draw(%27zigzag%27%2C%20%27rgb(150%2C192%2C58)%27)%2C%20pattern.draw(%27diagonal-right-left%27%2C%20%27rgb(20%2C38%2C123)%27)%2C%20pattern.draw(%27dot%27%2C%20%27rgb(0%2C152%2C161)%27)%2C%20pattern.draw(%27zigzag%27%2C%20%27rgb(150%2C192%2C58)%27)%2C%20pattern.draw(%27diagonal-right-left%27%2C%20%27rgb(20%2C38%2C123)%27)%2C%20pattern.draw(%27dot%27%2C%20%27rgb(0%2C152%2C161)%27)%2C%20pattern.draw(%27zigzag%27%2C%20%27rgb(150%2C192%2C58)%27)%2C%20pattern.draw(%27diagonal-right-left%27%2C%20%27rgb(20%2C38%2C123)%27)%2C%20pattern.draw(%27dot%27%2C%20%27rgb(0%2C152%2C161)%27)%2C%20pattern.draw(%27zigzag%27%2C%20%27rgb(150%2C192%2C58)%27)%5D%0A%20%20%20%20%20%20%20%20%7D%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%22options%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%22borderWidth%22%3A%202%2C%0A%20%20%20%20%20%20%20%20%22borderColor%22%3A%20%22rgba(0%2C%200%2C%200%2C%200.8)%22%2C%0A%20%20%20%20%20%20%20%20%22startAngle%22%3A%200%2C%0A%20%20%20%20%20%20%20%20%22scale%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22ticks%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22backdropColor%22%3A%20%22rgba(255%2C%20255%2C%20255%2C%201)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22min%22%3A%200%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22max%22%3A%206%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22stepSize%22%3A%201%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22fontColor%22%3A%20%22rgb(254%2C72%2C0)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22fontSize%22%3A%2016%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22z%22%3A%202%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22padding%22%3A%2010%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22gridLines%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22drawTicks%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22drawOnChartArea%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22drawBorder%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22borderDash%22%3A%20%5B4%2C%205%5D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22lineWidth%22%3A%202%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22rgba(0%2C%200%2C%200%2C%200.5)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22z%22%3A%201%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22angleLines%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20true%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22color%22%3A%20%22rgba(0%2C%200%2C%200%2C%200.8)%22%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22lineWidth%22%3A%202%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22pointLabels%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%22fontSize%22%3A%2020%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%22legend%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%22display%22%3A%20false%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%22position%22%3A%20%22bottom%22%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%0A%7D"}),"\n",(0,e.jsxs)(a.p,{children:["Head back to the ",(0,e.jsx)(a.a,{href:"/documentation",children:"docs"})," to learn more or ask questions in the ",(0,e.jsx)(a.a,{href:"https://community.quickchart.io

2/",children:"community"}),"."]})]})}const C=function(r){void 0===r&&(r={});const{wrapper:a}=Object.assign({},(0,n.ah)(),r.components);return a?(0,e.jsx)(a,Object.assign({},r,{children:(0,e.jsx)(g,r)})):g(r)}},5251:(r,a,t)=>{t(7418);var e=t(7294),n=60103;if(a.Fragment=60107,"function"==typeof Symbol&&Symbol.for){var o=Symbol.for;n=o("react.element"),a.Fragment=o("react.fragment")}var d=e.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,i=Object.prototype.hasOwnProperty,s={key:!0,ref:!0,__self:!0,__source:!0};function c(r,a,t){var e,o={},c=null,l=null;for(e in void 0!==t&&(c=""+t),void 0!==a.key&&(c=""+a.key),void 0!==a.ref&&(l=a.ref),a)i.call(a,e)&&!s.hasOwnProperty(e)&&(o[e]=a[e]);if(r&&r.defaultProps)for(e in a=r.defaultProps)void 0===o[e]&&(o[e]=a[e]);return{$$typeof:n,type:r,key:c,ref:l,props:o,_owner:d.current}}a.jsx=c,a.jsxs=c},5893:(r,a,t)=>{r.exports=t(5251)},1151:(r,a,t)=>{t.d(a,{Zo:()=>i,ah:()=>o});var e=t(7294);const n=e.createContext({});function o(r){const a=e.useContext(n);return e.useMemo((()=>"function"==typeof r?r(a):{...a,...r}),[a,r])}const d={};function i({components:r,children:a,disableParentContext:t}){let i=o(r);return t&&(i=r||d),e.createElement(n.Provider,{value:i},a)}}}]);