<!DOCTYPE html><html lang="en"><head><meta name="generator" content="React Static"/><title data-react-helmet="true">Victory | Tooltips</title><meta data-react-helmet="true" name="description" content="Victory Documentation"/><link rel="preload" as="script" href="/open-source/victory/templates/vendors~Users/boygirl/formidable/victory-docs/src/pages/docs-template~Users/boygirl/formidable/victo~7ead4de9.b3fc58d6.js"/><link rel="preload" as="script" href="/open-source/victory/templates/vendors~Users/boygirl/formidable/victory-docs/src/pages/docs-template~Users/boygirl/formidable/victo~ce453408.ffacf172.js"/><link rel="preload" as="script" href="/open-source/victory/templates/vendors~Users/boygirl/formidable/victory-docs/src/pages/docs-template~Users/boygirl/formidable/victo~727b74ae.86d9b9c4.js"/><link rel="preload" as="script" href="/open-source/victory/templates/vendors~Users/boygirl/formidable/victory-docs/src/pages/docs-template~Users/boygirl/formidable/victo~9b02791a.9be5130a.js"/><link rel="preload" as="script" href="/open-source/victory/templates/Users/boygirl/formidable/victory-docs/src/pages/docs-template.e6e56864.js"/><link rel="preload" as="script" href="/open-source/victory/templates/vendors~main.eb5ac263.js"/><link rel="preload" as="script" href="/open-source/victory/main.5fa20c48.js"/><link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i" rel="stylesheet"/><link href="https://fonts.googleapis.com/css?family=Andada" rel="stylesheet"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/5.0.0/codemirror.min.css"/><style data-styled="eJKrOz kkSUVJ ipGteU cQfeck dXouTZ eqPUGv WOpjk hzttor irvzTL WDyIt lTuPy fnrBau cRIOsJ dolsWa ckDzQE SGjya cnLZdZ iFKTNw cftQis hWjtUH cKIaJp bbzcNn hJWFJp habPzd IgShb gZrNRa sbluJ dZBlWh bWbbyQ fekWqh lfIbPe JONJM" data-styled-version="4.4.1">
/* sc-component-id: sc-global-876766592 */
html{line-height:1.15;-webkit-text-size-adjust:100%;} body{margin:0;} main{display:block;} h1{font-size:2em;margin:0.67em 0;} hr{box-sizing:content-box;height:0;overflow:visible;} pre{font-family:monospace,monospace;font-size:1em;} a{background-color:transparent;} abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;} b,strong{font-weight:bolder;} code,kbd,samp{font-family:monospace,monospace;font-size:1em;} small{font-size:80%;} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} sub{bottom:-0.25em;} sup{top:-0.5em;} img{border-style:none;} button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;} button,input{overflow:visible;} button,select{text-transform:none;} button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;} button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0;} button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;} fieldset{padding:0.35em 0.75em 0.625em;} legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;} progress{vertical-align:baseline;} textarea{overflow:auto;} [type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0;} [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;} [type="search"]{-webkit-appearance:textfield;outline-offset:-2px;} [type="search"]::-webkit-search-decoration{-webkit-appearance:none;} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;} details{display:block;} summary{display:list-item;} template{display:none;} [hidden]{display:none;} code[class*="language-"],pre[class*="language-"]{font-size:1.5rem;color:#1f1f1f;background:none;text-shadow:0 0.1rem #ffffff;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;} pre[class*="language-"]::-moz-selection,pre[class*="language-"] ::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"] ::-moz-selection{text-shadow:none;background:#b3d4fc;} pre[class*="language-"]::selection,pre[class*="language-"] ::selection,code[class*="language-"]::selection,code[class*="language-"] ::selection{text-shadow:none;background:#b3d4fc;} @media print{code[class*="language-"],pre[class*="language-"]{text-shadow:none;}} pre[class*="language-"]{overflow:auto;} :not(pre) > code[class*="language-"],pre[class*="language-"]{background:#eeefee;padding:2rem;} :not(pre) > code[class*="language-"]{opacity:0.8;font-size:1.5rem;border:1px solid #d3d3d3;border-image:initial;padding:0.5rem;margin:0px 0.5rem;border-radius:.45rem;white-space:normal;background:#f5f2f0;} .token.comment,.token.prolog,.token.doctype,.token.cdata{color:#708090;} .token.punctuation{color:#999;} .namespace{opacity:.7;} .token.property,.token.tag,.token.boolean,.token.number,.token.constant,.token.symbol,.token.deleted{color:#905;} .token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#690;} .token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string{color:#9a6e3a;background:hsla(0,0%,100%,.5);} .token.atrule,.token.attr-value,.token.keyword{color:#07a;} .token.function{color:#cc2345;} .token.regex,.token.important,.token.variable{color:#e90;} .token.important,.token.bold{font-weight:bold;} .token.italic{font-style:italic;} .token.entity{cursor:help;} html{box-sizing:border-box;font-size:62.5%;overflow-x:hidden;} *,*:before,*:after{box-sizing:inherit;-webkit-font-smoothing:antialiased;} body{background-color:#ffffff;color:#242121;font-family:Helvetica,sans-serif;font-size:1.4rem;line-height:1.7;overflow:hidden;position:relative;} blockquote,dl,dd,h2,h3,h4,h5,h6,figure,p,pre,ol,ul,table{margin:1.375em 0 0 0;} button{background:transparent;border:0;padding:0;} button:focus{outline:0.1rem dotted;outline:0.5rem auto -webkit-focus-ring-color;} [tabindex='-1']:focus{outline:none !important;} fieldset{border:0;margin:0;padding:0;} iframe{border:0;} ul{list-style:none;padding:0;} ol ol,ul ul{margin:0;padding:0;} h1{font-size:3rem;font-weight:bold;line-height:1.2;} @media only screen and (min-width:960px){h1{font-size:4.6rem;}} h2,h3,h4,h5,h6{font-weight:bold;line-height:1.5;} h2{font-size:1.75rem;} @media only screen and (min-width:960px){h2{font-size:3rem;}} h3{font-size:1.5rem;} h4{font-size:1.6rem;} @media only screen and (min-width:960px){h4{font-size:2rem;}} h5{font-size:1.125rem;font-weight:normal;-webkit-letter-spacing:0.15em;-moz-letter-spacing:0.15em;-ms-letter-spacing:0.15em;letter-spacing:0.15em;text-transform:uppercase;} h6{font-size:1.25rem;} h1 code,h2 code,h3 code,h4 code,h5 code,h6 code{border:0;font-size:0.85em;padding:0.25em 0.333em 0.2em;} strong{font-style:normal;font-weight:500;} pre,code{font-family:Monaco,Courier,monospace;} li > pre{margin-left:0;} pre[class*='language-'] code,pre[class*='lang-'] code{display:block;margin:0 auto;max-width:100%;} pre code{border:0;} code{border:0.1rem solid rgba(0,0,0,0.1);border-radius:0.1rem;font-variant-ligatures:none;padding:0.33em 0.333em 0.28em;word-break:break-word;} @media only screen and (min-width:960px){code{font-size:1.2rem;}} svg{fill:currentColor;} table{border-collapse:collapse;display:block;overflow:auto;width:100%;} thead,tbody{border:0;font-size:100%;margin:0;padding:0;} thead{font:inherit;vertical-align:baseline;} tbody{vertical-align:middle;} th,td{border:0.1rem solid #999999;padding:0.425rem 0.75rem;vertical-align:top;} th code,td code{background:none;} a{color:#ff684f;-webkit-text-decoration:none;text-decoration:none;} button{cursor:pointer;}
/* sc-component-id: sc-bdVaJa */
.ipGteU{background:#ffffff;box-shadow:0 0.2rem 0.7rem 0 rgba(0,0,0,0.14);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:6.4rem;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding-left:2rem;padding-right:3rem;} @media only screen and (min-width:960px){.ipGteU{padding-left:6rem;padding-right:7.5rem;}}
/* sc-component-id: sc-bwzfXH */
.cQfeck{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;max-width:121rem;width:100%;}
/* sc-component-id: sc-htpNat */
.dXouTZ{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
/* sc-component-id: sc-bxivhb */
.eqPUGv{margin-right:1.5rem;} @media only screen and (min-width:960px){.eqPUGv{display:none;}}
/* sc-component-id: sc-ifAKCX */
.WOpjk{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
/* sc-component-id: sc-EHOje */
.hzttor{color:#242121;font-size:2.4rem;font-weight:bold;-webkit-letter-spacing:0.4rem;-moz-letter-spacing:0.4rem;-ms-letter-spacing:0.4rem;letter-spacing:0.4rem;margin-right:3rem;text-transform:uppercase;} @media only screen and (min-width:960px){.hzttor{font-size:2.8rem;}}
/* sc-component-id: sc-bZQynM */
.irvzTL{margin:0;display:none;} @media only screen and (min-width:960px){.irvzTL{display:block;}}
/* sc-component-id: sc-gzVnrw */
.WDyIt{color:#4c2e29;font-size:1.4rem;-webkit-letter-spacing:0.1rem;-moz-letter-spacing:0.1rem;-ms-letter-spacing:0.1rem;letter-spacing:0.1rem;margin-right:2rem;text-transform:uppercase;}.lTuPy{color:#ff684f;font-size:1.4rem;-webkit-letter-spacing:0.1rem;-moz-letter-spacing:0.1rem;-ms-letter-spacing:0.1rem;letter-spacing:0.1rem;margin-right:2rem;text-transform:uppercase;}
/* sc-component-id: sc-htoDjs */
.fnrBau{color:#4c2e29;font-size:1.4rem;-webkit-letter-spacing:0.1rem;-moz-letter-spacing:0.1rem;-ms-letter-spacing:0.1rem;letter-spacing:0.1rem;margin-right:2rem;text-transform:uppercase;}
/* sc-component-id: sc-dnqmqq */
.cRIOsJ{color:#ff684f;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;} @media only screen and (min-width:960px){.cRIOsJ{display:none;}} .cRIOsJ > svg{height:2.4rem;width:1.8rem;}
/* sc-component-id: sc-iwsKbI */
.dolsWa{color:#242121;display:none;height:2.8rem;position:relative;top:-0.1rem;} @media only screen and (min-width:960px){.dolsWa{display:block;}}
/* sc-component-id: sc-jTzLTM */
.habPzd{text-transform:uppercase;font-family:Helvetica-Bold,sans-serif;font-size:1.4rem;-webkit-letter-spacing:0.53px;-moz-letter-spacing:0.53px;-ms-letter-spacing:0.53px;letter-spacing:0.53px;line-height:2.3rem;color:#ff684f;margin-top:1.6rem;padding-left:1.5rem;}
/* sc-component-id: sc-fjdhpX */
.IgShb{font-family:Helvetica-Bold,sans-serif;font-size:1.4rem;-webkit-letter-spacing:0.53px;-moz-letter-spacing:0.53px;-ms-letter-spacing:0.53px;letter-spacing:0.53px;line-height:2.3rem;color:#bc5240;margin-top:0;}
/* sc-component-id: sc-jzJRlG */
.fekWqh{margin-top:0;}
/* sc-component-id: sc-cSHVUG */
.gZrNRa{padding:0;margin:0;width:100%;}
/* sc-component-id: sc-kAzzGY */
.bWbbyQ{color:#bc5240;font-family:Helvetica-Bold,sans-serif;font-size:1.4rem;-webkit-letter-spacing:0.53px;-moz-letter-spacing:0.53px;-ms-letter-spacing:0.53px;letter-spacing:0.53px;line-height:2.3rem;display:block;padding:0.4rem 0.7rem 0.3rem 3.4rem;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;} .bWbbyQ.is-active{background-color:#DDD;}
/* sc-component-id: sc-chPdSV */
.sbluJ{color:#bc5240;font-family:Helvetica-Bold,sans-serif;font-size:1.4rem;-webkit-letter-spacing:0.53px;-moz-letter-spacing:0.53px;-ms-letter-spacing:0.53px;letter-spacing:0.53px;line-height:2.3rem;display:block;padding:0.4rem 0.7rem 0.3rem 3.4rem;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;} .sbluJ.is-active{background-color:#DDD;}
/* sc-component-id: sc-kgoBCf */
@media only screen and (min-width:960px){.dZBlWh{display:none;}}
/* sc-component-id: sc-kGXeez */
.bbzcNn{margin:0 1.5rem 0 1.5rem;}
/* sc-component-id: sc-kpOJdX */
.hJWFJp{width:100%;border-radius:0.5rem;font-size:1.6rem;line-height:2.3rem;-webkit-letter-spacing:-0.6px;-moz-letter-spacing:-0.6px;-ms-letter-spacing:-0.6px;letter-spacing:-0.6px;padding:0.4rem 0.9rem 0.6rem;color:#1f1f1f;background-color:rgba(255,255,255,0.8);border:none;font-family:Castledown-Bold,sans-serif;}
/* sc-component-id: sc-jKJlTe */
.cftQis{background-color:#f2f2f2;overflow:scroll;overflow-x:hidden;padding:1.8rem 0;position:relative;width:26rem;}
/* sc-component-id: sc-eNQAEJ */
.hWjtUH{font-size:2.8rem;position:absolute;right:1.5rem;top:calc(1.5rem - 0.8rem);} @media only screen and (min-width:960px){.hWjtUH{display:none;}}
/* sc-component-id: sc-hMqMXs */
.cKIaJp{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin-bottom:2.75rem;} .cKIaJp > svg{width:9.8rem;}
/* sc-component-id: sc-kEYyzF */
.eJKrOz{position:relative;margin-left:2.8rem;margin-top:6.4rem;} @media only screen and (min-width:960px){.eJKrOz{margin-left:calc(2.8rem + 26rem);}}
/* sc-component-id: sc-kkGfuU */
.kkSUVJ{left:2.8rem;position:fixed;top:0;width:calc(100% - 2.8rem);z-index:4;} @media only screen and (min-width:960px){.kkSUVJ{left:calc(2.8rem + 26rem);width:calc(100% - 2.8rem - 26rem);}}
/* sc-component-id: sc-iAyFgw */
.ckDzQE{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;position:fixed;left:0;top:0;z-index:5;}
/* sc-component-id: sc-hSdWYo */
.SGjya{height:100%;width:calc(2.8rem / 2);background-color:#ff684f;}
/* sc-component-id: sc-eHgmQL */
.cnLZdZ{height:100%;width:calc(2.8rem / 2);background-color:#ffad9f;}
/* sc-component-id: sc-cvbbAY */
.iFKTNw{display:none;} @media only screen and (min-width:960px){.iFKTNw{display:block;}}
/* sc-component-id: sc-jWBwVP */
.lfIbPe{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:2rem 3rem 5.5rem 2rem;} @media only screen and (min-width:960px){.lfIbPe{padding:4rem 7.5rem 4.5rem 6rem;}}
/* sc-component-id: sc-brqgnP */
.JONJM{max-width:121rem;width:100%;}</style><style data-styled="iVrTpV hswDRW fvKxfn" data-styled-version="4.4.1">
/* sc-component-id: sc-fBuWsC */
.hswDRW{background-color:rgba(255,254,252,0.5);position:relative;width:100%;} @media only screen and (min-width:960px){.hswDRW .playgroundStage{height:40rem;}} .hswDRW .playground{position:relative;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:none;-ms-flex-wrap:none;flex-wrap:none;padding:0;margin:4rem -4rem;} @media only screen and (min-width:1200px){.hswDRW .playground{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}} .hswDRW .playgroundCode{-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;-webkit-order:2;-ms-flex-order:2;order:2;margin:4rem 0;position:relative;} @media only screen and (min-width:960px){.hswDRW .playgroundCode{margin-top:4.3rem;}} .hswDRW .playgroundCode:before,.hswDRW .playgroundPreview:before{position:absolute;top:0;left:0;right:0;color:#708090;font-size:0.9em;line-height:1;-webkit-letter-spacing:0.15em;-moz-letter-spacing:0.15em;-ms-letter-spacing:0.15em;letter-spacing:0.15em;text-align:center;text-transform:uppercase;} .hswDRW .playgroundCode:before{content:"Editable Source";padding:1.25em 0.5em;top:inherit;bottom:100%;} .hswDRW .playgroundStage{background-color:#eeefee;overflow:auto;padding:1.5rem 2.75rem;width:80%;margin:0 auto;resize:both;-webkit-transition:background-color 195ms ease-in;transition:background-color 195ms ease-in;min-height:40rem;} @media only screen and (min-width:1200px){.hswDRW .playgroundStage{width:95%;min-height:110%;}} .hswDRW .playgroundStage.ReactCodeMirror--focused{background-color:#fffefc;-webkit-transition:background-color 250ms ease-out;transition:background-color 250ms ease-out;} .hswDRW .playgroundPreview{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:0 1 40rem;-ms-flex:0 1 40rem;flex:0 1 40rem;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-order:1;-ms-flex-order:1;order:1;position:relative;text-align:center;margin:0 auto;min-width:80%;} @media only screen and (min-width:1200px){.hswDRW .playgroundPreview{min-width:50%;}} .hswDRW .playgroundPreview:before{content:"Live Preview";padding:1.25em 0.5em;} .hswDRW .playgroundPreview > div:first-child{width:100%;margin:1em auto;} .hswDRW .previewArea{background-color:white;height:100%;min-height:calc(40rem* 0.5);margin:3em auto;overflow-x:auto;} .hswDRW .previewArea{height:inherit;max-height:100%;width:auto;} .hswDRW .previewArea > svg{max-height:40rem;} .hswDRW .playgroundPreview .VictoryContainer svg{margin:0 auto;max-height:calc(40rem);max-width:100%;} .hswDRW .playgroundError{background:#ad1b11;color:#ffffff;font-family:Monaco,Courier,monospace;font-size:1rem;font-weight:normal;line-height:1.2;overflow:scroll;padding:1.5rem;text-align:left;white-space:pre;width:100%;} .hswDRW .CodeMirror-line{background:none !important;} .hswDRW .cm-s-elegant.CodeMirror{height:auto;overflow:hidden;padding:0;background:none !important;color:#999;font-family:Monaco,Courier,monospace;font-size:1.3rem;font-variant-ligatures:none;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;line-height:1.9;tab-size:2;text-shadow:0 0.1rem white;white-space:pre;word-break:normal;word-spacing:normal;word-wrap:normal;} .hswDRW .cm-s-elegant .CodeMirror-selected{background:#b3d4fc;color:white;} .hswDRW .cm-s-elegant .CodeMirror-activeline{background:#b3d4fc;} .hswDRW .cm-s-elegant .CodeMirror-activeline-background{background:#b3d4fc;} .hswDRW .cm-s-elegant .CodeMirror-gutters{background:#fffefc !important;} .hswDRW .cm-s-elegant .CodeMirror-foldgutter-open,.hswDRW .CodeMirror-foldgutter-folded{color:#999999;} .hswDRW .cm-s-elegant div.CodeMirror-cursor{border-left:0.1rem solid #1f1f1f !important;} .hswDRW .cm-s-elegant span.cm-builtin{color:#ffffff;-webkit-text-decoration:underline;text-decoration:underline;} .hswDRW .cm-s-elegant span.cm-atom{color:#cc2345;} .hswDRW .cm-s-elegant span.cm-attribute{color:#690;} .hswDRW .cm-s-elegant span.cm-comment{color:#708090;} .hswDRW .cm-s-elegant span.cm-def{color:#333333;} .hswDRW .cm-s-elegant span.cm-header{color:#b3d4fc;} .hswDRW .cm-s-elegant span.cm-keyword{color:#07a;} .hswDRW .cm-s-elegant span.cm-meta{color:#708090;} .hswDRW .cm-s-elegant span.cm-number{color:#905;} .hswDRW .cm-s-elegant span.cm-operater,.hswDRW .cm-s-elegant span.cm-operator{color:#9a6e3a;} .hswDRW .cm-s-elegant span.cm-property{color:#cc2345;} .hswDRW .cm-s-elegant span.cm-qualifier{color:#cc2345;} .hswDRW .cm-s-elegant span.cm-string{color:#007a71;} .hswDRW .cm-s-elegant span.cm-string-2{color:#007a71;} .hswDRW .cm-s-elegant span.cm-tag{color:#905;} .hswDRW .cm-s-elegant span.cm-tag.cm-bracket,.hswDRW .cm-s-elegant span.cm-bracket{color:#9a6e3a;} .hswDRW .cm-s-elegant span.cm-variable,.hswDRW .cm-s-elegant span.cm-variable-2{color:#1f1f1f;} .hswDRW .cm-s-elegant span.CodeMirror-matchingbracket{box-sizing:border-box;background:transparent;border-bottom:0.1rem solid;} .hswDRW .cm-s-elegant span.CodeMirror-nonmatchingbracket{border-bottom:0.1rem solid;background:none;}
/* sc-component-id: sc-fMiknA */
.fvKxfn{font-size:1rem !important;}
/* sc-component-id: sc-eqIVtm */
.iVrTpV .inner-ring,.iVrTpV .outer-ring{-webkit-transition:0.3s;transition:0.3s;} .iVrTpV:hover .inner-ring{opacity:0.3;} .iVrTpV:hover .outer-ring{opacity:0.6;}</style><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="shortcut icon" href="../static/logos/favicon.ico"/></head><title>Victory</title><body><div id="root"><main class="sc-kEYyzF eJKrOz Page-content"><header class="sc-bdVaJa ipGteU sc-kkGfuU kkSUVJ"><div class="sc-bwzfXH cQfeck"><div class="sc-htpNat dXouTZ"><button class="sc-bxivhb eqPUGv"><span class="isvg pending sc-ifAKCX WOpjk"></span></button><a class="sc-EHOje hzttor" href="/open-source/victory/">Victory</a><ul class="sc-bZQynM irvzTL"><a class="sc-gzVnrw WDyIt" href="/open-source/victory/about">About</a><a class="sc-gzVnrw lTuPy" href="/open-source/victory/docs">Docs</a><a class="sc-gzVnrw WDyIt" href="/open-source/victory/gallery">Gallery</a><a href="https://spectrum.chat/victory" target="_blank" rel="noopener noreferrer" class="sc-htoDjs fnrBau">Support</a><a href="https://github.com/FormidableLabs/victory" target="_blank" rel="noopener noreferrer" class="sc-htoDjs fnrBau">GitHub</a><a class="sc-gzVnrw WDyIt" href="/open-source/victory/docs/faq">FAQs</a></ul></div><a href="https://formidable.com/" target="_blank" rel="noopener noreferrer"><span class="isvg pending sc-dnqmqq cRIOsJ"></span></a><a href="https://formidable.com/" target="_blank" rel="noopener noreferrer"><span class="isvg pending sc-iwsKbI dolsWa"></span></a></div></header><aside class="sc-iAyFgw ckDzQE"><div class="sc-hSdWYo SGjya"></div><div class="sc-eHgmQL cnLZdZ"></div><nav class="sc-jKJlTe cftQis sc-cvbbAY iFKTNw"><button class="sc-eNQAEJ hWjtUH">×</button><a class="sc-hMqMXs cKIaJp" href="/open-source/victory/"><svg viewBox="0 0 600 595" xmlns="http://www.w3.org/2000/svg" class="sc-eqIVtm iVrTpV"><g fill="none" fill-rule="evenodd"><path d="M342.277 9.4l195.971 87.165C575.801 113.268 600 150.515 600 191.616v211.961c0 41.1-24.199 78.348-61.752 95.051l-195.971 87.165a104.029 104.029 0 01-84.554 0L61.752 498.628C24.199 481.925 0 444.678 0 403.578V191.615c0-41.1 24.199-78.348 61.752-95.05L257.723 9.4a104.029 104.029 0 0184.554 0z" fill="#202020"></path><path d="M332.269 43.303a79.877 79.877 0 00-64.741 0L76.38 128.036c-24.842 11.012-40.858 35.632-40.858 62.805v213.702c0 27.174 16.016 51.793 40.858 62.805l191.148 84.734a79.877 79.877 0 0064.74 0l191.148-84.734c24.842-11.012 40.859-35.631 40.859-62.805V190.841c0-27.173-16.017-51.793-40.859-62.805L332.27 43.303z" stroke="#FF684F" class="inner-ring" stroke-width="24.247" opacity=".499"></path><path d="M337.399 20.368a92.026 92.026 0 00-74.798 0l-195.97 87.165c-33.221 14.775-54.628 47.725-54.628 84.083v211.961c0 36.358 21.407 69.308 54.627 84.084l195.971 87.164a92.026 92.026 0 0074.798 0l195.97-87.164c33.221-14.776 54.628-47.726 54.628-84.084v-211.96c0-36.359-21.407-69.309-54.627-84.084L337.399 20.368z" stroke="#FF684F" class="outer-ring" stroke-width="24.007"></path><text font-family="Helvetica-Bold, Helvetica" font-size="51" font-weight="bold" letter-spacing="2" fill="#FF684F" transform="translate(0 -10)"><tspan x="181" y="459">VICTORY</tspan></text><path fill="#FF684F" d="M223.963 151h21.98l58.319 213H282.28z"></path><path fill="#E04126" d="M362.13 233.44H340L304.263 364h21.973z"></path><path fill="#FF684F" d="M401.607 169.473h-21.904l-26.201 95.357h21.814z"></path><path d="M201.981 151h21.982l58.317 213a28.809 28.809 0 01-27.786-21.201L201.981 151z" fill="#E04126"></path><path d="M245.944 151a28.809 28.809 0 0127.786 21.201L326.243 364h-21.981l-58.318-213z" fill="#FF9877"></path><path d="M223.963 151l5.068 18.473h-24.595A25.079 25.079 0 01180.243 151h43.72z" fill="#FF684F"></path><path d="M409.967 203.367c8.993-6.29 11.19-18.675 4.911-27.675l-18.836-26.996-30.789 14.49c-9.982 4.698-14.266 16.599-9.568 26.581l.01.021 33.724-15.872 20.548 29.45z" fill="#FF684F" fill-rule="nonzero"></path></g></svg></a><div class="sc-kGXeez bbzcNn"><input type="search" placeholder="Filter..." value="" class="sc-kpOJdX hJWFJp"/></div><p class="sc-jTzLTM habPzd">Introduction</p><ul class="sc-fjdhpX IgShb"><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs">Getting Started</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/native">Native</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/new">New Features</a></li><div class="sc-kgoBCf dZBlWh"><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/about">About</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/gallery">Gallery</a></li><li class="sc-cSHVUG gZrNRa"><a href="https://spectrum.chat/victory" target="_blank" rel="noopener noreferrer" class="sc-kAzzGY bWbbyQ">Support</a></li><li class="sc-cSHVUG gZrNRa"><a href="https://github.com/FormidableLabs/victory" target="_blank" rel="noopener noreferrer" class="sc-kAzzGY bWbbyQ">Github</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/faq">FAQs</a></li></div></ul><p class="sc-jTzLTM habPzd">Support</p><ul class="sc-fjdhpX IgShb"><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/faq/">FAQs</a></li></ul><p class="sc-jTzLTM habPzd">Guides</p><ul class="sc-fjdhpX IgShb"><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/guides/animations">Animations</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/guides/brush-and-zoom">Brush and Zoom</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/guides/custom-charts">Custom Charts</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/guides/custom-components">Custom Components</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/guides/data-accessors">Data Accessors</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/guides/events">Events</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/guides/layout">Layout</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/guides/polar-charts">Polar Charts</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/guides/themes">Themes</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/guides/tooltips">Tooltips</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/guides/zoom-on-large-datasets">Zoom on Large Datasets</a></li></ul><p class="sc-jTzLTM habPzd">Documentation</p><ul class="sc-fjdhpX IgShb"><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/common-props/">Common Props</a></li></ul><div><p class="sc-jTzLTM habPzd">Charts</p><ul class="sc-jzJRlG fekWqh"><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-box-plot">VictoryBoxPlot</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-area">VictoryArea</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-axis">VictoryAxis</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-bar">VictoryBar</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-candlestick">VictoryCandlestick</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-chart">VictoryChart</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-error-bar">VictoryErrorBar</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-group">VictoryGroup</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-line">VictoryLine</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-pie">VictoryPie</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-polar-axis">VictoryPolarAxis</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-scatter">VictoryScatter</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-stack">VictoryStack</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-voronoi">VictoryVoronoi</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-histogram">VictoryHistogram</a></li></ul></div><div><p class="sc-jTzLTM habPzd">Containers</p><ul class="sc-jzJRlG fekWqh"><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-brush-container">VictoryBrushContainer</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-container">VictoryContainer</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-cursor-container">VictoryCursorContainer</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-selection-container">VictorySelectionContainer</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-voronoi-container">VictoryVoronoiContainer</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-zoom-container">VictoryZoomContainer</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/create-container">createContainer</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/common-container-props">Common Container Props</a></li></ul></div><div><p class="sc-jTzLTM habPzd">More</p><ul class="sc-jzJRlG fekWqh"><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-animation">VictoryAnimation</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-brush-line">VictoryBrushLine</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-clip-container">VictoryClipContainer</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-label">VictoryLabel</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-legend">VictoryLegend</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-portal">VictoryPortal</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-primitives">VictoryPrimitives</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-shared-events">VictorySharedEvents</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-theme">VictoryTheme</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-tooltip">VictoryTooltip</a></li><li class="sc-cSHVUG gZrNRa"><a class="sc-chPdSV sbluJ" prefetch="data" href="/open-source/victory/docs/victory-transition">VictoryTransition</a></li></ul></div></nav></aside><article class="sc-jWBwVP lfIbPe"><div class="sc-brqgnP JONJM"><div><div>
  <h1>
    <a class="hidden-anchor" aria-hidden="true" id="tooltips" href="#tooltips">
    <svg viewBox="0 0 16 16" version="1.1" width="16" height="16"
          aria-hidden="true">
      <path fill-rule="evenodd"
            d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
    </svg>
  </a> Tooltips
  </h1>
</div><p><a href="/open-source/victory/docs/victory-tooltip"><code>VictoryTooltip</code></a> is a label component with <code>defaultEvents</code> It renders a customizable flyout container as well as a <code>VictoryLabel</code> component. <code>VictoryTooltip</code> can be used with any Victory component by setting the <code>labelComponent</code> prop like so <code>labelComponent={&lt;VictoryTooltip/&gt;</code></p><p>This guide discusses customization and advanced usage of tooltips in Victory</p><div>
  <h2>
    <a class="Anchor" aria-hidden="true" id="simple-tooltips" href="#simple-tooltips">
    <svg viewBox="0 0 16 16" version="1.1" width="16" height="16"
          aria-hidden="true">
      <path fill-rule="evenodd"
            d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
    </svg>
  </a> Simple tooltips
  </h2>
</div><p>The simplest way to add tooltips to a chart is to use <code>VictoryTooltip</code> as a <code>labelComponent</code> as in the example below:</p><div class="sc-fBuWsC hswDRW"><div class="playground"><div class="playgroundCode"></div><div class="playgroundPreview"><div><div class="previewArea"></div></div></div></div></div><p>When tooltips are added to a chart in this way, <code>defaultEvents</code> on <code>VictoryTooltip</code> are automatically added to the component using them, in this case <code>VictoryBar</code>. By default, <code>VictoryTooltip</code> will adjust its position, orientation, and the width and height of its container to match the corresponding data and labels.</p><div>
  <h2>
    <a class="Anchor" aria-hidden="true" id="customizing-tooltips" href="#customizing-tooltips">
    <svg viewBox="0 0 16 16" version="1.1" width="16" height="16"
          aria-hidden="true">
      <path fill-rule="evenodd"
            d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
    </svg>
  </a> Customizing Tooltips
  </h2>
</div><p>Tooltips can be customized directly on the <code>VictoryTooltip</code> component</p><div class="sc-fBuWsC hswDRW"><div class="playground"><div class="playgroundCode"></div><div class="playgroundPreview"><div><div class="previewArea"></div></div></div></div></div><p><code>VictoryTooltip</code> is composed of <a href="/open-source/victory/docs/victory-label"><code>VictoryLabel</code></a> and the primitive <a href="/open-source/victory/docs/victory-primitives#flyout"><code>Flyout</code></a> component. Both of these components are highly configurable, but may also be replaced if necessary.</p><div class="sc-fBuWsC hswDRW"><div class="playground"><div class="playgroundCode"></div><div class="playgroundPreview"><div><div class="previewArea"></div></div></div></div></div><div>
  <h2>
    <a class="Anchor" aria-hidden="true" id="tooltips-with-victoryvoronoicontainer" href="#tooltips-with-victoryvoronoicontainer">
    <svg viewBox="0 0 16 16" version="1.1" width="16" height="16"
          aria-hidden="true">
      <path fill-rule="evenodd"
            d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
    </svg>
  </a> Tooltips with VictoryVoronoiContainer
  </h2>
</div><p>Voronoi tooltips are useful for adding tooltips to a line, or adding tooltips to data points that
are too small to hover over effectively. <code>VictoryVoronoiContainer</code> calculates a voronoi diagram
based on the data of every child component it renders. The voronoi data is used to associate a
mouse position with its nearest data point(s). When <code>VictoryVoronoiContainer</code> is added as the
<code>containerComponent</code> of your chart, changes in mouse position will add and remove the <code>active</code> prop
on appropriate data and label elements.</p><div class="sc-fBuWsC hswDRW"><div class="playground"><div class="playgroundCode"></div><div class="playgroundPreview"><div><div class="previewArea"></div></div></div></div></div><div>
  <h2>
    <a class="Anchor" aria-hidden="true" id="multi-point-tooltips-with-victoryvoronoicontainer" href="#multi-point-tooltips-with-victoryvoronoicontainer">
    <svg viewBox="0 0 16 16" version="1.1" width="16" height="16"
          aria-hidden="true">
      <path fill-rule="evenodd"
            d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
    </svg>
  </a> Multi-point Tooltips with VictoryVoronoiContainer
  </h2>
</div><p><code>VictoryVoronoiContainer</code> can also be used to create multi-point labels when the <code>labels</code> prop is
provided. In the example below the <code>voronoiDimension</code> prop indicates that the voronoi diagram
will only be specific to the x dimension. For a given mouse position, all data matching the
associated x value will be activated regardless of y value. In the following example, this leads to
several tooltips being active at the same time. Provide a <code>labels</code> and (optionally) a
<code>labelComponent</code> prop to configure multi-point labels.</p><div class="sc-fBuWsC hswDRW"><div class="playground"><div class="playgroundCode"></div><div class="playgroundPreview"><div><div class="previewArea"></div></div></div></div></div><p><code>VictoryVoronoiContainer</code> also has a <code>mouseFollowTooltips</code> boolean prop that works with single point and multi-point tooltip labels.</p><div class="sc-fBuWsC hswDRW"><div class="playground"><div class="playgroundCode"></div><div class="playgroundPreview"><div><div class="previewArea"></div></div></div></div></div><div>
  <h2>
    <a class="Anchor" aria-hidden="true" id="tooltips-with-other-events" href="#tooltips-with-other-events">
    <svg viewBox="0 0 16 16" version="1.1" width="16" height="16"
          aria-hidden="true">
      <path fill-rule="evenodd"
            d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
    </svg>
  </a> Tooltips with Other Events
  </h2>
</div><p><code>VictoryTooltip</code> automatically attaches events to data components. When events of the same type are specified for data components, it is necessary to reconcile events so that tooltips still work. For web, the default tooltip events are:</p><pre class="sc-fMiknA fvKxfn language-jsx"><code class="language-jsx"><span class="token keyword">static</span> defaultEvents <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
  target<span class="token operator">:</span> <span class="token string">"data"</span><span class="token punctuation">,</span>
  eventHandlers<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function-variable function">onMouseOver</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        target<span class="token operator">:</span> <span class="token string">"labels"</span><span class="token punctuation">,</span>
        <span class="token function-variable function">mutation</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> active<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function-variable function">onMouseOut</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token punctuation">{</span>
        target<span class="token operator">:</span> <span class="token string">"labels"</span><span class="token punctuation">,</span>
        <span class="token function-variable function">mutation</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> active<span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span></code></pre><p>When other <code>onMouseOver</code> and <code>onMouseOut</code> events are specified for data, the event returns described above must be added to the events for tooltips to continue to work properly.</p><div class="sc-fBuWsC hswDRW"><div class="playground"><div class="playgroundCode"></div><div class="playgroundPreview"><div><div class="previewArea"></div></div></div></div></div><div>
  <h2>
    <a class="Anchor" aria-hidden="true" id="wrapping-victorytooltip" href="#wrapping-victorytooltip">
    <svg viewBox="0 0 16 16" version="1.1" width="16" height="16"
          aria-hidden="true">
      <path fill-rule="evenodd"
            d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
    </svg>
  </a> Wrapping VictoryTooltip
  </h2>
</div><p>The events that control <code>VictoryTooltip</code> are stored on the static <code>defaultEvents</code> property. Wrapped instances of <code>VictoryTooltip</code> will need to replicate or hoist this property in order to add automatic events to the components that use them.</p><div class="sc-fBuWsC hswDRW"><div class="playground"><div class="playgroundCode"></div><div class="playgroundPreview"><div><div class="previewArea"></div></div></div></div></div><div>
  <h2>
    <a class="Anchor" aria-hidden="true" id="victory-native" href="#victory-native">
    <svg viewBox="0 0 16 16" version="1.1" width="16" height="16"
          aria-hidden="true">
      <path fill-rule="evenodd"
            d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
    </svg>
  </a> Victory Native
  </h2>
</div><p>In Victory Native tooltips are much more reliable when using <code>VictoryVoronoiContainer</code>. Using <code>VictoryVoronoiContainer</code> registers all touch events on the container itself, which mitigates interference with other chart element, which can be a problem on some platforms. Showing the closest data point with <code>VictoryVoronoiContainer</code> also increases the tap targets for the tooltip, which can otherwise be quite small. Set <code>VictoryVoronoiContainer</code> as the <code>containerComponent</code> prop on the outermost Victory component.</p><pre class="sc-fMiknA fvKxfn language-jsx"><code class="language-jsx"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">VictoryChart</span></span> <span class="token attr-name">containerComponent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">VictoryVoronoiContainer</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span> <span class="token punctuation">></span></span>
  <span class="token operator">&lt;</span>VictoryScatter
    labelComponent<span class="token operator">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">VictoryTooltip</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span>
    labels<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> datum <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> datum<span class="token punctuation">.</span>y<span class="token punctuation">}</span>
    style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> data<span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token function-variable function">fill</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> datum <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> datum<span class="token punctuation">.</span>fill <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span>
    data<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
      <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> y<span class="token operator">:</span> <span class="token number">5</span> <span class="token punctuation">}</span>
    <span class="token punctuation">]</span><span class="token punctuation">}</span>
  <span class="token operator">/</span><span class="token operator">></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">VictoryChart</span></span><span class="token punctuation">></span></span></code></pre></div></div></article></main></div><script type="text/javascript">
    window.__routeInfo = JSON.parse("{\"template\":\"/Users/boygirl/formidable/victory-docs/src/pages/docs-template\",\"sharedHashesByProp\":{},\"data\":{\"doc\":{\"data\":{\"id\":10,\"title\":\"Tooltips\",\"category\":\"guides\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Tooltips\",\"depth\":1,\"slug\":\"tooltips\"},{\"type\":\"heading\",\"value\":\"Simple tooltips\",\"depth\":2,\"slug\":\"simple-tooltips\"},{\"type\":\"heading\",\"value\":\"Customizing Tooltips\",\"depth\":2,\"slug\":\"customizing-tooltips\"},{\"type\":\"heading\",\"value\":\"Tooltips with VictoryVoronoiContainer\",\"depth\":2,\"slug\":\"tooltips-with-victory-voronoi-container\"},{\"type\":\"heading\",\"value\":\"Multi-point Tooltips with VictoryVoronoiContainer\",\"depth\":2,\"slug\":\"multi-point-tooltips-with-victory-voronoi-container\"},{\"type\":\"heading\",\"value\":\"Tooltips with Other Events\",\"depth\":2,\"slug\":\"tooltips-with-other-events\"},{\"type\":\"heading\",\"value\":\"Wrapping VictoryTooltip\",\"depth\":2,\"slug\":\"wrapping-victory-tooltip\"},{\"type\":\"heading\",\"value\":\"Victory Native\",\"depth\":2,\"slug\":\"victory-native\"}],\"slug\":\"tooltips\",\"type\":\"guides\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Tooltips\",\"depth\":1,\"slug\":\"tooltips\",\"category\":\"guides\",\"children\":[{\"type\":\"heading\",\"value\":\"Simple tooltips\",\"depth\":2,\"slug\":\"simple-tooltips\"},{\"type\":\"heading\",\"value\":\"Customizing Tooltips\",\"depth\":2,\"slug\":\"customizing-tooltips\"},{\"type\":\"heading\",\"value\":\"Tooltips with VictoryVoronoiContainer\",\"depth\":2,\"slug\":\"tooltips-with-victory-voronoi-container\"},{\"type\":\"heading\",\"value\":\"Multi-point Tooltips with VictoryVoronoiContainer\",\"depth\":2,\"slug\":\"multi-point-tooltips-with-victory-voronoi-container\"},{\"type\":\"heading\",\"value\":\"Tooltips with Other Events\",\"depth\":2,\"slug\":\"tooltips-with-other-events\"},{\"type\":\"heading\",\"value\":\"Wrapping VictoryTooltip\",\"depth\":2,\"slug\":\"wrapping-victory-tooltip\"},{\"type\":\"heading\",\"value\":\"Victory Native\",\"depth\":2,\"slug\":\"victory-native\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 10\\ntitle: Tooltips\\ncategory: guides\\nscope: null\\n---\\n\\n# Tooltips\\n\\n[`VictoryTooltip`][] is a label component with `defaultEvents` It renders a customizable flyout container as well as a `VictoryLabel` component. `VictoryTooltip` can be used with any Victory component by setting the `labelComponent` prop like so `labelComponent={<VictoryTooltip/>`\\n\\nThis guide discusses customization and advanced usage of tooltips in Victory\\n\\n## Simple tooltips\\n\\nThe simplest way to add tooltips to a chart is to use `VictoryTooltip` as a `labelComponent` as in the example below:\\n\\n```playground\\n<VictoryChart\\n  domain={{ x: [0, 11], y: [-10, 10] }}\\n>\\n  <VictoryBar\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 2, y: 5, label: \\\"right-side-up\\\"},\\n      {x: 4, y: -6, label: \\\"upside-down\\\"},\\n      {x: 6, y: 4, label: \\\"tiny\\\"},\\n      {x: 8, y: -5, label: \\\"or a little \\\\n BIGGER\\\"},\\n      {x: 10, y: 7, label: \\\"automatically\\\"}\\n    ]}\\n    style={{\\n      data: {fill: \\\"tomato\\\", width: 20}\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\nWhen tooltips are added to a chart in this way, `defaultEvents` on `VictoryTooltip` are automatically added to the component using them, in this case `VictoryBar`. By default, `VictoryTooltip` will adjust its position, orientation, and the width and height of its container to match the corresponding data and labels.\\n\\n## Customizing Tooltips\\n\\nTooltips can be customized directly on the `VictoryTooltip` component\\n\\n```playground\\n<VictoryChart\\n  domain={{ x: [0, 11], y: [-10, 10] }}\\n>\\n  <VictoryBar\\n    labelComponent={\\n      <VictoryTooltip\\n        cornerRadius={({ datum }) => datum.x > 6 ? 0 : 20}\\n        pointerLength={({ datum }) => datum.y > 0 ? 5 : 20}\\n        flyoutStyle={{\\n          stroke: ({ datum }) => datum.x === 10\\n            ? \\\"tomato\\\"\\n            : \\\"black\\\"\\n        }}\\n      />\\n    }\\n    data={[\\n      {x: 2, y: 5, label: \\\"right-side-up\\\"},\\n      {x: 4, y: -6, label: \\\"upside-down\\\"},\\n      {x: 6, y: 4, label: \\\"tiny\\\"},\\n      {x: 8, y: -5, label: \\\"or a little \\\\n BIGGER\\\"},\\n      {x: 10, y: 7, label: \\\"automatically\\\"}\\n    ]}\\n    style={{\\n      data: {fill: \\\"tomato\\\", width: 20}\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictoryTooltip` is composed of [`VictoryLabel`][] and the primitive [`Flyout`][] component. Both of these components are highly configurable, but may also be replaced if necessary.\\n\\n```playground_norender\\nclass CustomFlyout extends React.Component {\\n  render() {\\n    const {x, y, orientation} = this.props;\\n    const newY = orientation === \\\"bottom\\\" ? y - 35 : y + 35;\\n    return (\\n      <g>\\n        <circle cx={x} cy={newY} r=\\\"20\\\" stroke=\\\"tomato\\\" fill=\\\"none\\\"/>\\n        <circle cx={x} cy={newY} r=\\\"25\\\" stroke=\\\"orange\\\" fill=\\\"none\\\"/>\\n        <circle cx={x} cy={newY} r=\\\"30\\\" stroke=\\\"gold\\\" fill=\\\"none\\\"/>\\n      </g>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n          domain={{ x: [0, 11], y: [-10, 10] }}\\n        >\\n          <VictoryBar\\n            labelComponent={\\n              <VictoryTooltip\\n                flyoutComponent={<CustomFlyout/>}\\n              />\\n            }\\n            data={[\\n              {x: 2, y: 5, label: \\\"A\\\"},\\n              {x: 4, y: -6, label: \\\"B\\\"},\\n              {x: 6, y: 4, label: \\\"C\\\"},\\n              {x: 8, y: -5, label: \\\"D\\\"},\\n              {x: 10, y: 7, label: \\\"E\\\"}\\n            ]}\\n            style={{\\n              data: {fill: \\\"tomato\\\", width: 20},\\n              labels: { fill: \\\"tomato\\\"}\\n            }}\\n          />\\n        </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## Tooltips with VictoryVoronoiContainer\\n\\nVoronoi tooltips are useful for adding tooltips to a line, or adding tooltips to data points that\\nare too small to hover over effectively. `VictoryVoronoiContainer` calculates a voronoi diagram\\nbased on the data of every child component it renders. The voronoi data is used to associate a\\nmouse position with its nearest data point(s). When `VictoryVoronoiContainer` is added as the\\n`containerComponent` of your chart, changes in mouse position will add and remove the `active` prop\\non appropriate data and label elements.\\n\\n```playground\\n<VictoryChart\\n  domain={{x: [0, 5], y: [-5, 5]}}\\n  containerComponent={<VictoryVoronoiContainer/>}\\n>\\n  <VictoryScatter\\n    style={{\\n      data: {fill: \\\"tomato\\\"}, labels: {fill: \\\"tomato\\\"}\\n    }}\\n    size={({ active }) => active ? 5 : 3}\\n    labels={({ datum }) => datum.y}\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 1, y: -4},\\n      {x: 2, y: 4},\\n      {x: 3, y: 2},\\n      {x: 4, y: 1}\\n    ]}\\n  />\\n  <VictoryScatter\\n    style={{\\n      data: {fill: \\\"blue\\\"}, labels: {fill: \\\"blue\\\"}\\n    }}\\n    size={(datum, active) => active ? 5 : 3}\\n    labels={({ datum }) => datum.y}\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 1, y: -3},\\n      {x: 2, y: 3},\\n      {x: 3, y: 3},\\n      {x: 4, y: 0}\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      {x: 1, y: 4},\\n      {x: 2, y: -4},\\n      {x: 3, y: -2},\\n      {x: 4, y: -3}\\n    ]}\\n    labels={({ datum }) => datum.y}\\n    labelComponent={<VictoryTooltip/>}\\n    size={({ active }) => active ? 5 : 3}\\n  />\\n</VictoryChart>\\n```\\n\\n## Multi-point Tooltips with VictoryVoronoiContainer\\n\\n`VictoryVoronoiContainer` can also be used to create multi-point labels when the `labels` prop is\\nprovided. In the example below the `voronoiDimension` prop indicates that the voronoi diagram\\nwill only be specific to the x dimension. For a given mouse position, all data matching the\\nassociated x value will be activated regardless of y value. In the following example, this leads to\\nseveral tooltips being active at the same time. Provide a `labels` and (optionally) a\\n`labelComponent` prop to configure multi-point labels.\\n\\n```playground\\n<VictoryChart\\n  containerComponent={\\n    <VictoryVoronoiContainer voronoiDimension=\\\"x\\\"\\n      labels={({ datum }) => `y: ${datum.y}`}\\n      labelComponent={<VictoryTooltip cornerRadius={0} flyoutStyle={{fill: \\\"white\\\"}}/>}\\n    />\\n  }\\n>\\n  <VictoryAxis/>\\n  <VictoryLine\\n    data={[\\n      {x: 1, y: 5, l: \\\"one\\\"},\\n      {x: 1.5, y: 5, l: \\\"one point five\\\"},\\n      {x: 2, y: 4, l: \\\"two\\\"},\\n      {x: 3, y: -2, l: \\\"three\\\"}\\n    ]}\\n    style={{\\n      data: { stroke: \\\"tomato\\\", strokeWidth: ({ active }) => active ? 4 : 2},\\n      labels: {fill: \\\"tomato\\\"}\\n    }}\\n  />\\n\\n  <VictoryLine\\n    data={[\\n      {x: 1, y: -3, l: \\\"red\\\"},\\n      {x: 2, y: 5, l: \\\"green\\\"},\\n      {x: 3, y: 3, l: \\\"blue\\\"}\\n    ]}\\n    style={{\\n      data: { stroke: \\\"blue\\\", strokeWidth: ({ active }) => active ? 4 : 2},\\n      labels: {fill: \\\"blue\\\"}\\n    }}\\n  />\\n\\n  <VictoryLine\\n    data={[\\n      {x: 1, y: 5, l: \\\"cat\\\"},\\n      {x: 2, y: -4, l: \\\"dog\\\"},\\n      {x: 3, y: -2, l: \\\"bird\\\"}\\n    ]}\\n    style={{\\n      data: { stroke: \\\"black\\\", strokeWidth: ({ active }) => active ? 4 : 2},\\n      labels: {fill: \\\"black\\\"}\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictoryVoronoiContainer` also has a `mouseFollowTooltips` boolean prop that works with single point and multi-point tooltip labels.\\n\\n```playground\\n<VictoryChart domain={{ y: [0, 6] }}\\n  containerComponent={\\n    <VictoryVoronoiContainer\\n      mouseFollowTooltips\\n      voronoiDimension=\\\"x\\\"\\n      labels={({ datum }) => `y: ${datum.y}`}\\n    />\\n  }\\n>\\n  <VictoryScatter\\n  \\tstyle={{ data: { fill: \\\"red\\\" }, labels: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## Tooltips with Other Events\\n\\n`VictoryTooltip` automatically attaches events to data components. When events of the same type are specified for data components, it is necessary to reconcile events so that tooltips still work. For web, the default tooltip events are:\\n\\n```jsx\\nstatic defaultEvents = [{\\n  target: \\\"data\\\",\\n  eventHandlers: {\\n    onMouseOver: () => {\\n      return {\\n        target: \\\"labels\\\",\\n        mutation: () => ({ active: true })\\n      };\\n    },\\n    onMouseOut: () => {\\n      return {\\n        target: \\\"labels\\\",\\n        mutation: () => ({ active: false })\\n      };\\n    }\\n  }\\n}];\\n```\\n\\nWhen other `onMouseOver` and `onMouseOut` events are specified for data, the event returns described above must be added to the events for tooltips to continue to work properly.\\n\\n```playground\\n<VictoryChart\\n  domain={{ x: [0, 11], y: [-10, 10] }}\\n>\\n  <VictoryBar\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 2, y: 5, label: \\\"A\\\"},\\n      {x: 4, y: -6, label: \\\"B\\\"},\\n      {x: 6, y: 4, label: \\\"C\\\"},\\n      {x: 8, y: -5, label: \\\"D\\\"},\\n      {x: 10, y: 7, label: \\\"E\\\"}\\n    ]}\\n    style={{\\n      data: {fill: \\\"tomato\\\", width: 20}\\n    }}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onMouseOver: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: () => ({style: {fill: \\\"gold\\\", width: 30}})\\n            }, {\\n              target: \\\"labels\\\",\\n              mutation: () => ({ active: true })\\n            }\\n          ];\\n        },\\n        onMouseOut: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: () => {}\\n            }, {\\n              target: \\\"labels\\\",\\n              mutation: () => ({ active: false })\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n  />\\n</VictoryChart>\\n```\\n\\n## Wrapping VictoryTooltip\\n\\nThe events that control `VictoryTooltip` are stored on the static `defaultEvents` property. Wrapped instances of `VictoryTooltip` will need to replicate or hoist this property in order to add automatic events to the components that use them.\\n\\n```playground_norender\\nclass CustomTooltip extends React.Component {\\n  static defaultEvents = VictoryTooltip.defaultEvents\\n  render() {\\n    const {x, y} = this.props;\\n    const rotation = `rotate(45 ${x} ${y})`\\n    return (\\n      <g transform={rotation}>\\n        <VictoryTooltip {...this.props} renderInPortal={false}/>\\n      </g>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n          domain={{ x: [0, 11], y: [-10, 10] }}\\n        >\\n          <VictoryBar\\n            labelComponent={<CustomTooltip/>}\\n            data={[\\n              {x: 2, y: 5, label: \\\"A\\\"},\\n              {x: 4, y: -6, label: \\\"B\\\"},\\n              {x: 6, y: 4, label: \\\"C\\\"},\\n              {x: 8, y: -5, label: \\\"D\\\"},\\n              {x: 10, y: 7, label: \\\"E\\\"}\\n            ]}\\n            style={{\\n              data: {fill: \\\"tomato\\\", width: 20}\\n            }}\\n          />\\n        </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## Victory Native\\n\\nIn Victory Native tooltips are much more reliable when using `VictoryVoronoiContainer`. Using `VictoryVoronoiContainer` registers all touch events on the container itself, which mitigates interference with other chart element, which can be a problem on some platforms. Showing the closest data point with `VictoryVoronoiContainer` also increases the tap targets for the tooltip, which can otherwise be quite small. Set `VictoryVoronoiContainer` as the `containerComponent` prop on the outermost Victory component.\\n\\n```jsx\\n<VictoryChart containerComponent={<VictoryVoronoiContainer />} >\\n  <VictoryScatter\\n    labelComponent={<VictoryTooltip />}\\n    labels={({ datum }) => datum.y}\\n    style={{ data: { fill: ({ datum }) => datum.fill } }}\\n    data={[\\n      { x: 1, y: 3 },\\n      { x: 3, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n[`victorytooltip`]: /docs/victory-tooltip\\n\\n[`victorylabel`]: /docs/victory-label\\n\\n[`flyout`]: /docs/victory-primitives#flyout\\n\",\"content\":\"# Tooltips\\n\\n[`VictoryTooltip`][] is a label component with `defaultEvents` It renders a customizable flyout container as well as a `VictoryLabel` component. `VictoryTooltip` can be used with any Victory component by setting the `labelComponent` prop like so `labelComponent={<VictoryTooltip/>`\\n\\nThis guide discusses customization and advanced usage of tooltips in Victory\\n\\n## Simple tooltips\\n\\nThe simplest way to add tooltips to a chart is to use `VictoryTooltip` as a `labelComponent` as in the example below:\\n\\n```playground\\n<VictoryChart\\n  domain={{ x: [0, 11], y: [-10, 10] }}\\n>\\n  <VictoryBar\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 2, y: 5, label: \\\"right-side-up\\\"},\\n      {x: 4, y: -6, label: \\\"upside-down\\\"},\\n      {x: 6, y: 4, label: \\\"tiny\\\"},\\n      {x: 8, y: -5, label: \\\"or a little \\\\n BIGGER\\\"},\\n      {x: 10, y: 7, label: \\\"automatically\\\"}\\n    ]}\\n    style={{\\n      data: {fill: \\\"tomato\\\", width: 20}\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n\\nWhen tooltips are added to a chart in this way, `defaultEvents` on `VictoryTooltip` are automatically added to the component using them, in this case `VictoryBar`. By default, `VictoryTooltip` will adjust its position, orientation, and the width and height of its container to match the corresponding data and labels.\\n\\n## Customizing Tooltips\\n\\nTooltips can be customized directly on the `VictoryTooltip` component\\n\\n```playground\\n<VictoryChart\\n  domain={{ x: [0, 11], y: [-10, 10] }}\\n>\\n  <VictoryBar\\n    labelComponent={\\n      <VictoryTooltip\\n        cornerRadius={({ datum }) => datum.x > 6 ? 0 : 20}\\n        pointerLength={({ datum }) => datum.y > 0 ? 5 : 20}\\n        flyoutStyle={{\\n          stroke: ({ datum }) => datum.x === 10\\n            ? \\\"tomato\\\"\\n            : \\\"black\\\"\\n        }}\\n      />\\n    }\\n    data={[\\n      {x: 2, y: 5, label: \\\"right-side-up\\\"},\\n      {x: 4, y: -6, label: \\\"upside-down\\\"},\\n      {x: 6, y: 4, label: \\\"tiny\\\"},\\n      {x: 8, y: -5, label: \\\"or a little \\\\n BIGGER\\\"},\\n      {x: 10, y: 7, label: \\\"automatically\\\"}\\n    ]}\\n    style={{\\n      data: {fill: \\\"tomato\\\", width: 20}\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictoryTooltip` is composed of [`VictoryLabel`][] and the primitive [`Flyout`][] component. Both of these components are highly configurable, but may also be replaced if necessary.\\n\\n```playground_norender\\nclass CustomFlyout extends React.Component {\\n  render() {\\n    const {x, y, orientation} = this.props;\\n    const newY = orientation === \\\"bottom\\\" ? y - 35 : y + 35;\\n    return (\\n      <g>\\n        <circle cx={x} cy={newY} r=\\\"20\\\" stroke=\\\"tomato\\\" fill=\\\"none\\\"/>\\n        <circle cx={x} cy={newY} r=\\\"25\\\" stroke=\\\"orange\\\" fill=\\\"none\\\"/>\\n        <circle cx={x} cy={newY} r=\\\"30\\\" stroke=\\\"gold\\\" fill=\\\"none\\\"/>\\n      </g>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n          domain={{ x: [0, 11], y: [-10, 10] }}\\n        >\\n          <VictoryBar\\n            labelComponent={\\n              <VictoryTooltip\\n                flyoutComponent={<CustomFlyout/>}\\n              />\\n            }\\n            data={[\\n              {x: 2, y: 5, label: \\\"A\\\"},\\n              {x: 4, y: -6, label: \\\"B\\\"},\\n              {x: 6, y: 4, label: \\\"C\\\"},\\n              {x: 8, y: -5, label: \\\"D\\\"},\\n              {x: 10, y: 7, label: \\\"E\\\"}\\n            ]}\\n            style={{\\n              data: {fill: \\\"tomato\\\", width: 20},\\n              labels: { fill: \\\"tomato\\\"}\\n            }}\\n          />\\n        </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## Tooltips with VictoryVoronoiContainer\\n\\nVoronoi tooltips are useful for adding tooltips to a line, or adding tooltips to data points that\\nare too small to hover over effectively. `VictoryVoronoiContainer` calculates a voronoi diagram\\nbased on the data of every child component it renders. The voronoi data is used to associate a\\nmouse position with its nearest data point(s). When `VictoryVoronoiContainer` is added as the\\n`containerComponent` of your chart, changes in mouse position will add and remove the `active` prop\\non appropriate data and label elements.\\n\\n\\n```playground\\n<VictoryChart\\n  domain={{x: [0, 5], y: [-5, 5]}}\\n  containerComponent={<VictoryVoronoiContainer/>}\\n>\\n  <VictoryScatter\\n    style={{\\n      data: {fill: \\\"tomato\\\"}, labels: {fill: \\\"tomato\\\"}\\n    }}\\n    size={({ active }) => active ? 5 : 3}\\n    labels={({ datum }) => datum.y}\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 1, y: -4},\\n      {x: 2, y: 4},\\n      {x: 3, y: 2},\\n      {x: 4, y: 1}\\n    ]}\\n  />\\n  <VictoryScatter\\n    style={{\\n      data: {fill: \\\"blue\\\"}, labels: {fill: \\\"blue\\\"}\\n    }}\\n    size={(datum, active) => active ? 5 : 3}\\n    labels={({ datum }) => datum.y}\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 1, y: -3},\\n      {x: 2, y: 3},\\n      {x: 3, y: 3},\\n      {x: 4, y: 0}\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      {x: 1, y: 4},\\n      {x: 2, y: -4},\\n      {x: 3, y: -2},\\n      {x: 4, y: -3}\\n    ]}\\n    labels={({ datum }) => datum.y}\\n    labelComponent={<VictoryTooltip/>}\\n    size={({ active }) => active ? 5 : 3}\\n  />\\n</VictoryChart>\\n```\\n\\n## Multi-point Tooltips with VictoryVoronoiContainer\\n\\n`VictoryVoronoiContainer` can also be used to create multi-point labels when the `labels` prop is\\nprovided. In the example below the `voronoiDimension` prop indicates that the voronoi diagram\\nwill only be specific to the x dimension. For a given mouse position, all data matching the\\nassociated x value will be activated regardless of y value. In the following example, this leads to\\nseveral tooltips being active at the same time. Provide a `labels` and (optionally) a\\n`labelComponent` prop to configure multi-point labels.\\n\\n```playground\\n<VictoryChart\\n  containerComponent={\\n    <VictoryVoronoiContainer voronoiDimension=\\\"x\\\"\\n      labels={({ datum }) => `y: ${datum.y}`}\\n      labelComponent={<VictoryTooltip cornerRadius={0} flyoutStyle={{fill: \\\"white\\\"}}/>}\\n    />\\n  }\\n>\\n  <VictoryAxis/>\\n  <VictoryLine\\n    data={[\\n      {x: 1, y: 5, l: \\\"one\\\"},\\n      {x: 1.5, y: 5, l: \\\"one point five\\\"},\\n      {x: 2, y: 4, l: \\\"two\\\"},\\n      {x: 3, y: -2, l: \\\"three\\\"}\\n    ]}\\n    style={{\\n      data: { stroke: \\\"tomato\\\", strokeWidth: ({ active }) => active ? 4 : 2},\\n      labels: {fill: \\\"tomato\\\"}\\n    }}\\n  />\\n\\n  <VictoryLine\\n    data={[\\n      {x: 1, y: -3, l: \\\"red\\\"},\\n      {x: 2, y: 5, l: \\\"green\\\"},\\n      {x: 3, y: 3, l: \\\"blue\\\"}\\n    ]}\\n    style={{\\n      data: { stroke: \\\"blue\\\", strokeWidth: ({ active }) => active ? 4 : 2},\\n      labels: {fill: \\\"blue\\\"}\\n    }}\\n  />\\n\\n  <VictoryLine\\n    data={[\\n      {x: 1, y: 5, l: \\\"cat\\\"},\\n      {x: 2, y: -4, l: \\\"dog\\\"},\\n      {x: 3, y: -2, l: \\\"bird\\\"}\\n    ]}\\n    style={{\\n      data: { stroke: \\\"black\\\", strokeWidth: ({ active }) => active ? 4 : 2},\\n      labels: {fill: \\\"black\\\"}\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictoryVoronoiContainer` also has a `mouseFollowTooltips` boolean prop that works with single point and multi-point tooltip labels.\\n\\n```playground\\n<VictoryChart domain={{ y: [0, 6] }}\\n  containerComponent={\\n    <VictoryVoronoiContainer\\n      mouseFollowTooltips\\n      voronoiDimension=\\\"x\\\"\\n      labels={({ datum }) => `y: ${datum.y}`}\\n    />\\n  }\\n>\\n  <VictoryScatter\\n  \\tstyle={{ data: { fill: \\\"red\\\" }, labels: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n\\n## Tooltips with Other Events\\n\\n`VictoryTooltip` automatically attaches events to data components. When events of the same type are specified for data components, it is necessary to reconcile events so that tooltips still work. For web, the default tooltip events are:\\n\\n```jsx\\nstatic defaultEvents = [{\\n  target: \\\"data\\\",\\n  eventHandlers: {\\n    onMouseOver: () => {\\n      return {\\n        target: \\\"labels\\\",\\n        mutation: () => ({ active: true })\\n      };\\n    },\\n    onMouseOut: () => {\\n      return {\\n        target: \\\"labels\\\",\\n        mutation: () => ({ active: false })\\n      };\\n    }\\n  }\\n}];\\n```\\n\\nWhen other `onMouseOver` and `onMouseOut` events are specified for data, the event returns described above must be added to the events for tooltips to continue to work properly.\\n\\n```playground\\n<VictoryChart\\n  domain={{ x: [0, 11], y: [-10, 10] }}\\n>\\n  <VictoryBar\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 2, y: 5, label: \\\"A\\\"},\\n      {x: 4, y: -6, label: \\\"B\\\"},\\n      {x: 6, y: 4, label: \\\"C\\\"},\\n      {x: 8, y: -5, label: \\\"D\\\"},\\n      {x: 10, y: 7, label: \\\"E\\\"}\\n    ]}\\n    style={{\\n      data: {fill: \\\"tomato\\\", width: 20}\\n    }}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onMouseOver: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: () => ({style: {fill: \\\"gold\\\", width: 30}})\\n            }, {\\n              target: \\\"labels\\\",\\n              mutation: () => ({ active: true })\\n            }\\n          ];\\n        },\\n        onMouseOut: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: () => {}\\n            }, {\\n              target: \\\"labels\\\",\\n              mutation: () => ({ active: false })\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n  />\\n</VictoryChart>\\n```\\n\\n## Wrapping VictoryTooltip\\n\\nThe events that control `VictoryTooltip` are stored on the static `defaultEvents` property. Wrapped instances of `VictoryTooltip` will need to replicate or hoist this property in order to add automatic events to the components that use them.\\n\\n\\n```playground_norender\\nclass CustomTooltip extends React.Component {\\n  static defaultEvents = VictoryTooltip.defaultEvents\\n  render() {\\n    const {x, y} = this.props;\\n    const rotation = `rotate(45 ${x} ${y})`\\n    return (\\n      <g transform={rotation}>\\n        <VictoryTooltip {...this.props} renderInPortal={false}/>\\n      </g>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n          domain={{ x: [0, 11], y: [-10, 10] }}\\n        >\\n          <VictoryBar\\n            labelComponent={<CustomTooltip/>}\\n            data={[\\n              {x: 2, y: 5, label: \\\"A\\\"},\\n              {x: 4, y: -6, label: \\\"B\\\"},\\n              {x: 6, y: 4, label: \\\"C\\\"},\\n              {x: 8, y: -5, label: \\\"D\\\"},\\n              {x: 10, y: 7, label: \\\"E\\\"}\\n            ]}\\n            style={{\\n              data: {fill: \\\"tomato\\\", width: 20}\\n            }}\\n          />\\n        </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## Victory Native\\nIn Victory Native tooltips are much more reliable when using `VictoryVoronoiContainer`. Using `VictoryVoronoiContainer` registers all touch events on the container itself, which mitigates interference with other chart element, which can be a problem on some platforms. Showing the closest data point with `VictoryVoronoiContainer` also increases the tap targets for the tooltip, which can otherwise be quite small. Set `VictoryVoronoiContainer` as the `containerComponent` prop on the outermost Victory component.\\n\\n```jsx\\n<VictoryChart containerComponent={<VictoryVoronoiContainer />} >\\n  <VictoryScatter\\n    labelComponent={<VictoryTooltip />}\\n    labels={({ datum }) => datum.y}\\n    style={{ data: { fill: ({ datum }) => datum.fill } }}\\n    data={[\\n      { x: 1, y: 3 },\\n      { x: 3, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n[`VictoryTooltip`]: /docs/victory-tooltip\\n[`VictoryLabel`]: /docs/victory-label\\n[`Flyout`]: /docs/victory-primitives#flyout\\n\"},\"title\":\"Victory | undefined\",\"sidebarContent\":[{\"data\":{\"id\":0,\"title\":\"Getting Started\",\"category\":\"introduction\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Getting Started with Victory\",\"depth\":1,\"slug\":\"getting-started-with-victory\"},{\"type\":\"heading\",\"value\":\"Tutorial\",\"depth\":2,\"slug\":\"tutorial\"},{\"type\":\"heading\",\"value\":\"Next Steps\",\"depth\":2,\"slug\":\"next-steps\"},{\"type\":\"heading\",\"value\":\"Documentation, Contributing, and Source\",\"depth\":2,\"slug\":\"documentation-contributing-and-source\"}],\"slug\":\"getting-started\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Getting Started with Victory\",\"depth\":1,\"slug\":\"getting-started-with-victory\",\"category\":\"introduction\",\"children\":[{\"type\":\"heading\",\"value\":\"Tutorial\",\"depth\":2,\"slug\":\"tutorial\"},{\"type\":\"heading\",\"value\":\"Next Steps\",\"depth\":2,\"slug\":\"next-steps\"},{\"type\":\"heading\",\"value\":\"Documentation, Contributing, and Source\",\"depth\":2,\"slug\":\"documentation-contributing-and-source\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 0\\ntitle: Getting Started\\ncategory: introduction\\ntype: docs\\nscope: null\\n---\\n\\n# Getting Started with Victory\\n\\nVictory is an opinionated, but fully overridable, ecosystem of composable React components for building interactive data visualizations. The following tutorial explains how to set up a basic chart. For next steps, please see our [FAQs][] and [Gallery][] sections. For more advanced examples, check out [our guides][].\\n\\n#### Getting Started with Victory Native?\\n\\n[Check out the native version of this getting started tutorial][]\\n\\n## Tutorial\\n\\nIn this guide, we\u2019ll show you how to get started with Victory and walk you through the creation and customization of a composed chart. We\u2019ve created a GitHub repository with the completed project, and will link to the corresponding commit where appropriate to help you follow along. If you want, you can [view the completed tutorial here](https://github.com/FormidableLabs/victory-tutorial/blob/master/src/js/client.js).\\n\\n#### 1. Set up a basic React project\\n\\nYou can do this on your own if you'd like, or you can...\\n\\n-   Clone down [this project we've started for you](https://github.com/FormidableLabs/victory-tutorial) using `git clone git@github.com:FormidableLabs/victory-tutorial.git`\\n-   `cd victory-tutorial`\\n-   Replace the existing code in the `client.js` file with:\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\n\\nclass Main extends React.Component {\\n  render() {\\n \u00A0 \u00A0return (\\n \u00A0 \u00A0 \u00A0<div>\\n \u00A0 \u00A0 \u00A0 \u00A0<h1>Victory Tutorial</h1>\\n \u00A0 \u00A0 \u00A0</div>\\n \u00A0 \u00A0);\\n \u00A0}\\n}\\n\\nconst app = document.getElementById('app');\\nReactDOM.render(<Main />, app);\\n```\\n\\n-   Run `npm install` to install all necessary dependencies.\\n\\nOnce you've completed these steps, you can run the webpack server with the command `npm start`, and the project will render at `localhost:8080`. All modifications will take place in your client.js file.\\n\\n#### 2. Add Victory\\n\\nAdd Victory to your project with the command `npm install victory`, then import it into your React project. For now, let's import the whole library until we know what chart type we'll be using. The imports at the top of your main Javascript file should now look like this:\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport * as V from 'victory';\\n```\\n\\n#### 3. Add your data\\n\\nYou can import your data from an external file or API, or create an array of data points as a variable. Here is the data that we'll be using for our chart, which is tracking earnings per fiscal quarter:\\n\\n```jsx\\nconst data = [\\n  {quarter: 1, earnings: 13000},\\n  {quarter: 2, earnings: 16500},\\n  {quarter: 3, earnings: 14250},\\n  {quarter: 4, earnings: 19000}\\n];\\n```\\n\\n#### 4. Add your first Victory component\\n\\nSince we're doing a simple comparison of earnings between quarters, let's use a bar chart to visualize the data. We aren't going to need the whole Victory library, so let's change our import statement to reflect only the components that we need.\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { VictoryBar } from 'victory';\\n```\\n\\nComponents include sensible defaults, so even without data `VictoryBar` will render a series of bars with default data.\\n\\n```playground\\n// renders the default component with fallback data\\n<VictoryBar/>\\n```\\n\\nLet's add some data. VictoryBar looks for `x` and `y` values in data points, which our data doesn't have. We can work around this by adding accessor props to our `VictoryBar` component. ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/blob/3a0951d78202e4333fc8ae07a673173732209ee5/src/js/client.js).)\\n\\n```playground_norender\\nconst data = [\\n  {quarter: 1, earnings: 13000},\\n  {quarter: 2, earnings: 16500},\\n  {quarter: 3, earnings: 14250},\\n  {quarter: 4, earnings: 19000}\\n];\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryBar\\n        data={data}\\n        // data accessor for x values\\n        x=\\\"quarter\\\"\\n        // data accessor for y values\\n        y=\\\"earnings\\\"\\n      />\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n#### 5. Add a Chart wrapper\\n\\n`VictoryChart` is a wrapper component that plots all of its children on the same scale. `VictoryChart` also provides default axes. Import `VictoryChart` like so:\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { VictoryBar, VictoryChart } from 'victory';\\n```\\n\\nNext wrap the `VictoryBar` component in `VictoryChart`. Default axes are automatically configured to match data provided by `VictoryBar`. ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/blob/15063b2f79cff843f668f43ddd46d4bcd7f96acd/src/js/client.js).)\\n\\n```playground_norender\\nconst data = [\\n  {quarter: 1, earnings: 13000},\\n  {quarter: 2, earnings: 16500},\\n  {quarter: 3, earnings: 14250},\\n  {quarter: 4, earnings: 19000}\\n];\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart>\\n        <VictoryBar\\n          data={data}\\n          x=\\\"quarter\\\"\\n          y=\\\"earnings\\\"\\n        />\\n      </VictoryChart>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n#### 6. Customize the axes\\n\\nNext, let's modify the tick labels on the axes to be a little more descriptive. We can do this by adding and configuring `VictoryAxis` components to our chart, so let's import `VictoryAxis`. Import statements should now look like this:\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { VictoryBar, VictoryChart, VictoryAxis } from 'victory';\\n```\\n\\nIn the chart below, we've modified the axes to better fit our needs. If you want to retain a vertical axis, remember to add a second axis component with the `dependentAxis` prop set to `true`. We've modified the format of the tick labels on our vertical axis with the `tickFormat` prop, and have included only the tick values that we need on the horizontal axis by passing an array to the `tickValues` prop. We've also added the `domainPadding` prop to our `VictoryChart` component for good measure, to space the bars further from the y-axis ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/blob/c5be2277266d6e78f9402a610decb08e07642de2/src/js/client.js).)\\n\\n```playground_norender\\nconst data = [\\n  {quarter: 1, earnings: 13000},\\n  {quarter: 2, earnings: 16500},\\n  {quarter: 3, earnings: 14250},\\n  {quarter: 4, earnings: 19000}\\n];\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n        // domainPadding will add space to each side of VictoryBar to\\n        // prevent it from overlapping the axis\\n        domainPadding={20}\\n      >\\n        <VictoryAxis\\n          // tickValues specifies both the number of ticks and where\\n          // they are placed on the axis\\n          tickValues={[1, 2, 3, 4]}\\n          tickFormat={[\\\"Quarter 1\\\", \\\"Quarter 2\\\", \\\"Quarter 3\\\", \\\"Quarter 4\\\"]}\\n        />\\n        <VictoryAxis\\n          dependentAxis\\n          // tickFormat specifies how ticks should be displayed\\n          tickFormat={(x) => (`$${x / 1000}k`)}\\n        />\\n        <VictoryBar\\n          data={data}\\n          x=\\\"quarter\\\"\\n          y=\\\"earnings\\\"\\n        />\\n      </VictoryChart>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n#### 7. Add a theme\\n\\nVictory charts come with a default grayscale theme so that all components look clean and consistent. But let\u2019s switch it up with the Victory-provided Material theme. We can do that by importing VictoryTheme and adding a theme prop to `VictoryChart`. Themes should always be applied to the outermost wrapper component in a chart.\\n\\nImport statements should look like this:\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { VictoryBar, VictoryChart, VictoryAxis,\\n        VictoryTheme } from 'victory';\\n```\\n\\nAnd here's the code and rendered component with the new theme ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/tree/fb904143eea6046e6841b4284e044360d4af5cf1/src/js/client.js)):\\n\\n```playground_norender\\nconst data = [\\n  {quarter: 1, earnings: 13000},\\n  {quarter: 2, earnings: 16500},\\n  {quarter: 3, earnings: 14250},\\n  {quarter: 4, earnings: 19000}\\n];\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n        // adding the material theme provided with Victory\\n        theme={VictoryTheme.material}\\n        domainPadding={20}\\n      >\\n        <VictoryAxis\\n          tickValues={[1, 2, 3, 4]}\\n          tickFormat={[\\\"Quarter 1\\\", \\\"Quarter 2\\\", \\\"Quarter 3\\\", \\\"Quarter 4\\\"]}\\n        />\\n        <VictoryAxis\\n          dependentAxis\\n          tickFormat={(x) => (`$${x / 1000}k`)}\\n        />\\n        <VictoryBar\\n          data={data}\\n          x=\\\"quarter\\\"\\n          y=\\\"earnings\\\"\\n        />\\n      </VictoryChart>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n#### 8. Stack multiple bar charts\\n\\nNext, let's add more data. In this example we'll compare three years' worth of quarterly earnings in a stacked bar chart. `VictoryStack` will handle the layout.\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { VictoryBar, VictoryChart, VictoryAxis,\\n        VictoryTheme, VictoryStack } from 'victory';\\n```\\n\\nWrap all four `VictoryBar` components with `VictoryStack`. ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/tree/9bf170061599027e4bd5fcf8128e47adb83c0e98/src/js/client.js).)\\n\\n```playground_norender\\nconst data2012 = [\\n  {quarter: 1, earnings: 13000},\\n  {quarter: 2, earnings: 16500},\\n  {quarter: 3, earnings: 14250},\\n  {quarter: 4, earnings: 19000}\\n];\\n\\nconst data2013 = [\\n  {quarter: 1, earnings: 15000},\\n  {quarter: 2, earnings: 12500},\\n  {quarter: 3, earnings: 19500},\\n  {quarter: 4, earnings: 13000}\\n];\\n\\nconst data2014 = [\\n  {quarter: 1, earnings: 11500},\\n  {quarter: 2, earnings: 13250},\\n  {quarter: 3, earnings: 20000},\\n  {quarter: 4, earnings: 15500}\\n];\\n\\nconst data2015 = [\\n  {quarter: 1, earnings: 18000},\\n  {quarter: 2, earnings: 13250},\\n  {quarter: 3, earnings: 15000},\\n  {quarter: 4, earnings: 12000}\\n];\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n        domainPadding={20}\\n        theme={VictoryTheme.material}\\n      >\\n        <VictoryAxis\\n          tickValues={[1, 2, 3, 4]}\\n          tickFormat={[\\\"Quarter 1\\\", \\\"Quarter 2\\\", \\\"Quarter 3\\\", \\\"Quarter 4\\\"]}\\n        />\\n        <VictoryAxis\\n          dependentAxis\\n          tickFormat={(x) => (`$${x / 1000}k`)}\\n        />\\n        <VictoryStack>\\n          <VictoryBar\\n            data={data2012}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n          <VictoryBar\\n            data={data2013}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n          <VictoryBar\\n            data={data2014}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n          <VictoryBar\\n            data={data2015}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n        </VictoryStack>\\n      </VictoryChart>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n#### 9. Override theme's color scale\\n\\n`VictoryStack` can also be used to provide shared styles and props to its children. Let's add a `colorScale` prop to `VictoryStack` to override the default `colorScale` defined in `VictoryTheme.material`. ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/tree/9c77240e45db4e9fde4123ae29304461739a7035/src/js/client.js).)\\n\\n```playground_norender\\nconst data2012 = [\\n  {quarter: 1, earnings: 13000},\\n  {quarter: 2, earnings: 16500},\\n  {quarter: 3, earnings: 14250},\\n  {quarter: 4, earnings: 19000}\\n];\\n\\nconst data2013 = [\\n  {quarter: 1, earnings: 15000},\\n  {quarter: 2, earnings: 12500},\\n  {quarter: 3, earnings: 19500},\\n  {quarter: 4, earnings: 13000}\\n];\\n\\nconst data2014 = [\\n  {quarter: 1, earnings: 11500},\\n  {quarter: 2, earnings: 13250},\\n  {quarter: 3, earnings: 20000},\\n  {quarter: 4, earnings: 15500}\\n];\\n\\nconst data2015 = [\\n  {quarter: 1, earnings: 18000},\\n  {quarter: 2, earnings: 13250},\\n  {quarter: 3, earnings: 15000},\\n  {quarter: 4, earnings: 12000}\\n];\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n        domainPadding={20}\\n        theme={VictoryTheme.material}\\n      >\\n        <VictoryAxis\\n          tickValues={[1, 2, 3, 4]}\\n          tickFormat={[\\\"Quarter 1\\\", \\\"Quarter 2\\\", \\\"Quarter 3\\\", \\\"Quarter 4\\\"]}\\n        />\\n        <VictoryAxis\\n          dependentAxis\\n          tickFormat={(x) => (`$${x / 1000}k`)}\\n        />\\n        <VictoryStack\\n          colorScale={\\\"warm\\\"}\\n        >\\n          <VictoryBar\\n            data={data2012}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n          <VictoryBar\\n            data={data2013}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n          <VictoryBar\\n            data={data2014}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n          <VictoryBar\\n            data={data2015}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n        </VictoryStack>\\n      </VictoryChart>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## Next Steps\\n\\nCongratulations! You\u2019ve created your first chart with Victory. Next, check out our [FAQs][] and [Gallery][] for more examples and information. Happy charting.\\n\\n## Documentation, Contributing, and Source\\n\\nFor more information about Victory and its components, check out the docs - see [VictoryChart](/docs/victory-chart) to get started. Interested in helping out or seeing what's happening under the hood? Victory is maintained at [github.com/FormidableLabs/victory](https://github.com/FormidableLabs/victory), and you can [start contributing here](https://github.com/FormidableLabs/victory/#contributing).\\n\\n[our guides]: /guides\\n\\n[gallery]: /gallery\\n\\n[faqs]: /docs/faq\\n\\n[check out the native version of this getting started tutorial]: /docs/native\\n\",\"content\":\"# Getting Started with Victory\\n\\nVictory is an opinionated, but fully overridable, ecosystem of composable React components for building interactive data visualizations. The following tutorial explains how to set up a basic chart. For next steps, please see our [FAQs][] and [Gallery][] sections. For more advanced examples, check out [our guides][].\\n\\n#### Getting Started with Victory Native?\\n\\n[Check out the native version of this getting started tutorial][]\\n\\n## Tutorial\\n\\nIn this guide, we\u2019ll show you how to get started with Victory and walk you through the creation and customization of a composed chart. We\u2019ve created a GitHub repository with the completed project, and will link to the corresponding commit where appropriate to help you follow along. If you want, you can [view the completed tutorial here](https://github.com/FormidableLabs/victory-tutorial/blob/master/src/js/client.js).\\n\\n#### 1. Set up a basic React project\\n\\nYou can do this on your own if you'd like, or you can...\\n\\n* Clone down [this project we've started for you](https://github.com/FormidableLabs/victory-tutorial) using ```git clone git@github.com:FormidableLabs/victory-tutorial.git```\\n* `cd victory-tutorial`\\n* Replace the existing code in the `client.js` file with:\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\n\\nclass Main extends React.Component {\\n  render() {\\n \u00A0 \u00A0return (\\n \u00A0 \u00A0 \u00A0<div>\\n \u00A0 \u00A0 \u00A0 \u00A0<h1>Victory Tutorial</h1>\\n \u00A0 \u00A0 \u00A0</div>\\n \u00A0 \u00A0);\\n \u00A0}\\n}\\n\\nconst app = document.getElementById('app');\\nReactDOM.render(<Main />, app);\\n```\\n\\n* Run `npm install` to install all necessary dependencies.\\n\\nOnce you've completed these steps, you can run the webpack server with the command `npm start`, and the project will render at `localhost:8080`. All modifications will take place in your client.js file.\\n\\n#### 2. Add Victory\\n\\nAdd Victory to your project with the command `npm install victory`, then import it into your React project. For now, let's import the whole library until we know what chart type we'll be using. The imports at the top of your main Javascript file should now look like this:\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport * as V from 'victory';\\n```\\n\\n#### 3. Add your data\\n\\nYou can import your data from an external file or API, or create an array of data points as a variable. Here is the data that we'll be using for our chart, which is tracking earnings per fiscal quarter:\\n\\n```jsx\\nconst data = [\\n  {quarter: 1, earnings: 13000},\\n  {quarter: 2, earnings: 16500},\\n  {quarter: 3, earnings: 14250},\\n  {quarter: 4, earnings: 19000}\\n];\\n```\\n\\n#### 4. Add your first Victory component\\n\\nSince we're doing a simple comparison of earnings between quarters, let's use a bar chart to visualize the data. We aren't going to need the whole Victory library, so let's change our import statement to reflect only the components that we need.\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { VictoryBar } from 'victory';\\n```\\n\\nComponents include sensible defaults, so even without data `VictoryBar` will render a series of bars with default data.\\n\\n```playground\\n// renders the default component with fallback data\\n<VictoryBar/>\\n```\\n\\nLet's add some data. VictoryBar looks for `x` and `y` values in data points, which our data doesn't have. We can work around this by adding accessor props to our `VictoryBar` component. ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/blob/3a0951d78202e4333fc8ae07a673173732209ee5/src/js/client.js).)\\n\\n```playground_norender\\nconst data = [\\n  {quarter: 1, earnings: 13000},\\n  {quarter: 2, earnings: 16500},\\n  {quarter: 3, earnings: 14250},\\n  {quarter: 4, earnings: 19000}\\n];\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryBar\\n        data={data}\\n        // data accessor for x values\\n        x=\\\"quarter\\\"\\n        // data accessor for y values\\n        y=\\\"earnings\\\"\\n      />\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n#### 5. Add a Chart wrapper\\n\\n`VictoryChart` is a wrapper component that plots all of its children on the same scale. `VictoryChart` also provides default axes. Import `VictoryChart` like so:\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { VictoryBar, VictoryChart } from 'victory';\\n```\\n\\nNext wrap the `VictoryBar` component in `VictoryChart`. Default axes are automatically configured to match data provided by `VictoryBar`. ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/blob/15063b2f79cff843f668f43ddd46d4bcd7f96acd/src/js/client.js).)\\n\\n```playground_norender\\nconst data = [\\n  {quarter: 1, earnings: 13000},\\n  {quarter: 2, earnings: 16500},\\n  {quarter: 3, earnings: 14250},\\n  {quarter: 4, earnings: 19000}\\n];\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart>\\n        <VictoryBar\\n          data={data}\\n          x=\\\"quarter\\\"\\n          y=\\\"earnings\\\"\\n        />\\n      </VictoryChart>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n#### 6. Customize the axes\\n\\nNext, let's modify the tick labels on the axes to be a little more descriptive. We can do this by adding and configuring `VictoryAxis` components to our chart, so let's import `VictoryAxis`. Import statements should now look like this:\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { VictoryBar, VictoryChart, VictoryAxis } from 'victory';\\n```\\n\\nIn the chart below, we've modified the axes to better fit our needs. If you want to retain a vertical axis, remember to add a second axis component with the `dependentAxis` prop set to `true`. We've modified the format of the tick labels on our vertical axis with the `tickFormat` prop, and have included only the tick values that we need on the horizontal axis by passing an array to the `tickValues` prop. We've also added the `domainPadding` prop to our `VictoryChart` component for good measure, to space the bars further from the y-axis ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/blob/c5be2277266d6e78f9402a610decb08e07642de2/src/js/client.js).)\\n\\n```playground_norender\\nconst data = [\\n  {quarter: 1, earnings: 13000},\\n  {quarter: 2, earnings: 16500},\\n  {quarter: 3, earnings: 14250},\\n  {quarter: 4, earnings: 19000}\\n];\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n        // domainPadding will add space to each side of VictoryBar to\\n        // prevent it from overlapping the axis\\n        domainPadding={20}\\n      >\\n        <VictoryAxis\\n          // tickValues specifies both the number of ticks and where\\n          // they are placed on the axis\\n          tickValues={[1, 2, 3, 4]}\\n          tickFormat={[\\\"Quarter 1\\\", \\\"Quarter 2\\\", \\\"Quarter 3\\\", \\\"Quarter 4\\\"]}\\n        />\\n        <VictoryAxis\\n          dependentAxis\\n          // tickFormat specifies how ticks should be displayed\\n          tickFormat={(x) => (`$${x / 1000}k`)}\\n        />\\n        <VictoryBar\\n          data={data}\\n          x=\\\"quarter\\\"\\n          y=\\\"earnings\\\"\\n        />\\n      </VictoryChart>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n#### 7. Add a theme\\n\\nVictory charts come with a default grayscale theme so that all components look clean and consistent. But let\u2019s switch it up with the Victory-provided Material theme. We can do that by importing VictoryTheme and adding a theme prop to `VictoryChart`. Themes should always be applied to the outermost wrapper component in a chart.\\n\\nImport statements should look like this:\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { VictoryBar, VictoryChart, VictoryAxis,\\n        VictoryTheme } from 'victory';\\n```\\n\\nAnd here's the code and rendered component with the new theme ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/tree/fb904143eea6046e6841b4284e044360d4af5cf1/src/js/client.js)):\\n\\n```playground_norender\\nconst data = [\\n  {quarter: 1, earnings: 13000},\\n  {quarter: 2, earnings: 16500},\\n  {quarter: 3, earnings: 14250},\\n  {quarter: 4, earnings: 19000}\\n];\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n        // adding the material theme provided with Victory\\n        theme={VictoryTheme.material}\\n        domainPadding={20}\\n      >\\n        <VictoryAxis\\n          tickValues={[1, 2, 3, 4]}\\n          tickFormat={[\\\"Quarter 1\\\", \\\"Quarter 2\\\", \\\"Quarter 3\\\", \\\"Quarter 4\\\"]}\\n        />\\n        <VictoryAxis\\n          dependentAxis\\n          tickFormat={(x) => (`$${x / 1000}k`)}\\n        />\\n        <VictoryBar\\n          data={data}\\n          x=\\\"quarter\\\"\\n          y=\\\"earnings\\\"\\n        />\\n      </VictoryChart>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n#### 8. Stack multiple bar charts\\n\\nNext, let's add more data. In this example we'll compare three years' worth of quarterly earnings in a stacked bar chart. `VictoryStack` will handle the layout.\\n\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { VictoryBar, VictoryChart, VictoryAxis,\\n        VictoryTheme, VictoryStack } from 'victory';\\n```\\n\\nWrap all four `VictoryBar` components with `VictoryStack`. ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/tree/9bf170061599027e4bd5fcf8128e47adb83c0e98/src/js/client.js).)\\n\\n```playground_norender\\nconst data2012 = [\\n  {quarter: 1, earnings: 13000},\\n  {quarter: 2, earnings: 16500},\\n  {quarter: 3, earnings: 14250},\\n  {quarter: 4, earnings: 19000}\\n];\\n\\nconst data2013 = [\\n  {quarter: 1, earnings: 15000},\\n  {quarter: 2, earnings: 12500},\\n  {quarter: 3, earnings: 19500},\\n  {quarter: 4, earnings: 13000}\\n];\\n\\nconst data2014 = [\\n  {quarter: 1, earnings: 11500},\\n  {quarter: 2, earnings: 13250},\\n  {quarter: 3, earnings: 20000},\\n  {quarter: 4, earnings: 15500}\\n];\\n\\nconst data2015 = [\\n  {quarter: 1, earnings: 18000},\\n  {quarter: 2, earnings: 13250},\\n  {quarter: 3, earnings: 15000},\\n  {quarter: 4, earnings: 12000}\\n];\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n        domainPadding={20}\\n        theme={VictoryTheme.material}\\n      >\\n        <VictoryAxis\\n          tickValues={[1, 2, 3, 4]}\\n          tickFormat={[\\\"Quarter 1\\\", \\\"Quarter 2\\\", \\\"Quarter 3\\\", \\\"Quarter 4\\\"]}\\n        />\\n        <VictoryAxis\\n          dependentAxis\\n          tickFormat={(x) => (`$${x / 1000}k`)}\\n        />\\n        <VictoryStack>\\n          <VictoryBar\\n            data={data2012}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n          <VictoryBar\\n            data={data2013}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n          <VictoryBar\\n            data={data2014}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n          <VictoryBar\\n            data={data2015}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n        </VictoryStack>\\n      </VictoryChart>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n#### 9. Override theme's color scale\\n\\n`VictoryStack` can also be used to provide shared styles and props to its children. Let's add a `colorScale` prop to `VictoryStack` to override the default `colorScale` defined in `VictoryTheme.material`. ([See the commit here](https://github.com/FormidableLabs/victory-tutorial/tree/9c77240e45db4e9fde4123ae29304461739a7035/src/js/client.js).)\\n\\n```playground_norender\\nconst data2012 = [\\n  {quarter: 1, earnings: 13000},\\n  {quarter: 2, earnings: 16500},\\n  {quarter: 3, earnings: 14250},\\n  {quarter: 4, earnings: 19000}\\n];\\n\\nconst data2013 = [\\n  {quarter: 1, earnings: 15000},\\n  {quarter: 2, earnings: 12500},\\n  {quarter: 3, earnings: 19500},\\n  {quarter: 4, earnings: 13000}\\n];\\n\\nconst data2014 = [\\n  {quarter: 1, earnings: 11500},\\n  {quarter: 2, earnings: 13250},\\n  {quarter: 3, earnings: 20000},\\n  {quarter: 4, earnings: 15500}\\n];\\n\\nconst data2015 = [\\n  {quarter: 1, earnings: 18000},\\n  {quarter: 2, earnings: 13250},\\n  {quarter: 3, earnings: 15000},\\n  {quarter: 4, earnings: 12000}\\n];\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n        domainPadding={20}\\n        theme={VictoryTheme.material}\\n      >\\n        <VictoryAxis\\n          tickValues={[1, 2, 3, 4]}\\n          tickFormat={[\\\"Quarter 1\\\", \\\"Quarter 2\\\", \\\"Quarter 3\\\", \\\"Quarter 4\\\"]}\\n        />\\n        <VictoryAxis\\n          dependentAxis\\n          tickFormat={(x) => (`$${x / 1000}k`)}\\n        />\\n        <VictoryStack\\n          colorScale={\\\"warm\\\"}\\n        >\\n          <VictoryBar\\n            data={data2012}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n          <VictoryBar\\n            data={data2013}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n          <VictoryBar\\n            data={data2014}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n          <VictoryBar\\n            data={data2015}\\n            x=\\\"quarter\\\"\\n            y=\\\"earnings\\\"\\n          />\\n        </VictoryStack>\\n      </VictoryChart>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## Next Steps\\n\\nCongratulations! You\u2019ve created your first chart with Victory. Next, check out our [FAQs][] and [Gallery][] for more examples and information. Happy charting.\\n\\n## Documentation, Contributing, and Source\\n\\nFor more information about Victory and its components, check out the docs - see [VictoryChart](/docs/victory-chart) to get started. Interested in helping out or seeing what's happening under the hood? Victory is maintained at [github.com/FormidableLabs/victory](https://github.com/FormidableLabs/victory), and you can [start contributing here](https://github.com/FormidableLabs/victory/#contributing).\\n\\n[our guides]: /guides\\n[Gallery]: /gallery\\n[FAQs]: /docs/faq\\n[Check out the native version of this getting started tutorial]: /docs/native\\n\"},{\"data\":{\"id\":1,\"title\":\"Native\",\"category\":\"introduction\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Getting Started with Victory Native\",\"depth\":1,\"slug\":\"getting-started-with-victory-native\"}],\"slug\":\"native\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Getting Started with Victory Native\",\"depth\":1,\"slug\":\"getting-started-with-victory-native\",\"category\":\"introduction\"}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 1\\ntitle: Native\\ncategory: introduction\\ntype: docs\\nscope: null\\n---\\n\\n# Getting Started with Victory Native\\n\\nIn this guide, we\u2019ll show you how to get started with Victory Native and the React Native SVG dependency running in your React Native app for iOS and Android.\\n\\n#### 1. Adding Victory Native to your React Native app\\n\\nVisit the [the guide on getting started](https://facebook.github.io/react-native/docs/getting-started.html) with React Native if you\u2019re just getting started with React Native.\\n\\nVictory Native is compatible with React Native 0.50 or higher.\\n\\nTo add Victory Native to your React Native app install `victory-native`.\\n\\n```bash\\n$ yarn add victory-native # or\\n$ npm install --save victory-native\\n```\\n\\n#### 2. Add React Native SVG to your app\\n\\nIf you are building a project with native code, you will need to link the native dependencies of React Native SVG to the iOS and Android projects.\\n\\nThis step is not required if you are using Expo (SDK 23.0.0 or higher) as it is already included.\\n\\n```bash\\n$ react-native install react-native-svg\\n```\\n\\n**Note:** If you run the iOS app and see a linker error for `-lRNSVG-tvOS` you will need to remove `libRNSVG-tvOS.a` from the \u201CLink Binary with Libraries\u201D section within your iOS app\u2019s target\u2019s properties.\\n\\n#### 3. Using Victory Native in your React Native app\\n\\nVictory Native behaves and functions the same way for React Native as it does for the web. Just import components from `victory-native` to get started. To learn move about how to use Victory visit the [Getting Started Guide][].\\n\\nThe example below shows a how Victory Native easily integrates within your React Native app.\\n\\n```jsx\\nimport React from \\\"react\\\";\\nimport { StyleSheet, View } from \\\"react-native\\\";\\nimport { VictoryBar, VictoryChart, VictoryTheme } from \\\"victory-native\\\";\\n\\nconst data = [\\n  { quarter: 1, earnings: 13000 },\\n  { quarter: 2, earnings: 16500 },\\n  { quarter: 3, earnings: 14250 },\\n  { quarter: 4, earnings: 19000 }\\n];\\n\\nexport default class App extends React.Component {\\n  render() {\\n    return (\\n      <View style={styles.container}>\\n        <VictoryChart width={350} theme={VictoryTheme.material}>\\n          <VictoryBar data={data} x=\\\"quarter\\\" y=\\\"earnings\\\" />\\n        </VictoryChart>\\n      </View>\\n    );\\n  }\\n}\\n\\nconst styles = StyleSheet.create({\\n  container: {\\n    flex: 1,\\n    justifyContent: \\\"center\\\",\\n    alignItems: \\\"center\\\",\\n    backgroundColor: \\\"#f5fcff\\\"\\n  }\\n});\\n```\\n\\n#### 4. Testing Components that use Victory Native\\n\\nYou can test your components that render Victory Native using Jest and React Test Renderer which is included out\u2013of\u2013the box with React Native. The `jest` configuration section in `package.json` will need to be modified to ensure dependencies are transformed otherwise you will see an error when tests are run.\\n\\n```json\\n\\\"jest\\\": {\\n  \\\"preset\\\": \\\"react-native\\\",\\n  \\\"transformIgnorePatterns\\\": [\\n    \\\"node_modules/(?!victory|react-native-svg|react-native)\\\"\\n  ],\\n  \\\"transform\\\": {\\n    \\\"^.+\\\\\\\\.jsx?$\\\": \\\"babel-jest\\\"\\n  }\\n}\\n```\\n\\nTo test the above `App` component you can simply do:\\n\\n```jsx\\nimport \\\"react-native\\\";\\nimport React from \\\"react\\\";\\nimport App from \\\"../App.js\\\";\\nimport renderer from \\\"react-test-renderer\\\";\\n\\nit(\\\"renders correctly\\\", () => {\\n  const tree = renderer.create(<App />);\\n  expect(tree).toMatchSnapshot();\\n});\\n```\\n\\n**Note:** `renderer` must be imported _after_ `react-native` for tests to work.\\n\\n[getting started guide]: /docs/\\n\",\"content\":\"\\n# Getting Started with Victory Native\\n\\nIn this guide, we\u2019ll show you how to get started with Victory Native and the React Native SVG dependency running in your React Native app for iOS and Android.\\n\\n#### 1. Adding Victory Native to your React Native app\\n\\nVisit the [the guide on getting started](https://facebook.github.io/react-native/docs/getting-started.html) with React Native if you\u2019re just getting started with React Native.\\n\\nVictory Native is compatible with React Native 0.50 or higher.\\n\\nTo add Victory Native to your React Native app install `victory-native`.\\n\\n```bash\\n$ yarn add victory-native # or\\n$ npm install --save victory-native\\n```\\n\\n#### 2. Add React Native SVG to your app\\n\\nIf you are building a project with native code, you will need to link the native dependencies of React Native SVG to the iOS and Android projects.\\n\\nThis step is not required if you are using Expo (SDK 23.0.0 or higher) as it is already included.\\n\\n```bash\\n$ react-native install react-native-svg\\n```\\n\\n**Note:** If you run the iOS app and see a linker error for `-lRNSVG-tvOS` you will need to remove `libRNSVG-tvOS.a` from the \u201CLink Binary with Libraries\u201D section within your iOS app\u2019s target\u2019s properties.\\n\\n#### 3. Using Victory Native in your React Native app\\n\\nVictory Native behaves and functions the same way for React Native as it does for the web. Just import components from `victory-native` to get started. To learn move about how to use Victory visit the [Getting Started Guide][].\\n\\nThe example below shows a how Victory Native easily integrates within your React Native app.\\n\\n```jsx\\nimport React from \\\"react\\\";\\nimport { StyleSheet, View } from \\\"react-native\\\";\\nimport { VictoryBar, VictoryChart, VictoryTheme } from \\\"victory-native\\\";\\n\\nconst data = [\\n  { quarter: 1, earnings: 13000 },\\n  { quarter: 2, earnings: 16500 },\\n  { quarter: 3, earnings: 14250 },\\n  { quarter: 4, earnings: 19000 }\\n];\\n\\nexport default class App extends React.Component {\\n  render() {\\n    return (\\n      <View style={styles.container}>\\n        <VictoryChart width={350} theme={VictoryTheme.material}>\\n          <VictoryBar data={data} x=\\\"quarter\\\" y=\\\"earnings\\\" />\\n        </VictoryChart>\\n      </View>\\n    );\\n  }\\n}\\n\\nconst styles = StyleSheet.create({\\n  container: {\\n    flex: 1,\\n    justifyContent: \\\"center\\\",\\n    alignItems: \\\"center\\\",\\n    backgroundColor: \\\"#f5fcff\\\"\\n  }\\n});\\n```\\n\\n#### 4. Testing Components that use Victory Native\\n\\nYou can test your components that render Victory Native using Jest and React Test Renderer which is included out\u2013of\u2013the box with React Native. The `jest` configuration section in `package.json` will need to be modified to ensure dependencies are transformed otherwise you will see an error when tests are run.\\n\\n```json\\n\\\"jest\\\": {\\n  \\\"preset\\\": \\\"react-native\\\",\\n  \\\"transformIgnorePatterns\\\": [\\n    \\\"node_modules/(?!victory|react-native-svg|react-native)\\\"\\n  ],\\n  \\\"transform\\\": {\\n    \\\"^.+\\\\\\\\.jsx?$\\\": \\\"babel-jest\\\"\\n  }\\n}\\n```\\n\\nTo test the above `App` component you can simply do:\\n\\n```jsx\\nimport \\\"react-native\\\";\\nimport React from \\\"react\\\";\\nimport App from \\\"../App.js\\\";\\nimport renderer from \\\"react-test-renderer\\\";\\n\\nit(\\\"renders correctly\\\", () => {\\n  const tree = renderer.create(<App />);\\n  expect(tree).toMatchSnapshot();\\n});\\n```\\n\\n**Note:** `renderer` must be imported _after_ `react-native` for tests to work.\\n\\n[getting started guide]: /docs/\\n\"},{\"data\":{\"id\":1,\"title\":\"New Features\",\"category\":\"introduction\",\"slug\":\"new\",\"type\":\"docs\",\"scope\":[\"range\",\"sampleData\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"New Features\",\"depth\":1,\"slug\":\"new-features\"},{\"type\":\"heading\",\"value\":\"VictoryHistogram\",\"depth\":2,\"slug\":\"victory-histogram\"},{\"type\":\"heading\",\"value\":\"Backgrounds for VictoryChart\",\"depth\":2,\"slug\":\"backgrounds-for-victory-chart\"}],\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"New Features\",\"depth\":1,\"slug\":\"new-features\",\"category\":\"introduction\",\"children\":[{\"type\":\"heading\",\"value\":\"VictoryHistogram\",\"depth\":2,\"slug\":\"victory-histogram\"},{\"type\":\"heading\",\"value\":\"Backgrounds for VictoryChart\",\"depth\":2,\"slug\":\"backgrounds-for-victory-chart\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 1\\ntitle: New Features\\ncategory: introduction\\nslug: new\\ntype: docs\\nscope:\\n  - range\\n  - sampleData\\n---\\n\\n# New Features\\n\\nVictory is actively developed. You can read about some of our newest feature here. For more information on improvements and bug fixes, check out our [changelog](https://github.com/FormidableLabs/victory/blob/master/CHANGELOG.md).\\n\\n## VictoryHistogram\\n\\nWe've added a new charting component to allow you to easily create histogram charts. With [`VictoryHistogram`](/docs/victory-histogram) you can create beautiful and interactive histograms.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryHistogram\\n    style={{ data: { fill: '#F1737F' }}}\\n    cornerRadius={3}\\n    data={[\\n      { x: 0 },\\n      { x: 1 },\\n      { x: 1 },\\n      { x: 1 },\\n      { x: 1 },\\n      { x: 2 },\\n      { x: 2 },\\n      { x: 3 },\\n      { x: 4 },\\n      { x: 7 },\\n      { x: 7 },\\n      { x: 10 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\nUsing the [`bins`](/docs/victory-histogram#bins) prop, you have flexibility in how your data is binned, allowing you to specify specific bin ranges, or an approximate count of how many bins you want.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryHistogram\\n    style={{ data: { fill: '#F1737F' }}}\\n    cornerRadius={3}\\n    bins={[0, 2, 8, 15]}\\n    data={[\\n      { x: 0 },\\n      { x: 1 },\\n      { x: 1 },\\n      { x: 1 },\\n      { x: 1 },\\n      { x: 2 },\\n      { x: 2 },\\n      { x: 3 },\\n      { x: 4 },\\n      { x: 7 },\\n      { x: 7 },\\n      { x: 10 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\nYou can stack `VictoryHistogram` too, just wrap it in [`VictoryStack`](/docs/victory-stack)!\\n\\n```playground\\n<VictoryChart>\\n  <VictoryStack colorScale=\\\"qualitative\\\">\\n    <VictoryHistogram\\n      data={[\\n        { x: 0 },\\n        { x: 1 },\\n        { x: 1 },\\n        { x: 1 },\\n        { x: 1 },\\n        { x: 2 },\\n        { x: 2 },\\n        { x: 3 },\\n        { x: 4 },\\n        { x: 7 },\\n        { x: 7 },\\n        { x: 10 }\\n      ]}\\n    />\\n\\n    <VictoryHistogram\\n      cornerRadius={3}\\n      data={[\\n        { x: 0 },\\n        { x: 1 },\\n        { x: 1 },\\n        { x: 1 },\\n        { x: 2 },\\n        { x: 2 },\\n        { x: 3 },\\n        { x: 4 },\\n        { x: 5 },\\n        { x: 7 },\\n        { x: 8 }\\n      ]}\\n    />\\n  </VictoryStack>\\n</VictoryChart>\\n```\\n\\n## Backgrounds for VictoryChart\\n\\nWe wanted to make it easier to style the chart backgrounds, so we added a [`backgroundComponent`](/docs/victory-chart#backgroundcomponent) for `VictoryChart`. Now, when you include `background` styles, `VictoryChart` will render [`Background`](/docs/victory-primitives#background), a styled element that fills the area between your axes.\\n\\nTry it out!\\n\\n```playground\\n<VictoryChart\\n  style={{\\n    background: { fill: \\\"lavender\\\" }\\n  }}\\n>\\n  <VictoryScatter />\\n</VictoryChart>\\n```\\n\\nPolar charts are also supported, with `Background` rendering a `circle` instead of a `rect` element\\\\`:\\n\\n```playground\\n<div>\\n  <svg>\\n    <defs>\\n      <radialGradient id=\\\"radial_gradient\\\">\\n        <stop offset=\\\"10%\\\" stopColor=\\\"red\\\" />\\n        <stop offset=\\\"95%\\\" stopColor=\\\"gold\\\" />\\n        />\\n      </radialGradient>\\n    </defs>\\n  </svg>\\n\\n  <VictoryChart\\n    polar\\n    style={{\\n      background: { fill: \\\"url(#radial_gradient)\\\" }\\n    }}\\n  >\\n    <VictoryScatter />\\n    <VictoryPolarAxis\\n      style={{\\n        tickLabels: { angle: 0 }\\n      }}\\n    \\ttickValues={[0, 90, 180, 270]}\\n    />\\n  </VictoryChart>\\n</div>\\n```\\n\\nAs with other components Victory renders, you can add props directly to `Background`, or create your own custom `backgroundComponent`.\\n\\n```playground_norender\\nconst CustomBackground = props => {\\n  return (\\n    <image\\n      href={\\\"https://i.picsum.photos/id/906/525/300.jpg\\\"}\\n      {...props}\\n    />\\n  );\\n};\\n\\nconst Matterhorn = props => {\\n  return (\\n    <VictoryChart\\n      domain={{ y: [2000, 5000]}}\\n      style={{ background: { opacity: 0.8} }}\\n      backgroundComponent={<CustomBackground />}\\n    >\\n      <VictoryLine\\n      \\tdata={[\\n        \\t{ x: 0, y: 2500 },\\n          { x: 1.25, y: 2600 },\\n          { x: 1.8, y: 3000 },\\n          { x: 2.7, y: 3300 },\\n          { x: 3.1, y: 3800 },\\n          { x: 3.25, y: 4000 },\\n          { x: 3.5, y: 4000 },\\n          { x: 4, y: 4478, label: \\\"4,478m\\\" },\\n          { x: 4.5, y: 4300. },\\n          { x: 5.1, y: 4200 },\\n          { x: 6.3, y: 3500 },\\n          { x: 6.75, y: 3400 },\\n          { x: 7, y: 3300 },\\n          { x: 7.25, y: 3200 },\\n          { x: 9, y: 2900 },\\n          { x: 12, y: 2000 }\\n        ]}\\n        style={{\\n         data: { strokeWidth: 4 }\\n       }}\\n      />\\n      <VictoryAxis dependentAxis />\\n    </VictoryChart>\\n  )\\n};\\n\\nReactDOM.render(<Matterhorn/>, mountNode);\\n```\\n\",\"content\":\"\\n# New Features\\n\\nVictory is actively developed. You can read about some of our newest feature here. For more information on improvements and bug fixes, check out our [changelog](https://github.com/FormidableLabs/victory/blob/master/CHANGELOG.md).\\n\\n## VictoryHistogram\\n\\nWe've added a new charting component to allow you to easily create histogram charts. With [`VictoryHistogram`](/docs/victory-histogram) you can create beautiful and interactive histograms.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryHistogram\\n    style={{ data: { fill: '#F1737F' }}}\\n    cornerRadius={3}\\n    data={[\\n      { x: 0 },\\n      { x: 1 },\\n      { x: 1 },\\n      { x: 1 },\\n      { x: 1 },\\n      { x: 2 },\\n      { x: 2 },\\n      { x: 3 },\\n      { x: 4 },\\n      { x: 7 },\\n      { x: 7 },\\n      { x: 10 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\nUsing the [`bins`](/docs/victory-histogram#bins) prop, you have flexibility in how your data is binned, allowing you to specify specific bin ranges, or an approximate count of how many bins you want.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryHistogram\\n    style={{ data: { fill: '#F1737F' }}}\\n    cornerRadius={3}\\n    bins={[0, 2, 8, 15]}\\n    data={[\\n      { x: 0 },\\n      { x: 1 },\\n      { x: 1 },\\n      { x: 1 },\\n      { x: 1 },\\n      { x: 2 },\\n      { x: 2 },\\n      { x: 3 },\\n      { x: 4 },\\n      { x: 7 },\\n      { x: 7 },\\n      { x: 10 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\nYou can stack `VictoryHistogram` too, just wrap it in [`VictoryStack`](/docs/victory-stack)!\\n\\n```playground\\n<VictoryChart>\\n  <VictoryStack colorScale=\\\"qualitative\\\">\\n    <VictoryHistogram\\n      data={[\\n        { x: 0 },\\n        { x: 1 },\\n        { x: 1 },\\n        { x: 1 },\\n        { x: 1 },\\n        { x: 2 },\\n        { x: 2 },\\n        { x: 3 },\\n        { x: 4 },\\n        { x: 7 },\\n        { x: 7 },\\n        { x: 10 }\\n      ]}\\n    />\\n\\n    <VictoryHistogram\\n      cornerRadius={3}\\n      data={[\\n        { x: 0 },\\n        { x: 1 },\\n        { x: 1 },\\n        { x: 1 },\\n        { x: 2 },\\n        { x: 2 },\\n        { x: 3 },\\n        { x: 4 },\\n        { x: 5 },\\n        { x: 7 },\\n        { x: 8 }\\n      ]}\\n    />\\n  </VictoryStack>\\n</VictoryChart>\\n```\\n\\n## Backgrounds for VictoryChart\\n\\nWe wanted to make it easier to style the chart backgrounds, so we added a [`backgroundComponent`](/docs/victory-chart#backgroundcomponent) for `VictoryChart`. Now, when you include `background` styles, `VictoryChart` will render [`Background`](/docs/victory-primitives#background), a styled element that fills the area between your axes.\\n\\nTry it out!\\n\\n```playground\\n<VictoryChart\\n  style={{\\n    background: { fill: \\\"lavender\\\" }\\n  }}\\n>\\n  <VictoryScatter />\\n</VictoryChart>\\n```\\n\\nPolar charts are also supported, with `Background` rendering a `circle` instead of a `rect` element`:\\n\\n```playground\\n<div>\\n  <svg>\\n    <defs>\\n      <radialGradient id=\\\"radial_gradient\\\">\\n        <stop offset=\\\"10%\\\" stopColor=\\\"red\\\" />\\n        <stop offset=\\\"95%\\\" stopColor=\\\"gold\\\" />\\n        />\\n      </radialGradient>\\n    </defs>\\n  </svg>\\n\\n  <VictoryChart\\n    polar\\n    style={{\\n      background: { fill: \\\"url(#radial_gradient)\\\" }\\n    }}\\n  >\\n    <VictoryScatter />\\n    <VictoryPolarAxis\\n      style={{\\n        tickLabels: { angle: 0 }\\n      }}\\n    \\ttickValues={[0, 90, 180, 270]}\\n    />\\n  </VictoryChart>\\n</div>\\n```\\n\\nAs with other components Victory renders, you can add props directly to `Background`, or create your own custom `backgroundComponent`.\\n\\n```playground_norender\\nconst CustomBackground = props => {\\n  return (\\n    <image\\n      href={\\\"https://i.picsum.photos/id/906/525/300.jpg\\\"}\\n      {...props}\\n    />\\n  );\\n};\\n\\nconst Matterhorn = props => {\\n  return (\\n    <VictoryChart\\n      domain={{ y: [2000, 5000]}}\\n      style={{ background: { opacity: 0.8} }}\\n      backgroundComponent={<CustomBackground />}\\n    >\\n      <VictoryLine\\n      \\tdata={[\\n        \\t{ x: 0, y: 2500 },\\n          { x: 1.25, y: 2600 },\\n          { x: 1.8, y: 3000 },\\n          { x: 2.7, y: 3300 },\\n          { x: 3.1, y: 3800 },\\n          { x: 3.25, y: 4000 },\\n          { x: 3.5, y: 4000 },\\n          { x: 4, y: 4478, label: \\\"4,478m\\\" },\\n          { x: 4.5, y: 4300. },\\n          { x: 5.1, y: 4200 },\\n          { x: 6.3, y: 3500 },\\n          { x: 6.75, y: 3400 },\\n          { x: 7, y: 3300 },\\n          { x: 7.25, y: 3200 },\\n          { x: 9, y: 2900 },\\n          { x: 12, y: 2000 }\\n        ]}\\n        style={{\\n         data: { strokeWidth: 4 }\\n       }}\\n      />\\n      <VictoryAxis dependentAxis />\\n    </VictoryChart>\\n  )\\n};\\n\\nReactDOM.render(<Matterhorn/>, mountNode);\\n```\\n\"},{\"data\":{\"id\":1,\"title\":\"FAQs\",\"category\":\"support\",\"type\":\"docs\",\"scope\":null,\"slug\":\"faq\",\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Frequently Asked Questions (FAQ)\",\"depth\":1,\"slug\":\"frequently-asked-questions-faq\"},{\"type\":\"heading\",\"value\":\"Styles\",\"depth\":2,\"slug\":\"styles\"},{\"type\":\"heading\",\"value\":\"How can I change the colors of lines and other elements in Victory?\",\"depth\":3,\"slug\":\"how-can-i-change-the-colors-of-lines-and-other-elements-in-victory\"},{\"type\":\"heading\",\"value\":\"How can I change the color of an individual point or bar?\",\"depth\":3,\"slug\":\"how-can-i-change-the-color-of-an-individual-point-or-bar\"},{\"type\":\"heading\",\"value\":\"How can I use gradient fills in Victory?\",\"depth\":3,\"slug\":\"how-can-i-use-gradient-fills-in-victory\"},{\"type\":\"heading\",\"value\":\"Annotations\",\"depth\":2,\"slug\":\"annotations\"},{\"type\":\"heading\",\"value\":\"How can I add arbitrary labels to my charts?\",\"depth\":3,\"slug\":\"how-can-i-add-arbitrary-labels-to-my-charts\"},{\"type\":\"heading\",\"value\":\"How can I annotate my charts with lines and markers?\",\"depth\":3,\"slug\":\"how-can-i-annotate-my-charts-with-lines-and-markers\"},{\"type\":\"heading\",\"value\":\"Axes\",\"depth\":2,\"slug\":\"axes\"},{\"type\":\"heading\",\"value\":\"How do I turn off the axes on VictoryChart?\",\"depth\":3,\"slug\":\"how-do-i-turn-off-the-axes-on-victory-chart\"},{\"type\":\"heading\",\"value\":\"Why is VictoryChart rendering only one axis?\",\"depth\":3,\"slug\":\"why-is-victory-chart-rendering-only-one-axis\"},{\"type\":\"heading\",\"value\":\"Can I make a chart with multiple dependent axes?\",\"depth\":3,\"slug\":\"can-i-make-a-chart-with-multiple-dependent-axes\"},{\"type\":\"heading\",\"value\":\"How can I change the position of my axis?\",\"depth\":3,\"slug\":\"how-can-i-change-the-position-of-my-axis\"},{\"type\":\"heading\",\"value\":\"How can I format my axis labels?\",\"depth\":3,\"slug\":\"how-can-i-format-my-axis-labels\"},{\"type\":\"heading\",\"value\":\"My axis labels are cut off. How can I fix them?\",\"depth\":3,\"slug\":\"my-axis-labels-are-cut-off-how-can-i-fix-them\"},{\"type\":\"heading\",\"value\":\"My axis labels are showing very small numbers. How do I fix this?\",\"depth\":3,\"slug\":\"my-axis-labels-are-showing-very-small-numbers-how-do-i-fix-this\"},{\"type\":\"heading\",\"value\":\"Labels and Tooltips\",\"depth\":2,\"slug\":\"labels-and-tooltips\"},{\"type\":\"heading\",\"value\":\"How can I add tooltips to a line?\",\"depth\":3,\"slug\":\"how-can-i-add-tooltips-to-a-line\"},{\"type\":\"heading\",\"value\":\"How can I add my own events when I'm using VictoryTooltip?\",\"depth\":3,\"slug\":\"how-can-i-add-my-own-events-when-im-using-victory-tooltip\"},{\"type\":\"heading\",\"value\":\"Layout\",\"depth\":2,\"slug\":\"layout\"},{\"type\":\"heading\",\"value\":\"Why are the bars in my bar chart overlapping with the axis?\",\"depth\":3,\"slug\":\"why-are-the-bars-in-my-bar-chart-overlapping-with-the-axis\"},{\"type\":\"heading\",\"value\":\"How can I change the size of my chart?\",\"depth\":3,\"slug\":\"how-can-i-change-the-size-of-my-chart\"},{\"type\":\"heading\",\"value\":\"Containers and Behaviors\",\"depth\":2,\"slug\":\"containers-and-behaviors\"},{\"type\":\"heading\",\"value\":\"How can I use containers in Victory?\",\"depth\":3,\"slug\":\"how-can-i-use-containers-in-victory\"},{\"type\":\"heading\",\"value\":\"How can I make a chart with voronoi tooltips that can also zoom?\",\"depth\":3,\"slug\":\"how-can-i-make-a-chart-with-voronoi-tooltips-that-can-also-zoom\"}],\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Frequently Asked Questions (FAQ)\",\"depth\":1,\"slug\":\"frequently-asked-questions-faq\",\"category\":\"support\",\"children\":[{\"type\":\"heading\",\"value\":\"Styles\",\"depth\":2,\"slug\":\"styles\",\"children\":[{\"type\":\"heading\",\"value\":\"How can I change the colors of lines and other elements in Victory?\",\"depth\":3,\"slug\":\"how-can-i-change-the-colors-of-lines-and-other-elements-in-victory\"},{\"type\":\"heading\",\"value\":\"How can I change the color of an individual point or bar?\",\"depth\":3,\"slug\":\"how-can-i-change-the-color-of-an-individual-point-or-bar\"},{\"type\":\"heading\",\"value\":\"How can I use gradient fills in Victory?\",\"depth\":3,\"slug\":\"how-can-i-use-gradient-fills-in-victory\"}]},{\"type\":\"heading\",\"value\":\"Annotations\",\"depth\":2,\"slug\":\"annotations\",\"children\":[{\"type\":\"heading\",\"value\":\"How can I add arbitrary labels to my charts?\",\"depth\":3,\"slug\":\"how-can-i-add-arbitrary-labels-to-my-charts\"},{\"type\":\"heading\",\"value\":\"How can I annotate my charts with lines and markers?\",\"depth\":3,\"slug\":\"how-can-i-annotate-my-charts-with-lines-and-markers\"}]},{\"type\":\"heading\",\"value\":\"Axes\",\"depth\":2,\"slug\":\"axes\",\"children\":[{\"type\":\"heading\",\"value\":\"How do I turn off the axes on VictoryChart?\",\"depth\":3,\"slug\":\"how-do-i-turn-off-the-axes-on-victory-chart\"},{\"type\":\"heading\",\"value\":\"Why is VictoryChart rendering only one axis?\",\"depth\":3,\"slug\":\"why-is-victory-chart-rendering-only-one-axis\"},{\"type\":\"heading\",\"value\":\"Can I make a chart with multiple dependent axes?\",\"depth\":3,\"slug\":\"can-i-make-a-chart-with-multiple-dependent-axes\"},{\"type\":\"heading\",\"value\":\"How can I change the position of my axis?\",\"depth\":3,\"slug\":\"how-can-i-change-the-position-of-my-axis\"},{\"type\":\"heading\",\"value\":\"How can I format my axis labels?\",\"depth\":3,\"slug\":\"how-can-i-format-my-axis-labels\"},{\"type\":\"heading\",\"value\":\"My axis labels are cut off. How can I fix them?\",\"depth\":3,\"slug\":\"my-axis-labels-are-cut-off-how-can-i-fix-them\"},{\"type\":\"heading\",\"value\":\"My axis labels are showing very small numbers. How do I fix this?\",\"depth\":3,\"slug\":\"my-axis-labels-are-showing-very-small-numbers-how-do-i-fix-this\"}]},{\"type\":\"heading\",\"value\":\"Labels and Tooltips\",\"depth\":2,\"slug\":\"labels-and-tooltips\",\"children\":[{\"type\":\"heading\",\"value\":\"How can I add tooltips to a line?\",\"depth\":3,\"slug\":\"how-can-i-add-tooltips-to-a-line\"},{\"type\":\"heading\",\"value\":\"How can I add my own events when I'm using VictoryTooltip?\",\"depth\":3,\"slug\":\"how-can-i-add-my-own-events-when-im-using-victory-tooltip\"}]},{\"type\":\"heading\",\"value\":\"Layout\",\"depth\":2,\"slug\":\"layout\",\"children\":[{\"type\":\"heading\",\"value\":\"Why are the bars in my bar chart overlapping with the axis?\",\"depth\":3,\"slug\":\"why-are-the-bars-in-my-bar-chart-overlapping-with-the-axis\"},{\"type\":\"heading\",\"value\":\"How can I change the size of my chart?\",\"depth\":3,\"slug\":\"how-can-i-change-the-size-of-my-chart\"}]},{\"type\":\"heading\",\"value\":\"Containers and Behaviors\",\"depth\":2,\"slug\":\"containers-and-behaviors\",\"children\":[{\"type\":\"heading\",\"value\":\"How can I use containers in Victory?\",\"depth\":3,\"slug\":\"how-can-i-use-containers-in-victory\"},{\"type\":\"heading\",\"value\":\"How can I make a chart with voronoi tooltips that can also zoom?\",\"depth\":3,\"slug\":\"how-can-i-make-a-chart-with-voronoi-tooltips-that-can-also-zoom\"}]}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 1\\ntitle: FAQs\\ncategory: support\\ntype: docs\\nscope: null\\nslug: faq\\n---\\n\\n# Frequently Asked Questions (FAQ)\\n\\nThanks for trying Victory! The FAQs below are based on issues and questions from our [support channel](https://spectrum.chat/victory). You can find more examples in [our gallery](/gallery). Can't find what you're looking for? Help us improve these docs by [opening an issue](https://github.com/FormidableLabs/victory-docs/issues/new).\\n\\n## Styles\\n\\n### How can I change the colors of lines and other elements in Victory?\\n\\nMost components in Victory use a standard `style` prop with style namespaces for \\\"data\\\" and \\\"labels\\\". Any styles added to the \\\"data\\\" namespace will be applied to all the svg elements rendered for a given dataset.\\n\\n```playground\\n<VictoryChart domain={{ x: [0, 4] }}>\\n  <VictoryBar\\n    style={{ data: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 1, y: 2 }, { x: 2, y: 4 }, { x: 3, y: 6 }\\n    ]}\\n  />\\n  <VictoryLine\\n    style={{ data: { stroke: \\\"blue\\\", strokeWidth: 5 } }}\\n    y={(d) => d.x}\\n  />\\n</VictoryChart>\\n```\\n\\n### How can I change the color of an individual point or bar?\\n\\nIndividual elements in Victory can be styled by adding style attributes directly to your data object and using functional styles and props as in the example below. Functions are called with all the props that correspond to the element they render.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryBar\\n    style={{\\n      data: {\\n        fill: ({ datum }) => datum.fill,\\n      }\\n    }}\\n    data={[\\n      { x: 1, y: 2, fill: \\\"red\\\" },\\n      { x: 2, y: 4 , fill: \\\"orange\\\" },\\n      { x: 3, y: 6, fill: \\\"gold\\\" }\\n    ]}\\n  />\\n  <VictoryScatter\\n    style={{ data: {\\n      fill: ({ index }) => +index % 2 === 0 ? \\\"blue\\\" : \\\"grey\\\",\\n      stroke: ({ datum }) => datum.y < 6 ? \\\"red\\\" : \\\"black\\\",\\n      strokeWidth: 2\\n    } }}\\n    symbol={({ datum }) => datum.x > 1 ? \\\"plus\\\" : \\\"square\\\"}\\n    size={({ datum }) => datum.y + 2}\\n    data={[\\n       { x: 0, y: 2 }, { x: 1, y: 4 }, { x: 2, y: 6 }, { x: 3, y: 8 }, { x: 4, y: 10 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\nNote that continuous data types such as `VictoryLine` and `VictoryArea` cannot be styled in this way, as they only render a single element for a given dataset.\\n\\n### How can I use gradient fills in Victory?\\n\\nCreate a gradient def as usual and then reference it by id in your style object. Gradients can be used to give continuous charts (_i.e._ line or area charts) the appearance of discrete data elements and hover states. A more complex example is given [here](/gallery/area-hover-styles).\\n\\n```playground\\n<div>\\n  <svg style={{ height: 0 }}>\\n    <defs>\\n      <linearGradient id=\\\"myGradient\\\">\\n        <stop offset=\\\"0%\\\" stopColor=\\\"red\\\"/>\\n        <stop offset=\\\"25%\\\" stopColor=\\\"orange\\\"/>\\n        <stop offset=\\\"50%\\\" stopColor=\\\"gold\\\"/>\\n        <stop offset=\\\"75%\\\" stopColor=\\\"yellow\\\"/>\\n        <stop offset=\\\"100%\\\" stopColor=\\\"green\\\"/>\\n      </linearGradient>\\n    </defs>\\n  </svg>\\n  <VictoryChart>\\n    <VictoryArea\\n      style={{\\n        data: {fill: \\\"url(#myGradient)\\\"}\\n      }}\\n      data={[\\n        { x: 1, y: 2 },\\n        { x: 2, y: 3 },\\n        { x: 3, y: 7 },\\n        { x: 4, y: 4 },\\n        { x: 5, y: 5 }\\n      ]}\\n    />\\n  </VictoryChart>\\n</div>\\n```\\n\\n## Annotations\\n\\n### How can I add arbitrary labels to my charts?\\n\\nUse `VictoryLabel` to as a child of `VictoryChart` to add arbitrary labels. Labels can be positioned with the `x` and `y` props, or with `datum` when used within `VictoryChart` or `VictoryGroup`.\\n\\n```playground\\n<VictoryChart domain={[0, 10]}>\\n  <VictoryLabel text=\\\"Chart Title\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n  <VictoryLine\\n    style={{ data: { stroke: \\\"blue\\\", strokeWidth: 5 } }}\\n    y={(d) => d.x}\\n  />\\n  <VictoryLabel text=\\\"Annotation\\\" datum={{ x: 4, y: 6 }} textAnchor=\\\"middle\\\"/>\\n</VictoryChart>\\n```\\n\\n### How can I annotate my charts with lines and markers?\\n\\nVictory doesn't have specific components for annotations. Instead, use standard component such as `VictoryLine` and `VictoryScatter` to add lines and markers to your chart.\\n\\n```playground\\n<VictoryChart domain={[0, 10]}>\\n  <VictoryLine\\n    style={{ data: { stroke: \\\"blue\\\", strokeWidth: 3 } }}\\n    y={(d) => d.x}\\n  />\\n  <VictoryLine\\n    style={{\\n      data: { stroke: \\\"red\\\", strokeWidth: 2 },\\n      labels: { angle: -90, fill: \\\"red\\\", fontSize: 20 }\\n    }}\\n    labels={[\\\"Important\\\"]}\\n    labelComponent={<VictoryLabel y={100}/>}\\n    x={() => 5}\\n  />\\n  <VictoryScatter\\n    symbol=\\\"star\\\"\\n    size={8}\\n    style={{ data: { fill: \\\"red\\\" }}}\\n    data={[{ x: 5, y: 5 }]}\\n  />\\n</VictoryChart>\\n```\\n\\n## Axes\\n\\n### How do I turn off the axes on VictoryChart?\\n\\n`VictoryChart` uses default axes. If you want to plot data without using any axes, use `VictoryGroup` instead.\\n\\n```playground\\n<VictoryGroup>\\n  <VictoryBar\\n    style={{ data: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 1, y: 2 }, { x: 2, y: 4 }, { x: 3, y: 6 }\\n    ]}\\n  />\\n  <VictoryLine domain={{ x: [0, 4] }}\\n    style={{ data: { stroke: \\\"blue\\\", strokeWidth: 5 } }}\\n    y={(d) => d.x}\\n  />\\n</VictoryGroup>\\n```\\n\\n### Why is VictoryChart rendering only one axis?\\n\\nWhen no axes are supplied to `VictoryChart` it will render pair of default axes. If any axes are supplied as children to `VictoryChart` it will render _only_ those axes.\\n\\n```playground\\n<div style={{ display: \\\"flex\\\", flexWrap: \\\"wrap\\\" }}>\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"Default Axes\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"Two VictoryAxis Children\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryAxis/>\\n    <VictoryAxis dependentAxis/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"Single Dependent Axis\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryAxis dependentAxis/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"Single Independent Axis\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryAxis/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n</div>\\n```\\n\\n### Can I make a chart with multiple dependent axes?\\n\\n`VictoryChart` will render any number of axes, but all children rendered by `VictoryChart` will be forced to use the same domain. To create a single chart with the appearance of several different domains, you can either compose components manually without the aid of `VictoryChart`, as described in [this guide](/guides/custom-charts), or normalize all of your data, and re-scale your axis tick labels to give the appearance of separate domains as in [this example](/gallery/multiple-dependent-axes).\\n\\n### How can I change the position of my axis?\\n\\n`VictoryChart` automatically aligns axes so that they cross at their origin. Use the `offsetX` and `offsetY` props on `VictoryAxis` to alter this default behavior. _Note:_ Axes that typically cross at zero will not display ticks or tick labels at zero. To change this behavior, set the `crossAxis` prop to false.\\n[Read more about VictoryAxis](/docs/victory-axis).\\n\\n```playground\\n<VictoryChart domain={{ y: [-10, 10] }}>\\n  <VictoryAxis offsetY={50}/>\\n  <VictoryAxis dependentAxis offsetX={50} crossAxis={false}/>\\n  <VictoryLine/>\\n</VictoryChart>\\n```\\n\\n### How can I format my axis labels?\\n\\nAxis tick labels are controlled via two props. `tickValues` controls the _positions_ of ticks along the axis, and `tickFormat` controls how labels are displayed. Use the `tickFormat` prop to customize axis labels. This prop can be given as an array of strings, or as a function that returns a string. Functions provided to `tickFormat` are called with the following arguments: `tickValue`, `index` and `tickArray`.\\n[Read more about VictoryAxis](/docs/victory-axis).\\n\\n```playground\\n<VictoryChart domain={[0, 5]}>\\n  <VictoryAxis tickValues={[1, 2, 3, 4]} tickFormat={[\\\"first\\\", \\\"second\\\", \\\"third\\\", \\\"fourth\\\"]}/>\\n  <VictoryAxis dependentAxis tickFormat={(tick) => `$${Math.round(tick)}M`}/>\\n  <VictoryLine/>\\n</VictoryChart>\\n```\\n\\n### My axis labels are cut off. How can I fix them?\\n\\nLong axis labels can be problematic. There are several ways to address the issue. The best solution will depend on the specific requirements of your project. The following examples demonstrate:\\n\\n-   Altering `padding`\\n-   Splitting labels onto multiple lines\\n-   Allowing labels to overflow the container with VictoryPortal\\n-   Using angled labels\\n\\n```playground\\n<div style={{ display: \\\"flex\\\", flexWrap: \\\"wrap\\\" }}>\\n  <VictoryChart\\n    padding={{ left: 90, top: 50, right: 10, bottom: 50 }}\\n  >\\n    <VictoryLabel text=\\\"Altering padding\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryAxis dependentAxis\\n      tickFormat={[\\n        \\\"first label\\\",\\n        \\\"second label\\\",\\n        \\\"third label\\\",\\n        \\\"forth label\\\",\\n        \\\"fifth label\\\"\\n      ]}\\n    />\\n    <VictoryAxis/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"Multi-line labels\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryAxis dependentAxis\\n      tickFormat={[\\n        `first\\\\nlabel`,\\n        `second\\\\nlabel`,\\n        `third\\\\nlabel`,\\n        `forth\\\\nlabel`,\\n        `fifth\\\\nlabel`\\n      ]}\\n    />\\n    <VictoryAxis/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"Angled labels\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryAxis dependentAxis\\n      style={{ tickLabels: { angle: -60 } }}\\n      tickFormat={[\\n        \\\"first label\\\",\\n        \\\"second label\\\",\\n        \\\"third label\\\",\\n        \\\"forth label\\\",\\n        \\\"fifth label\\\"\\n      ]}\\n    />\\n    <VictoryAxis/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"overflowing labels with VictoryPortal\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryAxis dependentAxis\\n      tickLabelComponent={<VictoryPortal><VictoryLabel/></VictoryPortal>}\\n      tickFormat={[\\n        \\\"first label\\\",\\n        \\\"second label\\\",\\n        \\\"third label\\\",\\n        \\\"forth label\\\",\\n        \\\"fifth label\\\"\\n      ]}\\n    />\\n    <VictoryAxis/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n\\n</div>\\n```\\n\\n### My axis labels are showing very small numbers. How do I fix this?\\n\\nWhen a dataset only has a single value, or when all values on an axis have the same value, the single-point domain for that axis will be converted to a two-point domain.\\nVictory does this by offsetting the domain value by a very small number.\\nTo solve this, you will need to manually set sensible defaults on the `domain` of your chart.\\n\\n```playground\\n  <VictoryChart\\n        domain={{x: [0,2]}}\\n       >\\n      <VictoryBar\\n        data={[{x: 1, y: 1}]}\\n      />\\n    </VictoryChart>\\n```\\n\\n## Labels and Tooltips\\n\\n### How can I add tooltips to a line?\\n\\n`VictoryLine` only renders a single element to represent an entire dataset, so replacing its `labelComponent` with `VictoryTooltip` wont work as expected, since there will be only a single event trigger. Voronoi tooltips can be used to add tooltips and other interactions components without unique event triggers, or with event triggers that are too small, or too close together to be useful. Use `VictoryVoronoiContainer` to associate mouse position with the nearest data points. [Read more about Voronoi Tooltips](/guides/tooltips#tooltips-with-victoryvoronoicontainer) and [`VictoryVoronoiContainer`](/docs/victory-voronoi-container).\\n\\n### How can I add my own events when I'm using VictoryTooltip?\\n\\n`VictoryTooltip` uses `defaultEvents` which are prepended onto any events array provided in props. When `events` container `onMouseOver` and `onMouseOut` events, they will interfere with the `defaultEvents` on `VictoryTooltip` to correct this, your events prop will need to return the same mutations as `defaultEvents`. [Read about tooltip events here](/guides/tooltips).\\n\\n## Layout\\n\\n### Why are the bars in my bar chart overlapping with the axis?\\n\\nBars in `VictoryBar` are centered around their corresponding value by default. You can move your bars away from your axis by setting a new domain, adding a `domainPadding`, or changing how bars are aligned relative to their values with the `alignment` prop on `VictoryBar`.\\n\\n```playground\\n<div style={{ display: \\\"flex\\\", flexWrap: \\\"wrap\\\" }}>\\n  <VictoryChart\\n    domainPadding={{ x: 15 }}\\n  >\\n    <VictoryLabel text=\\\"domainPadding\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryBar\\n      style={{ data: { fill: \\\"gold\\\", width: 30 } }}\\n    />\\n  </VictoryChart>\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"alignment\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryBar\\n      alignment=\\\"start\\\"\\n      style={{ data: { fill: \\\"gold\\\" } }}\\n    />\\n  </VictoryChart>\\n</div>\\n```\\n\\n### How can I change the size of my chart?\\n\\nBy default Victory components are rendered within responsive SVGs that preserve the aspect ratio set by the `width` and `height` props. Charts will automatically scale to fit within parent elements while maintaining a set aspect ratio. The size of your chart may be changed by rendering it within a smaller container. The aspect ratio of the chart may be changed by altering the width and height props. The default responsive behavior may also be disabled by setting `responsive={false}` on any Victory container.\\n\\n```playground\\n<div style={{ display: \\\"flex\\\", flexWrap: \\\"wrap\\\" }}>\\n  <VictoryChart style={{ parent: { maxWidth: \\\"50%\\\" } }}>\\n    <VictoryLabel text=\\\"Default Sizing\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n  <VictoryChart style={{ parent: { maxWidth: \\\"50%\\\" } }}\\n    width={600} height={200}\\n  >\\n    <VictoryLabel text=\\\"New Aspect Ratio\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n  <VictoryChart\\n    width={600} height={200}\\n    containerComponent={<VictoryContainer responsive={false}/>}\\n  >\\n    <VictoryLabel text=\\\"Non-responsive\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n</div>\\n```\\n\\n## Containers and Behaviors\\n\\n### How can I use containers in Victory?\\n\\nVictory renders charts into top-level container components. The most basic container is `VictoryContainer`. It is responsible for rendering children into a responsive svg, and providing a portal component for rendering tooltips, or any other elements that should be rendered above everything else. Other Victory container, such as `VictoryZoomContainer` and `VictoryCursorContainer` provide an interactive layer for the chart. These containers perform all the same functions as `VictoryContainer` in addition to their specialized functions.\\n\\n-   [`VictoryZoomContainer`](/docs/victory-zoom-container): Adds pan and zoom functionality to a chart\\n-   [`VictoryVoronoiContainer`](/docs/victory-voronoi-container): Associates mouse position with the nearest data points, and is useful for tooltips and other hover interactions\\n-   [`VictorySelectionContainer`](/docs/victory-selection-container): Adds the ability to select points within a region\\n-   [`VictoryBrushContainer`](/docs/victory-brush-container): Adds a moveable highlighted region to charts\\n-   [`VictoryCursorContainer`](/docs/victory-cursor-container): Renders a cursor line and label that follows mouse position.\\n\\nTo use one of these containers, change the `containerComponent` prop on your _top-level_ Victory component. _Note:_ Containers are not rendered when `standalone` is set to `false`.\\n\\n```playground\\n<VictoryChart\\n  domainPadding={{ y: 10 }}\\n  containerComponent={\\n    <VictoryZoomContainer/>\\n  }\\n>\\n  <VictoryScatter\\n    y={(datum) => Math.sin(2 * Math.PI * datum.x)}\\n  />\\n</VictoryChart>\\n```\\n\\n### How can I make a chart with voronoi tooltips that can also zoom?\\n\\nVictory includes a `createContainer` helper that is used to create hybrid containers. `createContainer` can be used to create a new container with behaviors from two existing Victory containers. [Read more about `createContainer` here](/docs/create-container).\\n\",\"content\":\"# Frequently Asked Questions (FAQ)\\n\\nThanks for trying Victory! The FAQs below are based on issues and questions from our [support channel](https://spectrum.chat/victory). You can find more examples in [our gallery](/gallery). Can't find what you're looking for? Help us improve these docs by [opening an issue](https://github.com/FormidableLabs/victory-docs/issues/new).\\n\\n## Styles\\n\\n### How can I change the colors of lines and other elements in Victory?\\n\\nMost components in Victory use a standard `style` prop with style namespaces for \\\"data\\\" and \\\"labels\\\". Any styles added to the \\\"data\\\" namespace will be applied to all the svg elements rendered for a given dataset.\\n\\n```playground\\n<VictoryChart domain={{ x: [0, 4] }}>\\n  <VictoryBar\\n    style={{ data: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 1, y: 2 }, { x: 2, y: 4 }, { x: 3, y: 6 }\\n    ]}\\n  />\\n  <VictoryLine\\n    style={{ data: { stroke: \\\"blue\\\", strokeWidth: 5 } }}\\n    y={(d) => d.x}\\n  />\\n</VictoryChart>\\n```\\n\\n### How can I change the color of an individual point or bar?\\n\\nIndividual elements in Victory can be styled by adding style attributes directly to your data object and using functional styles and props as in the example below. Functions are called with all the props that correspond to the element they render.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryBar\\n    style={{\\n      data: {\\n        fill: ({ datum }) => datum.fill,\\n      }\\n    }}\\n    data={[\\n      { x: 1, y: 2, fill: \\\"red\\\" },\\n      { x: 2, y: 4 , fill: \\\"orange\\\" },\\n      { x: 3, y: 6, fill: \\\"gold\\\" }\\n    ]}\\n  />\\n  <VictoryScatter\\n    style={{ data: {\\n      fill: ({ index }) => +index % 2 === 0 ? \\\"blue\\\" : \\\"grey\\\",\\n      stroke: ({ datum }) => datum.y < 6 ? \\\"red\\\" : \\\"black\\\",\\n      strokeWidth: 2\\n    } }}\\n    symbol={({ datum }) => datum.x > 1 ? \\\"plus\\\" : \\\"square\\\"}\\n    size={({ datum }) => datum.y + 2}\\n    data={[\\n       { x: 0, y: 2 }, { x: 1, y: 4 }, { x: 2, y: 6 }, { x: 3, y: 8 }, { x: 4, y: 10 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\nNote that continuous data types such as `VictoryLine` and `VictoryArea` cannot be styled in this way, as they only render a single element for a given dataset.\\n\\n### How can I use gradient fills in Victory?\\n\\nCreate a gradient def as usual and then reference it by id in your style object. Gradients can be used to give continuous charts (_i.e._ line or area charts) the appearance of discrete data elements and hover states. A more complex example is given [here](/gallery/area-hover-styles).\\n\\n```playground\\n<div>\\n  <svg style={{ height: 0 }}>\\n    <defs>\\n      <linearGradient id=\\\"myGradient\\\">\\n        <stop offset=\\\"0%\\\" stopColor=\\\"red\\\"/>\\n        <stop offset=\\\"25%\\\" stopColor=\\\"orange\\\"/>\\n        <stop offset=\\\"50%\\\" stopColor=\\\"gold\\\"/>\\n        <stop offset=\\\"75%\\\" stopColor=\\\"yellow\\\"/>\\n        <stop offset=\\\"100%\\\" stopColor=\\\"green\\\"/>\\n      </linearGradient>\\n    </defs>\\n  </svg>\\n  <VictoryChart>\\n    <VictoryArea\\n      style={{\\n        data: {fill: \\\"url(#myGradient)\\\"}\\n      }}\\n      data={[\\n        { x: 1, y: 2 },\\n        { x: 2, y: 3 },\\n        { x: 3, y: 7 },\\n        { x: 4, y: 4 },\\n        { x: 5, y: 5 }\\n      ]}\\n    />\\n  </VictoryChart>\\n</div>\\n```\\n\\n## Annotations\\n\\n### How can I add arbitrary labels to my charts?\\n\\nUse `VictoryLabel` to as a child of `VictoryChart` to add arbitrary labels. Labels can be positioned with the `x` and `y` props, or with `datum` when used within `VictoryChart` or `VictoryGroup`.\\n\\n```playground\\n<VictoryChart domain={[0, 10]}>\\n  <VictoryLabel text=\\\"Chart Title\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n  <VictoryLine\\n    style={{ data: { stroke: \\\"blue\\\", strokeWidth: 5 } }}\\n    y={(d) => d.x}\\n  />\\n  <VictoryLabel text=\\\"Annotation\\\" datum={{ x: 4, y: 6 }} textAnchor=\\\"middle\\\"/>\\n</VictoryChart>\\n```\\n\\n\\n### How can I annotate my charts with lines and markers?\\n\\nVictory doesn't have specific components for annotations. Instead, use standard component such as `VictoryLine` and `VictoryScatter` to add lines and markers to your chart.\\n\\n```playground\\n<VictoryChart domain={[0, 10]}>\\n  <VictoryLine\\n    style={{ data: { stroke: \\\"blue\\\", strokeWidth: 3 } }}\\n    y={(d) => d.x}\\n  />\\n  <VictoryLine\\n    style={{\\n      data: { stroke: \\\"red\\\", strokeWidth: 2 },\\n      labels: { angle: -90, fill: \\\"red\\\", fontSize: 20 }\\n    }}\\n    labels={[\\\"Important\\\"]}\\n    labelComponent={<VictoryLabel y={100}/>}\\n    x={() => 5}\\n  />\\n  <VictoryScatter\\n    symbol=\\\"star\\\"\\n    size={8}\\n    style={{ data: { fill: \\\"red\\\" }}}\\n    data={[{ x: 5, y: 5 }]}\\n  />\\n</VictoryChart>\\n```\\n\\n## Axes\\n\\n### How do I turn off the axes on VictoryChart?\\n\\n`VictoryChart` uses default axes. If you want to plot data without using any axes, use `VictoryGroup` instead.\\n\\n```playground\\n<VictoryGroup>\\n  <VictoryBar\\n    style={{ data: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 1, y: 2 }, { x: 2, y: 4 }, { x: 3, y: 6 }\\n    ]}\\n  />\\n  <VictoryLine domain={{ x: [0, 4] }}\\n    style={{ data: { stroke: \\\"blue\\\", strokeWidth: 5 } }}\\n    y={(d) => d.x}\\n  />\\n</VictoryGroup>\\n```\\n\\n### Why is VictoryChart rendering only one axis?\\n\\nWhen no axes are supplied to `VictoryChart` it will render pair of default axes. If any axes are supplied as children to `VictoryChart` it will render _only_ those axes.\\n\\n```playground\\n<div style={{ display: \\\"flex\\\", flexWrap: \\\"wrap\\\" }}>\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"Default Axes\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"Two VictoryAxis Children\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryAxis/>\\n    <VictoryAxis dependentAxis/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"Single Dependent Axis\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryAxis dependentAxis/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"Single Independent Axis\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryAxis/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n</div>\\n```\\n\\n### Can I make a chart with multiple dependent axes?\\n\\n`VictoryChart` will render any number of axes, but all children rendered by `VictoryChart` will be forced to use the same domain. To create a single chart with the appearance of several different domains, you can either compose components manually without the aid of `VictoryChart`, as described in [this guide](/guides/custom-charts), or normalize all of your data, and re-scale your axis tick labels to give the appearance of separate domains as in [this example](/gallery/multiple-dependent-axes).\\n\\n### How can I change the position of my axis?\\n\\n`VictoryChart` automatically aligns axes so that they cross at their origin. Use the `offsetX` and `offsetY` props on `VictoryAxis` to alter this default behavior. *Note:* Axes that typically cross at zero will not display ticks or tick labels at zero. To change this behavior, set the `crossAxis` prop to false.\\n[Read more about VictoryAxis](/docs/victory-axis).\\n\\n```playground\\n<VictoryChart domain={{ y: [-10, 10] }}>\\n  <VictoryAxis offsetY={50}/>\\n  <VictoryAxis dependentAxis offsetX={50} crossAxis={false}/>\\n  <VictoryLine/>\\n</VictoryChart>\\n```\\n\\n### How can I format my axis labels?\\n\\nAxis tick labels are controlled via two props. `tickValues` controls the _positions_ of ticks along the axis, and `tickFormat` controls how labels are displayed. Use the `tickFormat` prop to customize axis labels. This prop can be given as an array of strings, or as a function that returns a string. Functions provided to `tickFormat` are called with the following arguments: `tickValue`, `index` and `tickArray`.\\n[Read more about VictoryAxis](/docs/victory-axis).\\n\\n```playground\\n<VictoryChart domain={[0, 5]}>\\n  <VictoryAxis tickValues={[1, 2, 3, 4]} tickFormat={[\\\"first\\\", \\\"second\\\", \\\"third\\\", \\\"fourth\\\"]}/>\\n  <VictoryAxis dependentAxis tickFormat={(tick) => `$${Math.round(tick)}M`}/>\\n  <VictoryLine/>\\n</VictoryChart>\\n```\\n\\n### My axis labels are cut off. How can I fix them?\\n\\nLong axis labels can be problematic. There are several ways to address the issue. The best solution will depend on the specific requirements of your project. The following examples demonstrate:\\n- Altering `padding`\\n- Splitting labels onto multiple lines\\n- Allowing labels to overflow the container with VictoryPortal\\n- Using angled labels\\n\\n```playground\\n<div style={{ display: \\\"flex\\\", flexWrap: \\\"wrap\\\" }}>\\n  <VictoryChart\\n    padding={{ left: 90, top: 50, right: 10, bottom: 50 }}\\n  >\\n    <VictoryLabel text=\\\"Altering padding\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryAxis dependentAxis\\n      tickFormat={[\\n        \\\"first label\\\",\\n        \\\"second label\\\",\\n        \\\"third label\\\",\\n        \\\"forth label\\\",\\n        \\\"fifth label\\\"\\n      ]}\\n    />\\n    <VictoryAxis/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"Multi-line labels\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryAxis dependentAxis\\n      tickFormat={[\\n        `first\\\\nlabel`,\\n        `second\\\\nlabel`,\\n        `third\\\\nlabel`,\\n        `forth\\\\nlabel`,\\n        `fifth\\\\nlabel`\\n      ]}\\n    />\\n    <VictoryAxis/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"Angled labels\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryAxis dependentAxis\\n      style={{ tickLabels: { angle: -60 } }}\\n      tickFormat={[\\n        \\\"first label\\\",\\n        \\\"second label\\\",\\n        \\\"third label\\\",\\n        \\\"forth label\\\",\\n        \\\"fifth label\\\"\\n      ]}\\n    />\\n    <VictoryAxis/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"overflowing labels with VictoryPortal\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryAxis dependentAxis\\n      tickLabelComponent={<VictoryPortal><VictoryLabel/></VictoryPortal>}\\n      tickFormat={[\\n        \\\"first label\\\",\\n        \\\"second label\\\",\\n        \\\"third label\\\",\\n        \\\"forth label\\\",\\n        \\\"fifth label\\\"\\n      ]}\\n    />\\n    <VictoryAxis/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n\\n</div>\\n```\\n\\n### My axis labels are showing very small numbers. How do I fix this?\\n\\nWhen a dataset only has a single value, or when all values on an axis have the same value, the single-point domain for that axis will be converted to a two-point domain.\\nVictory does this by offsetting the domain value by a very small number.\\nTo solve this, you will need to manually set sensible defaults on the `domain` of your chart.\\n\\n```playground\\n  <VictoryChart\\n        domain={{x: [0,2]}}\\n       >\\n      <VictoryBar\\n        data={[{x: 1, y: 1}]}\\n      />\\n    </VictoryChart>\\n```\\n\\n## Labels and Tooltips\\n\\n### How can I add tooltips to a line?\\n\\n`VictoryLine` only renders a single element to represent an entire dataset, so replacing its `labelComponent` with `VictoryTooltip` wont work as expected, since there will be only a single event trigger. Voronoi tooltips can be used to add tooltips and other interactions components without unique event triggers, or with event triggers that are too small, or too close together to be useful. Use `VictoryVoronoiContainer` to associate mouse position with the nearest data points. [Read more about Voronoi Tooltips](/guides/tooltips#tooltips-with-victoryvoronoicontainer) and [`VictoryVoronoiContainer`](/docs/victory-voronoi-container).\\n\\n\\n### How can I add my own events when I'm using VictoryTooltip?\\n\\n`VictoryTooltip` uses `defaultEvents` which are prepended onto any events array provided in props. When `events` container `onMouseOver` and `onMouseOut` events, they will interfere with the `defaultEvents` on `VictoryTooltip` to correct this, your events prop will need to return the same mutations as `defaultEvents`. [Read about tooltip events here](/guides/tooltips).\\n\\n## Layout\\n\\n### Why are the bars in my bar chart overlapping with the axis?\\n\\nBars in `VictoryBar` are centered around their corresponding value by default. You can move your bars away from your axis by setting a new domain, adding a `domainPadding`, or changing how bars are aligned relative to their values with the `alignment` prop on `VictoryBar`.\\n\\n```playground\\n<div style={{ display: \\\"flex\\\", flexWrap: \\\"wrap\\\" }}>\\n  <VictoryChart\\n    domainPadding={{ x: 15 }}\\n  >\\n    <VictoryLabel text=\\\"domainPadding\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryBar\\n      style={{ data: { fill: \\\"gold\\\", width: 30 } }}\\n    />\\n  </VictoryChart>\\n  <VictoryChart>\\n    <VictoryLabel text=\\\"alignment\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryBar\\n      alignment=\\\"start\\\"\\n      style={{ data: { fill: \\\"gold\\\" } }}\\n    />\\n  </VictoryChart>\\n</div>\\n```\\n\\n\\n### How can I change the size of my chart?\\n\\nBy default Victory components are rendered within responsive SVGs that preserve the aspect ratio set by the `width` and `height` props. Charts will automatically scale to fit within parent elements while maintaining a set aspect ratio. The size of your chart may be changed by rendering it within a smaller container. The aspect ratio of the chart may be changed by altering the width and height props. The default responsive behavior may also be disabled by setting `responsive={false}` on any Victory container.\\n\\n```playground\\n<div style={{ display: \\\"flex\\\", flexWrap: \\\"wrap\\\" }}>\\n  <VictoryChart style={{ parent: { maxWidth: \\\"50%\\\" } }}>\\n    <VictoryLabel text=\\\"Default Sizing\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n  <VictoryChart style={{ parent: { maxWidth: \\\"50%\\\" } }}\\n    width={600} height={200}\\n  >\\n    <VictoryLabel text=\\\"New Aspect Ratio\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n  <VictoryChart\\n    width={600} height={200}\\n    containerComponent={<VictoryContainer responsive={false}/>}\\n  >\\n    <VictoryLabel text=\\\"Non-responsive\\\" x={225} y={30} textAnchor=\\\"middle\\\"/>\\n    <VictoryLine/>\\n  </VictoryChart>\\n</div>\\n```\\n\\n## Containers and Behaviors\\n\\n### How can I use containers in Victory?\\n\\nVictory renders charts into top-level container components. The most basic container is `VictoryContainer`. It is responsible for rendering children into a responsive svg, and providing a portal component for rendering tooltips, or any other elements that should be rendered above everything else. Other Victory container, such as `VictoryZoomContainer` and `VictoryCursorContainer` provide an interactive layer for the chart. These containers perform all the same functions as `VictoryContainer` in addition to their specialized functions.\\n\\n- [`VictoryZoomContainer`](/docs/victory-zoom-container): Adds pan and zoom functionality to a chart\\n- [`VictoryVoronoiContainer`](/docs/victory-voronoi-container): Associates mouse position with the nearest data points, and is useful for tooltips and other hover interactions\\n- [`VictorySelectionContainer`](/docs/victory-selection-container): Adds the ability to select points within a region\\n- [`VictoryBrushContainer`](/docs/victory-brush-container): Adds a moveable highlighted region to charts\\n- [`VictoryCursorContainer`](/docs/victory-cursor-container): Renders a cursor line and label that follows mouse position.\\n\\nTo use one of these containers, change the `containerComponent` prop on your _top-level_ Victory component. *Note:* Containers are not rendered when `standalone` is set to `false`.\\n\\n```playground\\n<VictoryChart\\n  domainPadding={{ y: 10 }}\\n  containerComponent={\\n    <VictoryZoomContainer/>\\n  }\\n>\\n  <VictoryScatter\\n    y={(datum) => Math.sin(2 * Math.PI * datum.x)}\\n  />\\n</VictoryChart>\\n```\\n\\n### How can I make a chart with voronoi tooltips that can also zoom?\\n\\nVictory includes a `createContainer` helper that is used to create hybrid containers. `createContainer` can be used to create a new container with behaviors from two existing Victory containers. [Read more about `createContainer` here](/docs/create-container).\\n\\n\\n\\n\"},{\"data\":{\"id\":1,\"title\":\"Animations\",\"category\":\"guides\",\"scope\":[\"range\",\"random\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Animations\",\"depth\":1,\"slug\":\"animations\"},{\"type\":\"heading\",\"value\":\"Transitions\",\"depth\":2,\"slug\":\"transitions\"}],\"slug\":\"animations\",\"type\":\"guides\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Animations\",\"depth\":1,\"slug\":\"animations\",\"category\":\"guides\",\"children\":[{\"type\":\"heading\",\"value\":\"Transitions\",\"depth\":2,\"slug\":\"transitions\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 1\\ntitle: Animations\\ncategory: guides\\nscope:\\n  - range\\n  - random\\n---\\n\\n# Animations\\n\\nVictoryAnimation is able to animate changes in props using [d3-interpolate][]. Victory components define their animations via the `animate` prop. `duration`, `delay`, `easing` and `onEnd` functions may all be specified via the `animate` prop.\\n\\n```playground_norender\\nclass App extends React.Component {\\n\\n  constructor(props) {\\n    super(props);\\n    this.state = {\\n      scatterData: this.getScatterData()\\n    };\\n  }\\n\\n  componentDidMount() {\\n    this.setStateInterval = window.setInterval(() => {\\n      this.setState({\\n        scatterData: this.getScatterData()\\n      });\\n    }, 3000);\\n  }\\n\\n  componentWillUnmount() {\\n    window.clearInterval(this.setStateInterval);\\n  }\\n\\n\\n  getScatterData() {\\n    const colors =[\\n      \\\"violet\\\", \\\"cornflowerblue\\\", \\\"gold\\\", \\\"orange\\\",\\n      \\\"turquoise\\\", \\\"tomato\\\", \\\"greenyellow\\\"\\n    ];\\n    const symbols = [\\n      \\\"circle\\\", \\\"star\\\", \\\"square\\\", \\\"triangleUp\\\",\\n      \\\"triangleDown\\\", \\\"diamond\\\", \\\"plus\\\"\\n    ];\\n    return range(25).map((index) => {\\n      const scaledIndex = Math.floor(index % 7);\\n      return {\\n        x: random(10, 50),\\n        y: random(2, 100),\\n        size: random(8) + 3,\\n        symbol: symbols[scaledIndex],\\n        fill: colors[random(0, 6)],\\n        opacity: 0.6\\n      };\\n    });\\n  }\\n\\n  render() {\\n    return (\\n      <VictoryChart animate={{ duration: 2000, easing: \\\"bounce\\\" }}>\\n        <VictoryScatter\\n          data={this.state.scatterData}\\n          style={{\\n            data: {\\n              fill: ({ datum }) => datum.fill,\\n              opacity: ({ datum }) => datum.opacity\\n            }\\n          }}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\n## Transitions\\n\\nVictory components define default transitions for entering and exiting nodes, but these may be overridden with the `onEnter` and `onExit` properties of the `animate` object. The `before` and `after` properties take functions whose return values alter the datum of the transitioning node before or after the transition. These functions are called with the original datum of the transitioning node, the index of that datum, and the entire data array.\\n\\n**Note:** Use private variables `_x`, `_y`, `_y0` and `_y1` when altering position data during transitions.\\n\\n```playground_norender\\nclass App extends React.Component {\\n\\n  constructor(props) {\\n    super(props);\\n    this.state = {\\n      data: this.getData()\\n    };\\n  }\\n\\n  componentDidMount() {\\n    this.setStateInterval = window.setInterval(() => {\\n      this.setState({\\n        data: this.getData()\\n      });\\n    }, 3000);\\n  }\\n\\n  componentWillUnmount() {\\n    window.clearInterval(this.setStateInterval);\\n  }\\n\\n  getData() {\\n    const bars = random(6, 10);\\n    return range(bars).map((bar) => {\\n      return {x: bar + 1, y: random(2, 10)};\\n    });\\n  }\\n\\n  render() {\\n    return (\\n      <VictoryChart\\n        domainPadding={{ x: 20 }}\\n        animate={{duration: 500}}\\n      >\\n        <VictoryBar\\n          data={this.state.data}\\n          style={{\\n            data: { fill: \\\"tomato\\\", width: 12 }\\n          }}\\n          animate={{\\n            onExit: {\\n              duration: 500,\\n              before: () => ({\\n                _y: 0,\\n                fill: \\\"orange\\\",\\n                label: \\\"BYE\\\"\\n              })\\n            }\\n          }}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\n[d3-interpolate]: https://github.com/d3/d3-interpolate\\n\",\"content\":\"# Animations\\n\\nVictoryAnimation is able to animate changes in props using [d3-interpolate][]. Victory components define their animations via the `animate` prop. `duration`, `delay`, `easing` and `onEnd` functions may all be specified via the `animate` prop.\\n\\n```playground_norender\\nclass App extends React.Component {\\n\\n  constructor(props) {\\n    super(props);\\n    this.state = {\\n      scatterData: this.getScatterData()\\n    };\\n  }\\n\\n  componentDidMount() {\\n    this.setStateInterval = window.setInterval(() => {\\n      this.setState({\\n        scatterData: this.getScatterData()\\n      });\\n    }, 3000);\\n  }\\n\\n  componentWillUnmount() {\\n    window.clearInterval(this.setStateInterval);\\n  }\\n\\n\\n  getScatterData() {\\n    const colors =[\\n      \\\"violet\\\", \\\"cornflowerblue\\\", \\\"gold\\\", \\\"orange\\\",\\n      \\\"turquoise\\\", \\\"tomato\\\", \\\"greenyellow\\\"\\n    ];\\n    const symbols = [\\n      \\\"circle\\\", \\\"star\\\", \\\"square\\\", \\\"triangleUp\\\",\\n      \\\"triangleDown\\\", \\\"diamond\\\", \\\"plus\\\"\\n    ];\\n    return range(25).map((index) => {\\n      const scaledIndex = Math.floor(index % 7);\\n      return {\\n        x: random(10, 50),\\n        y: random(2, 100),\\n        size: random(8) + 3,\\n        symbol: symbols[scaledIndex],\\n        fill: colors[random(0, 6)],\\n        opacity: 0.6\\n      };\\n    });\\n  }\\n\\n  render() {\\n    return (\\n      <VictoryChart animate={{ duration: 2000, easing: \\\"bounce\\\" }}>\\n        <VictoryScatter\\n          data={this.state.scatterData}\\n          style={{\\n            data: {\\n              fill: ({ datum }) => datum.fill,\\n              opacity: ({ datum }) => datum.opacity\\n            }\\n          }}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\n\\n## Transitions\\n\\nVictory components define default transitions for entering and exiting nodes, but these may be overridden with the `onEnter` and `onExit` properties of the `animate` object. The `before` and `after` properties take functions whose return values alter the datum of the transitioning node before or after the transition. These functions are called with the original datum of the transitioning node, the index of that datum, and the entire data array.\\n\\n**Note:** Use private variables `_x`, `_y`, `_y0` and `_y1` when altering position data during transitions.\\n\\n```playground_norender\\nclass App extends React.Component {\\n\\n  constructor(props) {\\n    super(props);\\n    this.state = {\\n      data: this.getData()\\n    };\\n  }\\n\\n  componentDidMount() {\\n    this.setStateInterval = window.setInterval(() => {\\n      this.setState({\\n        data: this.getData()\\n      });\\n    }, 3000);\\n  }\\n\\n  componentWillUnmount() {\\n    window.clearInterval(this.setStateInterval);\\n  }\\n\\n  getData() {\\n    const bars = random(6, 10);\\n    return range(bars).map((bar) => {\\n      return {x: bar + 1, y: random(2, 10)};\\n    });\\n  }\\n\\n  render() {\\n    return (\\n      <VictoryChart\\n        domainPadding={{ x: 20 }}\\n        animate={{duration: 500}}\\n      >\\n        <VictoryBar\\n          data={this.state.data}\\n          style={{\\n            data: { fill: \\\"tomato\\\", width: 12 }\\n          }}\\n          animate={{\\n            onExit: {\\n              duration: 500,\\n              before: () => ({\\n                _y: 0,\\n                fill: \\\"orange\\\",\\n                label: \\\"BYE\\\"\\n              })\\n            }\\n          }}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\n\\n[d3-interpolate]: https://github.com/d3/d3-interpolate\\n\"},{\"data\":{\"id\":2,\"title\":\"Brush and Zoom\",\"category\":\"guides\",\"scope\":[\"range\",\"random\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Brush and Zoom\",\"depth\":1,\"slug\":\"brush-and-zoom\"}],\"slug\":\"brush-and-zoom\",\"type\":\"guides\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Brush and Zoom\",\"depth\":1,\"slug\":\"brush-and-zoom\",\"category\":\"guides\"}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 2\\ntitle: Brush and Zoom\\ncategory: guides\\nscope:\\n  - range\\n  - random\\n---\\n\\n# Brush and Zoom\\n\\nUse `VictoryZoomContainer` as your containerComponent to add panning and zooming behavior to any Victory components that work with an x-y coordinate system.\\n\\nIn the example below, an initial domain is set with the `zoomDomain` prop. This prop may also be used to trigger pan and zoom behavior from other components.\\n\\n```playground_norender\\nclass App extends React.Component {\\n\\n  constructor(props) {\\n    super(props);\\n  }\\n\\n  state = {\\n    data: this.getScatterData()\\n  }\\n\\n  getScatterData() {\\n    return range(50).map((index) => {\\n      return {\\n        x: random(1, 50),\\n        y: random(10, 90),\\n        size: random(8) + 3\\n      };\\n    });\\n  }\\n\\n  render() {\\n    return (\\n      <VictoryChart\\n        domain={{y: [0, 100]}}\\n        containerComponent={<VictoryZoomContainer zoomDomain={{x: [5, 35], y: [0, 100]}}/>}\\n      >\\n        <VictoryScatter\\n          data={this.state.data}\\n          style={{\\n            data: {\\n              opacity: ({ datum }) =>  datum.y % 5 === 0 ? 1 : 0.7,\\n              fill: ({ datum }) => datum.y % 5 === 0 ? \\\"tomato\\\" : \\\"black\\\"\\n            }\\n          }}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\nIn the next example, `VictoryZoomContainer` and `VictoryBrushContainer` are used to create a zoomable chart with a mini-map brush control.\\nHere, the `onZoomDomainChange` prop on `VictoryZoomContainer` alters the `brushDomain` prop on `VictoryBrushContainer` tying highlighted brush region of the mini-map to the zoom level of the chart.\\nThe `onBrushDomainChange` prop on `VictoryBrushContainer` alters the `zoomDomain` prop on `VictoryZoomContainer` so that the zoomed level of the chart matches the highlighted region of the mini-map.\\n\\n```playground_norender\\nclass App extends React.Component {\\n\\n  constructor() {\\n    super();\\n    this.state = {};\\n  }\\n\\n  handleZoom(domain) {\\n    this.setState({selectedDomain: domain});\\n  }\\n\\n  handleBrush(domain) {\\n    this.setState({zoomDomain: domain});\\n  }\\n\\n  render() {\\n    return (\\n      <div>\\n          <VictoryChart\\n            width={550}\\n            height={300}\\n            scale={{x: \\\"time\\\"}}\\n            containerComponent={\\n              <VictoryZoomContainer responsive={false}\\n                zoomDimension=\\\"x\\\"\\n                zoomDomain={this.state.zoomDomain}\\n                onZoomDomainChange={this.handleZoom.bind(this)}\\n              />\\n            }\\n          >\\n            <VictoryLine\\n              style={{\\n                data: {stroke: \\\"tomato\\\"}\\n              }}\\n              data={[\\n                {x: new Date(1982, 1, 1), y: 125},\\n                {x: new Date(1987, 1, 1), y: 257},\\n                {x: new Date(1993, 1, 1), y: 345},\\n                {x: new Date(1997, 1, 1), y: 515},\\n                {x: new Date(2001, 1, 1), y: 132},\\n                {x: new Date(2005, 1, 1), y: 305},\\n                {x: new Date(2011, 1, 1), y: 270},\\n                {x: new Date(2015, 1, 1), y: 470}\\n              ]}\\n            />\\n\\n          </VictoryChart>\\n\\n          <VictoryChart\\n            width={550}\\n            height={90}\\n            scale={{x: \\\"time\\\"}}\\n            padding={{top: 0, left: 50, right: 50, bottom: 30}}\\n            containerComponent={\\n              <VictoryBrushContainer responsive={false}\\n                brushDimension=\\\"x\\\"\\n                brushDomain={this.state.selectedDomain}\\n                onBrushDomainChange={this.handleBrush.bind(this)}\\n              />\\n            }\\n          >\\n            <VictoryAxis\\n              tickValues={[\\n                new Date(1985, 1, 1),\\n                new Date(1990, 1, 1),\\n                new Date(1995, 1, 1),\\n                new Date(2000, 1, 1),\\n                new Date(2005, 1, 1),\\n                new Date(2010, 1, 1),\\n                new Date(2015, 1, 1)\\n              ]}\\n              tickFormat={(x) => new Date(x).getFullYear()}\\n            />\\n            <VictoryLine\\n              style={{\\n                data: {stroke: \\\"tomato\\\"}\\n              }}\\n              data={[\\n                {x: new Date(1982, 1, 1), y: 125},\\n                {x: new Date(1987, 1, 1), y: 257},\\n                {x: new Date(1993, 1, 1), y: 345},\\n                {x: new Date(1997, 1, 1), y: 515},\\n                {x: new Date(2001, 1, 1), y: 132},\\n                {x: new Date(2005, 1, 1), y: 305},\\n                {x: new Date(2011, 1, 1), y: 270},\\n                {x: new Date(2015, 1, 1), y: 470}\\n              ]}\\n            />\\n          </VictoryChart>\\n      </div>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\n`VictoryBrushContainer` may be used with any Victory component that works on an x-y coordinate system.\\nBrushing behavior may be limited to the x or y dimensions with the `brushDimension` prop, and the selected\\narea may be styled, or even replaced with a custom component.\\n\\n```playground\\n<VictoryLine\\n  containerComponent={\\n    <VictoryBrushContainer\\n      brushDomain={{x: [1, 7], y: [-3, 3]}}\\n      brushDimension=\\\"y\\\"\\n      brushStyle={{fill: \\\"teal\\\", opacity: 0.2}}\\n    />\\n  }\\n  style={{\\n    data: {stroke: \\\"teal\\\"}\\n  }}\\n  data={[\\n    {x: 1, y: -3},\\n    {x: 2, y: 5},\\n    {x: 3, y: -3},\\n    {x: 4, y: 0},\\n    {x: 5, y: -5},\\n    {x: 6, y: 2},\\n    {x: 7, y: 0}\\n  ]}\\n/>\\n```\\n\",\"content\":\"# Brush and Zoom\\n\\nUse `VictoryZoomContainer` as your containerComponent to add panning and zooming behavior to any Victory components that work with an x-y coordinate system.\\n\\nIn the example below, an initial domain is set with the `zoomDomain` prop. This prop may also be used to trigger pan and zoom behavior from other components.\\n\\n```playground_norender\\nclass App extends React.Component {\\n\\n  constructor(props) {\\n    super(props);\\n  }\\n\\n  state = {\\n    data: this.getScatterData()\\n  }\\n\\n  getScatterData() {\\n    return range(50).map((index) => {\\n      return {\\n        x: random(1, 50),\\n        y: random(10, 90),\\n        size: random(8) + 3\\n      };\\n    });\\n  }\\n\\n  render() {\\n    return (\\n      <VictoryChart\\n        domain={{y: [0, 100]}}\\n        containerComponent={<VictoryZoomContainer zoomDomain={{x: [5, 35], y: [0, 100]}}/>}\\n      >\\n        <VictoryScatter\\n          data={this.state.data}\\n          style={{\\n            data: {\\n              opacity: ({ datum }) =>  datum.y % 5 === 0 ? 1 : 0.7,\\n              fill: ({ datum }) => datum.y % 5 === 0 ? \\\"tomato\\\" : \\\"black\\\"\\n            }\\n          }}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\nIn the next example, `VictoryZoomContainer` and `VictoryBrushContainer` are used to create a zoomable chart with a mini-map brush control.\\nHere, the `onZoomDomainChange` prop on `VictoryZoomContainer` alters the `brushDomain` prop on `VictoryBrushContainer` tying highlighted brush region of the mini-map to the zoom level of the chart.\\nThe `onBrushDomainChange` prop on `VictoryBrushContainer` alters the `zoomDomain` prop on `VictoryZoomContainer` so that the zoomed level of the chart matches the highlighted region of the mini-map.\\n\\n\\n```playground_norender\\nclass App extends React.Component {\\n\\n  constructor() {\\n    super();\\n    this.state = {};\\n  }\\n\\n  handleZoom(domain) {\\n    this.setState({selectedDomain: domain});\\n  }\\n\\n  handleBrush(domain) {\\n    this.setState({zoomDomain: domain});\\n  }\\n\\n  render() {\\n    return (\\n      <div>\\n          <VictoryChart\\n            width={550}\\n            height={300}\\n            scale={{x: \\\"time\\\"}}\\n            containerComponent={\\n              <VictoryZoomContainer responsive={false}\\n                zoomDimension=\\\"x\\\"\\n                zoomDomain={this.state.zoomDomain}\\n                onZoomDomainChange={this.handleZoom.bind(this)}\\n              />\\n            }\\n          >\\n            <VictoryLine\\n              style={{\\n                data: {stroke: \\\"tomato\\\"}\\n              }}\\n              data={[\\n                {x: new Date(1982, 1, 1), y: 125},\\n                {x: new Date(1987, 1, 1), y: 257},\\n                {x: new Date(1993, 1, 1), y: 345},\\n                {x: new Date(1997, 1, 1), y: 515},\\n                {x: new Date(2001, 1, 1), y: 132},\\n                {x: new Date(2005, 1, 1), y: 305},\\n                {x: new Date(2011, 1, 1), y: 270},\\n                {x: new Date(2015, 1, 1), y: 470}\\n              ]}\\n            />\\n\\n          </VictoryChart>\\n\\n          <VictoryChart\\n            width={550}\\n            height={90}\\n            scale={{x: \\\"time\\\"}}\\n            padding={{top: 0, left: 50, right: 50, bottom: 30}}\\n            containerComponent={\\n              <VictoryBrushContainer responsive={false}\\n                brushDimension=\\\"x\\\"\\n                brushDomain={this.state.selectedDomain}\\n                onBrushDomainChange={this.handleBrush.bind(this)}\\n              />\\n            }\\n          >\\n            <VictoryAxis\\n              tickValues={[\\n                new Date(1985, 1, 1),\\n                new Date(1990, 1, 1),\\n                new Date(1995, 1, 1),\\n                new Date(2000, 1, 1),\\n                new Date(2005, 1, 1),\\n                new Date(2010, 1, 1),\\n                new Date(2015, 1, 1)\\n              ]}\\n              tickFormat={(x) => new Date(x).getFullYear()}\\n            />\\n            <VictoryLine\\n              style={{\\n                data: {stroke: \\\"tomato\\\"}\\n              }}\\n              data={[\\n                {x: new Date(1982, 1, 1), y: 125},\\n                {x: new Date(1987, 1, 1), y: 257},\\n                {x: new Date(1993, 1, 1), y: 345},\\n                {x: new Date(1997, 1, 1), y: 515},\\n                {x: new Date(2001, 1, 1), y: 132},\\n                {x: new Date(2005, 1, 1), y: 305},\\n                {x: new Date(2011, 1, 1), y: 270},\\n                {x: new Date(2015, 1, 1), y: 470}\\n              ]}\\n            />\\n          </VictoryChart>\\n      </div>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\n`VictoryBrushContainer` may be used with any Victory component that works on an x-y coordinate system.\\nBrushing behavior may be limited to the x or y dimensions with the `brushDimension` prop, and the selected\\narea may be styled, or even replaced with a custom component.\\n\\n```playground\\n<VictoryLine\\n  containerComponent={\\n    <VictoryBrushContainer\\n      brushDomain={{x: [1, 7], y: [-3, 3]}}\\n      brushDimension=\\\"y\\\"\\n      brushStyle={{fill: \\\"teal\\\", opacity: 0.2}}\\n    />\\n  }\\n  style={{\\n    data: {stroke: \\\"teal\\\"}\\n  }}\\n  data={[\\n    {x: 1, y: -3},\\n    {x: 2, y: 5},\\n    {x: 3, y: -3},\\n    {x: 4, y: 0},\\n    {x: 5, y: -5},\\n    {x: 6, y: 2},\\n    {x: 7, y: 0}\\n  ]}\\n/>\\n```\\n\"},{\"data\":{\"id\":3,\"title\":\"Custom Charts\",\"category\":\"guides\",\"scope\":[\"range\",\"random\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Custom Charts\",\"depth\":1,\"slug\":\"custom-charts\"}],\"slug\":\"custom-charts\",\"type\":\"guides\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Custom Charts\",\"depth\":1,\"slug\":\"custom-charts\",\"category\":\"guides\"}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 3\\ntitle: Custom Charts\\ncategory: guides\\nscope:\\n  - range\\n  - random\\n---\\n\\n# Custom Charts\\n\\nVictory lets you create fully custom charts that integrate seamlessly with the look and feel of your project. The following guide demonstrates how custom styles and modular chart components are used to create a cohesive chart with distinctive branding.\\n\\nThe following example shows how to create a chart with multiple independent axes without using the `VictoryChart` wrapper. This example also includes functional styles and axis customization.\\n\\n* * *\\n\\n```playground_norender\\nclass CustomTheme extends React.Component {\\n  render() {\\n    const styles = this.getStyles();\\n    const dataSetOne = this.getDataSetOne();\\n    const dataSetTwo = this.getDataSetTwo();\\n    const tickValues = this.getTickValues();\\n\\n    return (\\n      <svg style={styles.parent} viewBox=\\\"0 0 450 350\\\">\\n\\n        {/* Create stylistic elements */}\\n        <rect x=\\\"0\\\" y=\\\"0\\\" width=\\\"10\\\" height=\\\"30\\\" fill=\\\"#f01616\\\"/>\\n        <rect x=\\\"420\\\" y=\\\"10\\\" width=\\\"20\\\" height=\\\"20\\\" fill=\\\"#458ca8\\\"/>\\n\\n        {/* Define labels */}\\n        <VictoryLabel x={25} y={24} style={styles.title}\\n          text=\\\"An outlook\\\"\\n        />\\n        <VictoryLabel x={430} y={20} style={styles.labelNumber}\\n          text=\\\"1\\\"\\n        />\\n        <VictoryLabel x={25} y={55} style={styles.labelOne}\\n          text={\\\"Economy \\\\n % change on a year earlier\\\"}\\n        />\\n        <VictoryLabel x={425} y={55} style={styles.labelTwo}\\n          text={\\\"Dinosaur exports\\\\n $bn\\\"}\\n        />\\n\\n        <g transform={\\\"translate(0, 40)\\\"}>\\n          {/* Add shared independent axis */}\\n          <VictoryAxis\\n            scale=\\\"time\\\"\\n            standalone={false}\\n            style={styles.axisYears}\\n            tickValues={tickValues}\\n            tickFormat={\\n              (x) => {\\n                if (x.getFullYear() === 2000) {\\n                  return x.getFullYear();\\n                }\\n                if (x.getFullYear() % 5 === 0) {\\n                  return x.getFullYear().toString().slice(2);\\n                }\\n              }\\n            }\\n          />\\n\\n          {/*\\n            Add the dependent axis for the first data set.\\n            Note that all components plotted against this axis will have the same y domain\\n          */}\\n          <VictoryAxis dependentAxis\\n            domain={[-10, 15]}\\n            offsetX={50}\\n            orientation=\\\"left\\\"\\n            standalone={false}\\n            style={styles.axisOne}\\n          />\\n\\n          {/* Red annotation line */}\\n          <VictoryLine\\n            data={[\\n              {x: new Date(1999, 1, 1), y: 0},\\n              {x: new Date(2014, 6, 1), y: 0}\\n            ]}\\n            domain={{\\n              x: [new Date(1999, 1, 1), new Date(2016, 1, 1)],\\n              y: [-10, 15]\\n            }}\\n            scale={{x: \\\"time\\\", y: \\\"linear\\\"}}\\n            standalone={false}\\n            style={styles.lineThree}\\n          />\\n\\n          {/* dataset one */}\\n          <VictoryLine\\n            data={dataSetOne}\\n            domain={{\\n              x: [new Date(1999, 1, 1), new Date(2016, 1, 1)],\\n              y: [-10, 15]\\n            }}\\n            interpolation=\\\"monotoneX\\\"\\n            scale={{x: \\\"time\\\", y: \\\"linear\\\"}}\\n            standalone={false}\\n            style={styles.lineOne}\\n          />\\n\\n          {/*\\n            Add the dependent axis for the second data set.\\n            Note that all components plotted against this axis will have the same y domain\\n          */}\\n          <VictoryAxis dependentAxis\\n            domain={[0, 50]}\\n            orientation=\\\"right\\\"\\n            standalone={false}\\n            style={styles.axisTwo}\\n          />\\n\\n          {/* dataset two */}\\n          <VictoryLine\\n            data={dataSetTwo}\\n            domain={{\\n              x: [new Date(1999, 1, 1), new Date(2016, 1, 1)],\\n              y: [0, 50]\\n            }}\\n            interpolation=\\\"monotoneX\\\"\\n            scale={{x: \\\"time\\\", y: \\\"linear\\\"}}\\n            standalone={false}\\n            style={styles.lineTwo}\\n          />\\n        </g>\\n      </svg>\\n    );\\n  }\\n\\n  getDataSetOne() {\\n    return [\\n      {x: new Date(2000, 1, 1), y: 12},\\n      {x: new Date(2000, 6, 1), y: 10},\\n      {x: new Date(2000, 12, 1), y: 11},\\n      {x: new Date(2001, 1, 1), y: 5},\\n      {x: new Date(2002, 1, 1), y: 4},\\n      {x: new Date(2003, 1, 1), y: 6},\\n      {x: new Date(2004, 1, 1), y: 5},\\n      {x: new Date(2005, 1, 1), y: 7},\\n      {x: new Date(2006, 1, 1), y: 8},\\n      {x: new Date(2007, 1, 1), y: 9},\\n      {x: new Date(2008, 1, 1), y: -8.5},\\n      {x: new Date(2009, 1, 1), y: -9},\\n      {x: new Date(2010, 1, 1), y: 5},\\n      {x: new Date(2013, 1, 1), y: 1},\\n      {x: new Date(2014, 1, 1), y: 2},\\n      {x: new Date(2015, 1, 1), y: -5}\\n    ];\\n  }\\n\\n  getDataSetTwo() {\\n    return [\\n      {x: new Date(2000, 1, 1), y: 5},\\n      {x: new Date(2003, 1, 1), y: 6},\\n      {x: new Date(2004, 1, 1), y: 4},\\n      {x: new Date(2005, 1, 1), y: 10},\\n      {x: new Date(2006, 1, 1), y: 12},\\n      {x: new Date(2007, 2, 1), y: 48},\\n      {x: new Date(2008, 1, 1), y: 19},\\n      {x: new Date(2009, 1, 1), y: 31},\\n      {x: new Date(2011, 1, 1), y: 49},\\n      {x: new Date(2014, 1, 1), y: 40},\\n      {x: new Date(2015, 1, 1), y: 21}\\n    ];\\n  }\\n\\n  getTickValues() {\\n    return [\\n      new Date(1999, 1, 1),\\n      new Date(2000, 1, 1),\\n      new Date(2001, 1, 1),\\n      new Date(2002, 1, 1),\\n      new Date(2003, 1, 1),\\n      new Date(2004, 1, 1),\\n      new Date(2005, 1, 1),\\n      new Date(2006, 1, 1),\\n      new Date(2007, 1, 1),\\n      new Date(2008, 1, 1),\\n      new Date(2009, 1, 1),\\n      new Date(2010, 1, 1),\\n      new Date(2011, 1, 1),\\n      new Date(2012, 1, 1),\\n      new Date(2013, 1, 1),\\n      new Date(2014, 1, 1),\\n      new Date(2015, 1, 1),\\n      new Date(2016, 1, 1)\\n    ];\\n  }\\n\\n  getStyles() {\\n    const BLUE_COLOR = \\\"#00a3de\\\";\\n    const RED_COLOR = \\\"#7c270b\\\";\\n\\n    return {\\n      parent: {\\n        background: \\\"#ccdee8\\\",\\n        boxSizing: \\\"border-box\\\",\\n        display: \\\"inline\\\",\\n        padding: 0,\\n        fontFamily: \\\"'Fira Sans', sans-serif\\\"\\n      },\\n      title: {\\n        textAnchor: \\\"start\\\",\\n        verticalAnchor: \\\"end\\\",\\n        fill: \\\"#000000\\\",\\n        fontFamily: \\\"inherit\\\",\\n        fontSize: \\\"18px\\\",\\n        fontWeight: \\\"bold\\\"\\n      },\\n      labelNumber: {\\n        textAnchor: \\\"middle\\\",\\n        fill: \\\"#ffffff\\\",\\n        fontFamily: \\\"inherit\\\",\\n        fontSize: \\\"14px\\\"\\n      },\\n\\n      // INDEPENDENT AXIS\\n      axisYears: {\\n        axis: { stroke: \\\"black\\\", strokeWidth: 1},\\n        ticks: {\\n          size: ({ tick }) => {\\n            const tickSize =\\n              tick.getFullYear() % 5 === 0 ? 10 : 5;\\n            return tickSize;\\n          },\\n          stroke: \\\"black\\\",\\n          strokeWidth: 1\\n        },\\n        tickLabels: {\\n          fill: \\\"black\\\",\\n          fontFamily: \\\"inherit\\\",\\n          fontSize: 16\\n        }\\n      },\\n\\n      // DATA SET ONE\\n      axisOne: {\\n        grid: {\\n          stroke: ({ tick }) =>\\n            tick === -10 ? \\\"transparent\\\" : \\\"#ffffff\\\",\\n          strokeWidth: 2\\n        },\\n        axis: { stroke: BLUE_COLOR, strokeWidth: 0 },\\n        ticks: { strokeWidth: 0 },\\n        tickLabels: {\\n          fill: BLUE_COLOR,\\n          fontFamily: \\\"inherit\\\",\\n          fontSize: 16\\n        }\\n      },\\n      labelOne: {\\n        fill: BLUE_COLOR,\\n        fontFamily: \\\"inherit\\\",\\n        fontSize: 12,\\n        fontStyle: \\\"italic\\\"\\n      },\\n      lineOne: {\\n        data: { stroke: BLUE_COLOR, strokeWidth: 4.5 }\\n      },\\n      axisOneCustomLabel: {\\n        fill: BLUE_COLOR,\\n        fontFamily: \\\"inherit\\\",\\n        fontWeight: 300,\\n        fontSize: 21\\n      },\\n\\n      // DATA SET TWO\\n      axisTwo: {\\n        axis: { stroke: RED_COLOR, strokeWidth: 0 },\\n        tickLabels: {\\n          fill: RED_COLOR,\\n          fontFamily: \\\"inherit\\\",\\n          fontSize: 16\\n        }\\n      },\\n      labelTwo: {\\n        textAnchor: \\\"end\\\",\\n        fill: RED_COLOR,\\n        fontFamily: \\\"inherit\\\",\\n        fontSize: 12,\\n        fontStyle: \\\"italic\\\"\\n      },\\n      lineTwo: {\\n        data: { stroke: RED_COLOR, strokeWidth: 4.5 }\\n      },\\n\\n      // HORIZONTAL LINE\\n      lineThree: {\\n        data: { stroke: \\\"#e95f46\\\", strokeWidth: 2 }\\n      }\\n    };\\n  }\\n}\\n\\nReactDOM.render(<CustomTheme/>, mountNode)\\n```\\n\",\"content\":\"Custom Charts\\n=============\\n\\nVictory lets you create fully custom charts that integrate seamlessly with the look and feel of your project. The following guide demonstrates how custom styles and modular chart components are used to create a cohesive chart with distinctive branding.\\n\\nThe following example shows how to create a chart with multiple independent axes without using the `VictoryChart` wrapper. This example also includes functional styles and axis customization.\\n\\n----\\n\\n\\n```playground_norender\\nclass CustomTheme extends React.Component {\\n  render() {\\n    const styles = this.getStyles();\\n    const dataSetOne = this.getDataSetOne();\\n    const dataSetTwo = this.getDataSetTwo();\\n    const tickValues = this.getTickValues();\\n\\n    return (\\n      <svg style={styles.parent} viewBox=\\\"0 0 450 350\\\">\\n\\n        {/* Create stylistic elements */}\\n        <rect x=\\\"0\\\" y=\\\"0\\\" width=\\\"10\\\" height=\\\"30\\\" fill=\\\"#f01616\\\"/>\\n        <rect x=\\\"420\\\" y=\\\"10\\\" width=\\\"20\\\" height=\\\"20\\\" fill=\\\"#458ca8\\\"/>\\n\\n        {/* Define labels */}\\n        <VictoryLabel x={25} y={24} style={styles.title}\\n          text=\\\"An outlook\\\"\\n        />\\n        <VictoryLabel x={430} y={20} style={styles.labelNumber}\\n          text=\\\"1\\\"\\n        />\\n        <VictoryLabel x={25} y={55} style={styles.labelOne}\\n          text={\\\"Economy \\\\n % change on a year earlier\\\"}\\n        />\\n        <VictoryLabel x={425} y={55} style={styles.labelTwo}\\n          text={\\\"Dinosaur exports\\\\n $bn\\\"}\\n        />\\n\\n        <g transform={\\\"translate(0, 40)\\\"}>\\n          {/* Add shared independent axis */}\\n          <VictoryAxis\\n            scale=\\\"time\\\"\\n            standalone={false}\\n            style={styles.axisYears}\\n            tickValues={tickValues}\\n            tickFormat={\\n              (x) => {\\n                if (x.getFullYear() === 2000) {\\n                  return x.getFullYear();\\n                }\\n                if (x.getFullYear() % 5 === 0) {\\n                  return x.getFullYear().toString().slice(2);\\n                }\\n              }\\n            }\\n          />\\n\\n          {/*\\n            Add the dependent axis for the first data set.\\n            Note that all components plotted against this axis will have the same y domain\\n          */}\\n          <VictoryAxis dependentAxis\\n            domain={[-10, 15]}\\n            offsetX={50}\\n            orientation=\\\"left\\\"\\n            standalone={false}\\n            style={styles.axisOne}\\n          />\\n\\n          {/* Red annotation line */}\\n          <VictoryLine\\n            data={[\\n              {x: new Date(1999, 1, 1), y: 0},\\n              {x: new Date(2014, 6, 1), y: 0}\\n            ]}\\n            domain={{\\n              x: [new Date(1999, 1, 1), new Date(2016, 1, 1)],\\n              y: [-10, 15]\\n            }}\\n            scale={{x: \\\"time\\\", y: \\\"linear\\\"}}\\n            standalone={false}\\n            style={styles.lineThree}\\n          />\\n\\n          {/* dataset one */}\\n          <VictoryLine\\n            data={dataSetOne}\\n            domain={{\\n              x: [new Date(1999, 1, 1), new Date(2016, 1, 1)],\\n              y: [-10, 15]\\n            }}\\n            interpolation=\\\"monotoneX\\\"\\n            scale={{x: \\\"time\\\", y: \\\"linear\\\"}}\\n            standalone={false}\\n            style={styles.lineOne}\\n          />\\n\\n          {/*\\n            Add the dependent axis for the second data set.\\n            Note that all components plotted against this axis will have the same y domain\\n          */}\\n          <VictoryAxis dependentAxis\\n            domain={[0, 50]}\\n            orientation=\\\"right\\\"\\n            standalone={false}\\n            style={styles.axisTwo}\\n          />\\n\\n          {/* dataset two */}\\n          <VictoryLine\\n            data={dataSetTwo}\\n            domain={{\\n              x: [new Date(1999, 1, 1), new Date(2016, 1, 1)],\\n              y: [0, 50]\\n            }}\\n            interpolation=\\\"monotoneX\\\"\\n            scale={{x: \\\"time\\\", y: \\\"linear\\\"}}\\n            standalone={false}\\n            style={styles.lineTwo}\\n          />\\n        </g>\\n      </svg>\\n    );\\n  }\\n\\n  getDataSetOne() {\\n    return [\\n      {x: new Date(2000, 1, 1), y: 12},\\n      {x: new Date(2000, 6, 1), y: 10},\\n      {x: new Date(2000, 12, 1), y: 11},\\n      {x: new Date(2001, 1, 1), y: 5},\\n      {x: new Date(2002, 1, 1), y: 4},\\n      {x: new Date(2003, 1, 1), y: 6},\\n      {x: new Date(2004, 1, 1), y: 5},\\n      {x: new Date(2005, 1, 1), y: 7},\\n      {x: new Date(2006, 1, 1), y: 8},\\n      {x: new Date(2007, 1, 1), y: 9},\\n      {x: new Date(2008, 1, 1), y: -8.5},\\n      {x: new Date(2009, 1, 1), y: -9},\\n      {x: new Date(2010, 1, 1), y: 5},\\n      {x: new Date(2013, 1, 1), y: 1},\\n      {x: new Date(2014, 1, 1), y: 2},\\n      {x: new Date(2015, 1, 1), y: -5}\\n    ];\\n  }\\n\\n  getDataSetTwo() {\\n    return [\\n      {x: new Date(2000, 1, 1), y: 5},\\n      {x: new Date(2003, 1, 1), y: 6},\\n      {x: new Date(2004, 1, 1), y: 4},\\n      {x: new Date(2005, 1, 1), y: 10},\\n      {x: new Date(2006, 1, 1), y: 12},\\n      {x: new Date(2007, 2, 1), y: 48},\\n      {x: new Date(2008, 1, 1), y: 19},\\n      {x: new Date(2009, 1, 1), y: 31},\\n      {x: new Date(2011, 1, 1), y: 49},\\n      {x: new Date(2014, 1, 1), y: 40},\\n      {x: new Date(2015, 1, 1), y: 21}\\n    ];\\n  }\\n\\n  getTickValues() {\\n    return [\\n      new Date(1999, 1, 1),\\n      new Date(2000, 1, 1),\\n      new Date(2001, 1, 1),\\n      new Date(2002, 1, 1),\\n      new Date(2003, 1, 1),\\n      new Date(2004, 1, 1),\\n      new Date(2005, 1, 1),\\n      new Date(2006, 1, 1),\\n      new Date(2007, 1, 1),\\n      new Date(2008, 1, 1),\\n      new Date(2009, 1, 1),\\n      new Date(2010, 1, 1),\\n      new Date(2011, 1, 1),\\n      new Date(2012, 1, 1),\\n      new Date(2013, 1, 1),\\n      new Date(2014, 1, 1),\\n      new Date(2015, 1, 1),\\n      new Date(2016, 1, 1)\\n    ];\\n  }\\n\\n  getStyles() {\\n    const BLUE_COLOR = \\\"#00a3de\\\";\\n    const RED_COLOR = \\\"#7c270b\\\";\\n\\n    return {\\n      parent: {\\n        background: \\\"#ccdee8\\\",\\n        boxSizing: \\\"border-box\\\",\\n        display: \\\"inline\\\",\\n        padding: 0,\\n        fontFamily: \\\"'Fira Sans', sans-serif\\\"\\n      },\\n      title: {\\n        textAnchor: \\\"start\\\",\\n        verticalAnchor: \\\"end\\\",\\n        fill: \\\"#000000\\\",\\n        fontFamily: \\\"inherit\\\",\\n        fontSize: \\\"18px\\\",\\n        fontWeight: \\\"bold\\\"\\n      },\\n      labelNumber: {\\n        textAnchor: \\\"middle\\\",\\n        fill: \\\"#ffffff\\\",\\n        fontFamily: \\\"inherit\\\",\\n        fontSize: \\\"14px\\\"\\n      },\\n\\n      // INDEPENDENT AXIS\\n      axisYears: {\\n        axis: { stroke: \\\"black\\\", strokeWidth: 1},\\n        ticks: {\\n          size: ({ tick }) => {\\n            const tickSize =\\n              tick.getFullYear() % 5 === 0 ? 10 : 5;\\n            return tickSize;\\n          },\\n          stroke: \\\"black\\\",\\n          strokeWidth: 1\\n        },\\n        tickLabels: {\\n          fill: \\\"black\\\",\\n          fontFamily: \\\"inherit\\\",\\n          fontSize: 16\\n        }\\n      },\\n\\n      // DATA SET ONE\\n      axisOne: {\\n        grid: {\\n          stroke: ({ tick }) =>\\n            tick === -10 ? \\\"transparent\\\" : \\\"#ffffff\\\",\\n          strokeWidth: 2\\n        },\\n        axis: { stroke: BLUE_COLOR, strokeWidth: 0 },\\n        ticks: { strokeWidth: 0 },\\n        tickLabels: {\\n          fill: BLUE_COLOR,\\n          fontFamily: \\\"inherit\\\",\\n          fontSize: 16\\n        }\\n      },\\n      labelOne: {\\n        fill: BLUE_COLOR,\\n        fontFamily: \\\"inherit\\\",\\n        fontSize: 12,\\n        fontStyle: \\\"italic\\\"\\n      },\\n      lineOne: {\\n        data: { stroke: BLUE_COLOR, strokeWidth: 4.5 }\\n      },\\n      axisOneCustomLabel: {\\n        fill: BLUE_COLOR,\\n        fontFamily: \\\"inherit\\\",\\n        fontWeight: 300,\\n        fontSize: 21\\n      },\\n\\n      // DATA SET TWO\\n      axisTwo: {\\n        axis: { stroke: RED_COLOR, strokeWidth: 0 },\\n        tickLabels: {\\n          fill: RED_COLOR,\\n          fontFamily: \\\"inherit\\\",\\n          fontSize: 16\\n        }\\n      },\\n      labelTwo: {\\n        textAnchor: \\\"end\\\",\\n        fill: RED_COLOR,\\n        fontFamily: \\\"inherit\\\",\\n        fontSize: 12,\\n        fontStyle: \\\"italic\\\"\\n      },\\n      lineTwo: {\\n        data: { stroke: RED_COLOR, strokeWidth: 4.5 }\\n      },\\n\\n      // HORIZONTAL LINE\\n      lineThree: {\\n        data: { stroke: \\\"#e95f46\\\", strokeWidth: 2 }\\n      }\\n    };\\n  }\\n}\\n\\nReactDOM.render(<CustomTheme/>, mountNode)\\n\\n```\\n\"},{\"data\":{\"id\":4,\"title\":\"Custom Components\",\"category\":\"guides\",\"scope\":[\"range\",\"random\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Custom Components\",\"depth\":1,\"slug\":\"custom-components\"},{\"type\":\"heading\",\"value\":\"Altering default components\",\"depth\":2,\"slug\":\"altering-default-components\"},{\"type\":\"heading\",\"value\":\"Wrapping components\",\"depth\":2,\"slug\":\"wrapping-components\"},{\"type\":\"heading\",\"value\":\"Creating new components\",\"depth\":2,\"slug\":\"creating-new-components\"}],\"slug\":\"custom-components\",\"type\":\"guides\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Custom Components\",\"depth\":1,\"slug\":\"custom-components\",\"category\":\"guides\",\"children\":[{\"type\":\"heading\",\"value\":\"Altering default components\",\"depth\":2,\"slug\":\"altering-default-components\"},{\"type\":\"heading\",\"value\":\"Wrapping components\",\"depth\":2,\"slug\":\"wrapping-components\"},{\"type\":\"heading\",\"value\":\"Creating new components\",\"depth\":2,\"slug\":\"creating-new-components\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 4\\ntitle: Custom Components\\ncategory: guides\\nscope:\\n  - range\\n  - random\\n---\\n\\n# Custom Components\\n\\nEvery element that a Victory component renders may be altered or completely replaced. Most components expose `dataComponent`, `labelComponent`, `groupComponent`, and `containerComponent` props. The primitive components that Victory components render by default are simple, stateless components with a consistent set of props whenever possible. These [primitive components][] are exported for users to alter, wrap, extend and reference when creating custom components.\\n\\n## Altering default components\\n\\nVictory components set props on their primitive components, but these may be overridden or augmented by setting props directly on the primitive component instances.\\n\\n```playground\\n  <VictoryBar\\n    data={[\\n      {x: 1, y: 3, label: \\\"Alpha\\\"},\\n      {x: 2, y: 4, label: \\\"Bravo\\\"},\\n      {x: 3, y: 6, label: \\\"Charlie\\\"},\\n      {x: 4, y: 3, label: \\\"Delta\\\"},\\n      {x: 5, y: 7, label: \\\"Echo\\\"},\\n    ]}\\n    labelComponent={\\n      <VictoryLabel angle={90} verticalAnchor=\\\"middle\\\" textAnchor=\\\"end\\\"/>\\n    }\\n  />\\n```\\n\\n## Wrapping components\\n\\nVictory components may be wrapped to customize or change behavior. Wrapper components should apply any props they receive from other Victory components to the components they render.\\n\\n```playground_norender\\nclass WrapperComponent extends React.Component {\\n  renderChildren() {\\n    const children = React.Children.toArray(this.props.children);\\n    return children.map((child) => {\\n      // children should be rendered with props from their parent Victory components assigned\\n      // Components like `VictoryChart` expect to control props like `domain` for their children\\n      // Some props should be merged rather than overridden\\n      const style = _.merge(child.props.style, this.props.style);\\n      return React.cloneElement(child, Object.assign({}, child.props, this.props, { style }));\\n    });\\n  }\\n\\n  render() {\\n    return (\\n      <g transform=\\\"translate(20, 40)\\\">\\n        <VictoryLabel text={\\\"add labels\\\"} x={110} y={30}/>\\n        <VictoryLabel text={\\\"offset data from axes\\\"} x={70} y={150}/>\\n        <VictoryLabel text={\\\"alter props\\\"} x={280} y={150}/>\\n        { this.renderChildren() }\\n      </g>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart>\\n        <WrapperComponent>\\n          <VictoryScatter\\n            y={(d) => Math.sin(2 * Math.PI * d.x)}\\n            samples={15}\\n            symbol=\\\"square\\\"\\n            size={6}\\n            style={{ data: { stroke: \\\"tomato\\\", strokeWidth: 3 }}}\\n          />\\n        </WrapperComponent>\\n      </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## Creating new components\\n\\nAny component that renders valid svg elements (or elements wrapped in `<foreignObject>`) may be used as a `dataComponent` or `labelComponent` in Victory components. Custom components will be provided with the same props as default components. In the following example, a custom `CatPoint` component is used in place of `Point` in `VictoryScatter`.\\n\\n```playground_norender\\nclass CatPoint extends React.Component {\\n  render() {\\n    const {x, y, datum} = this.props;\\n    const cat = datum._y >= 0 ? \\\"\uD83D\uDE3B\\\" : \\\"\uD83D\uDE39\\\";\\n    return (\\n      <text x={x} y={y} fontSize={30}>\\n        {cat}\\n      </text>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart>\\n        <VictoryScatter\\n          y={(d) =>\\n            Math.sin(2 * Math.PI * d.x)\\n          }\\n          samples={25}\\n          dataComponent={<CatPoint/>}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\nMore complex components may be supplied as direct children of `VictoryChart`. These components will have access to shared chart props such as `scale`. In the example below, the custom `Polygon` components draws a polygon based on a collection of points. The scale provided by `VictoryChart` is used to correctly position the points within the chart.\\n\\n```playground_norender\\nconst SAMPLE_DATA = [\\n\\t{x: 2, y: 1},\\n\\t{x: 3, y: 5},\\n\\t{x: 6, y: 3}\\n];\\n\\nclass Polygon extends React.Component {\\n  getPoints(data, scale) {\\n    return data.reduce((pointStr, {x, y}) =>\\n\\t\\t\\t`${pointStr} ${scale.x(x)},${scale.y(y)}`\\n\\t\\t, '');\\n  }\\n\\n  render() {\\n    // data and style are explicitly supplied to the Polygon component\\n    // scale is provided by VictoryChart\\n    const { data, style, scale } = this.props;\\n    const points = this.getPoints(data, scale);\\n    return <polygon points={points} style={style}/>;\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return <VictoryChart\\n      height={400}\\n      width={400}\\n      domain={[-10, 10]}\\n    >\\n      <Polygon\\n        data={SAMPLE_DATA}\\n        style={{ fill: \\\"tomato\\\", opacity: 0.5 }}\\n      />\\n      <VictoryScatter\\n        data={SAMPLE_DATA}\\n      />\\n    </VictoryChart>;\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\nOther Victory components may even be used in creating custom components, as in the example below.\\n\\n```playground_norender\\nclass CustomPie extends React.Component {\\n  render() {\\n    const {datum, x, y} = this.props;\\n    const pieWidth = 120;\\n\\n    return (\\n      <g transform={\\n        `translate(${x - pieWidth / 2}, ${y - pieWidth / 2})`\\n        }\\n      >\\n        <VictoryPie\\n          standalone={false}\\n          height={pieWidth}\\n          width={pieWidth}\\n          data={datum.pie}\\n          style={{labels: {fontSize: 0}}}\\n          colorScale={[\\\"#f77\\\", \\\"#55e\\\", \\\"#8af\\\"]}\\n        />\\n      </g>\\n    );\\n  }\\n}\\n\\nclass CustomDataComponent extends React.Component {\\n  render() {\\n    const data = [\\n      {x: \\\"Jan\\\", y: 30},\\n      {x: \\\"Feb\\\", y: 32},\\n      {x: \\\"Mar\\\", y: 65},\\n      {x: \\\"Apr\\\", y: 38},\\n      {x: \\\"May\\\", y: 50},\\n      {x: \\\"Jun\\\", y: 47},\\n      {x: \\\"Jul\\\", y: 38},\\n      {x: \\\"Aug\\\", y: 48},\\n      {x: \\\"Sep\\\", y: 80},\\n      {x: \\\"Oct\\\", y: 73},\\n      {x: \\\"Nov\\\", y: 76},\\n      {x: \\\"Dec\\\", y: 100}\\n    ];\\n\\n    const pieData = data.map((datum) => {\\n      datum.pie = [\\n        {x: \\\"Lions\\\", y: Math.round(Math.random() * 10)},\\n        {x: \\\"Tigers\\\", y: Math.round(Math.random() * 10)},\\n        {x: \\\"Bears\\\", y: Math.round(Math.random() * 10)}\\n      ];\\n      return datum;\\n    });\\n\\n    return (\\n      <VictoryChart domain={{y: [0, 100]}}>\\n        <VictoryAxis/>\\n        <VictoryGroup data={pieData}>\\n          <VictoryLine/>\\n          <VictoryScatter\\n            dataComponent={<CustomPie />}\\n          />\\n        </VictoryGroup>\\n      </VictoryChart>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<CustomDataComponent/>, mountNode)\\n```\\n\\n[primitive components]: /docs/victory-primitives\\n\",\"content\":\"# Custom Components\\n\\nEvery element that a Victory component renders may be altered or completely replaced. Most components expose `dataComponent`, `labelComponent`, `groupComponent`, and `containerComponent` props. The primitive components that Victory components render by default are simple, stateless components with a consistent set of props whenever possible. These [primitive components][] are exported for users to alter, wrap, extend and reference when creating custom components.\\n\\n## Altering default components\\n\\nVictory components set props on their primitive components, but these may be overridden or augmented by setting props directly on the primitive component instances.\\n\\n```playground\\n  <VictoryBar\\n    data={[\\n      {x: 1, y: 3, label: \\\"Alpha\\\"},\\n      {x: 2, y: 4, label: \\\"Bravo\\\"},\\n      {x: 3, y: 6, label: \\\"Charlie\\\"},\\n      {x: 4, y: 3, label: \\\"Delta\\\"},\\n      {x: 5, y: 7, label: \\\"Echo\\\"},\\n    ]}\\n    labelComponent={\\n      <VictoryLabel angle={90} verticalAnchor=\\\"middle\\\" textAnchor=\\\"end\\\"/>\\n    }\\n  />\\n```\\n\\n## Wrapping components\\n\\nVictory components may be wrapped to customize or change behavior. Wrapper components should apply any props they receive from other Victory components to the components they render.\\n\\n```playground_norender\\nclass WrapperComponent extends React.Component {\\n  renderChildren() {\\n    const children = React.Children.toArray(this.props.children);\\n    return children.map((child) => {\\n      // children should be rendered with props from their parent Victory components assigned\\n      // Components like `VictoryChart` expect to control props like `domain` for their children\\n      // Some props should be merged rather than overridden\\n      const style = _.merge(child.props.style, this.props.style);\\n      return React.cloneElement(child, Object.assign({}, child.props, this.props, { style }));\\n    });\\n  }\\n\\n  render() {\\n    return (\\n      <g transform=\\\"translate(20, 40)\\\">\\n        <VictoryLabel text={\\\"add labels\\\"} x={110} y={30}/>\\n        <VictoryLabel text={\\\"offset data from axes\\\"} x={70} y={150}/>\\n        <VictoryLabel text={\\\"alter props\\\"} x={280} y={150}/>\\n        { this.renderChildren() }\\n      </g>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart>\\n        <WrapperComponent>\\n          <VictoryScatter\\n            y={(d) => Math.sin(2 * Math.PI * d.x)}\\n            samples={15}\\n            symbol=\\\"square\\\"\\n            size={6}\\n            style={{ data: { stroke: \\\"tomato\\\", strokeWidth: 3 }}}\\n          />\\n        </WrapperComponent>\\n      </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n\\n## Creating new components\\n\\nAny component that renders valid svg elements (or elements wrapped in `<foreignObject>`) may be used as a `dataComponent` or `labelComponent` in Victory components. Custom components will be provided with the same props as default components. In the following example, a custom `CatPoint` component is used in place of `Point` in `VictoryScatter`.\\n\\n\\n```playground_norender\\nclass CatPoint extends React.Component {\\n  render() {\\n    const {x, y, datum} = this.props;\\n    const cat = datum._y >= 0 ? \\\"\uD83D\uDE3B\\\" : \\\"\uD83D\uDE39\\\";\\n    return (\\n      <text x={x} y={y} fontSize={30}>\\n        {cat}\\n      </text>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart>\\n        <VictoryScatter\\n          y={(d) =>\\n            Math.sin(2 * Math.PI * d.x)\\n          }\\n          samples={25}\\n          dataComponent={<CatPoint/>}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\nMore complex components may be supplied as direct children of `VictoryChart`. These components will have access to shared chart props such as `scale`. In the example below, the custom `Polygon` components draws a polygon based on a collection of points. The scale provided by `VictoryChart` is used to correctly position the points within the chart.\\n\\n```playground_norender\\nconst SAMPLE_DATA = [\\n\\t{x: 2, y: 1},\\n\\t{x: 3, y: 5},\\n\\t{x: 6, y: 3}\\n];\\n\\nclass Polygon extends React.Component {\\n  getPoints(data, scale) {\\n    return data.reduce((pointStr, {x, y}) =>\\n\\t\\t\\t`${pointStr} ${scale.x(x)},${scale.y(y)}`\\n\\t\\t, '');\\n  }\\n\\n  render() {\\n    // data and style are explicitly supplied to the Polygon component\\n    // scale is provided by VictoryChart\\n    const { data, style, scale } = this.props;\\n    const points = this.getPoints(data, scale);\\n    return <polygon points={points} style={style}/>;\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return <VictoryChart\\n      height={400}\\n      width={400}\\n      domain={[-10, 10]}\\n    >\\n      <Polygon\\n        data={SAMPLE_DATA}\\n        style={{ fill: \\\"tomato\\\", opacity: 0.5 }}\\n      />\\n      <VictoryScatter\\n        data={SAMPLE_DATA}\\n      />\\n    </VictoryChart>;\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\nOther Victory components may even be used in creating custom components, as in the example below.\\n\\n\\n```playground_norender\\nclass CustomPie extends React.Component {\\n  render() {\\n    const {datum, x, y} = this.props;\\n    const pieWidth = 120;\\n\\n    return (\\n      <g transform={\\n        `translate(${x - pieWidth / 2}, ${y - pieWidth / 2})`\\n        }\\n      >\\n        <VictoryPie\\n          standalone={false}\\n          height={pieWidth}\\n          width={pieWidth}\\n          data={datum.pie}\\n          style={{labels: {fontSize: 0}}}\\n          colorScale={[\\\"#f77\\\", \\\"#55e\\\", \\\"#8af\\\"]}\\n        />\\n      </g>\\n    );\\n  }\\n}\\n\\nclass CustomDataComponent extends React.Component {\\n  render() {\\n    const data = [\\n      {x: \\\"Jan\\\", y: 30},\\n      {x: \\\"Feb\\\", y: 32},\\n      {x: \\\"Mar\\\", y: 65},\\n      {x: \\\"Apr\\\", y: 38},\\n      {x: \\\"May\\\", y: 50},\\n      {x: \\\"Jun\\\", y: 47},\\n      {x: \\\"Jul\\\", y: 38},\\n      {x: \\\"Aug\\\", y: 48},\\n      {x: \\\"Sep\\\", y: 80},\\n      {x: \\\"Oct\\\", y: 73},\\n      {x: \\\"Nov\\\", y: 76},\\n      {x: \\\"Dec\\\", y: 100}\\n    ];\\n\\n    const pieData = data.map((datum) => {\\n      datum.pie = [\\n        {x: \\\"Lions\\\", y: Math.round(Math.random() * 10)},\\n        {x: \\\"Tigers\\\", y: Math.round(Math.random() * 10)},\\n        {x: \\\"Bears\\\", y: Math.round(Math.random() * 10)}\\n      ];\\n      return datum;\\n    });\\n\\n    return (\\n      <VictoryChart domain={{y: [0, 100]}}>\\n        <VictoryAxis/>\\n        <VictoryGroup data={pieData}>\\n          <VictoryLine/>\\n          <VictoryScatter\\n            dataComponent={<CustomPie />}\\n          />\\n        </VictoryGroup>\\n      </VictoryChart>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<CustomDataComponent/>, mountNode)\\n```\\n\\n[primitive components]: /docs/victory-primitives\\n\"},{\"data\":{\"id\":5,\"title\":\"Data Accessors\",\"category\":\"guides\",\"scope\":[\"assign\",\"range\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Data Accessors\",\"depth\":1,\"slug\":\"data-accessors\"},{\"type\":\"heading\",\"value\":\"Specifying x and y data\",\"depth\":2,\"slug\":\"specifying-x-and-y-data\"},{\"type\":\"heading\",\"value\":\"Processing data\",\"depth\":2,\"slug\":\"processing-data\"},{\"type\":\"heading\",\"value\":\"Sorting data\",\"depth\":2,\"slug\":\"sorting-data\"},{\"type\":\"heading\",\"value\":\"Plotting functions\",\"depth\":2,\"slug\":\"plotting-functions\"}],\"slug\":\"data-accessors\",\"type\":\"guides\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Data Accessors\",\"depth\":1,\"slug\":\"data-accessors\",\"category\":\"guides\",\"children\":[{\"type\":\"heading\",\"value\":\"Specifying x and y data\",\"depth\":2,\"slug\":\"specifying-x-and-y-data\"},{\"type\":\"heading\",\"value\":\"Processing data\",\"depth\":2,\"slug\":\"processing-data\"},{\"type\":\"heading\",\"value\":\"Sorting data\",\"depth\":2,\"slug\":\"sorting-data\"},{\"type\":\"heading\",\"value\":\"Plotting functions\",\"depth\":2,\"slug\":\"plotting-functions\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 5\\ntitle: Data Accessors\\ncategory: guides\\nscope:\\n  - assign\\n  - range\\n---\\n\\n# Data Accessors\\n\\nMost Victory components expect data in the form of an array of data objects with values specified for `x` and `y`. Victory components expose data accessor props that may be used when data is not readily available in this format. Data accessor props may be used to specify how a data prop should be used, process a elements in a data array, or to plot math functions even when no data prop is given.\\n\\n## Specifying x and y data\\n\\nSome Victory components like `VictoryCandlestick` and `VictoryErrorBar` have unusual accessor props that match their expected data formats, but most Victory components expose standard `x` and `y` data accessor props. These props may be used to specify which properties or elements of the data array should be plotted on the x and y axes.\\n\\nWhen given as strings, these accessors will specify which properties of a data object to plot. The following example will plot employees on the x axis and salaries on the y axis:\\n\\n```jsx\\n<VictoryBar\\n  data={[\\n    {employee: \\\"Jane Doe\\\", salary: 65000},\\n    {employee: \\\"John Doe\\\", salary: 62000}\\n    ...\\n  ]}\\n  x=\\\"employee\\\"\\n  y=\\\"salary\\\"\\n/>\\n```\\n\\nIf data is given as an array of arrays, data accessors may be given as integers to specify the index of the nested array that should be plotted.\\n\\n```jsx\\n<VictoryBar\\n  data={[[0, 1], [1, 1], [2, 3], [3, 1]]}\\n  x={0}\\n  y={1}\\n/>\\n```\\n\\nData accessors may also be given as path strings or arrays to specify deeply nested data.\\n\\n```jsx\\n<VictoryBar\\n  data={[\\n    {\\n      employee: { firstName: \\\"Jane\\\", lastName: \\\"Doe\\\" },\\n      salary: { base: 65000, bonus: 2000 }\\n    },\\n    {\\n      employee: { firstName: \\\"John\\\", lastName: \\\"Doe\\\" },\\n      salary: { base: 62000, bonus: 6000 }\\n    },\\n    ...\\n  ]}\\n  x=\\\"employee.firstName\\\"\\n  y={[\\\"salary\\\", \\\"base\\\"]}\\n/>\\n```\\n\\n## Processing data\\n\\nData accessor props may be given as functions and used to process data, as in the following example.\\n\\n```playground\\n  <VictoryChart\\n    domainPadding={{x: 40}}\\n  >\\n    <VictoryBar\\n      data={[\\n        { experiment: \\\"trial 1\\\", expected: 3.75, actual: 3.21 },\\n        { experiment: \\\"trial 2\\\", expected: 3.75, actual: 3.38 },\\n        { experiment: \\\"trial 3\\\", expected: 3.75, actual: 2.05 },\\n        { experiment: \\\"trial 4\\\", expected: 3.75, actual: 3.71 }\\n      ]}\\n      x=\\\"experiment\\\"\\n      y={(d) => (d.actual / d.expected) * 100}\\n    />\\n    <VictoryAxis\\n      label=\\\"experiment\\\"\\n      style={{\\n        axisLabel: { padding: 30 }\\n      }}\\n    />\\n    <VictoryAxis dependentAxis\\n      label=\\\"percent yield\\\"\\n      style={{\\n        axisLabel: { padding: 40 }\\n      }}\\n    />\\n</VictoryChart>\\n```\\n\\n## Sorting data\\n\\nSorting can be applied to the final data via the sortKey prop. This prop\\ncorresponds to the lodash [sortBy][] function.\\n\\nThis prop can be provided as a string, function, or array of either.\\n\\n```playground\\n  <VictoryLine\\n    data={_.range(0, 2 * Math.PI, 0.01).map((t) => ({t}))}\\n    sortKey=\\\"t\\\"\\n    x={({t}) => Math.sin(3 * t + (2 * Math.PI))}\\n    y={({t}) => Math.sin(2 * t)}\\n  />\\n```\\n\\n## Plotting functions\\n\\nIf data is not given, data accessor props may be used to plot math functions. In this scenarios, initial data will be generated based on the domain and number of samples. Alter the `samples` and `domain` props to change how functions are plotted.\\n\\n```playground\\n  <VictoryChart>\\n    <VictoryLine\\n      samples={50}\\n      style={{data:\\n        {stroke: \\\"red\\\", strokeWidth: 4}\\n      }}\\n      y={(data) => Math.sin(2 * Math.PI * data.x)}\\n    />\\n\\n    <VictoryLine\\n      samples={10}\\n      style={{data:\\n        {stroke: \\\"blue\\\", strokeWidth: 4}\\n      }}\\n      y={(data) => Math.cos(2 * Math.PI * data.x)}\\n    />\\n  </VictoryChart>\\n```\\n\\n[sortby]: https://lodash.com/docs/4.17.4#sortBy\\n\",\"content\":\"# Data Accessors\\n\\n\\nMost Victory components expect data in the form of an array of data objects with values specified for `x` and `y`. Victory components expose data accessor props that may be used when data is not readily available in this format. Data accessor props may be used to specify how a data prop should be used, process a elements in a data array, or to plot math functions even when no data prop is given.\\n\\n\\n## Specifying x and y data\\n\\n\\nSome Victory components like `VictoryCandlestick` and `VictoryErrorBar` have unusual accessor props that match their expected data formats, but most Victory components expose standard `x` and `y` data accessor props. These props may be used to specify which properties or elements of the data array should be plotted on the x and y axes.\\n\\n\\nWhen given as strings, these accessors will specify which properties of a data object to plot. The following example will plot employees on the x axis and salaries on the y axis:\\n\\n\\n```jsx\\n<VictoryBar\\n  data={[\\n    {employee: \\\"Jane Doe\\\", salary: 65000},\\n    {employee: \\\"John Doe\\\", salary: 62000}\\n    ...\\n  ]}\\n  x=\\\"employee\\\"\\n  y=\\\"salary\\\"\\n/>\\n```\\n\\n\\nIf data is given as an array of arrays, data accessors may be given as integers to specify the index of the nested array that should be plotted.\\n\\n\\n```jsx\\n<VictoryBar\\n  data={[[0, 1], [1, 1], [2, 3], [3, 1]]}\\n  x={0}\\n  y={1}\\n/>\\n```\\n\\n\\nData accessors may also be given as path strings or arrays to specify deeply nested data.\\n\\n\\n```jsx\\n<VictoryBar\\n  data={[\\n    {\\n      employee: { firstName: \\\"Jane\\\", lastName: \\\"Doe\\\" },\\n      salary: { base: 65000, bonus: 2000 }\\n    },\\n    {\\n      employee: { firstName: \\\"John\\\", lastName: \\\"Doe\\\" },\\n      salary: { base: 62000, bonus: 6000 }\\n    },\\n    ...\\n  ]}\\n  x=\\\"employee.firstName\\\"\\n  y={[\\\"salary\\\", \\\"base\\\"]}\\n/>\\n```\\n\\n\\n## Processing data\\n\\n\\nData accessor props may be given as functions and used to process data, as in the following example.\\n\\n\\n```playground\\n  <VictoryChart\\n    domainPadding={{x: 40}}\\n  >\\n    <VictoryBar\\n      data={[\\n        { experiment: \\\"trial 1\\\", expected: 3.75, actual: 3.21 },\\n        { experiment: \\\"trial 2\\\", expected: 3.75, actual: 3.38 },\\n        { experiment: \\\"trial 3\\\", expected: 3.75, actual: 2.05 },\\n        { experiment: \\\"trial 4\\\", expected: 3.75, actual: 3.71 }\\n      ]}\\n      x=\\\"experiment\\\"\\n      y={(d) => (d.actual / d.expected) * 100}\\n    />\\n    <VictoryAxis\\n      label=\\\"experiment\\\"\\n      style={{\\n        axisLabel: { padding: 30 }\\n      }}\\n    />\\n    <VictoryAxis dependentAxis\\n      label=\\\"percent yield\\\"\\n      style={{\\n        axisLabel: { padding: 40 }\\n      }}\\n    />\\n</VictoryChart>\\n```\\n\\n\\n## Sorting data\\n\\n\\nSorting can be applied to the final data via the sortKey prop. This prop\\ncorresponds to the lodash [sortBy][] function.\\n\\nThis prop can be provided as a string, function, or array of either.\\n\\n```playground\\n  <VictoryLine\\n    data={_.range(0, 2 * Math.PI, 0.01).map((t) => ({t}))}\\n    sortKey=\\\"t\\\"\\n    x={({t}) => Math.sin(3 * t + (2 * Math.PI))}\\n    y={({t}) => Math.sin(2 * t)}\\n  />\\n```\\n\\n\\n## Plotting functions\\n\\nIf data is not given, data accessor props may be used to plot math functions. In this scenarios, initial data will be generated based on the domain and number of samples. Alter the `samples` and `domain` props to change how functions are plotted.\\n\\n```playground\\n  <VictoryChart>\\n    <VictoryLine\\n      samples={50}\\n      style={{data:\\n        {stroke: \\\"red\\\", strokeWidth: 4}\\n      }}\\n      y={(data) => Math.sin(2 * Math.PI * data.x)}\\n    />\\n\\n    <VictoryLine\\n      samples={10}\\n      style={{data:\\n        {stroke: \\\"blue\\\", strokeWidth: 4}\\n      }}\\n      y={(data) => Math.cos(2 * Math.PI * data.x)}\\n    />\\n  </VictoryChart>\\n```\\n\\n[sortBy]: https://lodash.com/docs/4.17.4#sortBy\\n\"},{\"data\":{\"id\":6,\"title\":\"Events\",\"category\":\"guides\",\"scope\":[\"assign\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Events\",\"depth\":1,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"Single Component Events\",\"depth\":2,\"slug\":\"single-component-events\"},{\"type\":\"heading\",\"value\":\"Nested Component Events\",\"depth\":2,\"slug\":\"nested-component-events\"},{\"type\":\"heading\",\"value\":\"VictorySharedEvents\",\"depth\":2,\"slug\":\"victory-shared-events\"},{\"type\":\"heading\",\"value\":\"External Event Mutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"Simple Events\",\"depth\":2,\"slug\":\"simple-events\"}],\"slug\":\"events\",\"type\":\"guides\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Events\",\"depth\":1,\"slug\":\"events\",\"category\":\"guides\",\"children\":[{\"type\":\"heading\",\"value\":\"Single Component Events\",\"depth\":2,\"slug\":\"single-component-events\"},{\"type\":\"heading\",\"value\":\"Nested Component Events\",\"depth\":2,\"slug\":\"nested-component-events\"},{\"type\":\"heading\",\"value\":\"VictorySharedEvents\",\"depth\":2,\"slug\":\"victory-shared-events\"},{\"type\":\"heading\",\"value\":\"External Event Mutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"Simple Events\",\"depth\":2,\"slug\":\"simple-events\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 6\\ntitle: Events\\ncategory: guides\\nscope:\\n  - assign\\n---\\n\\n# Events\\n\\nVictory uses a flexible event system that is agnostic of event type. Browser events like `onClick` are handled identically to mobile touch events like `onPressIn`.  Victory's event system allows users to attach events to any rendered element, and trigger mutations on any other rendered element.\\n\\nThis guide will demonstrate how to use Victory's event system within a single component, between several components nested within wrapper components like `VictoryChart` or `VictoryGroup`, and between several components using the `VictorySharedEvents` wrapper. This guide will also explain how to bypass Victory's event system entirely, and attach simple events directly to rendered components.\\n\\n## Single Component Events\\n\\nEvents within a single component like `VictoryBar` may be defined by the `events` prop of the component. The component will be responsible for storing event-driven mutations on its state object. The `events` prop should be given as an array of event objects. Each object defines an event or set of events to attach to a particular target element, or set of target elements.\\n\\nTarget elements are specified by the `target` and `eventKey` properties. Valid `target` properties match the namespaces of the style element of any given component. For most components valid target properties are \\\"data\\\", \\\"labels\\\", and \\\"parent\\\". The `target` property is required. The optional `eventKey` property may be given as a value or array of values.\\n\\nEvents are defined by the `eventHandlers` property which should be given as an object whose properties are named events such as `onClick`, and whose values are event handlers. Event handlers are called with the event, the props defining the element that triggered the event, and the event key of the element that triggered the event.\\n\\nReturn values from event handlers are used to define mutations affecting rendered elements. Return values from event handlers should be given as an array of mutation objects. Mutation objects may have `target` and `eventKey` properties to specify an element to mutate. If these properties are not given, the mutation will effect the element that triggered the event. Mutation objects should also have a `mutation` property whose value is a function. The mutation function will be called with the event, the props defining the element that will be mutated, and the event key of the element that will be mutated. The mutation function should return an object of props to be modified, and the new values for those props.\\n\\nIn the example below, clicking on any of the bars will trigger a change in the text of the corresponding labels.\\n\\n```playground\\n  <VictoryBar\\n    data={[\\n      {x: 1, y: 2, label: \\\"A\\\"},\\n      {x: 2, y: 4, label: \\\"B\\\"},\\n      {x: 3, y: 7, label: \\\"C\\\"},\\n      {x: 4, y: 3, label: \\\"D\\\"},\\n      {x: 5, y: 5, label: \\\"E\\\"},\\n    ]}\\n    events={[\\n      {\\n        target: \\\"data\\\",\\n        eventHandlers: {\\n          onClick: () => {\\n            return [{\\n              target: \\\"labels\\\",\\n              mutation: (props) => {\\n                return props.text === \\\"clicked\\\" ?\\n                  null : { text: \\\"clicked\\\" }\\n              }\\n            }];\\n          }\\n        }\\n      }\\n    ]}\\n  />\\n```\\n\\n## Nested Component Events\\n\\nWrapper components like `VictoryChart`, `VictoryGroup`, and `VictoryStack` may define events for their children. Component events defined by wrappers operate much the same as single component events, except that the events are defined on the parent component, and event-driven mutations are stored in the parent's state. Events on child components are specified with the `childName` property. Components that have a `name` prop specified will be referenced by name. If child components do not have a `name` specified they will be referenced by index. In the example below, clicking on either of the bottom two areas in the stack will change the color of the top area.\\n\\n```playground\\n<VictoryChart\\n  events={[{\\n    childName: [\\\"area-1\\\", \\\"area-2\\\"],\\n    target: \\\"data\\\",\\n    eventHandlers: {\\n      onClick: () => {\\n        return [{\\n          childName: \\\"area-4\\\",\\n          mutation: (props) => {\\n            const fill = props.style.fill;\\n            return fill === \\\"tomato\\\" ? null : {style: {fill: \\\"tomato\\\"}};\\n          }\\n        }];\\n      }\\n    }\\n  }]}\\n>\\n  <VictoryStack>\\n    <VictoryArea name=\\\"area-1\\\"\\n      data={[\\n        {x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 4}\\n      ]}\\n    />\\n    <VictoryArea name=\\\"area-2\\\"\\n      data={[\\n        {x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 7}\\n      ]}\\n    />\\n    <VictoryArea name=\\\"area-3\\\"\\n      data={[\\n        {x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}, {x: \\\"d\\\", y: 2}\\n      ]}\\n    />\\n    <VictoryArea name=\\\"area-4\\\"\\n      data={[\\n        {x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 3}, {x: \\\"d\\\", y: 4}\\n      ]}\\n    />\\n  </VictoryStack>\\n</VictoryChart>\\n```\\n\\n## VictorySharedEvents\\n\\nComponents like `VictoryChart` use the `VictorySharedEvents` wrapper automatically, but the wrapper may also be used on its own. Nest child components within the `VictorySharedEvents` wrapper, and reference them as you would when using `VictoryChart`\\n\\n```playground\\n<svg viewBox=\\\"0 0 450 350\\\">\\n  <VictorySharedEvents\\n    events={[{\\n      childName: [\\\"pie\\\", \\\"bar\\\"],\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onMouseOver: () => {\\n          return [{\\n            childName: [\\\"pie\\\", \\\"bar\\\"],\\n            mutation: (props) => {\\n              return {\\n                style: Object.assign({}, props.style, {fill: \\\"tomato\\\"})\\n              };\\n            }\\n          }];\\n        },\\n        onMouseOut: () => {\\n          return [{\\n            childName: [\\\"pie\\\", \\\"bar\\\"],\\n            mutation: () => {\\n              return null;\\n            }\\n          }];\\n        }\\n      }\\n    }]}\\n  >\\n    <g transform={\\\"translate(150, 50)\\\"}>\\n      <VictoryBar name=\\\"bar\\\"\\n        width={300}\\n        standalone={false}\\n        style={{\\n          data: { width: 20 },\\n          labels: {fontSize: 25}\\n        }}\\n        data={[\\n          {x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 4}\\n        ]}\\n        labels={[\\\"a\\\", \\\"b\\\", \\\"c\\\", \\\"d\\\"]}\\n        labelComponent={<VictoryLabel y={290}/>}\\n      />\\n    </g>\\n    <g transform={\\\"translate(0, -75)\\\"}>\\n      <VictoryPie name=\\\"pie\\\"\\n        width={250}\\n        standalone={false}\\n        style={{ labels: {fontSize: 25, padding: 10}}}\\n        data={[\\n          {x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 7}\\n        ]}\\n      />\\n    </g>\\n  </VictorySharedEvents>\\n</svg>\\n```\\n\\n## External Event Mutations\\n\\nOccasionally is it necessary to trigger events in Victory's event system from some external element such as a button or a form field. Use the `externalEventMutation` prop to specify a set of mutations to apply to a given chart. The `externalEventMutations` should be given in the following form:\\n\\n```jsx\\nexternalEventMutations: PropTypes.arrayOf(PropTypes.shape({\\n  callback: PropTypes.function,\\n  childName: PropTypes.oneOfType([\\n    PropTypes.string,\\n    PropTypes.array\\n  ]),\\n  eventKey: PropTypes.oneOfType([\\n    PropTypes.array,\\n    CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),\\n    PropTypes.string\\n  ]),\\n  mutation: PropTypes.function,\\n  target: PropTypes.oneOfType([\\n    PropTypes.string,\\n    PropTypes.array\\n  ])\\n}))\\n```\\n\\nThe `target`, `eventKey`, and `childName` (when applicable) must always be specified. The `mutation` function will be called with the current props of the element specified by the `target`, `eventKey` and `childName` provided. The mutation function should return a mutation object for that element. The `callback` prop should be used to clear the `externalEventMutations` prop once the mutation has been applied. Clearing `externalEventMutations` is crucial for charts that animate.\\n\\n```playground_norender\\nclass App extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      externalMutations: undefined\\n    };\\n  }\\n\\n  removeMutation() {\\n    this.setState({\\n      externalMutations: undefined\\n    });\\n  }\\n\\n  clearClicks() {\\n    this.setState({\\n      externalMutations: [\\n        {\\n          childName: \\\"Bar-1\\\",\\n          target: [\\\"data\\\"],\\n          eventKey: \\\"all\\\",\\n          mutation: () => ({ style: undefined }),\\n          callback: this.removeMutation.bind(this)\\n        }\\n      ]\\n    });\\n  }\\n\\n  render() {\\n    const buttonStyle = {\\n      backgroundColor: \\\"black\\\",\\n      color: \\\"white\\\",\\n      padding: \\\"10px\\\",\\n      marginTop: \\\"10px\\\"\\n    };\\n    return (\\n      <div>\\n        <button\\n          onClick={this.clearClicks.bind(this)}\\n          style={buttonStyle}\\n        >\\n          Reset\\n        </button>\\n        <VictoryChart domain={{ x: [0, 5 ] }}\\n          externalEventMutations={this.state.externalMutations}\\n          events={[\\n            {\\n              target: \\\"data\\\",\\n              childName: \\\"Bar-1\\\",\\n              eventHandlers: {\\n                onClick: () => ({\\n                  target: \\\"data\\\",\\n                  mutation: () => ({ style: { fill: \\\"orange\\\" } })\\n                })\\n              }\\n            }\\n          ]}\\n        >\\n          <VictoryBar name=\\\"Bar-1\\\"\\n            style={{ data: { fill: \\\"grey\\\"} }}\\n            labels={() => \\\"click me!\\\"}\\n            data={[\\n              { x: 1, y: 2 },\\n              { x: 2, y: 4 },\\n              { x: 3, y: 1 },\\n              { x: 4, y: 5 }\\n            ]}\\n          />\\n        </VictoryChart>\\n      </div>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\n_Note_ External mutations are applied to the same state object that is used to control events in Victory, so depending on the order in which they are triggered, external event mutations may override mutations caused by internal Victory events or vice versa.\\n\\n## Simple Events\\n\\nFor simple events, it may be desireable to bypass Victory's event system. To do so, specify `events` props directly on primitive components rather than using the `events` prop on Victory components. The simple `events` prop should be given as an object whose properties are event names like `onClick`, and whose values are event handlers. Events specified this way will only be called with the standard event objects.\\n\\n```playground\\n  <VictoryBar\\n    data={[\\n      {x: 1, y: 2},\\n      {x: 2, y: 4},\\n      {x: 3, y: 7},\\n      {x: 4, y: 3},\\n      {x: 5, y: 5},\\n    ]}\\n    dataComponent={\\n      <Bar\\n        events={{\\n          onClick: (evt) => alert(`(${evt.clientX}, ${evt.clientY})`)\\n        }}\\n      />\\n    }\\n  />\\n```\\n\",\"content\":\"# Events\\n\\nVictory uses a flexible event system that is agnostic of event type. Browser events like `onClick` are handled identically to mobile touch events like `onPressIn`.  Victory's event system allows users to attach events to any rendered element, and trigger mutations on any other rendered element.\\n\\n\\nThis guide will demonstrate how to use Victory's event system within a single component, between several components nested within wrapper components like `VictoryChart` or `VictoryGroup`, and between several components using the `VictorySharedEvents` wrapper. This guide will also explain how to bypass Victory's event system entirely, and attach simple events directly to rendered components.\\n\\n\\n## Single Component Events\\n\\n\\nEvents within a single component like `VictoryBar` may be defined by the `events` prop of the component. The component will be responsible for storing event-driven mutations on its state object. The `events` prop should be given as an array of event objects. Each object defines an event or set of events to attach to a particular target element, or set of target elements.\\n\\n\\nTarget elements are specified by the `target` and `eventKey` properties. Valid `target` properties match the namespaces of the style element of any given component. For most components valid target properties are \\\"data\\\", \\\"labels\\\", and \\\"parent\\\". The `target` property is required. The optional `eventKey` property may be given as a value or array of values.\\n\\n\\nEvents are defined by the `eventHandlers` property which should be given as an object whose properties are named events such as `onClick`, and whose values are event handlers. Event handlers are called with the event, the props defining the element that triggered the event, and the event key of the element that triggered the event.\\n\\n\\nReturn values from event handlers are used to define mutations affecting rendered elements. Return values from event handlers should be given as an array of mutation objects. Mutation objects may have `target` and `eventKey` properties to specify an element to mutate. If these properties are not given, the mutation will effect the element that triggered the event. Mutation objects should also have a `mutation` property whose value is a function. The mutation function will be called with the event, the props defining the element that will be mutated, and the event key of the element that will be mutated. The mutation function should return an object of props to be modified, and the new values for those props.\\n\\n\\nIn the example below, clicking on any of the bars will trigger a change in the text of the corresponding labels.\\n\\n\\n```playground\\n  <VictoryBar\\n    data={[\\n      {x: 1, y: 2, label: \\\"A\\\"},\\n      {x: 2, y: 4, label: \\\"B\\\"},\\n      {x: 3, y: 7, label: \\\"C\\\"},\\n      {x: 4, y: 3, label: \\\"D\\\"},\\n      {x: 5, y: 5, label: \\\"E\\\"},\\n    ]}\\n    events={[\\n      {\\n        target: \\\"data\\\",\\n        eventHandlers: {\\n          onClick: () => {\\n            return [{\\n              target: \\\"labels\\\",\\n              mutation: (props) => {\\n                return props.text === \\\"clicked\\\" ?\\n                  null : { text: \\\"clicked\\\" }\\n              }\\n            }];\\n          }\\n        }\\n      }\\n    ]}\\n  />\\n```\\n\\n## Nested Component Events\\n\\n\\nWrapper components like `VictoryChart`, `VictoryGroup`, and `VictoryStack` may define events for their children. Component events defined by wrappers operate much the same as single component events, except that the events are defined on the parent component, and event-driven mutations are stored in the parent's state. Events on child components are specified with the `childName` property. Components that have a `name` prop specified will be referenced by name. If child components do not have a `name` specified they will be referenced by index. In the example below, clicking on either of the bottom two areas in the stack will change the color of the top area.\\n\\n\\n```playground\\n<VictoryChart\\n  events={[{\\n    childName: [\\\"area-1\\\", \\\"area-2\\\"],\\n    target: \\\"data\\\",\\n    eventHandlers: {\\n      onClick: () => {\\n        return [{\\n          childName: \\\"area-4\\\",\\n          mutation: (props) => {\\n            const fill = props.style.fill;\\n            return fill === \\\"tomato\\\" ? null : {style: {fill: \\\"tomato\\\"}};\\n          }\\n        }];\\n      }\\n    }\\n  }]}\\n>\\n  <VictoryStack>\\n    <VictoryArea name=\\\"area-1\\\"\\n      data={[\\n        {x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 4}\\n      ]}\\n    />\\n    <VictoryArea name=\\\"area-2\\\"\\n      data={[\\n        {x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 7}\\n      ]}\\n    />\\n    <VictoryArea name=\\\"area-3\\\"\\n      data={[\\n        {x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}, {x: \\\"d\\\", y: 2}\\n      ]}\\n    />\\n    <VictoryArea name=\\\"area-4\\\"\\n      data={[\\n        {x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 3}, {x: \\\"d\\\", y: 4}\\n      ]}\\n    />\\n  </VictoryStack>\\n</VictoryChart>\\n```\\n\\n\\n## VictorySharedEvents\\n\\n\\nComponents like `VictoryChart` use the `VictorySharedEvents` wrapper automatically, but the wrapper may also be used on its own. Nest child components within the `VictorySharedEvents` wrapper, and reference them as you would when using `VictoryChart`\\n\\n\\n```playground\\n<svg viewBox=\\\"0 0 450 350\\\">\\n  <VictorySharedEvents\\n    events={[{\\n      childName: [\\\"pie\\\", \\\"bar\\\"],\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onMouseOver: () => {\\n          return [{\\n            childName: [\\\"pie\\\", \\\"bar\\\"],\\n            mutation: (props) => {\\n              return {\\n                style: Object.assign({}, props.style, {fill: \\\"tomato\\\"})\\n              };\\n            }\\n          }];\\n        },\\n        onMouseOut: () => {\\n          return [{\\n            childName: [\\\"pie\\\", \\\"bar\\\"],\\n            mutation: () => {\\n              return null;\\n            }\\n          }];\\n        }\\n      }\\n    }]}\\n  >\\n    <g transform={\\\"translate(150, 50)\\\"}>\\n      <VictoryBar name=\\\"bar\\\"\\n        width={300}\\n        standalone={false}\\n        style={{\\n          data: { width: 20 },\\n          labels: {fontSize: 25}\\n        }}\\n        data={[\\n          {x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 4}\\n        ]}\\n        labels={[\\\"a\\\", \\\"b\\\", \\\"c\\\", \\\"d\\\"]}\\n        labelComponent={<VictoryLabel y={290}/>}\\n      />\\n    </g>\\n    <g transform={\\\"translate(0, -75)\\\"}>\\n      <VictoryPie name=\\\"pie\\\"\\n        width={250}\\n        standalone={false}\\n        style={{ labels: {fontSize: 25, padding: 10}}}\\n        data={[\\n          {x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 7}\\n        ]}\\n      />\\n    </g>\\n  </VictorySharedEvents>\\n</svg>\\n```\\n\\n## External Event Mutations\\n\\nOccasionally is it necessary to trigger events in Victory's event system from some external element such as a button or a form field. Use the `externalEventMutation` prop to specify a set of mutations to apply to a given chart. The `externalEventMutations` should be given in the following form:\\n\\n```jsx\\nexternalEventMutations: PropTypes.arrayOf(PropTypes.shape({\\n  callback: PropTypes.function,\\n  childName: PropTypes.oneOfType([\\n    PropTypes.string,\\n    PropTypes.array\\n  ]),\\n  eventKey: PropTypes.oneOfType([\\n    PropTypes.array,\\n    CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),\\n    PropTypes.string\\n  ]),\\n  mutation: PropTypes.function,\\n  target: PropTypes.oneOfType([\\n    PropTypes.string,\\n    PropTypes.array\\n  ])\\n}))\\n```\\n\\nThe `target`, `eventKey`, and `childName` (when applicable) must always be specified. The `mutation` function will be called with the current props of the element specified by the `target`, `eventKey` and `childName` provided. The mutation function should return a mutation object for that element. The `callback` prop should be used to clear the `externalEventMutations` prop once the mutation has been applied. Clearing `externalEventMutations` is crucial for charts that animate.\\n\\n```playground_norender\\nclass App extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      externalMutations: undefined\\n    };\\n  }\\n\\n  removeMutation() {\\n    this.setState({\\n      externalMutations: undefined\\n    });\\n  }\\n\\n  clearClicks() {\\n    this.setState({\\n      externalMutations: [\\n        {\\n          childName: \\\"Bar-1\\\",\\n          target: [\\\"data\\\"],\\n          eventKey: \\\"all\\\",\\n          mutation: () => ({ style: undefined }),\\n          callback: this.removeMutation.bind(this)\\n        }\\n      ]\\n    });\\n  }\\n\\n  render() {\\n    const buttonStyle = {\\n      backgroundColor: \\\"black\\\",\\n      color: \\\"white\\\",\\n      padding: \\\"10px\\\",\\n      marginTop: \\\"10px\\\"\\n    };\\n    return (\\n      <div>\\n        <button\\n          onClick={this.clearClicks.bind(this)}\\n          style={buttonStyle}\\n        >\\n          Reset\\n        </button>\\n        <VictoryChart domain={{ x: [0, 5 ] }}\\n          externalEventMutations={this.state.externalMutations}\\n          events={[\\n            {\\n              target: \\\"data\\\",\\n              childName: \\\"Bar-1\\\",\\n              eventHandlers: {\\n                onClick: () => ({\\n                  target: \\\"data\\\",\\n                  mutation: () => ({ style: { fill: \\\"orange\\\" } })\\n                })\\n              }\\n            }\\n          ]}\\n        >\\n          <VictoryBar name=\\\"Bar-1\\\"\\n            style={{ data: { fill: \\\"grey\\\"} }}\\n            labels={() => \\\"click me!\\\"}\\n            data={[\\n              { x: 1, y: 2 },\\n              { x: 2, y: 4 },\\n              { x: 3, y: 1 },\\n              { x: 4, y: 5 }\\n            ]}\\n          />\\n        </VictoryChart>\\n      </div>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\n*Note* External mutations are applied to the same state object that is used to control events in Victory, so depending on the order in which they are triggered, external event mutations may override mutations caused by internal Victory events or vice versa.\\n\\n## Simple Events\\n\\n\\nFor simple events, it may be desireable to bypass Victory's event system. To do so, specify `events` props directly on primitive components rather than using the `events` prop on Victory components. The simple `events` prop should be given as an object whose properties are event names like `onClick`, and whose values are event handlers. Events specified this way will only be called with the standard event objects.\\n\\n```playground\\n  <VictoryBar\\n    data={[\\n      {x: 1, y: 2},\\n      {x: 2, y: 4},\\n      {x: 3, y: 7},\\n      {x: 4, y: 3},\\n      {x: 5, y: 5},\\n    ]}\\n    dataComponent={\\n      <Bar\\n        events={{\\n          onClick: (evt) => alert(`(${evt.clientX}, ${evt.clientY})`)\\n        }}\\n      />\\n    }\\n  />\\n```\\n\"},{\"data\":{\"id\":7,\"title\":\"Layout\",\"category\":\"guides\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Layout\",\"depth\":1,\"slug\":\"layout\"},{\"type\":\"heading\",\"value\":\"Default Layout\",\"depth\":2,\"slug\":\"default-layout\"},{\"type\":\"heading\",\"value\":\"SVG Render Order\",\"depth\":2,\"slug\":\"svg-render-order\"},{\"type\":\"heading\",\"value\":\"VictoryPortal\",\"depth\":2,\"slug\":\"victory-portal\"},{\"type\":\"heading\",\"value\":\"Altering VictoryContainer\",\"depth\":2,\"slug\":\"altering-victory-container\"},{\"type\":\"heading\",\"value\":\"Rendering components in custom containers\",\"depth\":2,\"slug\":\"rendering-components-in-custom-containers\"}],\"slug\":\"layout\",\"type\":\"guides\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Layout\",\"depth\":1,\"slug\":\"layout\",\"category\":\"guides\",\"children\":[{\"type\":\"heading\",\"value\":\"Default Layout\",\"depth\":2,\"slug\":\"default-layout\"},{\"type\":\"heading\",\"value\":\"SVG Render Order\",\"depth\":2,\"slug\":\"svg-render-order\"},{\"type\":\"heading\",\"value\":\"VictoryPortal\",\"depth\":2,\"slug\":\"victory-portal\"},{\"type\":\"heading\",\"value\":\"Altering VictoryContainer\",\"depth\":2,\"slug\":\"altering-victory-container\"},{\"type\":\"heading\",\"value\":\"Rendering components in custom containers\",\"depth\":2,\"slug\":\"rendering-components-in-custom-containers\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 7\\ntitle: Layout\\ncategory: guides\\nscope: null\\n---\\n\\n# Layout\\n\\n## Default Layout\\n\\nVictory components have default `width`, `height`, and `padding` props defined in the default [grayscale theme][].\\n\\nVictory renders components into responsive `svg` containers by default. Responsive containers will have a `viewBox` attribute set to `viewBox={\\\"0 0 width, height\\\"}` and styles `width: \\\"100%\\\" height: \\\"auto\\\"` in addition to any styles provided via props. Because Victory renders responsive containers, the `width` and `height` props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into.\\n\\n## SVG Render Order\\n\\nVictory renders svg elements, so there is no concept of z-index. Instead the render order of components determines which elements will appear above others. Changing the order of rendered components can significantly alter the appearance of a chart. Compare the following charts. The only difference between the two is the order of the children in `VictoryChart`.\\n\\n```playground\\n  <div>\\n    <VictoryChart>\\n      <VictoryScatter\\n        y={(data) => Math.sin(2 * Math.PI * data.x)}\\n        samples={25}\\n        size={5}\\n        style={{ data: { fill: \\\"tomato\\\" }}}\\n      />\\n      <VictoryLine\\n        style={{ data: { stroke: \\\"orange\\\" }}}\\n        y={(data) => Math.sin(2 * Math.PI * data.x)}\\n      />\\n      <VictoryAxis/>\\n      <VictoryAxis dependentAxis/>\\n    </VictoryChart>\\n\\n    <VictoryChart>\\n      <VictoryAxis/>\\n      <VictoryAxis dependentAxis/>\\n      <VictoryLine\\n        style={{ data: { stroke: \\\"orange\\\" }}}\\n        y={(data) => Math.sin(2 * Math.PI * data.x)}\\n      />\\n      <VictoryScatter\\n        y={(data) => Math.sin(2 * Math.PI * data.x)}\\n        samples={25}\\n        size={5}\\n        style={{ data: { fill: \\\"tomato\\\" }}}\\n      />\\n    </VictoryChart>\\n  </div>\\n```\\n\\n## VictoryPortal\\n\\nSome components, such as tooltips, should _always_ render above others. Use [`VictoryPortal`][] to render components in a top level container so that they appear above all other elements. `VictoryTooltip` uses `VictoryPortal`, by default, but any component may be wrapped in `VictoryPortal` to alter its rendering.\\n\\n_caveats:_ `VictoryPortal` will not work with components that are not rendered within `VictoryContainer`.\\n\\n```playground\\n  <VictoryChart domainPadding={40}>\\n    <VictoryStack\\n      colorScale={[\\\"gold\\\", \\\"orange\\\", \\\"tomato\\\"]}\\n      style={{\\n        data: { width: 30 },\\n        labels: { padding: -20 }\\n      }}\\n      labelComponent={\\n        <VictoryPortal>\\n          <VictoryLabel/>\\n        </VictoryPortal>\\n      }\\n    >\\n      <VictoryBar\\n        data={[\\n          {x: 1, y: 3, label: \\\"C\\\"},\\n          {x: 2, y: 4, label: \\\"C\\\"},\\n          {x: 3, y: 2, label: \\\"C\\\"}\\n        ]}\\n      />\\n      <VictoryBar\\n        data={[\\n          {x: 1, y: 3, label: \\\"B\\\"},\\n          {x: 2, y: 4, label: \\\"B\\\"},\\n          {x: 3, y: 2, label: \\\"B\\\"}\\n        ]}\\n      />\\n      <VictoryBar\\n        data={[\\n          {x: 1, y: 3, label: \\\"A\\\"},\\n          {x: 2, y: 4, label: \\\"A\\\"},\\n          {x: 3, y: 2, label: \\\"A\\\"}\\n        ]}\\n      />\\n    </VictoryStack>\\n    <VictoryAxis/>\\n  </VictoryChart>\\n```\\n\\n## Altering VictoryContainer\\n\\nResponsive containers are not appropriate for every application, so Victory provides a couple of options for rendering static containers. The easiest way to render a static container rather than a responsive one is by setting the `responsive` prop to false directly on the `containerComponent` instance.\\n\\n```playground\\n<VictoryChart height={200} width={300}\\n  containerComponent={<VictoryContainer responsive={false}/>}\\n>\\n  <VictoryLine y={(data) => Math.sin(2 * Math.PI * data.x)}/>\\n</VictoryChart>\\n```\\n\\n## Rendering components in custom containers\\n\\nTo render a Victory component in a custom container set the `standalone` prop on the component to false. The component will render a `g` tag rather than an `svg` tag.\\n\\n```playground\\n<svg viewBox=\\\"0 0 400 400\\\" >\\n  <VictoryPie\\n    standalone={false}\\n    width={400} height={400}\\n    data={[\\n      {x: \\\"A\\\", y: 33},\\n      {x: \\\"B\\\", y: 33},\\n      {x: \\\"C\\\", y: 33}\\n    ]}\\n    innerRadius={70} labelRadius={100}\\n    style={{ labels: { fontSize: 20, fill: \\\"white\\\"}}}\\n  />\\n  <circle cx=\\\"200\\\" cy=\\\"200\\\" r=\\\"65\\\" fill=\\\"none\\\" stroke=\\\"black\\\" strokeWidth={3}/>\\n  <circle cx=\\\"200\\\" cy=\\\"200\\\" r=\\\"155\\\" fill=\\\"none\\\" stroke=\\\"black\\\" strokeWidth={3}/>\\n  <VictoryLabel\\n    textAnchor=\\\"middle\\\" verticalAnchor=\\\"middle\\\"\\n    x={200} y={200}\\n    style={{fontSize: 30}}\\n    text=\\\"Label\\\"\\n  />\\n</svg>\\n```\\n\\n_caveats:_ `VictoryPortal` will not work with components that are not rendered within `VictoryContainer`.\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\\n[`victoryportal`]: /docs/victory-portal\\n\",\"content\":\"# Layout\\n\\n## Default Layout\\n\\nVictory components have default `width`, `height`, and `padding` props defined in the default [grayscale theme][].\\n\\nVictory renders components into responsive `svg` containers by default. Responsive containers will have a `viewBox` attribute set to `viewBox={\\\"0 0 width, height\\\"}` and styles `width: \\\"100%\\\" height: \\\"auto\\\"` in addition to any styles provided via props. Because Victory renders responsive containers, the `width` and `height` props do not determine the width and height of the chart in number of pixels, but instead define an aspect ratio for the chart. The exact number of pixels will depend on the size of the container the chart is rendered into.\\n\\n## SVG Render Order\\n\\nVictory renders svg elements, so there is no concept of z-index. Instead the render order of components determines which elements will appear above others. Changing the order of rendered components can significantly alter the appearance of a chart. Compare the following charts. The only difference between the two is the order of the children in `VictoryChart`.\\n\\n```playground\\n  <div>\\n    <VictoryChart>\\n      <VictoryScatter\\n        y={(data) => Math.sin(2 * Math.PI * data.x)}\\n        samples={25}\\n        size={5}\\n        style={{ data: { fill: \\\"tomato\\\" }}}\\n      />\\n      <VictoryLine\\n        style={{ data: { stroke: \\\"orange\\\" }}}\\n        y={(data) => Math.sin(2 * Math.PI * data.x)}\\n      />\\n      <VictoryAxis/>\\n      <VictoryAxis dependentAxis/>\\n    </VictoryChart>\\n\\n    <VictoryChart>\\n      <VictoryAxis/>\\n      <VictoryAxis dependentAxis/>\\n      <VictoryLine\\n        style={{ data: { stroke: \\\"orange\\\" }}}\\n        y={(data) => Math.sin(2 * Math.PI * data.x)}\\n      />\\n      <VictoryScatter\\n        y={(data) => Math.sin(2 * Math.PI * data.x)}\\n        samples={25}\\n        size={5}\\n        style={{ data: { fill: \\\"tomato\\\" }}}\\n      />\\n    </VictoryChart>\\n  </div>\\n```\\n\\n\\n## VictoryPortal\\n\\nSome components, such as tooltips, should _always_ render above others. Use [`VictoryPortal`][] to render components in a top level container so that they appear above all other elements. `VictoryTooltip` uses `VictoryPortal`, by default, but any component may be wrapped in `VictoryPortal` to alter its rendering.\\n\\n*caveats:* `VictoryPortal` will not work with components that are not rendered within `VictoryContainer`.\\n\\n```playground\\n  <VictoryChart domainPadding={40}>\\n    <VictoryStack\\n      colorScale={[\\\"gold\\\", \\\"orange\\\", \\\"tomato\\\"]}\\n      style={{\\n        data: { width: 30 },\\n        labels: { padding: -20 }\\n      }}\\n      labelComponent={\\n        <VictoryPortal>\\n          <VictoryLabel/>\\n        </VictoryPortal>\\n      }\\n    >\\n      <VictoryBar\\n        data={[\\n          {x: 1, y: 3, label: \\\"C\\\"},\\n          {x: 2, y: 4, label: \\\"C\\\"},\\n          {x: 3, y: 2, label: \\\"C\\\"}\\n        ]}\\n      />\\n      <VictoryBar\\n        data={[\\n          {x: 1, y: 3, label: \\\"B\\\"},\\n          {x: 2, y: 4, label: \\\"B\\\"},\\n          {x: 3, y: 2, label: \\\"B\\\"}\\n        ]}\\n      />\\n      <VictoryBar\\n        data={[\\n          {x: 1, y: 3, label: \\\"A\\\"},\\n          {x: 2, y: 4, label: \\\"A\\\"},\\n          {x: 3, y: 2, label: \\\"A\\\"}\\n        ]}\\n      />\\n    </VictoryStack>\\n    <VictoryAxis/>\\n  </VictoryChart>\\n```\\n\\n\\n## Altering VictoryContainer\\n\\nResponsive containers are not appropriate for every application, so Victory provides a couple of options for rendering static containers. The easiest way to render a static container rather than a responsive one is by setting the `responsive` prop to false directly on the `containerComponent` instance.\\n\\n```playground\\n\\n<VictoryChart height={200} width={300}\\n  containerComponent={<VictoryContainer responsive={false}/>}\\n>\\n  <VictoryLine y={(data) => Math.sin(2 * Math.PI * data.x)}/>\\n</VictoryChart>\\n\\n```\\n\\n\\n## Rendering components in custom containers\\n\\nTo render a Victory component in a custom container set the `standalone` prop on the component to false. The component will render a `g` tag rather than an `svg` tag.\\n\\n```playground\\n<svg viewBox=\\\"0 0 400 400\\\" >\\n  <VictoryPie\\n    standalone={false}\\n    width={400} height={400}\\n    data={[\\n      {x: \\\"A\\\", y: 33},\\n      {x: \\\"B\\\", y: 33},\\n      {x: \\\"C\\\", y: 33}\\n    ]}\\n    innerRadius={70} labelRadius={100}\\n    style={{ labels: { fontSize: 20, fill: \\\"white\\\"}}}\\n  />\\n  <circle cx=\\\"200\\\" cy=\\\"200\\\" r=\\\"65\\\" fill=\\\"none\\\" stroke=\\\"black\\\" strokeWidth={3}/>\\n  <circle cx=\\\"200\\\" cy=\\\"200\\\" r=\\\"155\\\" fill=\\\"none\\\" stroke=\\\"black\\\" strokeWidth={3}/>\\n  <VictoryLabel\\n    textAnchor=\\\"middle\\\" verticalAnchor=\\\"middle\\\"\\n    x={200} y={200}\\n    style={{fontSize: 30}}\\n    text=\\\"Label\\\"\\n  />\\n</svg>\\n```\\n\\n*caveats:* `VictoryPortal` will not work with components that are not rendered within `VictoryContainer`.\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n[`VictoryPortal`]: /docs/victory-portal\\n\"},{\"data\":{\"id\":8,\"title\":\"Polar Charts\",\"category\":\"guides\",\"scope\":[\"sampleDataPolar\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Polar Charts\",\"depth\":1,\"slug\":\"polar-charts\"},{\"type\":\"heading\",\"value\":\"Creating Polar Charts\",\"depth\":2,\"slug\":\"creating-polar-charts\"}],\"slug\":\"polar-charts\",\"type\":\"guides\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Polar Charts\",\"depth\":1,\"slug\":\"polar-charts\",\"category\":\"guides\",\"children\":[{\"type\":\"heading\",\"value\":\"Creating Polar Charts\",\"depth\":2,\"slug\":\"creating-polar-charts\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 8\\ntitle: Polar Charts\\ncategory: guides\\nscope:\\n  - sampleDataPolar\\n---\\n\\n# Polar Charts\\n\\nVictory supports polar charts for `VictoryArea`, `VictoryBar`, `VictoryLine` and `VictoryScatter`, as well as wrapper components like `VictoryChart`, `VictoryGroup` and `VictoryStack`. This guide provides explanations for polar-specific props as well as examples of polar charts.\\n\\n```playground\\n<div>\\n  <VictoryChart polar\\n    domain={{ x: [0, 360] }}\\n    theme={VictoryTheme.material}\\n  >\\n    <VictoryPolarAxis tickCount={8}/>\\n    <VictoryBar\\n      data={sampleDataPolar}\\n      style={{ data: { fill: \\\"#c43a31\\\", stroke: \\\"black\\\", strokeWidth: 2 }}}\\n    />\\n  </VictoryChart>\\n\\n  <VictoryChart\\n    theme={VictoryTheme.material}\\n  >\\n    <VictoryAxis tickCount={8}/>\\n    <VictoryBar\\n      data={sampleDataPolar}\\n      style={{ data: { fill: \\\"#c43a31\\\", stroke: \\\"black\\\", strokeWidth: 2 }}}\\n    />\\n  </VictoryChart>\\n</div>\\n```\\n\\n## Creating Polar Charts\\n\\nIn most cases, creating a polar chart is as easy as adding the `polar` prop to the top level component (usually `VictoryChart`).\\n\\n```playground\\n<VictoryChart polar\\n  domain={{ x: [0, 360] }}\\n  height={250} width={250}\\n  padding={30}\\n>\\n  <VictoryBar\\n    style={{ data: { fill: \\\"#c43a31\\\", width: 50 }}}\\n    data={sampleDataPolar}\\n  />\\n</VictoryChart>\\n```\\n\\nTo configure axes for polar charts, use the [`VictoryPolarAxis`][] component. `VictoryPolarAxis` uses a similar set of props to `VictoryAxis`\\n\\n```playground\\n<VictoryChart polar\\n  domain={{ x: [0, 360] }}\\n  height={250} width={250}\\n  padding={30}\\n>\\n  <VictoryPolarAxis dependentAxis\\n    style={{\\n      axis: {stroke: \\\"none\\\"},\\n      tickLabels: { fill: \\\"none\\\"},\\n       grid: { stroke: \\\"grey\\\", strokeDasharray: \\\"4, 8\\\" }\\n    }}\\n  />\\n  <VictoryPolarAxis\\n    tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}\\n  />\\n  <VictoryBar\\n    style={{ data: { fill: \\\"#c43a31\\\", width: 50 }}}\\n    data={sampleDataPolar}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictoryGroup` and `VictoryStack` also work with polar charts:\\n\\n```playground\\n<VictoryChart polar\\n  maxDomain={{ x: 360 }}\\n  height={250} width={250}\\n  padding={30}\\n>\\n  <VictoryPolarAxis dependentAxis\\n    style={{\\n      axis: {stroke: \\\"none\\\"},\\n      tickLabels: { fill: \\\"none\\\"},\\n       grid: { stroke: \\\"grey\\\", strokeDasharray: \\\"4, 8\\\" }\\n    }}\\n  />\\n  <VictoryPolarAxis\\n    tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}\\n  />\\n  <VictoryStack\\n    colorScale={[\\\"#ad1b11\\\", \\\"#c43a31\\\", \\\"#dc7a6b\\\"]}\\n    style={{ data: { width: 50} }}\\n  >\\n    <VictoryBar data={sampleDataPolar}/>\\n    <VictoryBar data={sampleDataPolar}/>\\n    <VictoryBar data={sampleDataPolar}/>\\n  </VictoryStack>\\n</VictoryChart>\\n```\\n\\nAdd interactivity to polar charts with standard events, or container components. The following Polar charts work with `VictorySelectionContainer`, `VictoryVoronoiContainer`, and `VictoryZoomContainer`.\\n\\n```playground\\n<VictoryChart polar\\n  maxDomain={{ x: 360 }}\\n  height={250} width={250}\\n  padding={30}\\n  containerComponent={<VictoryZoomContainer/>}\\n>\\n  <VictoryPolarAxis dependentAxis\\n    style={{\\n      axis: {stroke: \\\"none\\\"},\\n      tickLabels: { fill: \\\"none\\\"},\\n       grid: { stroke: \\\"grey\\\", strokeDasharray: \\\"4, 8\\\" }\\n    }}\\n  />\\n  <VictoryPolarAxis\\n    tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}\\n  />\\n  <VictoryStack\\n    colorScale={[\\\"#ad1b11\\\", \\\"#c43a31\\\", \\\"#dc7a6b\\\"]}\\n    style={{ data: { width: 50} }}\\n  >\\n    <VictoryBar data={sampleDataPolar}/>\\n    <VictoryBar data={sampleDataPolar}/>\\n    <VictoryBar data={sampleDataPolar}/>\\n  </VictoryStack>\\n</VictoryChart>\\n```\\n\\n[`victorypolaraxis`]: /docs/victory-polar-axis\\n\",\"content\":\"# Polar Charts\\n\\nVictory supports polar charts for `VictoryArea`, `VictoryBar`, `VictoryLine` and `VictoryScatter`, as well as wrapper components like `VictoryChart`, `VictoryGroup` and `VictoryStack`. This guide provides explanations for polar-specific props as well as examples of polar charts.\\n\\n```playground\\n<div>\\n  <VictoryChart polar\\n    domain={{ x: [0, 360] }}\\n    theme={VictoryTheme.material}\\n  >\\n    <VictoryPolarAxis tickCount={8}/>\\n    <VictoryBar\\n      data={sampleDataPolar}\\n      style={{ data: { fill: \\\"#c43a31\\\", stroke: \\\"black\\\", strokeWidth: 2 }}}\\n    />\\n  </VictoryChart>\\n\\n  <VictoryChart\\n    theme={VictoryTheme.material}\\n  >\\n    <VictoryAxis tickCount={8}/>\\n    <VictoryBar\\n      data={sampleDataPolar}\\n      style={{ data: { fill: \\\"#c43a31\\\", stroke: \\\"black\\\", strokeWidth: 2 }}}\\n    />\\n  </VictoryChart>\\n</div>\\n```\\n## Creating Polar Charts\\n\\nIn most cases, creating a polar chart is as easy as adding the `polar` prop to the top level component (usually `VictoryChart`).\\n\\n```playground\\n<VictoryChart polar\\n  domain={{ x: [0, 360] }}\\n  height={250} width={250}\\n  padding={30}\\n>\\n  <VictoryBar\\n    style={{ data: { fill: \\\"#c43a31\\\", width: 50 }}}\\n    data={sampleDataPolar}\\n  />\\n</VictoryChart>\\n```\\n\\nTo configure axes for polar charts, use the [`VictoryPolarAxis`][] component. `VictoryPolarAxis` uses a similar set of props to `VictoryAxis`\\n\\n```playground\\n<VictoryChart polar\\n  domain={{ x: [0, 360] }}\\n  height={250} width={250}\\n  padding={30}\\n>\\n  <VictoryPolarAxis dependentAxis\\n    style={{\\n      axis: {stroke: \\\"none\\\"},\\n      tickLabels: { fill: \\\"none\\\"},\\n       grid: { stroke: \\\"grey\\\", strokeDasharray: \\\"4, 8\\\" }\\n    }}\\n  />\\n  <VictoryPolarAxis\\n    tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}\\n  />\\n  <VictoryBar\\n    style={{ data: { fill: \\\"#c43a31\\\", width: 50 }}}\\n    data={sampleDataPolar}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictoryGroup` and `VictoryStack` also work with polar charts:\\n\\n```playground\\n<VictoryChart polar\\n  maxDomain={{ x: 360 }}\\n  height={250} width={250}\\n  padding={30}\\n>\\n  <VictoryPolarAxis dependentAxis\\n    style={{\\n      axis: {stroke: \\\"none\\\"},\\n      tickLabels: { fill: \\\"none\\\"},\\n       grid: { stroke: \\\"grey\\\", strokeDasharray: \\\"4, 8\\\" }\\n    }}\\n  />\\n  <VictoryPolarAxis\\n    tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}\\n  />\\n  <VictoryStack\\n    colorScale={[\\\"#ad1b11\\\", \\\"#c43a31\\\", \\\"#dc7a6b\\\"]}\\n    style={{ data: { width: 50} }}\\n  >\\n    <VictoryBar data={sampleDataPolar}/>\\n    <VictoryBar data={sampleDataPolar}/>\\n    <VictoryBar data={sampleDataPolar}/>\\n  </VictoryStack>\\n</VictoryChart>\\n```\\n\\nAdd interactivity to polar charts with standard events, or container components. The following Polar charts work with `VictorySelectionContainer`, `VictoryVoronoiContainer`, and `VictoryZoomContainer`.\\n\\n```playground\\n<VictoryChart polar\\n  maxDomain={{ x: 360 }}\\n  height={250} width={250}\\n  padding={30}\\n  containerComponent={<VictoryZoomContainer/>}\\n>\\n  <VictoryPolarAxis dependentAxis\\n    style={{\\n      axis: {stroke: \\\"none\\\"},\\n      tickLabels: { fill: \\\"none\\\"},\\n       grid: { stroke: \\\"grey\\\", strokeDasharray: \\\"4, 8\\\" }\\n    }}\\n  />\\n  <VictoryPolarAxis\\n    tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}\\n  />\\n  <VictoryStack\\n    colorScale={[\\\"#ad1b11\\\", \\\"#c43a31\\\", \\\"#dc7a6b\\\"]}\\n    style={{ data: { width: 50} }}\\n  >\\n    <VictoryBar data={sampleDataPolar}/>\\n    <VictoryBar data={sampleDataPolar}/>\\n    <VictoryBar data={sampleDataPolar}/>\\n  </VictoryStack>\\n</VictoryChart>\\n```\\n\\n\\n[`VictoryPolarAxis`]: /docs/victory-polar-axis\\n\"},{\"data\":{\"slug\":\"themes\",\"id\":\"9\",\"title\":\"Themes\",\"category\":\"guides\",\"type\":\"guides\",\"subHeadings\":[]},\"component\":\"src/pages/themes-template\",\"name\":\"Themes\"},{\"data\":{\"id\":10,\"title\":\"Tooltips\",\"category\":\"guides\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Tooltips\",\"depth\":1,\"slug\":\"tooltips\"},{\"type\":\"heading\",\"value\":\"Simple tooltips\",\"depth\":2,\"slug\":\"simple-tooltips\"},{\"type\":\"heading\",\"value\":\"Customizing Tooltips\",\"depth\":2,\"slug\":\"customizing-tooltips\"},{\"type\":\"heading\",\"value\":\"Tooltips with VictoryVoronoiContainer\",\"depth\":2,\"slug\":\"tooltips-with-victory-voronoi-container\"},{\"type\":\"heading\",\"value\":\"Multi-point Tooltips with VictoryVoronoiContainer\",\"depth\":2,\"slug\":\"multi-point-tooltips-with-victory-voronoi-container\"},{\"type\":\"heading\",\"value\":\"Tooltips with Other Events\",\"depth\":2,\"slug\":\"tooltips-with-other-events\"},{\"type\":\"heading\",\"value\":\"Wrapping VictoryTooltip\",\"depth\":2,\"slug\":\"wrapping-victory-tooltip\"},{\"type\":\"heading\",\"value\":\"Victory Native\",\"depth\":2,\"slug\":\"victory-native\"}],\"slug\":\"tooltips\",\"type\":\"guides\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Tooltips\",\"depth\":1,\"slug\":\"tooltips\",\"category\":\"guides\",\"children\":[{\"type\":\"heading\",\"value\":\"Simple tooltips\",\"depth\":2,\"slug\":\"simple-tooltips\"},{\"type\":\"heading\",\"value\":\"Customizing Tooltips\",\"depth\":2,\"slug\":\"customizing-tooltips\"},{\"type\":\"heading\",\"value\":\"Tooltips with VictoryVoronoiContainer\",\"depth\":2,\"slug\":\"tooltips-with-victory-voronoi-container\"},{\"type\":\"heading\",\"value\":\"Multi-point Tooltips with VictoryVoronoiContainer\",\"depth\":2,\"slug\":\"multi-point-tooltips-with-victory-voronoi-container\"},{\"type\":\"heading\",\"value\":\"Tooltips with Other Events\",\"depth\":2,\"slug\":\"tooltips-with-other-events\"},{\"type\":\"heading\",\"value\":\"Wrapping VictoryTooltip\",\"depth\":2,\"slug\":\"wrapping-victory-tooltip\"},{\"type\":\"heading\",\"value\":\"Victory Native\",\"depth\":2,\"slug\":\"victory-native\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 10\\ntitle: Tooltips\\ncategory: guides\\nscope: null\\n---\\n\\n# Tooltips\\n\\n[`VictoryTooltip`][] is a label component with `defaultEvents` It renders a customizable flyout container as well as a `VictoryLabel` component. `VictoryTooltip` can be used with any Victory component by setting the `labelComponent` prop like so `labelComponent={<VictoryTooltip/>`\\n\\nThis guide discusses customization and advanced usage of tooltips in Victory\\n\\n## Simple tooltips\\n\\nThe simplest way to add tooltips to a chart is to use `VictoryTooltip` as a `labelComponent` as in the example below:\\n\\n```playground\\n<VictoryChart\\n  domain={{ x: [0, 11], y: [-10, 10] }}\\n>\\n  <VictoryBar\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 2, y: 5, label: \\\"right-side-up\\\"},\\n      {x: 4, y: -6, label: \\\"upside-down\\\"},\\n      {x: 6, y: 4, label: \\\"tiny\\\"},\\n      {x: 8, y: -5, label: \\\"or a little \\\\n BIGGER\\\"},\\n      {x: 10, y: 7, label: \\\"automatically\\\"}\\n    ]}\\n    style={{\\n      data: {fill: \\\"tomato\\\", width: 20}\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\nWhen tooltips are added to a chart in this way, `defaultEvents` on `VictoryTooltip` are automatically added to the component using them, in this case `VictoryBar`. By default, `VictoryTooltip` will adjust its position, orientation, and the width and height of its container to match the corresponding data and labels.\\n\\n## Customizing Tooltips\\n\\nTooltips can be customized directly on the `VictoryTooltip` component\\n\\n```playground\\n<VictoryChart\\n  domain={{ x: [0, 11], y: [-10, 10] }}\\n>\\n  <VictoryBar\\n    labelComponent={\\n      <VictoryTooltip\\n        cornerRadius={({ datum }) => datum.x > 6 ? 0 : 20}\\n        pointerLength={({ datum }) => datum.y > 0 ? 5 : 20}\\n        flyoutStyle={{\\n          stroke: ({ datum }) => datum.x === 10\\n            ? \\\"tomato\\\"\\n            : \\\"black\\\"\\n        }}\\n      />\\n    }\\n    data={[\\n      {x: 2, y: 5, label: \\\"right-side-up\\\"},\\n      {x: 4, y: -6, label: \\\"upside-down\\\"},\\n      {x: 6, y: 4, label: \\\"tiny\\\"},\\n      {x: 8, y: -5, label: \\\"or a little \\\\n BIGGER\\\"},\\n      {x: 10, y: 7, label: \\\"automatically\\\"}\\n    ]}\\n    style={{\\n      data: {fill: \\\"tomato\\\", width: 20}\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictoryTooltip` is composed of [`VictoryLabel`][] and the primitive [`Flyout`][] component. Both of these components are highly configurable, but may also be replaced if necessary.\\n\\n```playground_norender\\nclass CustomFlyout extends React.Component {\\n  render() {\\n    const {x, y, orientation} = this.props;\\n    const newY = orientation === \\\"bottom\\\" ? y - 35 : y + 35;\\n    return (\\n      <g>\\n        <circle cx={x} cy={newY} r=\\\"20\\\" stroke=\\\"tomato\\\" fill=\\\"none\\\"/>\\n        <circle cx={x} cy={newY} r=\\\"25\\\" stroke=\\\"orange\\\" fill=\\\"none\\\"/>\\n        <circle cx={x} cy={newY} r=\\\"30\\\" stroke=\\\"gold\\\" fill=\\\"none\\\"/>\\n      </g>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n          domain={{ x: [0, 11], y: [-10, 10] }}\\n        >\\n          <VictoryBar\\n            labelComponent={\\n              <VictoryTooltip\\n                flyoutComponent={<CustomFlyout/>}\\n              />\\n            }\\n            data={[\\n              {x: 2, y: 5, label: \\\"A\\\"},\\n              {x: 4, y: -6, label: \\\"B\\\"},\\n              {x: 6, y: 4, label: \\\"C\\\"},\\n              {x: 8, y: -5, label: \\\"D\\\"},\\n              {x: 10, y: 7, label: \\\"E\\\"}\\n            ]}\\n            style={{\\n              data: {fill: \\\"tomato\\\", width: 20},\\n              labels: { fill: \\\"tomato\\\"}\\n            }}\\n          />\\n        </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## Tooltips with VictoryVoronoiContainer\\n\\nVoronoi tooltips are useful for adding tooltips to a line, or adding tooltips to data points that\\nare too small to hover over effectively. `VictoryVoronoiContainer` calculates a voronoi diagram\\nbased on the data of every child component it renders. The voronoi data is used to associate a\\nmouse position with its nearest data point(s). When `VictoryVoronoiContainer` is added as the\\n`containerComponent` of your chart, changes in mouse position will add and remove the `active` prop\\non appropriate data and label elements.\\n\\n```playground\\n<VictoryChart\\n  domain={{x: [0, 5], y: [-5, 5]}}\\n  containerComponent={<VictoryVoronoiContainer/>}\\n>\\n  <VictoryScatter\\n    style={{\\n      data: {fill: \\\"tomato\\\"}, labels: {fill: \\\"tomato\\\"}\\n    }}\\n    size={({ active }) => active ? 5 : 3}\\n    labels={({ datum }) => datum.y}\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 1, y: -4},\\n      {x: 2, y: 4},\\n      {x: 3, y: 2},\\n      {x: 4, y: 1}\\n    ]}\\n  />\\n  <VictoryScatter\\n    style={{\\n      data: {fill: \\\"blue\\\"}, labels: {fill: \\\"blue\\\"}\\n    }}\\n    size={(datum, active) => active ? 5 : 3}\\n    labels={({ datum }) => datum.y}\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 1, y: -3},\\n      {x: 2, y: 3},\\n      {x: 3, y: 3},\\n      {x: 4, y: 0}\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      {x: 1, y: 4},\\n      {x: 2, y: -4},\\n      {x: 3, y: -2},\\n      {x: 4, y: -3}\\n    ]}\\n    labels={({ datum }) => datum.y}\\n    labelComponent={<VictoryTooltip/>}\\n    size={({ active }) => active ? 5 : 3}\\n  />\\n</VictoryChart>\\n```\\n\\n## Multi-point Tooltips with VictoryVoronoiContainer\\n\\n`VictoryVoronoiContainer` can also be used to create multi-point labels when the `labels` prop is\\nprovided. In the example below the `voronoiDimension` prop indicates that the voronoi diagram\\nwill only be specific to the x dimension. For a given mouse position, all data matching the\\nassociated x value will be activated regardless of y value. In the following example, this leads to\\nseveral tooltips being active at the same time. Provide a `labels` and (optionally) a\\n`labelComponent` prop to configure multi-point labels.\\n\\n```playground\\n<VictoryChart\\n  containerComponent={\\n    <VictoryVoronoiContainer voronoiDimension=\\\"x\\\"\\n      labels={({ datum }) => `y: ${datum.y}`}\\n      labelComponent={<VictoryTooltip cornerRadius={0} flyoutStyle={{fill: \\\"white\\\"}}/>}\\n    />\\n  }\\n>\\n  <VictoryAxis/>\\n  <VictoryLine\\n    data={[\\n      {x: 1, y: 5, l: \\\"one\\\"},\\n      {x: 1.5, y: 5, l: \\\"one point five\\\"},\\n      {x: 2, y: 4, l: \\\"two\\\"},\\n      {x: 3, y: -2, l: \\\"three\\\"}\\n    ]}\\n    style={{\\n      data: { stroke: \\\"tomato\\\", strokeWidth: ({ active }) => active ? 4 : 2},\\n      labels: {fill: \\\"tomato\\\"}\\n    }}\\n  />\\n\\n  <VictoryLine\\n    data={[\\n      {x: 1, y: -3, l: \\\"red\\\"},\\n      {x: 2, y: 5, l: \\\"green\\\"},\\n      {x: 3, y: 3, l: \\\"blue\\\"}\\n    ]}\\n    style={{\\n      data: { stroke: \\\"blue\\\", strokeWidth: ({ active }) => active ? 4 : 2},\\n      labels: {fill: \\\"blue\\\"}\\n    }}\\n  />\\n\\n  <VictoryLine\\n    data={[\\n      {x: 1, y: 5, l: \\\"cat\\\"},\\n      {x: 2, y: -4, l: \\\"dog\\\"},\\n      {x: 3, y: -2, l: \\\"bird\\\"}\\n    ]}\\n    style={{\\n      data: { stroke: \\\"black\\\", strokeWidth: ({ active }) => active ? 4 : 2},\\n      labels: {fill: \\\"black\\\"}\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictoryVoronoiContainer` also has a `mouseFollowTooltips` boolean prop that works with single point and multi-point tooltip labels.\\n\\n```playground\\n<VictoryChart domain={{ y: [0, 6] }}\\n  containerComponent={\\n    <VictoryVoronoiContainer\\n      mouseFollowTooltips\\n      voronoiDimension=\\\"x\\\"\\n      labels={({ datum }) => `y: ${datum.y}`}\\n    />\\n  }\\n>\\n  <VictoryScatter\\n  \\tstyle={{ data: { fill: \\\"red\\\" }, labels: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## Tooltips with Other Events\\n\\n`VictoryTooltip` automatically attaches events to data components. When events of the same type are specified for data components, it is necessary to reconcile events so that tooltips still work. For web, the default tooltip events are:\\n\\n```jsx\\nstatic defaultEvents = [{\\n  target: \\\"data\\\",\\n  eventHandlers: {\\n    onMouseOver: () => {\\n      return {\\n        target: \\\"labels\\\",\\n        mutation: () => ({ active: true })\\n      };\\n    },\\n    onMouseOut: () => {\\n      return {\\n        target: \\\"labels\\\",\\n        mutation: () => ({ active: false })\\n      };\\n    }\\n  }\\n}];\\n```\\n\\nWhen other `onMouseOver` and `onMouseOut` events are specified for data, the event returns described above must be added to the events for tooltips to continue to work properly.\\n\\n```playground\\n<VictoryChart\\n  domain={{ x: [0, 11], y: [-10, 10] }}\\n>\\n  <VictoryBar\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 2, y: 5, label: \\\"A\\\"},\\n      {x: 4, y: -6, label: \\\"B\\\"},\\n      {x: 6, y: 4, label: \\\"C\\\"},\\n      {x: 8, y: -5, label: \\\"D\\\"},\\n      {x: 10, y: 7, label: \\\"E\\\"}\\n    ]}\\n    style={{\\n      data: {fill: \\\"tomato\\\", width: 20}\\n    }}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onMouseOver: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: () => ({style: {fill: \\\"gold\\\", width: 30}})\\n            }, {\\n              target: \\\"labels\\\",\\n              mutation: () => ({ active: true })\\n            }\\n          ];\\n        },\\n        onMouseOut: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: () => {}\\n            }, {\\n              target: \\\"labels\\\",\\n              mutation: () => ({ active: false })\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n  />\\n</VictoryChart>\\n```\\n\\n## Wrapping VictoryTooltip\\n\\nThe events that control `VictoryTooltip` are stored on the static `defaultEvents` property. Wrapped instances of `VictoryTooltip` will need to replicate or hoist this property in order to add automatic events to the components that use them.\\n\\n```playground_norender\\nclass CustomTooltip extends React.Component {\\n  static defaultEvents = VictoryTooltip.defaultEvents\\n  render() {\\n    const {x, y} = this.props;\\n    const rotation = `rotate(45 ${x} ${y})`\\n    return (\\n      <g transform={rotation}>\\n        <VictoryTooltip {...this.props} renderInPortal={false}/>\\n      </g>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n          domain={{ x: [0, 11], y: [-10, 10] }}\\n        >\\n          <VictoryBar\\n            labelComponent={<CustomTooltip/>}\\n            data={[\\n              {x: 2, y: 5, label: \\\"A\\\"},\\n              {x: 4, y: -6, label: \\\"B\\\"},\\n              {x: 6, y: 4, label: \\\"C\\\"},\\n              {x: 8, y: -5, label: \\\"D\\\"},\\n              {x: 10, y: 7, label: \\\"E\\\"}\\n            ]}\\n            style={{\\n              data: {fill: \\\"tomato\\\", width: 20}\\n            }}\\n          />\\n        </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## Victory Native\\n\\nIn Victory Native tooltips are much more reliable when using `VictoryVoronoiContainer`. Using `VictoryVoronoiContainer` registers all touch events on the container itself, which mitigates interference with other chart element, which can be a problem on some platforms. Showing the closest data point with `VictoryVoronoiContainer` also increases the tap targets for the tooltip, which can otherwise be quite small. Set `VictoryVoronoiContainer` as the `containerComponent` prop on the outermost Victory component.\\n\\n```jsx\\n<VictoryChart containerComponent={<VictoryVoronoiContainer />} >\\n  <VictoryScatter\\n    labelComponent={<VictoryTooltip />}\\n    labels={({ datum }) => datum.y}\\n    style={{ data: { fill: ({ datum }) => datum.fill } }}\\n    data={[\\n      { x: 1, y: 3 },\\n      { x: 3, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n[`victorytooltip`]: /docs/victory-tooltip\\n\\n[`victorylabel`]: /docs/victory-label\\n\\n[`flyout`]: /docs/victory-primitives#flyout\\n\",\"content\":\"# Tooltips\\n\\n[`VictoryTooltip`][] is a label component with `defaultEvents` It renders a customizable flyout container as well as a `VictoryLabel` component. `VictoryTooltip` can be used with any Victory component by setting the `labelComponent` prop like so `labelComponent={<VictoryTooltip/>`\\n\\nThis guide discusses customization and advanced usage of tooltips in Victory\\n\\n## Simple tooltips\\n\\nThe simplest way to add tooltips to a chart is to use `VictoryTooltip` as a `labelComponent` as in the example below:\\n\\n```playground\\n<VictoryChart\\n  domain={{ x: [0, 11], y: [-10, 10] }}\\n>\\n  <VictoryBar\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 2, y: 5, label: \\\"right-side-up\\\"},\\n      {x: 4, y: -6, label: \\\"upside-down\\\"},\\n      {x: 6, y: 4, label: \\\"tiny\\\"},\\n      {x: 8, y: -5, label: \\\"or a little \\\\n BIGGER\\\"},\\n      {x: 10, y: 7, label: \\\"automatically\\\"}\\n    ]}\\n    style={{\\n      data: {fill: \\\"tomato\\\", width: 20}\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n\\nWhen tooltips are added to a chart in this way, `defaultEvents` on `VictoryTooltip` are automatically added to the component using them, in this case `VictoryBar`. By default, `VictoryTooltip` will adjust its position, orientation, and the width and height of its container to match the corresponding data and labels.\\n\\n## Customizing Tooltips\\n\\nTooltips can be customized directly on the `VictoryTooltip` component\\n\\n```playground\\n<VictoryChart\\n  domain={{ x: [0, 11], y: [-10, 10] }}\\n>\\n  <VictoryBar\\n    labelComponent={\\n      <VictoryTooltip\\n        cornerRadius={({ datum }) => datum.x > 6 ? 0 : 20}\\n        pointerLength={({ datum }) => datum.y > 0 ? 5 : 20}\\n        flyoutStyle={{\\n          stroke: ({ datum }) => datum.x === 10\\n            ? \\\"tomato\\\"\\n            : \\\"black\\\"\\n        }}\\n      />\\n    }\\n    data={[\\n      {x: 2, y: 5, label: \\\"right-side-up\\\"},\\n      {x: 4, y: -6, label: \\\"upside-down\\\"},\\n      {x: 6, y: 4, label: \\\"tiny\\\"},\\n      {x: 8, y: -5, label: \\\"or a little \\\\n BIGGER\\\"},\\n      {x: 10, y: 7, label: \\\"automatically\\\"}\\n    ]}\\n    style={{\\n      data: {fill: \\\"tomato\\\", width: 20}\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictoryTooltip` is composed of [`VictoryLabel`][] and the primitive [`Flyout`][] component. Both of these components are highly configurable, but may also be replaced if necessary.\\n\\n```playground_norender\\nclass CustomFlyout extends React.Component {\\n  render() {\\n    const {x, y, orientation} = this.props;\\n    const newY = orientation === \\\"bottom\\\" ? y - 35 : y + 35;\\n    return (\\n      <g>\\n        <circle cx={x} cy={newY} r=\\\"20\\\" stroke=\\\"tomato\\\" fill=\\\"none\\\"/>\\n        <circle cx={x} cy={newY} r=\\\"25\\\" stroke=\\\"orange\\\" fill=\\\"none\\\"/>\\n        <circle cx={x} cy={newY} r=\\\"30\\\" stroke=\\\"gold\\\" fill=\\\"none\\\"/>\\n      </g>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n          domain={{ x: [0, 11], y: [-10, 10] }}\\n        >\\n          <VictoryBar\\n            labelComponent={\\n              <VictoryTooltip\\n                flyoutComponent={<CustomFlyout/>}\\n              />\\n            }\\n            data={[\\n              {x: 2, y: 5, label: \\\"A\\\"},\\n              {x: 4, y: -6, label: \\\"B\\\"},\\n              {x: 6, y: 4, label: \\\"C\\\"},\\n              {x: 8, y: -5, label: \\\"D\\\"},\\n              {x: 10, y: 7, label: \\\"E\\\"}\\n            ]}\\n            style={{\\n              data: {fill: \\\"tomato\\\", width: 20},\\n              labels: { fill: \\\"tomato\\\"}\\n            }}\\n          />\\n        </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## Tooltips with VictoryVoronoiContainer\\n\\nVoronoi tooltips are useful for adding tooltips to a line, or adding tooltips to data points that\\nare too small to hover over effectively. `VictoryVoronoiContainer` calculates a voronoi diagram\\nbased on the data of every child component it renders. The voronoi data is used to associate a\\nmouse position with its nearest data point(s). When `VictoryVoronoiContainer` is added as the\\n`containerComponent` of your chart, changes in mouse position will add and remove the `active` prop\\non appropriate data and label elements.\\n\\n\\n```playground\\n<VictoryChart\\n  domain={{x: [0, 5], y: [-5, 5]}}\\n  containerComponent={<VictoryVoronoiContainer/>}\\n>\\n  <VictoryScatter\\n    style={{\\n      data: {fill: \\\"tomato\\\"}, labels: {fill: \\\"tomato\\\"}\\n    }}\\n    size={({ active }) => active ? 5 : 3}\\n    labels={({ datum }) => datum.y}\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 1, y: -4},\\n      {x: 2, y: 4},\\n      {x: 3, y: 2},\\n      {x: 4, y: 1}\\n    ]}\\n  />\\n  <VictoryScatter\\n    style={{\\n      data: {fill: \\\"blue\\\"}, labels: {fill: \\\"blue\\\"}\\n    }}\\n    size={(datum, active) => active ? 5 : 3}\\n    labels={({ datum }) => datum.y}\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 1, y: -3},\\n      {x: 2, y: 3},\\n      {x: 3, y: 3},\\n      {x: 4, y: 0}\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      {x: 1, y: 4},\\n      {x: 2, y: -4},\\n      {x: 3, y: -2},\\n      {x: 4, y: -3}\\n    ]}\\n    labels={({ datum }) => datum.y}\\n    labelComponent={<VictoryTooltip/>}\\n    size={({ active }) => active ? 5 : 3}\\n  />\\n</VictoryChart>\\n```\\n\\n## Multi-point Tooltips with VictoryVoronoiContainer\\n\\n`VictoryVoronoiContainer` can also be used to create multi-point labels when the `labels` prop is\\nprovided. In the example below the `voronoiDimension` prop indicates that the voronoi diagram\\nwill only be specific to the x dimension. For a given mouse position, all data matching the\\nassociated x value will be activated regardless of y value. In the following example, this leads to\\nseveral tooltips being active at the same time. Provide a `labels` and (optionally) a\\n`labelComponent` prop to configure multi-point labels.\\n\\n```playground\\n<VictoryChart\\n  containerComponent={\\n    <VictoryVoronoiContainer voronoiDimension=\\\"x\\\"\\n      labels={({ datum }) => `y: ${datum.y}`}\\n      labelComponent={<VictoryTooltip cornerRadius={0} flyoutStyle={{fill: \\\"white\\\"}}/>}\\n    />\\n  }\\n>\\n  <VictoryAxis/>\\n  <VictoryLine\\n    data={[\\n      {x: 1, y: 5, l: \\\"one\\\"},\\n      {x: 1.5, y: 5, l: \\\"one point five\\\"},\\n      {x: 2, y: 4, l: \\\"two\\\"},\\n      {x: 3, y: -2, l: \\\"three\\\"}\\n    ]}\\n    style={{\\n      data: { stroke: \\\"tomato\\\", strokeWidth: ({ active }) => active ? 4 : 2},\\n      labels: {fill: \\\"tomato\\\"}\\n    }}\\n  />\\n\\n  <VictoryLine\\n    data={[\\n      {x: 1, y: -3, l: \\\"red\\\"},\\n      {x: 2, y: 5, l: \\\"green\\\"},\\n      {x: 3, y: 3, l: \\\"blue\\\"}\\n    ]}\\n    style={{\\n      data: { stroke: \\\"blue\\\", strokeWidth: ({ active }) => active ? 4 : 2},\\n      labels: {fill: \\\"blue\\\"}\\n    }}\\n  />\\n\\n  <VictoryLine\\n    data={[\\n      {x: 1, y: 5, l: \\\"cat\\\"},\\n      {x: 2, y: -4, l: \\\"dog\\\"},\\n      {x: 3, y: -2, l: \\\"bird\\\"}\\n    ]}\\n    style={{\\n      data: { stroke: \\\"black\\\", strokeWidth: ({ active }) => active ? 4 : 2},\\n      labels: {fill: \\\"black\\\"}\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictoryVoronoiContainer` also has a `mouseFollowTooltips` boolean prop that works with single point and multi-point tooltip labels.\\n\\n```playground\\n<VictoryChart domain={{ y: [0, 6] }}\\n  containerComponent={\\n    <VictoryVoronoiContainer\\n      mouseFollowTooltips\\n      voronoiDimension=\\\"x\\\"\\n      labels={({ datum }) => `y: ${datum.y}`}\\n    />\\n  }\\n>\\n  <VictoryScatter\\n  \\tstyle={{ data: { fill: \\\"red\\\" }, labels: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n\\n## Tooltips with Other Events\\n\\n`VictoryTooltip` automatically attaches events to data components. When events of the same type are specified for data components, it is necessary to reconcile events so that tooltips still work. For web, the default tooltip events are:\\n\\n```jsx\\nstatic defaultEvents = [{\\n  target: \\\"data\\\",\\n  eventHandlers: {\\n    onMouseOver: () => {\\n      return {\\n        target: \\\"labels\\\",\\n        mutation: () => ({ active: true })\\n      };\\n    },\\n    onMouseOut: () => {\\n      return {\\n        target: \\\"labels\\\",\\n        mutation: () => ({ active: false })\\n      };\\n    }\\n  }\\n}];\\n```\\n\\nWhen other `onMouseOver` and `onMouseOut` events are specified for data, the event returns described above must be added to the events for tooltips to continue to work properly.\\n\\n```playground\\n<VictoryChart\\n  domain={{ x: [0, 11], y: [-10, 10] }}\\n>\\n  <VictoryBar\\n    labelComponent={<VictoryTooltip/>}\\n    data={[\\n      {x: 2, y: 5, label: \\\"A\\\"},\\n      {x: 4, y: -6, label: \\\"B\\\"},\\n      {x: 6, y: 4, label: \\\"C\\\"},\\n      {x: 8, y: -5, label: \\\"D\\\"},\\n      {x: 10, y: 7, label: \\\"E\\\"}\\n    ]}\\n    style={{\\n      data: {fill: \\\"tomato\\\", width: 20}\\n    }}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onMouseOver: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: () => ({style: {fill: \\\"gold\\\", width: 30}})\\n            }, {\\n              target: \\\"labels\\\",\\n              mutation: () => ({ active: true })\\n            }\\n          ];\\n        },\\n        onMouseOut: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: () => {}\\n            }, {\\n              target: \\\"labels\\\",\\n              mutation: () => ({ active: false })\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n  />\\n</VictoryChart>\\n```\\n\\n## Wrapping VictoryTooltip\\n\\nThe events that control `VictoryTooltip` are stored on the static `defaultEvents` property. Wrapped instances of `VictoryTooltip` will need to replicate or hoist this property in order to add automatic events to the components that use them.\\n\\n\\n```playground_norender\\nclass CustomTooltip extends React.Component {\\n  static defaultEvents = VictoryTooltip.defaultEvents\\n  render() {\\n    const {x, y} = this.props;\\n    const rotation = `rotate(45 ${x} ${y})`\\n    return (\\n      <g transform={rotation}>\\n        <VictoryTooltip {...this.props} renderInPortal={false}/>\\n      </g>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart\\n          domain={{ x: [0, 11], y: [-10, 10] }}\\n        >\\n          <VictoryBar\\n            labelComponent={<CustomTooltip/>}\\n            data={[\\n              {x: 2, y: 5, label: \\\"A\\\"},\\n              {x: 4, y: -6, label: \\\"B\\\"},\\n              {x: 6, y: 4, label: \\\"C\\\"},\\n              {x: 8, y: -5, label: \\\"D\\\"},\\n              {x: 10, y: 7, label: \\\"E\\\"}\\n            ]}\\n            style={{\\n              data: {fill: \\\"tomato\\\", width: 20}\\n            }}\\n          />\\n        </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## Victory Native\\nIn Victory Native tooltips are much more reliable when using `VictoryVoronoiContainer`. Using `VictoryVoronoiContainer` registers all touch events on the container itself, which mitigates interference with other chart element, which can be a problem on some platforms. Showing the closest data point with `VictoryVoronoiContainer` also increases the tap targets for the tooltip, which can otherwise be quite small. Set `VictoryVoronoiContainer` as the `containerComponent` prop on the outermost Victory component.\\n\\n```jsx\\n<VictoryChart containerComponent={<VictoryVoronoiContainer />} >\\n  <VictoryScatter\\n    labelComponent={<VictoryTooltip />}\\n    labels={({ datum }) => datum.y}\\n    style={{ data: { fill: ({ datum }) => datum.fill } }}\\n    data={[\\n      { x: 1, y: 3 },\\n      { x: 3, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n[`VictoryTooltip`]: /docs/victory-tooltip\\n[`VictoryLabel`]: /docs/victory-label\\n[`Flyout`]: /docs/victory-primitives#flyout\\n\"},{\"data\":{\"id\":11,\"title\":\"Zoom on Large Datasets\",\"category\":\"guides\",\"scope\":[\"_\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Zoom on Large Datasets\",\"depth\":1,\"slug\":\"zoom-on-large-datasets\"},{\"type\":\"heading\",\"value\":\"Basic scenario: time-series data\",\"depth\":2,\"slug\":\"basic-scenario-time-series-data\"},{\"type\":\"heading\",\"value\":\"Render only visible points\",\"depth\":2,\"slug\":\"render-only-visible-points\"},{\"type\":\"heading\",\"value\":\"Render a small sample of points\",\"depth\":2,\"slug\":\"render-a-small-sample-of-points\"},{\"type\":\"heading\",\"value\":\"Demo\",\"depth\":2,\"slug\":\"demo\"},{\"type\":\"heading\",\"value\":\"Extending this Demo\",\"depth\":2,\"slug\":\"extending-this-demo\"}],\"slug\":\"zoom-on-large-datasets\",\"type\":\"guides\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Zoom on Large Datasets\",\"depth\":1,\"slug\":\"zoom-on-large-datasets\",\"category\":\"guides\",\"children\":[{\"type\":\"heading\",\"value\":\"Basic scenario: time-series data\",\"depth\":2,\"slug\":\"basic-scenario-time-series-data\"},{\"type\":\"heading\",\"value\":\"Render only visible points\",\"depth\":2,\"slug\":\"render-only-visible-points\"},{\"type\":\"heading\",\"value\":\"Render a small sample of points\",\"depth\":2,\"slug\":\"render-a-small-sample-of-points\"},{\"type\":\"heading\",\"value\":\"Demo\",\"depth\":2,\"slug\":\"demo\"},{\"type\":\"heading\",\"value\":\"Extending this Demo\",\"depth\":2,\"slug\":\"extending-this-demo\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 11\\ntitle: Zoom on Large Datasets\\ncategory: guides\\nscope:\\n  - _\\n---\\n\\n# Zoom on Large Datasets\\n\\nVictory can handle hundreds of data points, but what if you'd like chart thousands of points?\\n[VictoryZoomContainer][] can be useful here, allowing the user to focus on the subset of data they are most interested in.\\n\\nBy default Victory will render all data points in a dataset.\\nFor large datasets this behavior can be overridden, and this guide will show you how.\\nIf you haven't used it before, read about the [VictoryZoomContainer][] first, then come back to this guide.\\n\\nIn a hurry? [Skip to the demo][].\\n\\n## Basic scenario: time-series data\\n\\nIn this guide, we'll be working with time-series data. We'll make a few basic assumptions:\\n\\n1.  zooming will be done only on the x (or time) dimension,\\n2.  our data will be ordered by x, from earliest to latest, and\\n3.  the dataset is static - no new data will arrive while the user is interacting with the chart.\\n\\nThese just serve to simplify the example. We'll start with a simple chart:\\n\\n```js\\nclass CustomChart extends React.Component {\\n\\trender() {\\n  \\treturn (\\n      <VictoryChart containerComponent={<VictoryZoomContainer/>}\\n        <VictoryScatter data={this.props.data} />\\n      </VictoryChart>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<CustomChart data={allData}/>, mountNode);\\n```\\n\\n## Render only visible points\\n\\nRather than passing all our data to the `data` prop, we'll first remove any data that isn't currently visible.\\nTo do this, we must keep track of the chart's visible domain;\\n[VictoryZoomContainer][] has an `onZoomDomainChange` prop that will allow us to do exactly that:\\n\\n```js\\n<VictoryChart\\n  containerComponent={<VictoryZoomContainer\\n    onZoomDomainChange={this.onDomainChange.bind(this)}\\n  />}\\n>\\n  <VictoryScatter data={this.getData()} />\\n</VictoryChart>\\n```\\n\\nUpdate the state every time the domain changes (note that we are only keeping track of the `x` dimension):\\n\\n```js\\nonDomainChange(domain) {\\n  this.setState({\\n    zoomedXDomain: domain.x,\\n  });\\n}\\n```\\n\\nUse this `zoomedXDomain` state to filter out all data that isn't currently visible.\\nHere we're making a simple `getData` method; note the data array's `filter` function:\\n\\n```js\\ngetData() {\\n  const { zoomedXDomain } = this.state;\\n  const { data } = this.props;\\n  return data.filter(\\n    // is d \\\"between\\\" the ends of the visible x-domain?\\n    (d) => (d.x >= zoomedXDomain[0] && d.x <= zoomedXDomain[1]));\\n}\\n```\\n\\nBecause we are dynamically changing the `data` prop on [VictoryChart][],\\nwe must also explicitly set its `domain`.\\nBy default `VictoryChart` will calculate a domain from `data`;\\nin this case that would mean that the chart would \\\"forget\\\" about the rest of the data as the user zoomed in.\\nIn fact, there would be no way to zoom back out!\\n\\nTo remedy this, we must calculate the domain of the entire dataset:\\n\\n```js\\ngetEntireDomain(props) {\\n  const { data } = props;\\n  return {\\n    y: [_.minBy(data, d => d.y).y, _.maxBy(data, d => d.y).y],\\n    x: [ data[0].x, _.last(data).x ]\\n  };\\n}\\n```\\n\\nWe use [Lodash][]'s `minBy` and `maxBy` functions to find the domain of `y`.\\nBecause we assume that the data is ordered by `x`, we can use the first and last points for the `x` domain.\\n\\nBecause we are assuming the data is static we just need to call this function once, in the constructor of `CustomChart`.\\nThe calculated `x` domain will also be used as the initial value for `state.zoomedXDomain`:\\n\\n```js\\nconstructor(props) {\\n  super();\\n  this.entireDomain = this.getEntireDomain(props);\\n  this.state = {\\n    zoomedXDomain: this.entireDomain.x,\\n  };\\n}\\n```\\n\\nThe static value `this.entireDomain` can then be used by `VictoryChart`:\\n\\n```js\\n<VictoryChart\\n  domain={this.entireDomain}\\n  containerComponent={<VictoryZoomContainer\\n    zoomDimension=\\\"x\\\"\\n    onZoomDomainChange={this.onDomainChange.bind(this)}\\n  />}\\n>\\n  <VictoryScatter data={this.getData()} />\\n</VictoryChart>\\n```\\n\\nNow we are only rendering the visible points, but this step isn't nearly enough:\\nwhen the chart is zoomed out we still render all of the data points!\\n\\n## Render a small sample of points\\n\\nThere are a number of possible methods to reducing the number of visible data points rendered.\\nWe'll use the simplest method: selecting only every `k`th point, and discarding all others.\\n`k` is determined simply:\\nif there are 5,000 points and we only want to show 100, then `k` is 50.\\n\\nWe'll add a `maxPoints` prop to `CustomChart`\\nwhich will determine the maximum number of points returned by `getData`.\\nAll of the existing logic in `getData` will stay\\nand another `filter` will be added afterwards:\\n\\n```js\\ngetData() {\\n  const { zoomedXDomain } = this.state;\\n  const { data, maxPoints } = this.props;\\n  const filtered = data.filter(\\n    (d) => (d.x >= zoomedXDomain[0] && d.x <= zoomedXDomain[1]));\\n\\n  // new code here...\\n  if (filtered.length > maxPoints ) {\\n    const k = Math.ceil(filtered.length / maxPoints);\\n    return filtered.filter(\\n      (d, i) => ((i % k) === 0)\\n    );\\n  }\\n  return filtered;\\n}\\n```\\n\\nNow the chart will always render at most `maxPoints`,\\nno matter the zoom level.\\n\\n## Demo\\n\\n```playground_norender\\n// 10000 points (10 / 0.001 = 10000) - see what happens when you render 50k or 100k\\nconst allData = _.range(0, 10, 0.001).map(x => ({\\n\\tx: x,\\n  y: Math.sin(Math.PI*x/2) * x / 10\\n}));\\n\\nclass CustomChart extends React.Component {\\n  constructor(props) {\\n  \\tsuper();\\n    this.entireDomain = this.getEntireDomain(props);\\n   \\tthis.state = {\\n    \\tzoomedXDomain: this.entireDomain.x,\\n    };\\n  }\\n\\tonDomainChange(domain) {\\n  \\tthis.setState({\\n    \\tzoomedXDomain: domain.x,\\n    });\\n  }\\n  getData() {\\n  \\tconst { zoomedXDomain } = this.state;\\n    const { data, maxPoints } = this.props;\\n  \\tconst filtered = data.filter(\\n    \\t(d) => (d.x >= zoomedXDomain[0] && d.x <= zoomedXDomain[1]));\\n\\n    if (filtered.length > maxPoints ) {\\n      const k = Math.ceil(filtered.length / maxPoints);\\n    \\treturn filtered.filter(\\n      \\t(d, i) => ((i % k) === 0)\\n      );\\n    }\\n    return filtered;\\n  }\\n  getEntireDomain(props) {\\n  \\tconst { data } = props;\\n    return {\\n    \\ty: [_.minBy(data, d => d.y).y, _.maxBy(data, d => d.y).y],\\n      x: [ data[0].x, _.last(data).x ]\\n    };\\n  }\\n  getZoomFactor() {\\n    const { zoomedXDomain } = this.state;\\n    const factor = 10 / (zoomedXDomain[1] - zoomedXDomain[0]);\\n    return _.round(factor, factor < 3 ? 1 : 0);\\n  }\\n\\trender() {\\n    const renderedData = this.getData();\\n  \\treturn (\\n    \\t<div>\\n        <VictoryChart\\n          domain={this.entireDomain}\\n          containerComponent={<VictoryZoomContainer\\n            zoomDimension=\\\"x\\\"\\n            onZoomDomainChange={this.onDomainChange.bind(this)}\\n            minimumZoom={{x: 1/10000}}\\n          />}\\n        >\\n          <VictoryScatter data={renderedData} />\\n        </VictoryChart>\\n        <div>\\n          {this.getZoomFactor()}x zoom;\\n          rendering {renderedData.length} of {this.props.data.length}\\n        </div>\\n      </div>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<CustomChart data={allData} maxPoints={120} />, mountNode);\\n```\\n\\n## Extending this Demo\\n\\nThis guide serves a start, but you might have some questions:\\n\\n-   _How big should `maxPoints` be?_ For most situations between 50 and 150 is ideal.\\n-   _What if I want to render millions of data points?_ This concept can be extended to millions of points, but you'll need the help of a library to handle the sampling. Try [Crossfilter][].\\n-   _Can I remove the \\\"flicker\\\" of points as I zoom in?_ Yes, but `getData()` will have to be a little more complex.\\n    This apparent movement of the points while zooming happens because different points are chosen to be displayed.\\n    Here is an example that reduces flicker by reliably choosing the same data points to display:\\n\\n```js\\ngetData() {\\n\\tconst { zoomedXDomain } = this.state;\\n\\tconst { data, maxPoints } = this.props;\\n\\n\\tconst startIndex = data.findIndex((d) => d.x >= zoomedXDomain[0]);\\n\\tconst endIndex = data.findIndex((d) => d.x > zoomedXDomain[1]);\\n\\tconst filtered = data.slice(startIndex, endIndex);\\n\\n\\tif (filtered.length > maxPoints ) {\\n\\t\\t// limit k to powers of 2, e.g. 64, 128, 256\\n\\t\\t// so that the same points will be chosen reliably, reducing flicker\\n\\t\\tconst k = Math.pow(2, Math.ceil(Math.log2(filtered.length / maxPoints)));\\n\\t\\treturn filtered.filter(\\n\\t\\t\\t// ensure modulo is always calculated from same reference: i + startIndex\\n\\t\\t\\t(d, i) => (((i + startIndex) % k) === 0)\\n\\t\\t);\\n\\t}\\n\\treturn filtered;\\n}\\n```\\n\\n[victoryzoomcontainer]: /docs/victory-zoom-container\\n\\n[victorychart]: /docs/victory-chart\\n\\n[skip to the demo]: /guides/zoom-large-data#demo\\n\\n[lodash]: https://lodash.com/\\n\\n[crossfilter]: http://square.github.io/crossfilter/\\n\",\"content\":\"# Zoom on Large Datasets\\n\\nVictory can handle hundreds of data points, but what if you'd like chart thousands of points?\\n[VictoryZoomContainer][] can be useful here, allowing the user to focus on the subset of data they are most interested in.\\n\\nBy default Victory will render all data points in a dataset.\\nFor large datasets this behavior can be overridden, and this guide will show you how.\\nIf you haven't used it before, read about the [VictoryZoomContainer][] first, then come back to this guide.\\n\\nIn a hurry? [Skip to the demo][].\\n\\n## Basic scenario: time-series data\\n\\nIn this guide, we'll be working with time-series data. We'll make a few basic assumptions:\\n\\n1.  zooming will be done only on the x (or time) dimension,\\n2.  our data will be ordered by x, from earliest to latest, and\\n3.  the dataset is static - no new data will arrive while the user is interacting with the chart.\\n\\nThese just serve to simplify the example. We'll start with a simple chart:\\n\\n```js\\nclass CustomChart extends React.Component {\\n\\trender() {\\n  \\treturn (\\n      <VictoryChart containerComponent={<VictoryZoomContainer/>}\\n        <VictoryScatter data={this.props.data} />\\n      </VictoryChart>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<CustomChart data={allData}/>, mountNode);\\n```\\n\\n## Render only visible points\\n\\nRather than passing all our data to the `data` prop, we'll first remove any data that isn't currently visible.\\nTo do this, we must keep track of the chart's visible domain;\\n[VictoryZoomContainer][] has an `onZoomDomainChange` prop that will allow us to do exactly that:\\n\\n```js\\n<VictoryChart\\n  containerComponent={<VictoryZoomContainer\\n    onZoomDomainChange={this.onDomainChange.bind(this)}\\n  />}\\n>\\n  <VictoryScatter data={this.getData()} />\\n</VictoryChart>\\n```\\n\\nUpdate the state every time the domain changes (note that we are only keeping track of the `x` dimension):\\n\\n```js\\nonDomainChange(domain) {\\n  this.setState({\\n    zoomedXDomain: domain.x,\\n  });\\n}\\n```\\n\\nUse this `zoomedXDomain` state to filter out all data that isn't currently visible.\\nHere we're making a simple `getData` method; note the data array's `filter` function:\\n\\n```js\\ngetData() {\\n  const { zoomedXDomain } = this.state;\\n  const { data } = this.props;\\n  return data.filter(\\n    // is d \\\"between\\\" the ends of the visible x-domain?\\n    (d) => (d.x >= zoomedXDomain[0] && d.x <= zoomedXDomain[1]));\\n}\\n```\\n\\nBecause we are dynamically changing the `data` prop on [VictoryChart][],\\nwe must also explicitly set its `domain`.\\nBy default `VictoryChart` will calculate a domain from `data`;\\nin this case that would mean that the chart would \\\"forget\\\" about the rest of the data as the user zoomed in.\\nIn fact, there would be no way to zoom back out!\\n\\nTo remedy this, we must calculate the domain of the entire dataset:\\n\\n```js\\ngetEntireDomain(props) {\\n  const { data } = props;\\n  return {\\n    y: [_.minBy(data, d => d.y).y, _.maxBy(data, d => d.y).y],\\n    x: [ data[0].x, _.last(data).x ]\\n  };\\n}\\n```\\n\\nWe use [Lodash][]'s `minBy` and `maxBy` functions to find the domain of `y`.\\nBecause we assume that the data is ordered by `x`, we can use the first and last points for the `x` domain.\\n\\nBecause we are assuming the data is static we just need to call this function once, in the constructor of `CustomChart`.\\nThe calculated `x` domain will also be used as the initial value for `state.zoomedXDomain`:\\n\\n```js\\nconstructor(props) {\\n  super();\\n  this.entireDomain = this.getEntireDomain(props);\\n  this.state = {\\n    zoomedXDomain: this.entireDomain.x,\\n  };\\n}\\n```\\n\\nThe static value `this.entireDomain` can then be used by `VictoryChart`:\\n```js\\n<VictoryChart\\n  domain={this.entireDomain}\\n  containerComponent={<VictoryZoomContainer\\n    zoomDimension=\\\"x\\\"\\n    onZoomDomainChange={this.onDomainChange.bind(this)}\\n  />}\\n>\\n  <VictoryScatter data={this.getData()} />\\n</VictoryChart>\\n```\\n\\nNow we are only rendering the visible points, but this step isn't nearly enough:\\nwhen the chart is zoomed out we still render all of the data points!\\n\\n## Render a small sample of points\\n\\nThere are a number of possible methods to reducing the number of visible data points rendered.\\nWe'll use the simplest method: selecting only every `k`th point, and discarding all others.\\n`k` is determined simply:\\nif there are 5,000 points and we only want to show 100, then `k` is 50.\\n\\nWe'll add a `maxPoints` prop to `CustomChart`\\nwhich will determine the maximum number of points returned by `getData`.\\nAll of the existing logic in `getData` will stay\\nand another `filter` will be added afterwards:\\n\\n```js\\ngetData() {\\n  const { zoomedXDomain } = this.state;\\n  const { data, maxPoints } = this.props;\\n  const filtered = data.filter(\\n    (d) => (d.x >= zoomedXDomain[0] && d.x <= zoomedXDomain[1]));\\n\\n  // new code here...\\n  if (filtered.length > maxPoints ) {\\n    const k = Math.ceil(filtered.length / maxPoints);\\n    return filtered.filter(\\n      (d, i) => ((i % k) === 0)\\n    );\\n  }\\n  return filtered;\\n}\\n```\\n\\nNow the chart will always render at most `maxPoints`,\\nno matter the zoom level.\\n\\n## Demo\\n\\n```playground_norender\\n// 10000 points (10 / 0.001 = 10000) - see what happens when you render 50k or 100k\\nconst allData = _.range(0, 10, 0.001).map(x => ({\\n\\tx: x,\\n  y: Math.sin(Math.PI*x/2) * x / 10\\n}));\\n\\nclass CustomChart extends React.Component {\\n  constructor(props) {\\n  \\tsuper();\\n    this.entireDomain = this.getEntireDomain(props);\\n   \\tthis.state = {\\n    \\tzoomedXDomain: this.entireDomain.x,\\n    };\\n  }\\n\\tonDomainChange(domain) {\\n  \\tthis.setState({\\n    \\tzoomedXDomain: domain.x,\\n    });\\n  }\\n  getData() {\\n  \\tconst { zoomedXDomain } = this.state;\\n    const { data, maxPoints } = this.props;\\n  \\tconst filtered = data.filter(\\n    \\t(d) => (d.x >= zoomedXDomain[0] && d.x <= zoomedXDomain[1]));\\n\\n    if (filtered.length > maxPoints ) {\\n      const k = Math.ceil(filtered.length / maxPoints);\\n    \\treturn filtered.filter(\\n      \\t(d, i) => ((i % k) === 0)\\n      );\\n    }\\n    return filtered;\\n  }\\n  getEntireDomain(props) {\\n  \\tconst { data } = props;\\n    return {\\n    \\ty: [_.minBy(data, d => d.y).y, _.maxBy(data, d => d.y).y],\\n      x: [ data[0].x, _.last(data).x ]\\n    };\\n  }\\n  getZoomFactor() {\\n    const { zoomedXDomain } = this.state;\\n    const factor = 10 / (zoomedXDomain[1] - zoomedXDomain[0]);\\n    return _.round(factor, factor < 3 ? 1 : 0);\\n  }\\n\\trender() {\\n    const renderedData = this.getData();\\n  \\treturn (\\n    \\t<div>\\n        <VictoryChart\\n          domain={this.entireDomain}\\n          containerComponent={<VictoryZoomContainer\\n            zoomDimension=\\\"x\\\"\\n            onZoomDomainChange={this.onDomainChange.bind(this)}\\n            minimumZoom={{x: 1/10000}}\\n          />}\\n        >\\n          <VictoryScatter data={renderedData} />\\n        </VictoryChart>\\n        <div>\\n          {this.getZoomFactor()}x zoom;\\n          rendering {renderedData.length} of {this.props.data.length}\\n        </div>\\n      </div>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<CustomChart data={allData} maxPoints={120} />, mountNode);\\n```\\n\\n## Extending this Demo\\n\\nThis guide serves a start, but you might have some questions:\\n\\n* _How big should `maxPoints` be?_ For most situations between 50 and 150 is ideal.\\n* _What if I want to render millions of data points?_ This concept can be extended to millions of points, but you'll need the help of a library to handle the sampling. Try [Crossfilter][].\\n* _Can I remove the \\\"flicker\\\" of points as I zoom in?_ Yes, but `getData()` will have to be a little more complex.\\nThis apparent movement of the points while zooming happens because different points are chosen to be displayed.\\nHere is an example that reduces flicker by reliably choosing the same data points to display:\\n\\n```js\\ngetData() {\\n\\tconst { zoomedXDomain } = this.state;\\n\\tconst { data, maxPoints } = this.props;\\n\\n\\tconst startIndex = data.findIndex((d) => d.x >= zoomedXDomain[0]);\\n\\tconst endIndex = data.findIndex((d) => d.x > zoomedXDomain[1]);\\n\\tconst filtered = data.slice(startIndex, endIndex);\\n\\n\\tif (filtered.length > maxPoints ) {\\n\\t\\t// limit k to powers of 2, e.g. 64, 128, 256\\n\\t\\t// so that the same points will be chosen reliably, reducing flicker\\n\\t\\tconst k = Math.pow(2, Math.ceil(Math.log2(filtered.length / maxPoints)));\\n\\t\\treturn filtered.filter(\\n\\t\\t\\t// ensure modulo is always calculated from same reference: i + startIndex\\n\\t\\t\\t(d, i) => (((i + startIndex) % k) === 0)\\n\\t\\t);\\n\\t}\\n\\treturn filtered;\\n}\\n```\\n\\n[VictoryZoomContainer]: /docs/victory-zoom-container\\n[VictoryChart]: /docs/victory-chart\\n[Skip to the demo]: /guides/zoom-large-data#demo\\n[Lodash]: https://lodash.com/\\n[Crossfilter]: http://square.github.io/crossfilter/\\n\"},{\"data\":{\"id\":2,\"title\":\"Common Props\",\"category\":\"documentation\",\"type\":\"docs\",\"scope\":[\"range\",\"sampleData\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Common Props\",\"depth\":1,\"slug\":\"common-props\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"},{\"type\":\"heading\",\"value\":\"y0\",\"depth\":2,\"slug\":\"y-0\"}],\"slug\":\"common-props\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Common Props\",\"depth\":1,\"slug\":\"common-props\",\"category\":\"documentation\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"},{\"type\":\"heading\",\"value\":\"y0\",\"depth\":2,\"slug\":\"y-0\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 2\\ntitle: Common Props\\ncategory: documentation\\ntype: docs\\nscope:\\n  - range\\n  - sampleData\\n---\\n\\n# Common Props\\n\\nNot every component uses all of these props. These are all common to things like `VictoryBar`, `VictoryScatter`, but other components like `VictoryStack` use only some of them.\\n\\nThe props explanations given here are general. Each component docs page should be considered as the the source of truth for a component's props, and any caveats will be listed there.\\n\\n## animate\\n\\n`type: boolean || object`\\n\\nThe `animate` prop specifies props for [VictoryAnimation][] and [VictoryTransition][] to use. The animate prop may be used to specify the duration, delay, and easing of an animation as well as the behavior of `onEnter` and `onExit` and `onLoad` transitions. Each Victory component defines its own default transitions, be these may be modified, or overwritten with the `animate` prop. An `animationWhitelist` may also be specified on the `animate` prop. When given, only props specified in the whitelist will animate.\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n_example:_ `animate={{ duration: 2000 }}`\\n\\n```playground_norender\\nclass App extends React.Component {\\n\\n  render() {\\n    return (\\n      <VictoryChart\\n      \\tdomain={{ y: [0, 1] }}\\n      \\tanimate={{ duration: 2000 }}\\n      >\\n        <VictoryScatter\\n          size={this.state.size}\\n          data={this.state.data}\\n          style={{ data: { opacity: ({ datum }) => datum.opacity || 1 } }}\\n          animate={{\\n            animationWhitelist: [\\\"style\\\", \\\"data\\\", \\\"size\\\"], // Try removing \\\"size\\\"\\n            onExit: {\\n              duration: 500,\\n              before: () => ({ opacity: 0.3, _y: 0 })\\n            },\\n            onEnter: {\\n              duration: 500,\\n              before: () => ({ opacity: 0.3, _y: 0 }),\\n              after: (datum) => ({ opacity: 1, _y: datum._y })\\n            }\\n          }}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n\\n  constructor(props) {\\n    super(props);\\n    this.state = {\\n       data: this.getData(),\\n       size: this.getSize()\\n    };\\n  }\\n\\n  componentDidMount() {\\n    this.setStateInterval = window.setInterval(() => {\\n      this.setState({\\n        data: this.getData(),\\n        size: this.getSize()\\n      });\\n    }, 3000);\\n  }\\n\\n  componentWillUnmount() {\\n    window.clearInterval(this.setStateInterval);\\n  }\\n\\n  getData() {\\n    const num = Math.floor(10 * Math.random() + 5);\\n    const points = new Array(num).fill(1);\\n    return points.map((point, index) => {\\n      return { x: index + 1, y: Math.random() };\\n    });\\n  }\\n\\n  getSize() {\\n    return Math.random() * 10\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\nThe `categories` prop specifies how categorical data for a chart should be ordered. This prop should be given as an array of string values, or an object with these arrays of values specified for x and y. If this prop is not set, categorical data will be plotted in the order it was given in the data array.\\n\\n_note:_ The `x` value supplied to the `categories` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.\\n\\n_example:_ `categories={{ x: [\\\"apples\\\", \\\"oranges\\\", \\\"bananas\\\"] }}`\\n\\n```playground\\n<VictoryChart domainPadding={25}>\\n  <VictoryBar\\n    categories={{\\n      x: [\\\"birds\\\", \\\"cats\\\", \\\"dogs\\\", \\\"fish\\\", \\\"frogs\\\"]\\n    }}\\n    data={[\\n      {x: \\\"cats\\\", y: 1},\\n      {x: \\\"dogs\\\", y: 2},\\n      {x: \\\"birds\\\", y: 3},\\n      {x: \\\"fish\\\", y: 2},\\n      {x: \\\"frogs\\\", y: 1}\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\nThe `containerComponent` prop takes a component instance which will be used to create a container element for standalone charts. If a `containerComponent` is not provided, the default `VictoryContainer` component will be used. Other Victory container components include:\\n\\n-   [VictoryBrushContainer][]\\n-   [VictoryCursorContainer][]\\n-   [VictorySelectionContainer][]\\n-   [VictoryVoronoiContainer][]\\n-   [VictoryZoomContainer][]\\n-   hybrid containers may be created using the [createContainer][] helper\\n\\nVictory container components all support `title` and `desc` props, which are intended to add accessibility to Victory components. The more descriptive these props are, the more accessible your data will be for people using screen readers. These props may be set by passing them directly to the supplied component. By default, all Victory container components render responsive `svg` elements using the `viewBox` attribute. To render a static container, set `responsive={false}` directly on the container instance supplied via the `containerComponent` prop. All Victory container components also render a `Portal` element that may be used in conjunction with [VictoryPortal][] to force components to render above other children.\\n\\nContainer components are supplied with the following props:\\n\\n-   `domain`\\n-   `height`\\n-   `horizontal`\\n-   `origin` (for polar charts)\\n-   `padding`\\n-   `polar`\\n-   `scale`\\n-   `standalone`\\n-   `style`\\n-   `theme`\\n-   `width`\\n\\n_default:_ `containerComponent={<VictoryContainer/>}`\\n\\n```playground\\n<VictoryScatter\\n  containerComponent={\\n    <VictoryCursorContainer\\n      cursorLabel={({ datum }) => `${datum.x.toPrecision(2)}, ${datum.y.toPrecision(2)}`}\\n    />\\n  }\\n/>\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\nSpecify data via the `data` prop. By default, Victory components expect data as an array of objects with `x` and `y` properties. Use the [x][] and [y][] data accessor props to define a custom data format. The `data` prop must be given as an array. Data objects may also include information about ~~styles~~, labels, and props that may be applied to individual data components.\\n\\n**Note:** All values stored on the data object will be interpolated during animation. Do not store functions on data objects.\\n\\n**Note:** As of `victory@0.26.0` styles provided via the `data` prop are no longer automatically applied. To use styles from the data object, add functional styles as in the example below.\\n\\n```playground\\n<VictoryScatter\\n  size={7}\\n  data={[\\n    { x: 1, y: 1, label: \\\"first\\\", symbol: \\\"star\\\", opacity: 0.5, fill: \\\"blue\\\" },\\n    { x: 2, y: 2, label: \\\"second\\\", symbol: \\\"circle\\\", opacity: 0.8, fill: \\\"red\\\" },\\n    { x: 3, y: 3, label: \\\"third\\\", symbol: \\\"square\\\", fill: \\\"gold\\\" },\\n    { x: 4, y: 4, label: \\\"fourth\\\", symbol: \\\"diamond\\\", fill: \\\"green\\\" }\\n  ]}\\n  style={{\\n    data: {\\n      fill: ({ datum }) => datum.fill,\\n      opacity: ({ datum }) => datum.opacity\\n    }\\n  }}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\nThe `dataComponent` prop takes a component instance which will be responsible for rendering a data element. The new element created from the passed `dataComponent` will be provided with all the props it needs to render. These props will always include `data`, `events`, `scale` and `style`. Individual components will supply additional props expected by their default `dataComponents`. See individual api docs for complete props lists. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `dataComponent` is not provided, each component will use its own default `dataComponent`.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_examples:_ `dataComponent={<Area/>}`\\n\\n```playground_norender\\nclass CatPoint extends React.Component {\\n  render() {\\n    const {x, y, datum} = this.props; // VictoryScatter supplies x, y and datum\\n    const cat = datum._y >= 0 ? \\\"\uD83D\uDE3B\\\" : \\\"\uD83D\uDE39\\\";\\n    return (\\n      <text x={x} y={y} fontSize={30}>\\n        {cat}\\n      </text>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart>\\n        <VictoryScatter\\n          dataComponent={<CatPoint/>}\\n          y={(d) => Math.sin(2 * Math.PI * d.x)}\\n          samples={15}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\nThe `domain` prop describes the range of data the component will include. This prop can be given as a array of the minimum and maximum expected values of the data or as an object that specifies separate arrays for x and y. If this prop is not provided, a domain will be calculated from data, or other available information.\\n\\n_note:_ The `x` value supplied to the `domain` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.\\n\\n_examples:_\\n\\n-   `domain={[-1, 1]}`\\n-   `domain={{x: [0, 100], y: [0, 1]}}`\\n\\n```playground\\n<VictoryChart\\n   domain={{ x: [0.5, 5.5], y: [0, 10] }}\\n>\\n  <VictoryBar data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\nThe `domainPadding` prop specifies a number of pixels of padding to add the beginning or end of a domain. This prop is useful for explicitly spacing data elements farther from the beginning or end of a domain to prevent axis crowding. When given as a single number, `domainPadding` will be applied to the upper and lower bound of both the x and y domains. This prop may also be given as an object with numbers or two-element arrays specified for x and y. When specifying arrays for `domainPadding`, the first element of the array will specify the padding to be applied to domain minimum, and the second element will specify padding the be applied to domain maximum.\\n\\n_note:_ The `x` value supplied to the `domainPadding` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.\\n\\n_examples:_\\n\\n-   `domainPadding={20}`\\n-   `domainPadding={{x: [20, 0]}}`\\n\\n**note:** Values supplied for `domainPadding` will be coerced so that padding a domain will never result in charts including an additional quadrant. For example, if an original domain included only positive values, `domainPadding` will be coerced so that the resulted padded domain will not include negative values.\\n\\n```playground\\n<VictoryChart\\n   domainPadding={{ x: 100 }}\\n>\\n  <VictoryBar data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\nThe `eventKey` prop is used to assign eventKeys to data. This prop operates identically to the [x][] and [y][] data accessor props. By default, the eventKey of each datum will be equal to its index in the data array. **This prop is not commonly used.**\\n\\nSee the [Events Guide][] for more information on defining events and using event keys.\\n\\n## events\\n\\n`type: array[object]`\\n\\nThe `events` prop takes an array of event objects. Event objects are composed of identifying properties, and `eventHandlers`.\\n\\nIdentifying properties include:\\n\\n-   `childName`: the name of the component the event should be attached to. When events are specified in `VictorySharedEvents` or on a component that renders several Victory components as children (_i.e._ `VictoryChart`, `VictoryGroup`, `VictoryStack`), it is necessary to specify which child events should apply to. The given `childName` should match the `name` prop of a child component. This identifier can be given as a string, an array of strings, or as \\\"all\\\".\\n\\n-   `target`: the type of element the event should be attached to. Valid targets for most Victory components will be `\\\"parent\\\"`, `\\\"data\\\"`, and `\\\"labels\\\"`. Events with the \\\"parent\\\" target will be attached to to the top level svg. Events with `\\\"data\\\"` and `\\\"labels\\\"` targets will be attached to `dataComponent` and `labelComponent` elements respectively. Some components, like `VictoryAxis` use non-standard targets like `\\\"grid\\\"`. Refer to individual API docs for additional caveats.\\n\\n-   `eventKey`: the specific element to be targeted. Events may be attached to specific elements by `eventKey`. By default, `eventKey` corresponds to the index in the `data` array (or `tickValues` array) corresponding to a rendered element. This value may be given as a single string or number, an array of strings or numbers, or as \\\"all\\\". It is not typically necessary to specify an individual `eventKey` for attaching events. When no `eventKey` is given, events will be attached to all elements that match a given `childName` and `target`. Some components like `VictoryArea` and `VictoryLine` render only a single element for an entire series of data. For these, the `eventKey` should be \\\"all\\\".\\n\\n`eventHandlers` should be given as an object whose keys are standard event names (_e.g.,_ `onClick`) and whose values are event callbacks. Callbacks are called with the props of the individual element that triggered the event. For example, when a click event occurs on a bar, the props object supplied to the `onClick` handler will include props specific to that individual bar, such as `datum`, `index`, `style`, etc. Return values from event handler callbacks may be used to mutate other elements.\\n\\nEvent returns should be given as an array of objects composed of identifying properties for specifying the element(s) to be modified and a `mutation` function. Identifying properties include `childName`, `target`, and `eventKey`. When these values are not provided, the identifiers of the element that triggered the event will be used, including the specific `eventKey`. The `mutation` function will be called with the calculated props for each element that should be modified (_e.g.,_ a bar label), and the object returned from the mutation function will override the props of that element via object assignment.\\n\\n```playground\\n<VictoryChart\\n  events={[{\\n    childName: \\\"all\\\",\\n    target: \\\"data\\\",\\n    eventHandlers: {\\n      onClick: () => {\\n        return [\\n          {\\n            childName: \\\"area-2\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"gold\\\" }) })\\n          }, {\\n            childName: \\\"area-3\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"orange\\\" }) })\\n          }, {\\n            childName: \\\"area-4\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"red\\\" }) })\\n          }\\n        ];\\n      }\\n    }\\n  }]}\\n>\\n  <VictoryStack>\\n    <VictoryArea name=\\\"area-1\\\" data={sampleData}/>\\n    <VictoryArea name=\\\"area-2\\\" data={sampleData}/>\\n    <VictoryArea name=\\\"area-3\\\" data={sampleData}/>\\n    <VictoryArea name=\\\"area-4\\\" data={sampleData}/>\\n  </VictoryStack>\\n</VictoryChart>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\nOccasionally is it necessary to trigger events in Victory's event system from some external element such as a button or a form field. Use the `externalEventMutation` prop to specify a set of mutations to apply to a given chart. The `externalEventMutations` should be given in the following form:\\n\\n```jsx\\nexternalEventMutations: PropTypes.arrayOf(\\n  PropTypes.shape({\\n    callback: PropTypes.function,\\n    childName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\\n    eventKey: PropTypes.oneOfType([\\n      PropTypes.array,\\n      CustomPropTypes.allOfType([\\n        CustomPropTypes.integer,\\n        CustomPropTypes.nonNegative\\n      ]),\\n      PropTypes.string\\n    ]),\\n    mutation: PropTypes.function,\\n    target: PropTypes.oneOfType([PropTypes.string, PropTypes.array])\\n  })\\n);\\n```\\n\\nThe `target`, `eventKey`, and `childName` (when applicable) must always be specified. The `mutation` function will be called with the current props of the element specified by the `target`, `eventKey` and `childName` provided. The mutation function should return a mutation object for that element. The `callback` prop should be used to clear the `externalEventMutations` prop once the mutation has been applied. Clearing `externalEventMutations` is crucial for charts that animate.\\n\\n```playground_norender\\nclass App extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      externalMutations: undefined\\n    };\\n  }\\n  removeMutation() {\\n    this.setState({\\n      externalMutations: undefined\\n    });\\n  }\\n\\n  clearClicks() {\\n    this.setState({\\n      externalMutations: [\\n        {\\n          childName: \\\"Bar-1\\\",\\n          target: [\\\"data\\\"],\\n          eventKey: \\\"all\\\",\\n          mutation: () => ({ style: undefined }),\\n          callback: this.removeMutation.bind(this)\\n        }\\n      ]\\n    });\\n  }\\n\\n  render() {\\n    const buttonStyle = {\\n      backgroundColor: \\\"black\\\",\\n      color: \\\"white\\\",\\n      padding: \\\"10px\\\",\\n      marginTop: \\\"10px\\\"\\n    };\\n    return (\\n      <div>\\n        <button\\n          onClick={this.clearClicks.bind(this)}\\n          style={buttonStyle}\\n        >\\n          Reset\\n        </button>\\n        <VictoryChart domain={{ x: [0, 5 ] }}\\n          externalEventMutations={this.state.externalMutations}\\n          events={[\\n            {\\n              target: \\\"data\\\",\\n              childName: \\\"Bar-1\\\",\\n              eventHandlers: {\\n                onClick: () => ({\\n                  target: \\\"data\\\",\\n                  mutation: () => ({ style: { fill: \\\"orange\\\" } })\\n                })\\n              }\\n            }\\n          ]}\\n        >\\n          <VictoryBar name=\\\"Bar-1\\\"\\n            style={{ data: { fill: \\\"grey\\\"} }}\\n            labels={() => \\\"click me!\\\"}\\n            data={[\\n              { x: 1, y: 2 },\\n              { x: 2, y: 4 },\\n              { x: 3, y: 1 },\\n              { x: 4, y: 5 }\\n            ]}\\n          />\\n        </VictoryChart>\\n      </div>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\n_Note_ External mutations are applied to the same state object that is used to control events in Victory, so depending on the order in which they are triggered, external event mutations may override mutations caused by internal Victory events or vice versa.\\n\\n## groupComponent\\n\\n`type: element`\\n\\nThe `groupComponent` prop takes a component instance which will be used to create group elements for use within container elements. For most components, this prop defaults to a `<g>` tag. Continuous data components like `VictoryLine` and `VictoryArea` use [VictoryClipContainer][] a component which renders a `<g>` tag with a `clipPath` `def`. This allows continuous data components to transition smoothly when new data points enter and exit. `VictoryClipContainer` may also be used with components like `VictoryScatter` to prevent data from overflowing the chart area.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryScatter\\n    data={sampleData}\\n    size={20}\\n    groupComponent={<VictoryClipContainer/>}\\n  />\\n</VictoryChart>\\n```\\n\\n## height\\n\\n`type: number`\\n\\nThe `height` prop determines the height of the containing `<svg>`. By default Victory components render responsive containers with the `viewBox` attribute set to `viewBox=\\\"0, 0, width, height\\\"` and `width=\\\"100%\\\"`, `height=\\\"auto\\\"`. In responsive containers, the `width` and `height` props affect the _aspect ratio_ of the rendered component, while the absolute width and height are determined by the container. To render a static container, pass `responsive={false}` to the `containerComponent` like `containerComponent={<VictoryContainer responsive={false}/>}`, or set `standalone={false}` and render the resulting `<g>` tag in your own `<svg>` container. When a component is nested within `VictoryChart`, `VictoryStack`, or `VictoryGroup` setting the `height` prop on the child component will have no effect.\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```playground\\n<div>\\n  <VictoryBar height={500} />\\n  <VictoryBar height={500}\\n    containerComponent={<VictoryContainer responsive={false}/>}\\n  />\\n</div>\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the independent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domainPadding={{ x: 10 }}\\n>\\n  <VictoryBar horizontal\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\nThe `labelComponent` prop takes a component instance which will be used to render labels for the component. The new element created from the passed `labelComponent` will be supplied with the following properties: x, y, index, data, datum, verticalAnchor, textAnchor, angle, style, text, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above. [VictoryTooltip][] is commonly used as a `labelComponent`\\n\\n_examples:_\\n\\n-   `labelComponent={<VictoryLabel dy={20}/>}`\\n-   `labelComponent={<VictoryTooltip/>}`\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n  style={{ labels: { fill: \\\"white\\\" } }}\\n  labelComponent={<VictoryLabel dy={30} />}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\nThe `labels` prop defines the labels that will appear above each point. This prop should be given as an array or as a function. When given as a function, `labels` will be called with a single argument: an object containing all the props supplied to the label component. A full list of props that will be passed to `VictoryLabel` is given [here](/docs/victory-label).\\n\\n_examples:_\\n\\n-   `labels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n-   `labels={({ datum }) => datum.y}`\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\nThe `maxDomain` prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the `domain` prop is set in addition to `maximumDomain`, `domain` will be used.\\n\\n_note:_ The `x` value supplied to the `maxDomain` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.\\n\\n_examples:_\\n\\n-   `maxDomain={0}`\\n-   `maxDomain={{ y: 0 }}`\\n\\n```playground\\n<VictoryChart maxDomain={{ y: 0 }}>\\n  <VictoryLine\\n    data={[\\n      { x: 1, y: -2 },\\n      { x: 2, y: 1 },\\n      { x: 3, y: -1 },\\n      { x: 4, y: -3 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\nThe `minDomain` prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the `domain` prop is set in addition to `minimumDomain`, `domain` will be used.\\n\\n_note:_ The `x` value supplied to the `minDomain` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.\\n\\n_examples:_\\n\\n-   `minDomain={0}`\\n-   `minDomain={{ y: 0 }}`\\n\\n```playground\\n<VictoryChart minDomain={{ y: 0 }}>\\n  <VictoryLine\\n    data={[\\n      { x: 1, y: 2 },\\n      { x: 2, y: -1 },\\n      { x: 3, y: 1 },\\n      { x: 4, y: 3 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n_example:_ `name=\\\"series-1\\\"`\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\nThe origin prop is used to define the center point in svg coordinates for polar charts. All children within a polar chart must share the same origin, so setting this prop on children nested within `VictoryChart`, `VictoryStack`, or `VictoryGroup` will have no effect. When this prop is not set, it will be calculated based on the `width`, `height` and `padding` of the chart. **This prop is usually not set manually.**\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\nThe `padding` prop specifies the amount of padding in number of pixels between the edge of the chart and any rendered child components. This prop can be given as a number or as an object with padding specified for top, bottom, left and right. As with [width][] and [height][], the absolute padding will depend on whether the component is rendered in a responsive container. When a component is nested within `VictoryChart`, `VictoryStack`, or `VictoryGroup` setting `padding` on the child component will have no effect.\\n\\n_examples:_\\n\\n-   `padding={{top: 20, bottom: 60}}`\\n-   `padding={40}`\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```playground\\n<VictoryChart\\n  padding={{ top: 40, bottom: 80, left: 40, right: 80 }}\\n>\\n<VictoryLine data={sampleData} />\\n</VictoryChart>\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\nThe boolean `polar` prop specifies whether a chart should be plotted on a polar coordinate system. All components in a given chart must share the same coordinate system, so setting this prop on children nested within `VictoryChart`, `VictoryStack`, or `VictoryGroup` will have no effect.\\n\\n```playground\\n<div>\\n<VictoryBar polar\\n  data={sampleData}\\n  labels={(d) => d.x.toFixed(0)}\\n  width={400} height={400}\\n  domain={{ x: [0, 7], y: [0, 7] }}\\n  style={{ data: { fill: \\\"#c43a31\\\", stroke: \\\"black\\\", strokeWidth: 2 } }}\\n/>\\n<VictoryBar\\n  data={sampleData}\\n  labels={(d) => d.x.toFixed(0)}\\n  width={400} height={400}\\n  domain={{ x: [0, 7], y: [0, 7] }}\\n  style={{ data: { fill: \\\"#c43a31\\\", stroke: \\\"black\\\", strokeWidth: 2 } }}\\n/>\\n</div>\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\nThe `range` prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this corresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this corresponds to a range of angles and radii. When this value is not given it will be calculated from the `width`, `height`, and `padding`, or from the `startAngle` and `endAngle` in the case of polar charts. All components in a given chart must share the same range, so setting this prop on children nested within `VictoryChart`, `VictoryStack`, or `VictoryGroup` will have no effect. **This prop is usually not set manually.**\\n\\n_examples:_\\n\\n-   Cartesian: `range={{ x: [50, 250], y: [50, 250] }}`\\n-   Polar: `range={{ x: [0, 360], y: [0, 250] }}`\\n\\n## samples\\n\\n`type: number`\\n\\nThe `samples` prop specifies how many individual points to plot when plotting\\ny as a function of x. The `samples` prop is ignored if `data` is supplied in props.\\n\\n_default:_ `samples={50}`\\n\\n```playground\\n<VictoryChart>\\n  <VictoryLine\\n    samples={25}\\n    y={(d) => Math.sin(5 * Math.PI * d.x)}\\n  />\\n  <VictoryLine\\n    samples={100}\\n    style={{ data: { stroke: \\\"red\\\" } }}\\n    y={(d) => Math.cos(5 * Math.PI * d.x)}\\n  />\\n</VictoryChart>\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\nThe `scale` prop determines which scales your chart should use. This prop can be given as a string specifying a supported scale (\\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\"), or as an object with scales specified for x and y. For \\\"time\\\" scales, data points should be `Date` objects or `getTime()` instances.\\n\\n_note:_ The `x` value supplied to the `scale` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n_examples:_\\n\\n-   `scale=\\\"time\\\"`\\n-   `scale={{x: \\\"linear\\\", y: \\\"log\\\"}}`\\n\\n```playground\\n<VictoryChart\\n  scale={{ x: \\\"linear\\\", y: \\\"log\\\" }}\\n>\\n  <VictoryLine\\n    style={{ data: { stroke: \\\"red\\\" } }}\\n    domain={{ x: [0, 5] }}\\n    y={(d) => Math.pow(1 - d.x, 10)}\\n  />\\n</VictoryChart>\\n```\\n\\n## sharedEvents\\n\\nThe `sharedEvents` prop is used to coordinate events between Victory components using `VictorySharedEvents`. **This prop should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\nBy default `domainPadding` is coerced to existing quadrants. This means that if a given domain only includes positive values, no amount of padding applied by `domainPadding` will result in a domain with negative values. This is the desired behavior in most cases. For users that need to apply padding without regard to quadrant, the `singleQuadrantDomainPadding` prop may be used. This prop may be given as a boolean or an object with boolean values specified for \\\"x\\\" and/or \\\"y\\\". When this prop is false (or false for a given dimension), padding will be applied without regard to quadrant. If this prop is not specified, `domainPadding` will be coerced to existing quadrants.\\n\\n_note:_ The `x` value supplied to the `singleQuadrantDomainPadding` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.\\n\\n_examples:_\\n\\n-   `singleQuadrantDomainPadding={false}`\\n-   `singleQuadrantDomainPadding={{ x: false }}`\\n\\n```playground\\n<VictoryChart\\n  singleQuadrantDomainPadding={{ x: false }}\\n  domainPadding={100}\\n>\\n  <VictoryBar data={sampleData}/>\\n  <VictoryAxis crossAxis={false}/>\\n</VictoryChart>\\n```\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\nUse the `sortKey` prop to indicate how data should be sorted. This prop is\\ngiven directly to the lodash [sortBy][] function to be executed on the final\\ndataset.\\n\\nThis prop can be provided in a variety of formats\\n\\n**string:** specify which property in a data object to sort the data array by\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n**function:** use a function to determine how to sort data elements in an array\\n\\n```jsx\\nsortKey={(datum) => datum.xValue + datum.error}\\n```\\n\\n**array index:** specify which index of an array should be used to sort data when data is given as an array of arrays\\n\\n```jsx\\nsortKey={0}\\n```\\n\\n**array:** specify multiple properties to sort by\\n\\n```jsx\\nsortKey={[\\\"age\\\", \\\"height\\\"]}\\n```\\n\\n```playground\\n<VictoryLine\\n  data={range(0, 2 * Math.PI, 0.01).map((t) => ({ t }))}\\n  sortKey=\\\"t\\\"\\n  x={(d) => Math.sin(3 * d.t + (2 * Math.PI))}\\n  y={(d) => Math.sin(2 * d.t)}\\n/>\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\nThe `standalone` props specifies whether the component should be rendered in a independent `<svg>` element or in a `<g>` tag. This prop defaults to true, and renders an `svg`, however, wrapper components like `VictoryChart`, `VictoryStack`, and `VictoryGroup` force children to use `standalone={false}`.\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryArea\\n    standalone={false}\\n    width={300} height={300} padding={0}\\n    data={sampleData}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: object`\\n\\nThe `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `data`, `labels` and `parent`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart.\\n\\n```jsx\\nstyle={{\\n  data: { fill: \\\"tomato\\\", opacity: 0.7 },\\n  labels: { fontSize: 12 },\\n  parent: { border: \\\"1px solid #ccc\\\" }\\n}}\\n```\\n\\nAny style attribute may also be defined as a function of the props for whatever element it applies to. For example:\\n\\n```jsx\\nstyle={{\\n  data: { fill: ({ datum }) => datum.y > 0 ? \\\"green\\\" : \\\"red\\\" },\\n  labels: { fontSize: ({ text }) => text.length > 10 ? 8 : 12 },\\n  parent: { border: \\\"1px solid #ccc\\\" }\\n}}\\n```\\n\\n**note:** The `style` prop used by `VictoryAxis` has a different format than the standard `style` prop.\\n\\n**note:** When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.\\n\\n**note:** custom `angle` and `verticalAnchor` properties maybe included in labels styles.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryScatter\\n  style={{\\n    parent: {\\n      border: \\\"1px solid #ccc\\\"\\n    },\\n    data: {\\n      fill: \\\"#c43a31\\\", fillOpacity: 0.6, stroke: \\\"#c43a31\\\", strokeWidth: 3\\n    },\\n    labels: {\\n      fontSize: 15, fill: \\\"#c43a31\\\", padding: 15\\n    }\\n  }}\\n  size={9}\\n  data={sampleData}\\n  labels={({ datum }) => datum.x}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\nThe `theme` prop specifies a theme to use for determining styles and layout properties for a component. Any styles or props defined in `theme` may be overwritten by props specified on the component instance. By default, components use a [grayscale theme][].\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\nThe `width` prop determines the width of the containing `<svg>`. By default Victory components render responsive containers with the `viewBox` attribute set to `viewBox=\\\"0, 0, width, height\\\"` and `width=\\\"100%\\\"`, `height=\\\"auto\\\"`. In responsive containers, the `width` and `height` props affect the _aspect ratio_ of the rendered component, while the absolute width and height are determined by the container. To render a static container, pass `responsive={false}` to the `containerComponent` like `containerComponent={<VictoryContainer responsive={false}/>}`, or set `standalone={false}` and render the resulting `<g>` tag in your own `<svg>` container. When a component is nested within `VictoryChart`, `VictoryStack`, or `VictoryGroup` setting `width` prop on the child component will have no effect.\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```playground\\n<div>\\n  <VictoryBar width={1200}/>\\n  <VictoryBar width={1200}\\n    containerComponent={<VictoryContainer responsive={false}/>}\\n  />\\n</div>\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\nUse the `x` data accessor prop to determine how the component defines data in the x dimension. This prop may be given in a variety of formats:\\n\\n**string:** specify which property in an array of data objects should be used as the x value\\n\\n```jsx\\nx = \\\"month\\\";\\n```\\n\\n**function:** use a function to translate each element in a data array into an x value\\n\\n```jsx\\nx={(datum) => datum.xValue + datum.error}\\n```\\n\\n**array index:** specify which index of an array should be used as an x value when data is given as an array of arrays\\n\\n```jsx\\nx={0}\\n```\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as an x value\\n\\n```jsx\\nx=\\\"employees.name\\\"`, `x={[\\\"employees\\\", \\\"name\\\"]}\\n```\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `y` data accessor prop to determine how the component defines data in the y dimension. This prop may be given in a variety of formats:\\n\\n**string:** specify which property in an array of data objects should be used as the y value\\n\\n```jsx\\ny = \\\"profit\\\";\\n```\\n\\n**function:** use a function to translate each element in a data array into a y value\\n\\n```jsx\\ny={(datum) => Math.sin(2 * Math.PI * datum.x)}\\n```\\n\\n**array index:** specify which index of an array should be used as a y value when data is given as an array of arrays\\n\\n```jsx\\ny={1}\\n```\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a y value\\n\\n```jsx\\ny=\\\"employees.salary\\\"`, `y={[\\\"employees\\\", \\\"salary\\\"]}\\n```\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n## y0\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `y0` data accessor prop to determine how the component defines the baseline y0 data. This prop is useful for defining custom baselines for components like `VictoryBar` or `VictoryArea`. This prop may be given in a variety of formats.\\n\\n**string:** specify which property in an array of data objects should be used as the y0 value\\n\\n```jsx\\ny0 = \\\"last_quarter_profit\\\";\\n```\\n\\n**function:** use a function to translate each element in a data array into a y0 value\\n\\n```jsx\\ny0={() => 10}\\n```\\n\\n**array index:** specify which index of an array should be used as a y0 value when data is given as an array of arrays\\n\\n```jsx\\ny0={1}\\n```\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a y0 value\\n\\n```jsx\\ny0=\\\"employees.salary\\\"`, `y={[\\\"employees\\\", \\\"salary\\\"]}\\n```\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n[x]: #x\\n\\n[y]: #y\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\\n[width]: #width\\n\\n[height]: #height\\n\\n[victorylabel]: /docs/victory-label\\n\\n[victorytooltip]: /docs/victory-tooltip\\n\\n[victoryportal]: /docs/victory-portal\\n\\n[victoryclipcontainer]: /docs/victory-clip-container\\n\\n[victorybrushcontainer]: /docs/victory-brush-container\\n\\n[victorycursorcontainer]: /docs/victory-cursor-container\\n\\n[victoryselectioncontainer]: /docs/victory-selection-container\\n\\n[victoryvoronoicontainer]: /docs/victory-voronoi-container\\n\\n[victoryzoomcontainer]: /docs/victory-zoom-container\\n\\n[createcontainer]: /docs/create-container\\n\\n[victoryanimation]: /docs/victory-animation\\n\\n[victorytransition]: /docs/victory-transition\\n\\n[sortby]: https://lodash.com/docs/4.17.4#sortBy\\n\\n[animations guide]: /guides/animations\\n\\n[data accessors guide]: /guides/data-accessors\\n\\n[custom components guide]: /guides/custom-components\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\",\"content\":\"\\n# Common Props\\n\\nNot every component uses all of these props. These are all common to things like `VictoryBar`, `VictoryScatter`, but other components like `VictoryStack` use only some of them.\\n\\nThe props explanations given here are general. Each component docs page should be considered as the the source of truth for a component's props, and any caveats will be listed there.\\n\\n## animate\\n\\n`type: boolean || object`\\n\\nThe `animate` prop specifies props for [VictoryAnimation][] and [VictoryTransition][] to use. The animate prop may be used to specify the duration, delay, and easing of an animation as well as the behavior of `onEnter` and `onExit` and `onLoad` transitions. Each Victory component defines its own default transitions, be these may be modified, or overwritten with the `animate` prop. An `animationWhitelist` may also be specified on the `animate` prop. When given, only props specified in the whitelist will animate.\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n_example:_ `animate={{ duration: 2000 }}`\\n\\n```playground_norender\\nclass App extends React.Component {\\n\\n  render() {\\n    return (\\n      <VictoryChart\\n      \\tdomain={{ y: [0, 1] }}\\n      \\tanimate={{ duration: 2000 }}\\n      >\\n        <VictoryScatter\\n          size={this.state.size}\\n          data={this.state.data}\\n          style={{ data: { opacity: ({ datum }) => datum.opacity || 1 } }}\\n          animate={{\\n            animationWhitelist: [\\\"style\\\", \\\"data\\\", \\\"size\\\"], // Try removing \\\"size\\\"\\n            onExit: {\\n              duration: 500,\\n              before: () => ({ opacity: 0.3, _y: 0 })\\n            },\\n            onEnter: {\\n              duration: 500,\\n              before: () => ({ opacity: 0.3, _y: 0 }),\\n              after: (datum) => ({ opacity: 1, _y: datum._y })\\n            }\\n          }}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n\\n  constructor(props) {\\n    super(props);\\n    this.state = {\\n       data: this.getData(),\\n       size: this.getSize()\\n    };\\n  }\\n\\n  componentDidMount() {\\n    this.setStateInterval = window.setInterval(() => {\\n      this.setState({\\n        data: this.getData(),\\n        size: this.getSize()\\n      });\\n    }, 3000);\\n  }\\n\\n  componentWillUnmount() {\\n    window.clearInterval(this.setStateInterval);\\n  }\\n\\n  getData() {\\n    const num = Math.floor(10 * Math.random() + 5);\\n    const points = new Array(num).fill(1);\\n    return points.map((point, index) => {\\n      return { x: index + 1, y: Math.random() };\\n    });\\n  }\\n\\n  getSize() {\\n    return Math.random() * 10\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\nThe `categories` prop specifies how categorical data for a chart should be ordered. This prop should be given as an array of string values, or an object with these arrays of values specified for x and y. If this prop is not set, categorical data will be plotted in the order it was given in the data array.\\n\\n_note:_ The `x` value supplied to the `categories` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.\\n\\n_example:_ `categories={{ x: [\\\"apples\\\", \\\"oranges\\\", \\\"bananas\\\"] }}`\\n\\n```playground\\n<VictoryChart domainPadding={25}>\\n  <VictoryBar\\n    categories={{\\n      x: [\\\"birds\\\", \\\"cats\\\", \\\"dogs\\\", \\\"fish\\\", \\\"frogs\\\"]\\n    }}\\n    data={[\\n      {x: \\\"cats\\\", y: 1},\\n      {x: \\\"dogs\\\", y: 2},\\n      {x: \\\"birds\\\", y: 3},\\n      {x: \\\"fish\\\", y: 2},\\n      {x: \\\"frogs\\\", y: 1}\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\nThe `containerComponent` prop takes a component instance which will be used to create a container element for standalone charts. If a `containerComponent` is not provided, the default `VictoryContainer` component will be used. Other Victory container components include:\\n\\n- [VictoryBrushContainer][]\\n- [VictoryCursorContainer][]\\n- [VictorySelectionContainer][]\\n- [VictoryVoronoiContainer][]\\n- [VictoryZoomContainer][]\\n- hybrid containers may be created using the [createContainer][] helper\\n\\nVictory container components all support `title` and `desc` props, which are intended to add accessibility to Victory components. The more descriptive these props are, the more accessible your data will be for people using screen readers. These props may be set by passing them directly to the supplied component. By default, all Victory container components render responsive `svg` elements using the `viewBox` attribute. To render a static container, set `responsive={false}` directly on the container instance supplied via the `containerComponent` prop. All Victory container components also render a `Portal` element that may be used in conjunction with [VictoryPortal][] to force components to render above other children.\\n\\nContainer components are supplied with the following props:\\n\\n- `domain`\\n- `height`\\n- `horizontal`\\n- `origin` (for polar charts)\\n- `padding`\\n- `polar`\\n- `scale`\\n- `standalone`\\n- `style`\\n- `theme`\\n- `width`\\n\\n_default:_ `containerComponent={<VictoryContainer/>}`\\n\\n```playground\\n<VictoryScatter\\n  containerComponent={\\n    <VictoryCursorContainer\\n      cursorLabel={({ datum }) => `${datum.x.toPrecision(2)}, ${datum.y.toPrecision(2)}`}\\n    />\\n  }\\n/>\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\nSpecify data via the `data` prop. By default, Victory components expect data as an array of objects with `x` and `y` properties. Use the [x][] and [y][] data accessor props to define a custom data format. The `data` prop must be given as an array. Data objects may also include information about ~~styles~~, labels, and props that may be applied to individual data components.\\n\\n**Note:** All values stored on the data object will be interpolated during animation. Do not store functions on data objects.\\n\\n**Note:** As of `victory@0.26.0` styles provided via the `data` prop are no longer automatically applied. To use styles from the data object, add functional styles as in the example below.\\n\\n```playground\\n<VictoryScatter\\n  size={7}\\n  data={[\\n    { x: 1, y: 1, label: \\\"first\\\", symbol: \\\"star\\\", opacity: 0.5, fill: \\\"blue\\\" },\\n    { x: 2, y: 2, label: \\\"second\\\", symbol: \\\"circle\\\", opacity: 0.8, fill: \\\"red\\\" },\\n    { x: 3, y: 3, label: \\\"third\\\", symbol: \\\"square\\\", fill: \\\"gold\\\" },\\n    { x: 4, y: 4, label: \\\"fourth\\\", symbol: \\\"diamond\\\", fill: \\\"green\\\" }\\n  ]}\\n  style={{\\n    data: {\\n      fill: ({ datum }) => datum.fill,\\n      opacity: ({ datum }) => datum.opacity\\n    }\\n  }}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\nThe `dataComponent` prop takes a component instance which will be responsible for rendering a data element. The new element created from the passed `dataComponent` will be provided with all the props it needs to render. These props will always include `data`, `events`, `scale` and `style`. Individual components will supply additional props expected by their default `dataComponents`. See individual api docs for complete props lists. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `dataComponent` is not provided, each component will use its own default `dataComponent`.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_examples:_ `dataComponent={<Area/>}`\\n\\n```playground_norender\\nclass CatPoint extends React.Component {\\n  render() {\\n    const {x, y, datum} = this.props; // VictoryScatter supplies x, y and datum\\n    const cat = datum._y >= 0 ? \\\"\uD83D\uDE3B\\\" : \\\"\uD83D\uDE39\\\";\\n    return (\\n      <text x={x} y={y} fontSize={30}>\\n        {cat}\\n      </text>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart>\\n        <VictoryScatter\\n          dataComponent={<CatPoint/>}\\n          y={(d) => Math.sin(2 * Math.PI * d.x)}\\n          samples={15}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\nThe `domain` prop describes the range of data the component will include. This prop can be given as a array of the minimum and maximum expected values of the data or as an object that specifies separate arrays for x and y. If this prop is not provided, a domain will be calculated from data, or other available information.\\n\\n_note:_ The `x` value supplied to the `domain` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.\\n\\n_examples:_\\n\\n- `domain={[-1, 1]}`\\n- `domain={{x: [0, 100], y: [0, 1]}}`\\n\\n```playground\\n<VictoryChart\\n   domain={{ x: [0.5, 5.5], y: [0, 10] }}\\n>\\n  <VictoryBar data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\nThe `domainPadding` prop specifies a number of pixels of padding to add the beginning or end of a domain. This prop is useful for explicitly spacing data elements farther from the beginning or end of a domain to prevent axis crowding. When given as a single number, `domainPadding` will be applied to the upper and lower bound of both the x and y domains. This prop may also be given as an object with numbers or two-element arrays specified for x and y. When specifying arrays for `domainPadding`, the first element of the array will specify the padding to be applied to domain minimum, and the second element will specify padding the be applied to domain maximum.\\n\\n_note:_ The `x` value supplied to the `domainPadding` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.\\n\\n_examples:_\\n\\n- `domainPadding={20}`\\n- `domainPadding={{x: [20, 0]}}`\\n\\n**note:** Values supplied for `domainPadding` will be coerced so that padding a domain will never result in charts including an additional quadrant. For example, if an original domain included only positive values, `domainPadding` will be coerced so that the resulted padded domain will not include negative values.\\n\\n```playground\\n<VictoryChart\\n   domainPadding={{ x: 100 }}\\n>\\n  <VictoryBar data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\nThe `eventKey` prop is used to assign eventKeys to data. This prop operates identically to the [x][] and [y][] data accessor props. By default, the eventKey of each datum will be equal to its index in the data array. **This prop is not commonly used.**\\n\\nSee the [Events Guide][] for more information on defining events and using event keys.\\n\\n## events\\n\\n`type: array[object]`\\n\\nThe `events` prop takes an array of event objects. Event objects are composed of identifying properties, and `eventHandlers`.\\n\\nIdentifying properties include:\\n\\n- `childName`: the name of the component the event should be attached to. When events are specified in `VictorySharedEvents` or on a component that renders several Victory components as children (_i.e._ `VictoryChart`, `VictoryGroup`, `VictoryStack`), it is necessary to specify which child events should apply to. The given `childName` should match the `name` prop of a child component. This identifier can be given as a string, an array of strings, or as \\\"all\\\".\\n\\n- `target`: the type of element the event should be attached to. Valid targets for most Victory components will be `\\\"parent\\\"`, `\\\"data\\\"`, and `\\\"labels\\\"`. Events with the \\\"parent\\\" target will be attached to to the top level svg. Events with `\\\"data\\\"` and `\\\"labels\\\"` targets will be attached to `dataComponent` and `labelComponent` elements respectively. Some components, like `VictoryAxis` use non-standard targets like `\\\"grid\\\"`. Refer to individual API docs for additional caveats.\\n\\n- `eventKey`: the specific element to be targeted. Events may be attached to specific elements by `eventKey`. By default, `eventKey` corresponds to the index in the `data` array (or `tickValues` array) corresponding to a rendered element. This value may be given as a single string or number, an array of strings or numbers, or as \\\"all\\\". It is not typically necessary to specify an individual `eventKey` for attaching events. When no `eventKey` is given, events will be attached to all elements that match a given `childName` and `target`. Some components like `VictoryArea` and `VictoryLine` render only a single element for an entire series of data. For these, the `eventKey` should be \\\"all\\\".\\n\\n`eventHandlers` should be given as an object whose keys are standard event names (_e.g.,_ `onClick`) and whose values are event callbacks. Callbacks are called with the props of the individual element that triggered the event. For example, when a click event occurs on a bar, the props object supplied to the `onClick` handler will include props specific to that individual bar, such as `datum`, `index`, `style`, etc. Return values from event handler callbacks may be used to mutate other elements.\\n\\nEvent returns should be given as an array of objects composed of identifying properties for specifying the element(s) to be modified and a `mutation` function. Identifying properties include `childName`, `target`, and `eventKey`. When these values are not provided, the identifiers of the element that triggered the event will be used, including the specific `eventKey`. The `mutation` function will be called with the calculated props for each element that should be modified (_e.g.,_ a bar label), and the object returned from the mutation function will override the props of that element via object assignment.\\n\\n```playground\\n<VictoryChart\\n  events={[{\\n    childName: \\\"all\\\",\\n    target: \\\"data\\\",\\n    eventHandlers: {\\n      onClick: () => {\\n        return [\\n          {\\n            childName: \\\"area-2\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"gold\\\" }) })\\n          }, {\\n            childName: \\\"area-3\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"orange\\\" }) })\\n          }, {\\n            childName: \\\"area-4\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"red\\\" }) })\\n          }\\n        ];\\n      }\\n    }\\n  }]}\\n>\\n  <VictoryStack>\\n    <VictoryArea name=\\\"area-1\\\" data={sampleData}/>\\n    <VictoryArea name=\\\"area-2\\\" data={sampleData}/>\\n    <VictoryArea name=\\\"area-3\\\" data={sampleData}/>\\n    <VictoryArea name=\\\"area-4\\\" data={sampleData}/>\\n  </VictoryStack>\\n</VictoryChart>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\nOccasionally is it necessary to trigger events in Victory's event system from some external element such as a button or a form field. Use the `externalEventMutation` prop to specify a set of mutations to apply to a given chart. The `externalEventMutations` should be given in the following form:\\n\\n```jsx\\nexternalEventMutations: PropTypes.arrayOf(\\n  PropTypes.shape({\\n    callback: PropTypes.function,\\n    childName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\\n    eventKey: PropTypes.oneOfType([\\n      PropTypes.array,\\n      CustomPropTypes.allOfType([\\n        CustomPropTypes.integer,\\n        CustomPropTypes.nonNegative\\n      ]),\\n      PropTypes.string\\n    ]),\\n    mutation: PropTypes.function,\\n    target: PropTypes.oneOfType([PropTypes.string, PropTypes.array])\\n  })\\n);\\n```\\n\\nThe `target`, `eventKey`, and `childName` (when applicable) must always be specified. The `mutation` function will be called with the current props of the element specified by the `target`, `eventKey` and `childName` provided. The mutation function should return a mutation object for that element. The `callback` prop should be used to clear the `externalEventMutations` prop once the mutation has been applied. Clearing `externalEventMutations` is crucial for charts that animate.\\n\\n```playground_norender\\nclass App extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      externalMutations: undefined\\n    };\\n  }\\n  removeMutation() {\\n    this.setState({\\n      externalMutations: undefined\\n    });\\n  }\\n\\n  clearClicks() {\\n    this.setState({\\n      externalMutations: [\\n        {\\n          childName: \\\"Bar-1\\\",\\n          target: [\\\"data\\\"],\\n          eventKey: \\\"all\\\",\\n          mutation: () => ({ style: undefined }),\\n          callback: this.removeMutation.bind(this)\\n        }\\n      ]\\n    });\\n  }\\n\\n  render() {\\n    const buttonStyle = {\\n      backgroundColor: \\\"black\\\",\\n      color: \\\"white\\\",\\n      padding: \\\"10px\\\",\\n      marginTop: \\\"10px\\\"\\n    };\\n    return (\\n      <div>\\n        <button\\n          onClick={this.clearClicks.bind(this)}\\n          style={buttonStyle}\\n        >\\n          Reset\\n        </button>\\n        <VictoryChart domain={{ x: [0, 5 ] }}\\n          externalEventMutations={this.state.externalMutations}\\n          events={[\\n            {\\n              target: \\\"data\\\",\\n              childName: \\\"Bar-1\\\",\\n              eventHandlers: {\\n                onClick: () => ({\\n                  target: \\\"data\\\",\\n                  mutation: () => ({ style: { fill: \\\"orange\\\" } })\\n                })\\n              }\\n            }\\n          ]}\\n        >\\n          <VictoryBar name=\\\"Bar-1\\\"\\n            style={{ data: { fill: \\\"grey\\\"} }}\\n            labels={() => \\\"click me!\\\"}\\n            data={[\\n              { x: 1, y: 2 },\\n              { x: 2, y: 4 },\\n              { x: 3, y: 1 },\\n              { x: 4, y: 5 }\\n            ]}\\n          />\\n        </VictoryChart>\\n      </div>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\n_Note_ External mutations are applied to the same state object that is used to control events in Victory, so depending on the order in which they are triggered, external event mutations may override mutations caused by internal Victory events or vice versa.\\n\\n## groupComponent\\n\\n`type: element`\\n\\nThe `groupComponent` prop takes a component instance which will be used to create group elements for use within container elements. For most components, this prop defaults to a `<g>` tag. Continuous data components like `VictoryLine` and `VictoryArea` use [VictoryClipContainer][] a component which renders a `<g>` tag with a `clipPath` `def`. This allows continuous data components to transition smoothly when new data points enter and exit. `VictoryClipContainer` may also be used with components like `VictoryScatter` to prevent data from overflowing the chart area.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryScatter\\n    data={sampleData}\\n    size={20}\\n    groupComponent={<VictoryClipContainer/>}\\n  />\\n</VictoryChart>\\n```\\n\\n## height\\n\\n`type: number`\\n\\nThe `height` prop determines the height of the containing `<svg>`. By default Victory components render responsive containers with the `viewBox` attribute set to `viewBox=\\\"0, 0, width, height\\\"` and `width=\\\"100%\\\"`, `height=\\\"auto\\\"`. In responsive containers, the `width` and `height` props affect the _aspect ratio_ of the rendered component, while the absolute width and height are determined by the container. To render a static container, pass `responsive={false}` to the `containerComponent` like `containerComponent={<VictoryContainer responsive={false}/>}`, or set `standalone={false}` and render the resulting `<g>` tag in your own `<svg>` container. When a component is nested within `VictoryChart`, `VictoryStack`, or `VictoryGroup` setting the `height` prop on the child component will have no effect.\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```playground\\n<div>\\n  <VictoryBar height={500} />\\n  <VictoryBar height={500}\\n    containerComponent={<VictoryContainer responsive={false}/>}\\n  />\\n</div>\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the independent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domainPadding={{ x: 10 }}\\n>\\n  <VictoryBar horizontal\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\nThe `labelComponent` prop takes a component instance which will be used to render labels for the component. The new element created from the passed `labelComponent` will be supplied with the following properties: x, y, index, data, datum, verticalAnchor, textAnchor, angle, style, text, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above. [VictoryTooltip][] is commonly used as a `labelComponent`\\n\\n_examples:_\\n\\n- `labelComponent={<VictoryLabel dy={20}/>}`\\n- `labelComponent={<VictoryTooltip/>}`\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n  style={{ labels: { fill: \\\"white\\\" } }}\\n  labelComponent={<VictoryLabel dy={30} />}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\nThe `labels` prop defines the labels that will appear above each point. This prop should be given as an array or as a function. When given as a function, `labels` will be called with a single argument: an object containing all the props supplied to the label component. A full list of props that will be passed to `VictoryLabel` is given [here](/docs/victory-label).\\n\\n_examples:_\\n\\n- `labels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n- `labels={({ datum }) => datum.y}`\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\nThe `maxDomain` prop defines a maximum domain value for a chart. This prop is useful in situations where the maximum domain of a chart is static, while the minimum value depends on data or other variable information. If the `domain` prop is set in addition to `maximumDomain`, `domain` will be used.\\n\\n_note:_ The `x` value supplied to the `maxDomain` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.\\n\\n_examples:_\\n\\n- `maxDomain={0}`\\n- `maxDomain={{ y: 0 }}`\\n\\n```playground\\n<VictoryChart maxDomain={{ y: 0 }}>\\n  <VictoryLine\\n    data={[\\n      { x: 1, y: -2 },\\n      { x: 2, y: 1 },\\n      { x: 3, y: -1 },\\n      { x: 4, y: -3 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\nThe `minDomain` prop defines a minimum domain value for a chart. This prop is useful in situations where the minimum domain of a chart is static, while the maximum value depends on data or other variable information. If the `domain` prop is set in addition to `minimumDomain`, `domain` will be used.\\n\\n_note:_ The `x` value supplied to the `minDomain` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.\\n\\n_examples:_\\n\\n- `minDomain={0}`\\n- `minDomain={{ y: 0 }}`\\n\\n```playground\\n<VictoryChart minDomain={{ y: 0 }}>\\n  <VictoryLine\\n    data={[\\n      { x: 1, y: 2 },\\n      { x: 2, y: -1 },\\n      { x: 3, y: 1 },\\n      { x: 4, y: 3 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n_example:_ `name=\\\"series-1\\\"`\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\nThe origin prop is used to define the center point in svg coordinates for polar charts. All children within a polar chart must share the same origin, so setting this prop on children nested within `VictoryChart`, `VictoryStack`, or `VictoryGroup` will have no effect. When this prop is not set, it will be calculated based on the `width`, `height` and `padding` of the chart. **This prop is usually not set manually.**\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\nThe `padding` prop specifies the amount of padding in number of pixels between the edge of the chart and any rendered child components. This prop can be given as a number or as an object with padding specified for top, bottom, left and right. As with [width][] and [height][], the absolute padding will depend on whether the component is rendered in a responsive container. When a component is nested within `VictoryChart`, `VictoryStack`, or `VictoryGroup` setting `padding` on the child component will have no effect.\\n\\n_examples:_\\n\\n- `padding={{top: 20, bottom: 60}}`\\n- `padding={40}`\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```playground\\n<VictoryChart\\n  padding={{ top: 40, bottom: 80, left: 40, right: 80 }}\\n>\\n<VictoryLine data={sampleData} />\\n</VictoryChart>\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\nThe boolean `polar` prop specifies whether a chart should be plotted on a polar coordinate system. All components in a given chart must share the same coordinate system, so setting this prop on children nested within `VictoryChart`, `VictoryStack`, or `VictoryGroup` will have no effect.\\n\\n```playground\\n<div>\\n<VictoryBar polar\\n  data={sampleData}\\n  labels={(d) => d.x.toFixed(0)}\\n  width={400} height={400}\\n  domain={{ x: [0, 7], y: [0, 7] }}\\n  style={{ data: { fill: \\\"#c43a31\\\", stroke: \\\"black\\\", strokeWidth: 2 } }}\\n/>\\n<VictoryBar\\n  data={sampleData}\\n  labels={(d) => d.x.toFixed(0)}\\n  width={400} height={400}\\n  domain={{ x: [0, 7], y: [0, 7] }}\\n  style={{ data: { fill: \\\"#c43a31\\\", stroke: \\\"black\\\", strokeWidth: 2 } }}\\n/>\\n</div>\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\nThe `range` prop describes the dimensions over which data may be plotted. For cartesian coordinate systems, this corresponds to minimum and maximum svg coordinates in the x and y dimension. In polar coordinate systems this corresponds to a range of angles and radii. When this value is not given it will be calculated from the `width`, `height`, and `padding`, or from the `startAngle` and `endAngle` in the case of polar charts. All components in a given chart must share the same range, so setting this prop on children nested within `VictoryChart`, `VictoryStack`, or `VictoryGroup` will have no effect. **This prop is usually not set manually.**\\n\\n_examples:_\\n\\n- Cartesian: `range={{ x: [50, 250], y: [50, 250] }}`\\n- Polar: `range={{ x: [0, 360], y: [0, 250] }}`\\n\\n## samples\\n\\n`type: number`\\n\\nThe `samples` prop specifies how many individual points to plot when plotting\\ny as a function of x. The `samples` prop is ignored if `data` is supplied in props.\\n\\n_default:_ `samples={50}`\\n\\n```playground\\n<VictoryChart>\\n  <VictoryLine\\n    samples={25}\\n    y={(d) => Math.sin(5 * Math.PI * d.x)}\\n  />\\n  <VictoryLine\\n    samples={100}\\n    style={{ data: { stroke: \\\"red\\\" } }}\\n    y={(d) => Math.cos(5 * Math.PI * d.x)}\\n  />\\n</VictoryChart>\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\nThe `scale` prop determines which scales your chart should use. This prop can be given as a string specifying a supported scale (\\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\"), or as an object with scales specified for x and y. For \\\"time\\\" scales, data points should be `Date` objects or `getTime()` instances.\\n\\n_note:_ The `x` value supplied to the `scale` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n_examples:_\\n\\n- `scale=\\\"time\\\"`\\n- `scale={{x: \\\"linear\\\", y: \\\"log\\\"}}`\\n\\n```playground\\n<VictoryChart\\n  scale={{ x: \\\"linear\\\", y: \\\"log\\\" }}\\n>\\n  <VictoryLine\\n    style={{ data: { stroke: \\\"red\\\" } }}\\n    domain={{ x: [0, 5] }}\\n    y={(d) => Math.pow(1 - d.x, 10)}\\n  />\\n</VictoryChart>\\n```\\n\\n## sharedEvents\\n\\nThe `sharedEvents` prop is used to coordinate events between Victory components using `VictorySharedEvents`. **This prop should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\nBy default `domainPadding` is coerced to existing quadrants. This means that if a given domain only includes positive values, no amount of padding applied by `domainPadding` will result in a domain with negative values. This is the desired behavior in most cases. For users that need to apply padding without regard to quadrant, the `singleQuadrantDomainPadding` prop may be used. This prop may be given as a boolean or an object with boolean values specified for \\\"x\\\" and/or \\\"y\\\". When this prop is false (or false for a given dimension), padding will be applied without regard to quadrant. If this prop is not specified, `domainPadding` will be coerced to existing quadrants.\\n\\n_note:_ The `x` value supplied to the `singleQuadrantDomainPadding` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.\\n\\n_examples:_\\n\\n- `singleQuadrantDomainPadding={false}`\\n- `singleQuadrantDomainPadding={{ x: false }}`\\n\\n```playground\\n<VictoryChart\\n  singleQuadrantDomainPadding={{ x: false }}\\n  domainPadding={100}\\n>\\n  <VictoryBar data={sampleData}/>\\n  <VictoryAxis crossAxis={false}/>\\n</VictoryChart>\\n```\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\nUse the `sortKey` prop to indicate how data should be sorted. This prop is\\ngiven directly to the lodash [sortBy][] function to be executed on the final\\ndataset.\\n\\nThis prop can be provided in a variety of formats\\n\\n**string:** specify which property in a data object to sort the data array by\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n**function:** use a function to determine how to sort data elements in an array\\n\\n```jsx\\nsortKey={(datum) => datum.xValue + datum.error}\\n```\\n\\n**array index:** specify which index of an array should be used to sort data when data is given as an array of arrays\\n\\n```jsx\\nsortKey={0}\\n```\\n\\n**array:** specify multiple properties to sort by\\n\\n```jsx\\nsortKey={[\\\"age\\\", \\\"height\\\"]}\\n```\\n\\n```playground\\n<VictoryLine\\n  data={range(0, 2 * Math.PI, 0.01).map((t) => ({ t }))}\\n  sortKey=\\\"t\\\"\\n  x={(d) => Math.sin(3 * d.t + (2 * Math.PI))}\\n  y={(d) => Math.sin(2 * d.t)}\\n/>\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\nThe `standalone` props specifies whether the component should be rendered in a independent `<svg>` element or in a `<g>` tag. This prop defaults to true, and renders an `svg`, however, wrapper components like `VictoryChart`, `VictoryStack`, and `VictoryGroup` force children to use `standalone={false}`.\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryArea\\n    standalone={false}\\n    width={300} height={300} padding={0}\\n    data={sampleData}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: object`\\n\\nThe `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `data`, `labels` and `parent`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart.\\n\\n```jsx\\nstyle={{\\n  data: { fill: \\\"tomato\\\", opacity: 0.7 },\\n  labels: { fontSize: 12 },\\n  parent: { border: \\\"1px solid #ccc\\\" }\\n}}\\n```\\n\\nAny style attribute may also be defined as a function of the props for whatever element it applies to. For example:\\n\\n```jsx\\nstyle={{\\n  data: { fill: ({ datum }) => datum.y > 0 ? \\\"green\\\" : \\\"red\\\" },\\n  labels: { fontSize: ({ text }) => text.length > 10 ? 8 : 12 },\\n  parent: { border: \\\"1px solid #ccc\\\" }\\n}}\\n```\\n\\n**note:** The `style` prop used by `VictoryAxis` has a different format than the standard `style` prop.\\n\\n**note:** When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.\\n\\n**note:** custom `angle` and `verticalAnchor` properties maybe included in labels styles.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryScatter\\n  style={{\\n    parent: {\\n      border: \\\"1px solid #ccc\\\"\\n    },\\n    data: {\\n      fill: \\\"#c43a31\\\", fillOpacity: 0.6, stroke: \\\"#c43a31\\\", strokeWidth: 3\\n    },\\n    labels: {\\n      fontSize: 15, fill: \\\"#c43a31\\\", padding: 15\\n    }\\n  }}\\n  size={9}\\n  data={sampleData}\\n  labels={({ datum }) => datum.x}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\nThe `theme` prop specifies a theme to use for determining styles and layout properties for a component. Any styles or props defined in `theme` may be overwritten by props specified on the component instance. By default, components use a [grayscale theme][].\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\nThe `width` prop determines the width of the containing `<svg>`. By default Victory components render responsive containers with the `viewBox` attribute set to `viewBox=\\\"0, 0, width, height\\\"` and `width=\\\"100%\\\"`, `height=\\\"auto\\\"`. In responsive containers, the `width` and `height` props affect the _aspect ratio_ of the rendered component, while the absolute width and height are determined by the container. To render a static container, pass `responsive={false}` to the `containerComponent` like `containerComponent={<VictoryContainer responsive={false}/>}`, or set `standalone={false}` and render the resulting `<g>` tag in your own `<svg>` container. When a component is nested within `VictoryChart`, `VictoryStack`, or `VictoryGroup` setting `width` prop on the child component will have no effect.\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```playground\\n<div>\\n  <VictoryBar width={1200}/>\\n  <VictoryBar width={1200}\\n    containerComponent={<VictoryContainer responsive={false}/>}\\n  />\\n</div>\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\nUse the `x` data accessor prop to determine how the component defines data in the x dimension. This prop may be given in a variety of formats:\\n\\n**string:** specify which property in an array of data objects should be used as the x value\\n\\n```jsx\\nx = \\\"month\\\";\\n```\\n\\n**function:** use a function to translate each element in a data array into an x value\\n\\n```jsx\\nx={(datum) => datum.xValue + datum.error}\\n```\\n\\n**array index:** specify which index of an array should be used as an x value when data is given as an array of arrays\\n\\n```jsx\\nx={0}\\n```\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as an x value\\n\\n```jsx\\nx=\\\"employees.name\\\"`, `x={[\\\"employees\\\", \\\"name\\\"]}\\n```\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `y` data accessor prop to determine how the component defines data in the y dimension. This prop may be given in a variety of formats:\\n\\n**string:** specify which property in an array of data objects should be used as the y value\\n\\n```jsx\\ny = \\\"profit\\\";\\n```\\n\\n**function:** use a function to translate each element in a data array into a y value\\n\\n```jsx\\ny={(datum) => Math.sin(2 * Math.PI * datum.x)}\\n```\\n\\n**array index:** specify which index of an array should be used as a y value when data is given as an array of arrays\\n\\n```jsx\\ny={1}\\n```\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a y value\\n\\n```jsx\\ny=\\\"employees.salary\\\"`, `y={[\\\"employees\\\", \\\"salary\\\"]}\\n```\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n## y0\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `y0` data accessor prop to determine how the component defines the baseline y0 data. This prop is useful for defining custom baselines for components like `VictoryBar` or `VictoryArea`. This prop may be given in a variety of formats.\\n\\n**string:** specify which property in an array of data objects should be used as the y0 value\\n\\n```jsx\\ny0 = \\\"last_quarter_profit\\\";\\n```\\n\\n**function:** use a function to translate each element in a data array into a y0 value\\n\\n```jsx\\ny0={() => 10}\\n```\\n\\n**array index:** specify which index of an array should be used as a y0 value when data is given as an array of arrays\\n\\n```jsx\\ny0={1}\\n```\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a y0 value\\n\\n```jsx\\ny0=\\\"employees.salary\\\"`, `y={[\\\"employees\\\", \\\"salary\\\"]}\\n```\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n[x]: #x\\n[y]: #y\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n[width]: #width\\n[height]: #height\\n[victorylabel]: /docs/victory-label\\n[victorytooltip]: /docs/victory-tooltip\\n[victoryportal]: /docs/victory-portal\\n[victoryclipcontainer]: /docs/victory-clip-container\\n[victorybrushcontainer]: /docs/victory-brush-container\\n[victorycursorcontainer]: /docs/victory-cursor-container\\n[victoryselectioncontainer]: /docs/victory-selection-container\\n[victoryvoronoicontainer]: /docs/victory-voronoi-container\\n[victoryzoomcontainer]: /docs/victory-zoom-container\\n[createcontainer]: /docs/create-container\\n[victoryanimation]: /docs/victory-animation\\n[victorytransition]: /docs/victory-transition\\n[sortby]: https://lodash.com/docs/4.17.4#sortBy\\n[animations guide]: /guides/animations\\n[data accessors guide]: /guides/data-accessors\\n[custom components guide]: /guides/custom-components\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n\"},{\"data\":{\"id\":0,\"title\":\"VictoryBoxPlot\",\"category\":\"charts\",\"type\":\"docs\",\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryBoxPlot\",\"depth\":1,\"slug\":\"victory-box-plot\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"boxWidth\",\"depth\":2,\"slug\":\"box-width\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelOrientation\",\"depth\":2,\"slug\":\"label-orientation\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"max\",\"depth\":2,\"slug\":\"max\"},{\"type\":\"heading\",\"value\":\"maxComponent\",\"depth\":2,\"slug\":\"max-component\"},{\"type\":\"heading\",\"value\":\"maxLabelComponent\",\"depth\":2,\"slug\":\"max-label-component\"},{\"type\":\"heading\",\"value\":\"maxLabels\",\"depth\":2,\"slug\":\"max-labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"median\",\"depth\":2,\"slug\":\"median\"},{\"type\":\"heading\",\"value\":\"medianComponent\",\"depth\":2,\"slug\":\"median-component\"},{\"type\":\"heading\",\"value\":\"medianLabelComponent\",\"depth\":2,\"slug\":\"median-label-component\"},{\"type\":\"heading\",\"value\":\"medianLabels\",\"depth\":2,\"slug\":\"median-labels\"},{\"type\":\"heading\",\"value\":\"min\",\"depth\":2,\"slug\":\"min\"},{\"type\":\"heading\",\"value\":\"minComponent\",\"depth\":2,\"slug\":\"min-component\"},{\"type\":\"heading\",\"value\":\"minLabelComponent\",\"depth\":2,\"slug\":\"min-label-component\"},{\"type\":\"heading\",\"value\":\"minLabels\",\"depth\":2,\"slug\":\"min-labels\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"q1\",\"depth\":2,\"slug\":\"q-1\"},{\"type\":\"heading\",\"value\":\"q1Component\",\"depth\":2,\"slug\":\"q-1-component\"},{\"type\":\"heading\",\"value\":\"q1LabelComponent\",\"depth\":2,\"slug\":\"q-1-label-component\"},{\"type\":\"heading\",\"value\":\"q1Labels\",\"depth\":2,\"slug\":\"q-1-labels\"},{\"type\":\"heading\",\"value\":\"q3\",\"depth\":2,\"slug\":\"q-3\"},{\"type\":\"heading\",\"value\":\"q3Component\",\"depth\":2,\"slug\":\"q-3-component\"},{\"type\":\"heading\",\"value\":\"q3LabelComponent\",\"depth\":2,\"slug\":\"q-3-label-component\"},{\"type\":\"heading\",\"value\":\"q3Labels\",\"depth\":2,\"slug\":\"q-3-labels\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"whiskerWidth\",\"depth\":2,\"slug\":\"whisker-width\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"}],\"slug\":\"victory-box-plot\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryBoxPlot\",\"depth\":1,\"slug\":\"victory-box-plot\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"boxWidth\",\"depth\":2,\"slug\":\"box-width\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelOrientation\",\"depth\":2,\"slug\":\"label-orientation\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"max\",\"depth\":2,\"slug\":\"max\"},{\"type\":\"heading\",\"value\":\"maxComponent\",\"depth\":2,\"slug\":\"max-component\"},{\"type\":\"heading\",\"value\":\"maxLabelComponent\",\"depth\":2,\"slug\":\"max-label-component\"},{\"type\":\"heading\",\"value\":\"maxLabels\",\"depth\":2,\"slug\":\"max-labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"median\",\"depth\":2,\"slug\":\"median\"},{\"type\":\"heading\",\"value\":\"medianComponent\",\"depth\":2,\"slug\":\"median-component\"},{\"type\":\"heading\",\"value\":\"medianLabelComponent\",\"depth\":2,\"slug\":\"median-label-component\"},{\"type\":\"heading\",\"value\":\"medianLabels\",\"depth\":2,\"slug\":\"median-labels\"},{\"type\":\"heading\",\"value\":\"min\",\"depth\":2,\"slug\":\"min\"},{\"type\":\"heading\",\"value\":\"minComponent\",\"depth\":2,\"slug\":\"min-component\"},{\"type\":\"heading\",\"value\":\"minLabelComponent\",\"depth\":2,\"slug\":\"min-label-component\"},{\"type\":\"heading\",\"value\":\"minLabels\",\"depth\":2,\"slug\":\"min-labels\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"q1\",\"depth\":2,\"slug\":\"q-1\"},{\"type\":\"heading\",\"value\":\"q1Component\",\"depth\":2,\"slug\":\"q-1-component\"},{\"type\":\"heading\",\"value\":\"q1LabelComponent\",\"depth\":2,\"slug\":\"q-1-label-component\"},{\"type\":\"heading\",\"value\":\"q1Labels\",\"depth\":2,\"slug\":\"q-1-labels\"},{\"type\":\"heading\",\"value\":\"q3\",\"depth\":2,\"slug\":\"q-3\"},{\"type\":\"heading\",\"value\":\"q3Component\",\"depth\":2,\"slug\":\"q-3-component\"},{\"type\":\"heading\",\"value\":\"q3LabelComponent\",\"depth\":2,\"slug\":\"q-3-label-component\"},{\"type\":\"heading\",\"value\":\"q3Labels\",\"depth\":2,\"slug\":\"q-3-labels\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"whiskerWidth\",\"depth\":2,\"slug\":\"whisker-width\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 0\\ntitle: VictoryBoxPlot\\ncategory: charts\\ntype: docs\\n---\\n\\n# VictoryBoxPlot\\n\\n`VictoryBoxPlot` renders a box plot to describe the distribution of a set of data. Data for `VictoryBoxPlot` may be given with summary statistics pre-calculated (`min`, `median`, `max`, `q1`, `q3`), or as an array of raw data. VictoryBoxPlot can be composed with [`VictoryChart`][] to create box plot charts.\\n\\n```playground\\n<VictoryChart domainPadding={20}>\\n  <VictoryBoxPlot\\n    boxWidth={20}\\n    data={[\\n      { x: 1, y: [1, 2, 3, 5] },\\n      { x: 2, y: [3, 2, 8, 10] },\\n      { x: 3, y: [2, 8, 6, 5] },\\n      { x: 4, y: [1, 3, 2, 9] }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryBoxPlot` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## boxWidth\\n\\n`type: number`\\n\\nThe `boxWidth` prop specifies how wide each box should be. If the `whiskerWidth` prop is not set, this prop will also determine the width of the whisker crosshair.\\n\\n```playground\\n<VictoryChart domainPadding={10}>\\n  <VictoryBoxPlot\\n    boxWidth={10}\\n    whiskerWidth={5}\\n    data={[\\n      { x: 1, y: [1, 2, 3, 5] },\\n      { x: 2, y: [3, 2, 8, 10] },\\n      { x: 3, y: [2, 8, 6, 5] },\\n      { x: 4, y: [1, 3, 2, 9] }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryBoxPlot` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryBoxPlot` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\nThe `data` prop for `VictoryBoxPlot` may be given in a a variety of formats:\\n\\n-   As an array of standard data objects with values specified for `x` and `y`\\n    When given in this format, repeated values for `x` will be used for calculating summary statistics\\n\\n```jsx\\ndata={[\\n  { x: 1, y: 2 },\\n  { x: 1, y: 3 },\\n  { x: 1, y: 5 },\\n  { x: 2, y: 1 },\\n  { x: 2, y: 4 },\\n  { x: 2, y: 5 },\\n  ...\\n]}\\n```\\n\\n-   As an array of data objects where `y` is given as an array of values\\n    When given in this format, array values are used for calculating summary statistics.\\n\\n```jsx\\ndata={[\\n  { x: 1, y: [1, 2, 3, 5] },\\n  { x: 2, y: [3, 2, 8, 10] },\\n  { x: 3, y: [2, 8, 6, 5] },\\n  { x: 4, y: [1, 3, 2, 9] }\\n]}\\n```\\n\\n-   As an array of data objects with pre-calculated summary statistics(`min`, `median`, `max`, `q1`, `q3`)\\n    When given in this format, `VictoryBoxPlot` _will not_ preform statistical analysis. Pre-calculating summary statistics for large datasets will improve performance.\\n\\n```jsx\\ndata={[\\n  { x: 1, min: 2, median: 5, max: 10, q1: 3, q3: 7 },\\n  { x: 2, min: 1, median: 4, max: 9, q1: 3, q3: 6 },\\n  { x: 3, min: 1, median: 6, max: 12, q1: 4, q3: 10 },\\n```\\n\\nUse the [`x`][], [`y`][], [`min`][], [`max`][], [`median`][], [`q1`][], and [`q3`][] data accessor props to specify custom data formats. Refer to the [Data Accessors Guide][] for more detail.\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryBoxPlot` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryBoxPlot` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBoxPlot` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type array[object]`\\n\\n`VictoryBoxPlot` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n**note:** valid event targets for `VictoryBoxPlot` are:\\n\\\"min\\\", \\\"minLabels\\\", \\\"grid\\\", \\\"ticks\\\", and \\\"tickLabels\\\".\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryBoxPlot\\n    medianLabels={() => null}\\n    events={[{\\n      target: \\\"q3\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              mutation: (props) => {\\n                return { style: Object.assign(props.style, { fill: \\\"tomato\\\" }) };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={[\\n      { x: 1, y: [1, 2, 3, 5] },\\n      { x: 2, y: [3, 2, 8, 10] },\\n      { x: 3, y: [2, 8, 6, 5] },\\n      { x: 4, y: [1, 3, 2, 9] }\\n    ]}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryBoxPlot` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryBoxPlot` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryBoxPlot` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe horizontal prop determines whether boxes will be laid vertically or horizontally. The boxes will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true.\\n\\n```playground\\n<VictoryBoxPlot horizontal\\n  data={[\\n    { x: 1, y: [1, 2, 3, 5] },\\n    { x: 2, y: [3, 2, 8, 10] },\\n    { x: 3, y: [2, 8, 6, 5] },\\n    { x: 4, y: [1, 3, 2, 9] }\\n  ]}\\n/>\\n```\\n\\n## labelOrientation\\n\\n`type: \\\"top\\\" || \\\"bottom\\\" || \\\"left\\\" || \\\"right\\\"` || { min, max, median, q1, q3 }\\n\\nThe `labelOrientation` prop determines where labels are placed relative to their corresponding data. If this prop is not set, it will be set to \\\"top\\\" for horizontal charts, and \\\"right\\\" for vertical charts.\\n\\n```playground\\n<VictoryChart horizontal domainPadding={20}>\\n  <VictoryBoxPlot\\n    labels\\n    labelOrientation=\\\"top\\\"\\n    data={[\\n      { x: 1, y: [1, 2, 3, 5] },\\n      { x: 2, y: [3, 2, 8, 10] },\\n      { x: 3, y: [2, 8, 6, 5] },\\n      { x: 4, y: [1, 3, 2, 9] }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## labels\\n\\n`type: boolean`\\n\\nWhen the boolean `labels` prop is set to `true`, the values for `min`, `max`, `median`, `q1`, and `q3` will be displayed for each box. For more granular label control, use the individual [`minLabels`][], [`maxLabels`][], [`medianLabels`][], [`q1Labels`][], and [`q3Labels`][] props.\\n\\n## max\\n\\n`type: string || array[string] || function`\\n\\nUse the `max` data accessor prop to define the max value of a box plot.\\n\\n**string:** specify which property in an array of data objects should be used as the max value\\n\\n_examples:_ `max=\\\"max_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a max value\\n\\n_examples:_ `max={() => 10}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a max value\\n\\n_examples:_ `max=\\\"bonds.max\\\"`, `max={[\\\"bonds\\\", \\\"max\\\"]}`\\n\\n## maxComponent\\n\\n`type: element`\\n\\nThe `maxComponent` prop takes a component instance which will be responsible for rendering an element to represent the maximum value of the box plot. The new element created from the passed `maxComponent` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `majorWhisker` and `minorWhisker`. The `majorWhisker` and `minorWhisker` props are given as objects with values for `x1`, `y1`, `x2` and `y2` that describes the lines that make up the major and minor whisker. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `maxComponent` is not provided, `VictoryBoxPlot` will use its default [Whisker component][].\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `maxComponent={<Whisker/>}`\\n\\n```jsx\\nmaxComponent={<Whisker events={{ onClick: handleClick }}/>}\\n```\\n\\n## maxLabelComponent\\n\\n`type: element`\\n\\nThe `maxLabelComponent` prop takes a component instance which will be used to render the label corresponding to the maximum value for each box. The new element created from the passed `maxLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `maxLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `maxLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nmaxLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryBoxPlot\\n  data={[\\n    { x: 1, y: [1, 2, 3, 5] },\\n    { x: 2, y: [3, 2, 8, 10] },\\n    { x: 3, y: [2, 8, 6, 5] },\\n    { x: 4, y: [1, 3, 2, 9] }\\n  ]}\\n  maxLabels\\n  maxLabelComponent={\\n    <VictoryLabel\\n      dx={-10} dy={-10}\\n      textAnchor=\\\"middle\\\"\\n    />\\n  }\\n/>\\n```\\n\\n## maxLabels\\n\\n`type: array || function || boolean`\\n\\nThe `maxLabels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.\\n\\n_examples:_\\n\\n-   `maxLabels`\\n-   `maxLabels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n-   `maxLabels={({ datum }) => Math.round(datum.max)}`\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryBoxPlot` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={{ x: 3 }}>\\n  <VictoryBoxPlot\\n    data={[\\n      { x: 1, y: [1, 2, 3, 5] },\\n      { x: 2, y: [3, 2, 8, 10] },\\n      { x: 3, y: [2, 8, 6, 5] },\\n      { x: 4, y: [1, 3, 2, 9] }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## median\\n\\n`type: string || array[string] || function`\\n\\nUse the `median` data accessor prop to define the median value of a box plot.\\n\\n**string:** specify which property in an array of data objects should be used as the median value\\n\\n_examples:_ `median=\\\"median_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a median value\\n\\n_examples:_ `median={() => 10}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a median value\\n\\n_examples:_ `median=\\\"bonds.median\\\"`, `median={[\\\"bonds\\\", \\\"median\\\"]}`\\n\\n## medianComponent\\n\\n`type: element`\\n\\nThe `medianComponent` prop takes a component instance which will be responsible for rendering an element to represent the median value of the box plot. The new element created from the passed `medianComponent` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `x1`, `y1`, `x2` and `y2` Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `medianComponent` is not provided, `VictoryBoxPlot` will use its default [Line component][].\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `medianComponent={<LineSegment/>}`\\n\\n```jsx\\nmedianComponent={<LineSegment events={{ onClick: handleClick }}/>}\\n```\\n\\n## medianLabelComponent\\n\\n`type: element`\\n\\nThe `medianLabelComponent` prop takes a component instance which will be used to render the label corresponding to the median value for each box. The new element created from the passed `medianLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `medianLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `medianLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nmedianLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryBoxPlot\\n  data={[\\n    { x: 1, y: [1, 2, 3, 5] },\\n    { x: 2, y: [3, 2, 8, 10] },\\n    { x: 3, y: [2, 8, 6, 5] },\\n    { x: 4, y: [1, 3, 2, 9] }\\n  ]}\\n  medianLabels\\n  medianLabelComponent={\\n    <VictoryLabel\\n      dx={-10} dy={-10}\\n      textAnchor=\\\"middle\\\"\\n    />\\n  }\\n/>\\n```\\n\\n## medianLabels\\n\\n`type: array || function || boolean`\\n\\nThe `medianLabels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the median value of each datum will be used for the label.\\n\\n_examples:_\\n\\n-   `medianLabels`\\n-   `medianLabels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n-   `medianLabels={({ datum }) => Math.round(datum.median)}`\\n\\n## min\\n\\n`type: string || array[string] || function`\\n\\nUse the `min` data accessor prop to define the min value of a box plot.\\n\\n**string:** specify which property in an array of data objects should be used as the min value\\n\\n_examples:_ `min=\\\"min_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a min value\\n\\n_examples:_ `min={() => 10}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a min value\\n\\n_examples:_ `min=\\\"bonds.min\\\"`, `min={[\\\"bonds\\\", \\\"min\\\"]}`\\n\\n## minComponent\\n\\n`type: element`\\n\\nThe `minComponent` prop takes a component instance which will be responsible for rendering an element to represent the minimum value of the box plot. The new element created from the passed `minComponent` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `majorWhisker` and `minorWhisker`. The `majorWhisker` and `minorWhisker` props are given as objects with values for `x1`, `y1`, `x2` and `y2` that describes the lines that make up the major and minor whisker. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `minComponent` is not provided, `VictoryBoxPlot` will use its default [Whisker component][].\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `minComponent={<Whisker/>}`\\n\\n```jsx\\nminComponent={<Whisker events={{ onClick: handleClick }}/>}\\n```\\n\\n## minLabelComponent\\n\\n`type: element`\\n\\nThe `minLabelComponent` prop takes a component instance which will be used to render the label corresponding to the minimum value for each box. The new element created from the passed `minLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `minLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `minLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nminLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryBoxPlot\\n  data={[\\n    { x: 1, y: [1, 2, 3, 5] },\\n    { x: 2, y: [3, 2, 8, 10] },\\n    { x: 3, y: [2, 8, 6, 5] },\\n    { x: 4, y: [1, 3, 2, 9] }\\n  ]}\\n  minLabels\\n  minLabelComponent={\\n    <VictoryLabel\\n      dx={-10} dy={10}\\n      textAnchor=\\\"middle\\\"\\n    />\\n  }\\n/>\\n```\\n\\n## minLabels\\n\\n`type: array || function || boolean`\\n\\nThe `minLabels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the min value of each datum will be used for the label.\\n\\n_examples:_\\n\\n-   `minLabels`\\n-   `minLabels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n-   `minLabels={({ datum }) => Math.round(datum.min)}`\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryBoxPlot` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={{ y: 0 }}>\\n  <VictoryBoxPlot\\n    data={[\\n      { x: 1, y: [1, 2, 3, 5] },\\n      { x: 2, y: [3, 2, 8, 10] },\\n      { x: 3, y: [2, 8, 6, 5] },\\n      { x: 4, y: [1, 3, 2, 9] }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryBoxPlot` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryBoxPlot` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n**Note:** Polar Charts are not yet supported for `VictoryBoxPlot`\\n\\n## q1\\n\\n`type: string || array[string] || function`\\n\\nUse the `q1` data accessor prop to define the q1 value of a box plot.\\n\\n**string:** specify which property in an array of data objects should be used as the q1 value\\n\\n_examples:_ `q1=\\\"q1_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a q1 value\\n\\n_examples:_ `q1={() => 10}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a q1 value\\n\\n_examples:_ `q1=\\\"bonds.q1\\\"`, `q1={[\\\"bonds\\\", \\\"q1\\\"]}`\\n\\n## q1Component\\n\\n`type: element`\\n\\nThe `q1Component` prop takes a component instance which will be responsible for rendering an element to represent the q1 value of the box plot. The new element created from the passed `q1Component` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `x`, `y`, `width` and `height` Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `q1Component` is not provided, `VictoryBoxPlot` will use its default [Box component][].\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `q1Component={<Box/>}`\\n\\n```jsx\\nq1Component={<Box events={{ onClick: handleClick }}/>}\\n```\\n\\n## q1LabelComponent\\n\\n`type: element`\\n\\nThe `q1LabelComponent` prop takes a component instance which will be used to render the label corresponding to the q1 value for each box. The new element created from the passed `q1LabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `q1LabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `q1LabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nq1LabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryBoxPlot\\n  data={[\\n    { x: 1, y: [1, 2, 3, 5] },\\n    { x: 2, y: [3, 2, 8, 10] },\\n    { x: 3, y: [2, 8, 6, 5] },\\n    { x: 4, y: [1, 3, 2, 9] }\\n  ]}\\n  q1Labels\\n  q1LabelComponent={\\n    <VictoryLabel\\n      dx={5} dy={5}\\n    />\\n  }\\n/>\\n```\\n\\n## q1Labels\\n\\n`type: array || function || boolean`\\n\\nThe `q1Labels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the q1 value of each datum will be used for the label.\\n\\n_examples:_\\n\\n-   `q1Labels`\\n-   `q1Labels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n-   `q1Labels={({ datum }) => Math.round(datum.q1)}`\\n\\n## q3\\n\\n`type: string || array[string] || function`\\n\\nUse the `q3` data accessor prop to define the q3 value of a box plot.\\n\\n**string:** specify which property in an array of data objects should be used as the q3 value\\n\\n_examples:_ `q3=\\\"q3_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a q3 value\\n\\n_examples:_ `q3={() => 10}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a q3 value\\n\\n_examples:_ `q3=\\\"bonds.q3\\\"`, `q3={[\\\"bonds\\\", \\\"q3\\\"]}`\\n\\n## q3Component\\n\\n`type: element`\\n\\nThe `q3Component` prop takes a component instance which will be responsible for rendering an element to represent the q3 value of the box plot. The new element created from the passed `q3Component` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `x`, `y`, `width` and `height` Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `q3Component` is not provided, `VictoryBoxPlot` will use its default [Box component][].\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `q3Component={<Box/>}`\\n\\n```jsx\\nq3Component={<Box events={{ onClick: handleClick }}/>}\\n```\\n\\n## q3LabelComponent\\n\\n`type: element`\\n\\nThe `q3LabelComponent` prop takes a component instance which will be used to render the label corresponding to the q3 value for each box. The new element created from the passed `q3LabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `q3LabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `q3LabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nq3LabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryBoxPlot\\n  data={[\\n    { x: 1, y: [1, 2, 3, 5] },\\n    { x: 2, y: [3, 2, 8, 10] },\\n    { x: 3, y: [2, 8, 6, 5] },\\n    { x: 4, y: [1, 3, 2, 9] }\\n  ]}\\n  q3Labels\\n  q3LabelComponent={\\n    <VictoryLabel\\n      dx={5} dy={5}\\n    />\\n  }\\n/>\\n```\\n\\n## q3Labels\\n\\n`type: array || function || boolean`\\n\\nThe `q3Labels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the q3 value of each datum will be used for the label.\\n\\n_examples:_\\n\\n-   `q3Labels`\\n-   `q3Labels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n-   `q3Labels={({ datum }) => Math.round(datum.q3)}`\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: number`\\n\\n`VictoryBoxPlot` uses the standard `samples` prop. [Read about it here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryBoxPlot` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryBoxPlot` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBoxPlot` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryBoxPlot` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryBoxPlot` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n## style\\n\\n    type: {\\n      parent: object,\\n      max: object,\\n      maxLabels: object,\\n      min: object,\\n      minLabels: object,\\n      median: object,\\n      medianLabels: object,\\n      q1: object,\\n      q1Labels: object,\\n      q3: object,\\n      q3Labels: object\\n    }\\n\\nThe `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `max`, `maxLabels`, `min`, `minLabels`,`median`, `medianLabels`,`q1`, `q1Labels`,`q3`, `q3Labels`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for style properties, and they will be evaluated with the props corresponding to each element.\\n\\n**note:** When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.\\n\\n**note:** custom `angle` and `verticalAnchor` properties may be included in `labels` styles.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryBoxPlot\\n  minLabels\\n  maxLabels\\n  data={[\\n    { x: 1, y: [1, 2, 3, 5] },\\n    { x: 2, y: [3, 2, 8, 10] },\\n    { x: 3, y: [2, 8, 6, 5] },\\n    { x: 4, y: [1, 3, 2, 9] }\\n  ]}\\n  style={{\\n    min: { stroke: \\\"tomato\\\" },\\n    max: { stroke: \\\"orange\\\" },\\n    q1: { fill: \\\"tomato\\\" },\\n    q3: { fill: \\\"orange\\\" },\\n    median: { stroke: \\\"white\\\", strokeWidth: 2 },\\n    minLabels: { fill: \\\"tomato\\\" },\\n    maxLabels: { fill: \\\"orange\\\" }\\n  }}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryBoxPlot` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## whiskerWidth\\n\\n`type: number`\\n\\nThe `whiskerWidth` prop specifies how wide each whisker crosshair should be. If the `whiskerWidth` prop is not set, the width of the whisker crosshair will match the width of the box.\\n\\n```playground\\n<VictoryChart domainPadding={10}>\\n  <VictoryBoxPlot\\n    boxWidth={10}\\n    whiskerWidth={5}\\n    data={[\\n      { x: 1, y: [1, 2, 3, 5] },\\n      { x: 2, y: [3, 2, 8, 10] },\\n      { x: 3, y: [2, 8, 6, 5] },\\n      { x: 4, y: [1, 3, 2, 9] }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryBoxPlot` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBoxPlot` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBoxPlot` uses the standard `y` data accessor prop. [Read about it here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n[animations guide]: /guides/animations\\n\\n[data accessors guide]: /guides/data-accessors\\n\\n[custom components guide]: /guides/custom-components\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\\n[`victorychart`]: /docs/victory-chart\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\\n[`x`]: /docs/victory-boxplot#x\\n\\n[`y`]: /docs/victory-boxplot#y\\n\\n[`max`]: /docs/victory-boxplot#max\\n\\n[`maxlabels`]: /docs/victory-boxplot#maxlabels\\n\\n[`min`]: /docs/victory-boxplot#min\\n\\n[`minlabels`]: /docs/victory-boxplot#minlabels\\n\\n[`median`]: /docs/victory-boxplot#median\\n\\n[`medianlabels`]: /docs/victory-boxplot#medianlabels\\n\\n[`q1`]: /docs/victory-boxplot#q1\\n\\n[`q1labels`]: /docs/victory-boxplot#q1labels\\n\\n[`q3`]: /docs/victory-boxplot#q3\\n\\n[`q3labels`]: /docs/victory-boxplot#q3labels\\n\\n[whisker component]: /docs/victory-primitives#whisker\\n\\n[box component]: /docs/victory-primitives#box\\n\\n[line component]: /docs/victory-primitives#line\\n\\n[`victorylabel`]: /docs/victory-label\\n\",\"content\":\"\\n# VictoryBoxPlot\\n\\n`VictoryBoxPlot` renders a box plot to describe the distribution of a set of data. Data for `VictoryBoxPlot` may be given with summary statistics pre-calculated (`min`, `median`, `max`, `q1`, `q3`), or as an array of raw data. VictoryBoxPlot can be composed with [`VictoryChart`][] to create box plot charts.\\n\\n```playground\\n<VictoryChart domainPadding={20}>\\n  <VictoryBoxPlot\\n    boxWidth={20}\\n    data={[\\n      { x: 1, y: [1, 2, 3, 5] },\\n      { x: 2, y: [3, 2, 8, 10] },\\n      { x: 3, y: [2, 8, 6, 5] },\\n      { x: 4, y: [1, 3, 2, 9] }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryBoxPlot` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## boxWidth\\n\\n`type: number`\\n\\nThe `boxWidth` prop specifies how wide each box should be. If the `whiskerWidth` prop is not set, this prop will also determine the width of the whisker crosshair.\\n\\n```playground\\n<VictoryChart domainPadding={10}>\\n  <VictoryBoxPlot\\n    boxWidth={10}\\n    whiskerWidth={5}\\n    data={[\\n      { x: 1, y: [1, 2, 3, 5] },\\n      { x: 2, y: [3, 2, 8, 10] },\\n      { x: 3, y: [2, 8, 6, 5] },\\n      { x: 4, y: [1, 3, 2, 9] }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryBoxPlot` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryBoxPlot` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\nThe `data` prop for `VictoryBoxPlot` may be given in a a variety of formats:\\n\\n- As an array of standard data objects with values specified for `x` and `y`\\n  When given in this format, repeated values for `x` will be used for calculating summary statistics\\n\\n```jsx\\ndata={[\\n  { x: 1, y: 2 },\\n  { x: 1, y: 3 },\\n  { x: 1, y: 5 },\\n  { x: 2, y: 1 },\\n  { x: 2, y: 4 },\\n  { x: 2, y: 5 },\\n  ...\\n]}\\n```\\n\\n- As an array of data objects where `y` is given as an array of values\\n  When given in this format, array values are used for calculating summary statistics.\\n\\n```jsx\\ndata={[\\n  { x: 1, y: [1, 2, 3, 5] },\\n  { x: 2, y: [3, 2, 8, 10] },\\n  { x: 3, y: [2, 8, 6, 5] },\\n  { x: 4, y: [1, 3, 2, 9] }\\n]}\\n```\\n\\n- As an array of data objects with pre-calculated summary statistics(`min`, `median`, `max`, `q1`, `q3`)\\n  When given in this format, `VictoryBoxPlot` _will not_ preform statistical analysis. Pre-calculating summary statistics for large datasets will improve performance.\\n\\n```jsx\\ndata={[\\n  { x: 1, min: 2, median: 5, max: 10, q1: 3, q3: 7 },\\n  { x: 2, min: 1, median: 4, max: 9, q1: 3, q3: 6 },\\n  { x: 3, min: 1, median: 6, max: 12, q1: 4, q3: 10 },\\n```\\n\\nUse the [`x`][], [`y`][], [`min`][], [`max`][], [`median`][], [`q1`][], and [`q3`][] data accessor props to specify custom data formats. Refer to the [Data Accessors Guide][] for more detail.\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryBoxPlot` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryBoxPlot` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBoxPlot` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type array[object]`\\n\\n`VictoryBoxPlot` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n**note:** valid event targets for `VictoryBoxPlot` are:\\n\\\"min\\\", \\\"minLabels\\\", \\\"grid\\\", \\\"ticks\\\", and \\\"tickLabels\\\".\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryBoxPlot\\n    medianLabels={() => null}\\n    events={[{\\n      target: \\\"q3\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              mutation: (props) => {\\n                return { style: Object.assign(props.style, { fill: \\\"tomato\\\" }) };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={[\\n      { x: 1, y: [1, 2, 3, 5] },\\n      { x: 2, y: [3, 2, 8, 10] },\\n      { x: 3, y: [2, 8, 6, 5] },\\n      { x: 4, y: [1, 3, 2, 9] }\\n    ]}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryBoxPlot` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryBoxPlot` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryBoxPlot` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe horizontal prop determines whether boxes will be laid vertically or horizontally. The boxes will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true.\\n\\n```playground\\n<VictoryBoxPlot horizontal\\n  data={[\\n    { x: 1, y: [1, 2, 3, 5] },\\n    { x: 2, y: [3, 2, 8, 10] },\\n    { x: 3, y: [2, 8, 6, 5] },\\n    { x: 4, y: [1, 3, 2, 9] }\\n  ]}\\n/>\\n```\\n\\n## labelOrientation\\n\\n`type: \\\"top\\\" || \\\"bottom\\\" || \\\"left\\\" || \\\"right\\\"` || { min, max, median, q1, q3 }\\n\\nThe `labelOrientation` prop determines where labels are placed relative to their corresponding data. If this prop is not set, it will be set to \\\"top\\\" for horizontal charts, and \\\"right\\\" for vertical charts.\\n\\n```playground\\n<VictoryChart horizontal domainPadding={20}>\\n  <VictoryBoxPlot\\n    labels\\n    labelOrientation=\\\"top\\\"\\n    data={[\\n      { x: 1, y: [1, 2, 3, 5] },\\n      { x: 2, y: [3, 2, 8, 10] },\\n      { x: 3, y: [2, 8, 6, 5] },\\n      { x: 4, y: [1, 3, 2, 9] }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## labels\\n\\n`type: boolean`\\n\\nWhen the boolean `labels` prop is set to `true`, the values for `min`, `max`, `median`, `q1`, and `q3` will be displayed for each box. For more granular label control, use the individual [`minLabels`][], [`maxLabels`][], [`medianLabels`][], [`q1Labels`][], and [`q3Labels`][] props.\\n\\n## max\\n\\n`type: string || array[string] || function`\\n\\nUse the `max` data accessor prop to define the max value of a box plot.\\n\\n**string:** specify which property in an array of data objects should be used as the max value\\n\\n_examples:_ `max=\\\"max_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a max value\\n\\n_examples:_ `max={() => 10}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a max value\\n\\n_examples:_ `max=\\\"bonds.max\\\"`, `max={[\\\"bonds\\\", \\\"max\\\"]}`\\n\\n## maxComponent\\n\\n`type: element`\\n\\nThe `maxComponent` prop takes a component instance which will be responsible for rendering an element to represent the maximum value of the box plot. The new element created from the passed `maxComponent` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `majorWhisker` and `minorWhisker`. The `majorWhisker` and `minorWhisker` props are given as objects with values for `x1`, `y1`, `x2` and `y2` that describes the lines that make up the major and minor whisker. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `maxComponent` is not provided, `VictoryBoxPlot` will use its default [Whisker component][].\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `maxComponent={<Whisker/>}`\\n\\n```jsx\\nmaxComponent={<Whisker events={{ onClick: handleClick }}/>}\\n```\\n\\n## maxLabelComponent\\n\\n`type: element`\\n\\nThe `maxLabelComponent` prop takes a component instance which will be used to render the label corresponding to the maximum value for each box. The new element created from the passed `maxLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `maxLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `maxLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nmaxLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryBoxPlot\\n  data={[\\n    { x: 1, y: [1, 2, 3, 5] },\\n    { x: 2, y: [3, 2, 8, 10] },\\n    { x: 3, y: [2, 8, 6, 5] },\\n    { x: 4, y: [1, 3, 2, 9] }\\n  ]}\\n  maxLabels\\n  maxLabelComponent={\\n    <VictoryLabel\\n      dx={-10} dy={-10}\\n      textAnchor=\\\"middle\\\"\\n    />\\n  }\\n/>\\n```\\n\\n## maxLabels\\n\\n`type: array || function || boolean`\\n\\nThe `maxLabels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.\\n\\n_examples:_\\n\\n- `maxLabels`\\n- `maxLabels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n- `maxLabels={({ datum }) => Math.round(datum.max)}`\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryBoxPlot` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={{ x: 3 }}>\\n  <VictoryBoxPlot\\n    data={[\\n      { x: 1, y: [1, 2, 3, 5] },\\n      { x: 2, y: [3, 2, 8, 10] },\\n      { x: 3, y: [2, 8, 6, 5] },\\n      { x: 4, y: [1, 3, 2, 9] }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## median\\n\\n`type: string || array[string] || function`\\n\\nUse the `median` data accessor prop to define the median value of a box plot.\\n\\n**string:** specify which property in an array of data objects should be used as the median value\\n\\n_examples:_ `median=\\\"median_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a median value\\n\\n_examples:_ `median={() => 10}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a median value\\n\\n_examples:_ `median=\\\"bonds.median\\\"`, `median={[\\\"bonds\\\", \\\"median\\\"]}`\\n\\n## medianComponent\\n\\n`type: element`\\n\\nThe `medianComponent` prop takes a component instance which will be responsible for rendering an element to represent the median value of the box plot. The new element created from the passed `medianComponent` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `x1`, `y1`, `x2` and `y2` Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `medianComponent` is not provided, `VictoryBoxPlot` will use its default [Line component][].\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `medianComponent={<LineSegment/>}`\\n\\n```jsx\\nmedianComponent={<LineSegment events={{ onClick: handleClick }}/>}\\n```\\n\\n## medianLabelComponent\\n\\n`type: element`\\n\\nThe `medianLabelComponent` prop takes a component instance which will be used to render the label corresponding to the median value for each box. The new element created from the passed `medianLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `medianLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `medianLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nmedianLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryBoxPlot\\n  data={[\\n    { x: 1, y: [1, 2, 3, 5] },\\n    { x: 2, y: [3, 2, 8, 10] },\\n    { x: 3, y: [2, 8, 6, 5] },\\n    { x: 4, y: [1, 3, 2, 9] }\\n  ]}\\n  medianLabels\\n  medianLabelComponent={\\n    <VictoryLabel\\n      dx={-10} dy={-10}\\n      textAnchor=\\\"middle\\\"\\n    />\\n  }\\n/>\\n```\\n\\n## medianLabels\\n\\n`type: array || function || boolean`\\n\\nThe `medianLabels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the median value of each datum will be used for the label.\\n\\n_examples:_\\n\\n- `medianLabels`\\n- `medianLabels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n- `medianLabels={({ datum }) => Math.round(datum.median)}`\\n\\n## min\\n\\n`type: string || array[string] || function`\\n\\nUse the `min` data accessor prop to define the min value of a box plot.\\n\\n**string:** specify which property in an array of data objects should be used as the min value\\n\\n_examples:_ `min=\\\"min_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a min value\\n\\n_examples:_ `min={() => 10}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a min value\\n\\n_examples:_ `min=\\\"bonds.min\\\"`, `min={[\\\"bonds\\\", \\\"min\\\"]}`\\n\\n## minComponent\\n\\n`type: element`\\n\\nThe `minComponent` prop takes a component instance which will be responsible for rendering an element to represent the minimum value of the box plot. The new element created from the passed `minComponent` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `majorWhisker` and `minorWhisker`. The `majorWhisker` and `minorWhisker` props are given as objects with values for `x1`, `y1`, `x2` and `y2` that describes the lines that make up the major and minor whisker. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `minComponent` is not provided, `VictoryBoxPlot` will use its default [Whisker component][].\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `minComponent={<Whisker/>}`\\n\\n```jsx\\nminComponent={<Whisker events={{ onClick: handleClick }}/>}\\n```\\n\\n## minLabelComponent\\n\\n`type: element`\\n\\nThe `minLabelComponent` prop takes a component instance which will be used to render the label corresponding to the minimum value for each box. The new element created from the passed `minLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `minLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `minLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nminLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryBoxPlot\\n  data={[\\n    { x: 1, y: [1, 2, 3, 5] },\\n    { x: 2, y: [3, 2, 8, 10] },\\n    { x: 3, y: [2, 8, 6, 5] },\\n    { x: 4, y: [1, 3, 2, 9] }\\n  ]}\\n  minLabels\\n  minLabelComponent={\\n    <VictoryLabel\\n      dx={-10} dy={10}\\n      textAnchor=\\\"middle\\\"\\n    />\\n  }\\n/>\\n```\\n\\n## minLabels\\n\\n`type: array || function || boolean`\\n\\nThe `minLabels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the min value of each datum will be used for the label.\\n\\n_examples:_\\n\\n- `minLabels`\\n- `minLabels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n- `minLabels={({ datum }) => Math.round(datum.min)}`\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryBoxPlot` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={{ y: 0 }}>\\n  <VictoryBoxPlot\\n    data={[\\n      { x: 1, y: [1, 2, 3, 5] },\\n      { x: 2, y: [3, 2, 8, 10] },\\n      { x: 3, y: [2, 8, 6, 5] },\\n      { x: 4, y: [1, 3, 2, 9] }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryBoxPlot` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryBoxPlot` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n**Note:** Polar Charts are not yet supported for `VictoryBoxPlot`\\n\\n## q1\\n\\n`type: string || array[string] || function`\\n\\nUse the `q1` data accessor prop to define the q1 value of a box plot.\\n\\n**string:** specify which property in an array of data objects should be used as the q1 value\\n\\n_examples:_ `q1=\\\"q1_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a q1 value\\n\\n_examples:_ `q1={() => 10}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a q1 value\\n\\n_examples:_ `q1=\\\"bonds.q1\\\"`, `q1={[\\\"bonds\\\", \\\"q1\\\"]}`\\n\\n## q1Component\\n\\n`type: element`\\n\\nThe `q1Component` prop takes a component instance which will be responsible for rendering an element to represent the q1 value of the box plot. The new element created from the passed `q1Component` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `x`, `y`, `width` and `height` Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `q1Component` is not provided, `VictoryBoxPlot` will use its default [Box component][].\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `q1Component={<Box/>}`\\n\\n```jsx\\nq1Component={<Box events={{ onClick: handleClick }}/>}\\n```\\n\\n## q1LabelComponent\\n\\n`type: element`\\n\\nThe `q1LabelComponent` prop takes a component instance which will be used to render the label corresponding to the q1 value for each box. The new element created from the passed `q1LabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `q1LabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `q1LabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nq1LabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryBoxPlot\\n  data={[\\n    { x: 1, y: [1, 2, 3, 5] },\\n    { x: 2, y: [3, 2, 8, 10] },\\n    { x: 3, y: [2, 8, 6, 5] },\\n    { x: 4, y: [1, 3, 2, 9] }\\n  ]}\\n  q1Labels\\n  q1LabelComponent={\\n    <VictoryLabel\\n      dx={5} dy={5}\\n    />\\n  }\\n/>\\n```\\n\\n## q1Labels\\n\\n`type: array || function || boolean`\\n\\nThe `q1Labels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the q1 value of each datum will be used for the label.\\n\\n_examples:_\\n\\n- `q1Labels`\\n- `q1Labels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n- `q1Labels={({ datum }) => Math.round(datum.q1)}`\\n\\n## q3\\n\\n`type: string || array[string] || function`\\n\\nUse the `q3` data accessor prop to define the q3 value of a box plot.\\n\\n**string:** specify which property in an array of data objects should be used as the q3 value\\n\\n_examples:_ `q3=\\\"q3_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a q3 value\\n\\n_examples:_ `q3={() => 10}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a q3 value\\n\\n_examples:_ `q3=\\\"bonds.q3\\\"`, `q3={[\\\"bonds\\\", \\\"q3\\\"]}`\\n\\n## q3Component\\n\\n`type: element`\\n\\nThe `q3Component` prop takes a component instance which will be responsible for rendering an element to represent the q3 value of the box plot. The new element created from the passed `q3Component` will be provided with the following props calculated by `VictoryBoxPlot`: `datum`, `index`, `scale`, `style`, `events`, `x`, `y`, `width` and `height` Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `q3Component` is not provided, `VictoryBoxPlot` will use its default [Box component][].\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `q3Component={<Box/>}`\\n\\n```jsx\\nq3Component={<Box events={{ onClick: handleClick }}/>}\\n```\\n\\n## q3LabelComponent\\n\\n`type: element`\\n\\nThe `q3LabelComponent` prop takes a component instance which will be used to render the label corresponding to the q3 value for each box. The new element created from the passed `q3LabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `q3LabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `q3LabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nq3LabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryBoxPlot\\n  data={[\\n    { x: 1, y: [1, 2, 3, 5] },\\n    { x: 2, y: [3, 2, 8, 10] },\\n    { x: 3, y: [2, 8, 6, 5] },\\n    { x: 4, y: [1, 3, 2, 9] }\\n  ]}\\n  q3Labels\\n  q3LabelComponent={\\n    <VictoryLabel\\n      dx={5} dy={5}\\n    />\\n  }\\n/>\\n```\\n\\n## q3Labels\\n\\n`type: array || function || boolean`\\n\\nThe `q3Labels` prop defines the labels that will appear above each point. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the q3 value of each datum will be used for the label.\\n\\n_examples:_\\n\\n- `q3Labels`\\n- `q3Labels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n- `q3Labels={({ datum }) => Math.round(datum.q3)}`\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: number`\\n\\n`VictoryBoxPlot` uses the standard `samples` prop. [Read about it here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryBoxPlot` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryBoxPlot` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBoxPlot` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryBoxPlot` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryBoxPlot` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n## style\\n\\n```\\ntype: {\\n  parent: object,\\n  max: object,\\n  maxLabels: object,\\n  min: object,\\n  minLabels: object,\\n  median: object,\\n  medianLabels: object,\\n  q1: object,\\n  q1Labels: object,\\n  q3: object,\\n  q3Labels: object\\n}\\n```\\n\\nThe `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `max`, `maxLabels`, `min`, `minLabels`,`median`, `medianLabels`,`q1`, `q1Labels`,`q3`, `q3Labels`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for style properties, and they will be evaluated with the props corresponding to each element.\\n\\n**note:** When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.\\n\\n**note:** custom `angle` and `verticalAnchor` properties may be included in `labels` styles.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryBoxPlot\\n  minLabels\\n  maxLabels\\n  data={[\\n    { x: 1, y: [1, 2, 3, 5] },\\n    { x: 2, y: [3, 2, 8, 10] },\\n    { x: 3, y: [2, 8, 6, 5] },\\n    { x: 4, y: [1, 3, 2, 9] }\\n  ]}\\n  style={{\\n    min: { stroke: \\\"tomato\\\" },\\n    max: { stroke: \\\"orange\\\" },\\n    q1: { fill: \\\"tomato\\\" },\\n    q3: { fill: \\\"orange\\\" },\\n    median: { stroke: \\\"white\\\", strokeWidth: 2 },\\n    minLabels: { fill: \\\"tomato\\\" },\\n    maxLabels: { fill: \\\"orange\\\" }\\n  }}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryBoxPlot` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## whiskerWidth\\n\\n`type: number`\\n\\nThe `whiskerWidth` prop specifies how wide each whisker crosshair should be. If the `whiskerWidth` prop is not set, the width of the whisker crosshair will match the width of the box.\\n\\n```playground\\n<VictoryChart domainPadding={10}>\\n  <VictoryBoxPlot\\n    boxWidth={10}\\n    whiskerWidth={5}\\n    data={[\\n      { x: 1, y: [1, 2, 3, 5] },\\n      { x: 2, y: [3, 2, 8, 10] },\\n      { x: 3, y: [2, 8, 6, 5] },\\n      { x: 4, y: [1, 3, 2, 9] }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryBoxPlot` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBoxPlot` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBoxPlot` uses the standard `y` data accessor prop. [Read about it here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n[animations guide]: /guides/animations\\n[data accessors guide]: /guides/data-accessors\\n[custom components guide]: /guides/custom-components\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n[`victorychart`]: /docs/victory-chart\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n[`x`]: /docs/victory-boxplot#x\\n[`y`]: /docs/victory-boxplot#y\\n[`max`]: /docs/victory-boxplot#max\\n[`maxlabels`]: /docs/victory-boxplot#maxlabels\\n[`min`]: /docs/victory-boxplot#min\\n[`minlabels`]: /docs/victory-boxplot#minlabels\\n[`median`]: /docs/victory-boxplot#median\\n[`medianlabels`]: /docs/victory-boxplot#medianlabels\\n[`q1`]: /docs/victory-boxplot#q1\\n[`q1labels`]: /docs/victory-boxplot#q1labels\\n[`q3`]: /docs/victory-boxplot#q3\\n[`q3labels`]: /docs/victory-boxplot#q3labels\\n[whisker component]: /docs/victory-primitives#whisker\\n[box component]: /docs/victory-primitives#box\\n[line component]: /docs/victory-primitives#line\\n[`victorylabel`]: /docs/victory-label\\n\"},{\"data\":{\"id\":4,\"title\":\"VictoryArea\",\"category\":\"charts\",\"type\":\"docs\",\"scope\":[\"sampleData\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryArea\",\"depth\":1,\"slug\":\"victory-area\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"interpolation\",\"depth\":2,\"slug\":\"interpolation\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"},{\"type\":\"heading\",\"value\":\"y0\",\"depth\":2,\"slug\":\"y-0\"}],\"slug\":\"victory-area\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryArea\",\"depth\":1,\"slug\":\"victory-area\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"interpolation\",\"depth\":2,\"slug\":\"interpolation\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"},{\"type\":\"heading\",\"value\":\"y0\",\"depth\":2,\"slug\":\"y-0\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 4\\ntitle: VictoryArea\\ncategory: charts\\ntype: docs\\nscope:\\n  - sampleData\\n---\\n\\n# VictoryArea\\n\\nVictoryArea renders a dataset as a single area. VictoryArea can be composed with [`VictoryChart`][] to create area charts.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryArea\\n    style={{ data: { fill: \\\"#c43a31\\\" } }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryArea` uses the standard `animate` prop. [Read about it in detail](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\n  animate={{\\n    duration: 2000,\\n    onLoad: { duration: 1000 }\\n  }}\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryArea` uses the standard `categories` prop. [Read about it in detail](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryArea` uses the standard `containerComponent` prop. [Read about it in detail](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryArea` uses the standard `data` prop. [Read about it in detail](/docs/common-props#data)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryArea\\n    data={[\\n      { x: 1, y: 2, y0: 0 },\\n      { x: 2, y: 3, y0: 1 },\\n      { x: 3, y: 5, y0: 1 },\\n      { x: 4, y: 4, y0: 2 },\\n      { x: 5, y: 6, y0: 2 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryArea` uses the standard `dataComponent` prop. [Read about it detail](/docs/common-props#datacomponent)\\n\\n`VictoryArea` supplies the following props to its `dataComponent`: `data`, `events`, `groupComponent`, `interpolation`, `origin` (for polar charts), `polar`, `scale`, `style`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Area/>`\\n\\n```jsx\\ndataComponent={<Area events={{ onClick: handleClick }}/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryArea` uses the standard `domain` prop. [Read about it in detail](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryArea` uses the standard `domainPadding` prop. [Read about it in detail](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryArea` uses the standard `eventKey` prop. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n**note:** `VictoryArea` only renders one element per dataset, so only one event key will be generated.\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryArea` uses the standard `events` prop. [Read about it in detail](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n**note:** `VictoryArea` will use the special `eventKey` \\\"all\\\" rather than referring to data by index, as it renders only one element for an entire dataset\\n\\n```playground\\n<div style={{ margin: 50 }}>\\n  <h3>Click Me</h3>\\n  <VictoryArea\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              eventKey: \\\"all\\\",\\n              mutation: (props) => {\\n                const fill = props.style && props.style.fill;\\n                return fill === \\\"black\\\" ? null : { style: { fill: \\\"black\\\" } };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={sampleData}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryArea` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryArea` uses the standard `groupComponent` prop. [Read about it in detail](/docs/common-props#groupcomponent)\\n\\n**note:** `VictoryArea` uses [`VictoryClipContainer`][] as its default `groupComponent` `VictoryClipContainer` renders a `<g>` tag with a `clipPath` `def`. This allows continuous data components to transition smoothly when new data points enter and exit. **Supplying a custom `groupComponent` to `VictoryArea` may result in broken animations.**\\n\\n_default:_ `<VictoryClipContainer/>`\\n\\n```playground\\n<VictoryChart>\\n  <VictoryArea\\n    groupComponent={<VictoryClipContainer clipPadding={{ top: 5, right: 10 }}/>}\\n    style={{ data: { stroke: \\\"#c43a31\\\", strokeWidth: 15, strokeLinecap: \\\"round\\\" } }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryArea` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\n`VictoryArea` uses the standard `horizontal` prop. [Read about it in detail](/docs/common-props#horizontal)\\n\\n```playground\\n<VictoryArea horizontal\\n  data={sampleData}\\n/>\\n```\\n\\n## interpolation\\n\\n`type: options || function`\\n\\nThe `interpolation` prop determines how data points should be connected when creating a path. Victory uses [d3-shape](https://github.com/d3/d3-shape#curves) for interpolating curves.\\n\\nPolar area charts may use the following interpolation options: \\\"basis\\\", \\\"cardinal\\\", \\\"catmullRom\\\", \\\"linear\\\"\\n\\nCartesian area charts may use the following interpolation options: \\\"basis\\\", \\\"cardinal\\\", \\\"catmullRom\\\", \\\"linear\\\", \\\"monotoneX\\\", \\\"monotoneY\\\", \\\"natural\\\", \\\"step\\\", \\\"stepAfter\\\", \\\"stepBefore\\\"\\n\\nYou can also provide a function if you need to adjust parameters for d3-shape curves or to use a [custom curve function](https://github.com/d3/d3-shape#custom-curves).\\n\\n[Explore all the interpolation options][].\\n\\n_default:_ `\\\"linear\\\"`\\n\\n```playground\\n<VictoryArea\\n  interpolation=\\\"natural\\\"\\n  data={sampleData}\\n/>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryArea` uses the standard `labelComponent` prop. [Read about it in detail](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel renderInPortal/>`\\n\\n```playground\\n<VictoryArea\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n  labelComponent={<VictoryLabel renderInPortal dy={-20}/>}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryArea` uses the standard `labels` prop. [Read about it here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryArea\\n  data={sampleData}\\n  labels={({ data, index }) => index == data.length - 1 ? \\\"last label\\\" : index}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryArea` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={{ x: 3 }}>\\n  <VictoryArea data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryArea` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={{ x: 2 }}>\\n  <VictoryArea data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryArea` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryArea` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n```playground\\n<VictoryChart polar\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryPolarAxis dependentAxis\\n    style={{ axis: { stroke: \\\"none\\\" } }}\\n    tickFormat={() => null}\\n  />\\n  <VictoryPolarAxis/>\\n  <VictoryArea\\n    data={sampleData}\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" },\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: number`\\n\\n`VictoryArea` uses the standard `samples` prop. [Read about it here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryArea` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryArea` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryArea` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryArea` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryArea` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryArea\\n    standalone={false}\\n    width={300} height={300} padding={0}\\n    data={sampleData}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryArea` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n  <VictoryArea\\n    style={{\\n      data: {\\n        fill: \\\"#c43a31\\\", fillOpacity: 0.7, stroke: \\\"#c43a31\\\", strokeWidth: 3\\n      },\\n      labels: {\\n        fontSize: 15,\\n        fill: ({ datum }) => datum.x === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\"\\n      }\\n    }}\\n    data={sampleData}\\n    labels={({ datum }) => datum.x}\\n  />\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryArea` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryArea` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryArea` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryArea` uses the standard `y` data accessor prop. [Read about it here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n## y0\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryArea` uses the standard `y0` data accessor prop to set a baseline. [Read about it here](/docs/common-props#y0)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryArea\\n    data={sampleData}\\n    y0={(d) => d.y - 1}\\n  />\\n</VictoryChart>\\n```\\n\\n[animations guide]: /guides/animations\\n\\n[data accessors guide]: /guides/data-accessors\\n\\n[custom components guide]: /guides/custom-components\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\\n[`victorychart`]: /docs/victory-chart\\n\\n[`victoryclipcontainer`]: /docs/victory-clip-container\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\\n[explore all the interpolation options]: /gallery/interpolation\\n\",\"content\":\"\\n# VictoryArea\\n\\nVictoryArea renders a dataset as a single area. VictoryArea can be composed with [`VictoryChart`][] to create area charts.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryArea\\n    style={{ data: { fill: \\\"#c43a31\\\" } }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryArea` uses the standard `animate` prop. [Read about it in detail](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\n  animate={{\\n    duration: 2000,\\n    onLoad: { duration: 1000 }\\n  }}\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryArea` uses the standard `categories` prop. [Read about it in detail](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryArea` uses the standard `containerComponent` prop. [Read about it in detail](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryArea` uses the standard `data` prop. [Read about it in detail](/docs/common-props#data)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryArea\\n    data={[\\n      { x: 1, y: 2, y0: 0 },\\n      { x: 2, y: 3, y0: 1 },\\n      { x: 3, y: 5, y0: 1 },\\n      { x: 4, y: 4, y0: 2 },\\n      { x: 5, y: 6, y0: 2 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryArea` uses the standard `dataComponent` prop. [Read about it detail](/docs/common-props#datacomponent)\\n\\n`VictoryArea` supplies the following props to its `dataComponent`: `data`, `events`, `groupComponent`, `interpolation`, `origin` (for polar charts), `polar`, `scale`, `style`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Area/>`\\n\\n```jsx\\ndataComponent={<Area events={{ onClick: handleClick }}/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryArea` uses the standard `domain` prop. [Read about it in detail](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryArea` uses the standard `domainPadding` prop. [Read about it in detail](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryArea` uses the standard `eventKey` prop. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n**note:** `VictoryArea` only renders one element per dataset, so only one event key will be generated.\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryArea` uses the standard `events` prop. [Read about it in detail](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n**note:** `VictoryArea` will use the special `eventKey` \\\"all\\\" rather than referring to data by index, as it renders only one element for an entire dataset\\n\\n```playground\\n<div style={{ margin: 50 }}>\\n  <h3>Click Me</h3>\\n  <VictoryArea\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              eventKey: \\\"all\\\",\\n              mutation: (props) => {\\n                const fill = props.style && props.style.fill;\\n                return fill === \\\"black\\\" ? null : { style: { fill: \\\"black\\\" } };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={sampleData}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryArea` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryArea` uses the standard `groupComponent` prop. [Read about it in detail](/docs/common-props#groupcomponent)\\n\\n**note:** `VictoryArea` uses [`VictoryClipContainer`][] as its default `groupComponent` `VictoryClipContainer` renders a `<g>` tag with a `clipPath` `def`. This allows continuous data components to transition smoothly when new data points enter and exit. **Supplying a custom `groupComponent` to `VictoryArea` may result in broken animations.**\\n\\n_default:_ `<VictoryClipContainer/>`\\n\\n```playground\\n<VictoryChart>\\n  <VictoryArea\\n    groupComponent={<VictoryClipContainer clipPadding={{ top: 5, right: 10 }}/>}\\n    style={{ data: { stroke: \\\"#c43a31\\\", strokeWidth: 15, strokeLinecap: \\\"round\\\" } }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryArea` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\n`VictoryArea` uses the standard `horizontal` prop. [Read about it in detail](/docs/common-props#horizontal)\\n\\n```playground\\n<VictoryArea horizontal\\n  data={sampleData}\\n/>\\n```\\n\\n## interpolation\\n\\n`type: options || function`\\n\\nThe `interpolation` prop determines how data points should be connected when creating a path. Victory uses [d3-shape](https://github.com/d3/d3-shape#curves) for interpolating curves.\\n\\nPolar area charts may use the following interpolation options: \\\"basis\\\", \\\"cardinal\\\", \\\"catmullRom\\\", \\\"linear\\\"\\n\\nCartesian area charts may use the following interpolation options: \\\"basis\\\", \\\"cardinal\\\", \\\"catmullRom\\\", \\\"linear\\\", \\\"monotoneX\\\", \\\"monotoneY\\\", \\\"natural\\\", \\\"step\\\", \\\"stepAfter\\\", \\\"stepBefore\\\"\\n\\nYou can also provide a function if you need to adjust parameters for d3-shape curves or to use a [custom curve function](https://github.com/d3/d3-shape#custom-curves).\\n\\n[Explore all the interpolation options][].\\n\\n_default:_ `\\\"linear\\\"`\\n\\n```playground\\n<VictoryArea\\n  interpolation=\\\"natural\\\"\\n  data={sampleData}\\n/>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryArea` uses the standard `labelComponent` prop. [Read about it in detail](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel renderInPortal/>`\\n\\n```playground\\n<VictoryArea\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n  labelComponent={<VictoryLabel renderInPortal dy={-20}/>}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryArea` uses the standard `labels` prop. [Read about it here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryArea\\n  data={sampleData}\\n  labels={({ data, index }) => index == data.length - 1 ? \\\"last label\\\" : index}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryArea` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={{ x: 3 }}>\\n  <VictoryArea data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryArea` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={{ x: 2 }}>\\n  <VictoryArea data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryArea` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryArea` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n```playground\\n<VictoryChart polar\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryPolarAxis dependentAxis\\n    style={{ axis: { stroke: \\\"none\\\" } }}\\n    tickFormat={() => null}\\n  />\\n  <VictoryPolarAxis/>\\n  <VictoryArea\\n    data={sampleData}\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" },\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: number`\\n\\n`VictoryArea` uses the standard `samples` prop. [Read about it here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryArea` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryArea` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryArea` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryArea` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryArea` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryArea\\n    standalone={false}\\n    width={300} height={300} padding={0}\\n    data={sampleData}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryArea` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n  <VictoryArea\\n    style={{\\n      data: {\\n        fill: \\\"#c43a31\\\", fillOpacity: 0.7, stroke: \\\"#c43a31\\\", strokeWidth: 3\\n      },\\n      labels: {\\n        fontSize: 15,\\n        fill: ({ datum }) => datum.x === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\"\\n      }\\n    }}\\n    data={sampleData}\\n    labels={({ datum }) => datum.x}\\n  />\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryArea` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryArea` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryArea` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryArea` uses the standard `y` data accessor prop. [Read about it here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n## y0\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryArea` uses the standard `y0` data accessor prop to set a baseline. [Read about it here](/docs/common-props#y0)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryArea\\n    data={sampleData}\\n    y0={(d) => d.y - 1}\\n  />\\n</VictoryChart>\\n```\\n\\n[animations guide]: /guides/animations\\n[data accessors guide]: /guides/data-accessors\\n[custom components guide]: /guides/custom-components\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n[`victorychart`]: /docs/victory-chart\\n[`victoryclipcontainer`]: /docs/victory-clip-container\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n[explore all the interpolation options]: /gallery/interpolation\\n\"},{\"data\":{\"id\":5,\"title\":\"VictoryAxis\",\"category\":\"charts\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryAxis\",\"depth\":1,\"slug\":\"victory-axis\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"axisComponent\",\"depth\":2,\"slug\":\"axis-component\"},{\"type\":\"heading\",\"value\":\"axisLabelComponent\",\"depth\":2,\"slug\":\"axis-label-component\"},{\"type\":\"heading\",\"value\":\"axisValue\",\"depth\":2,\"slug\":\"axis-value\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"crossAxis\",\"depth\":2,\"slug\":\"cross-axis\"},{\"type\":\"heading\",\"value\":\"dependentAxis\",\"depth\":2,\"slug\":\"dependent-axis\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"fixLabelOverlap\",\"depth\":2,\"slug\":\"fix-label-overlap\"},{\"type\":\"heading\",\"value\":\"gridComponent\",\"depth\":2,\"slug\":\"grid-component\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"invertAxis\",\"depth\":2,\"slug\":\"invert-axis\"},{\"type\":\"heading\",\"value\":\"label\",\"depth\":2,\"slug\":\"label\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"offsetX\",\"depth\":2,\"slug\":\"offset-x\"},{\"type\":\"heading\",\"value\":\"offsetY\",\"depth\":2,\"slug\":\"offset-y\"},{\"type\":\"heading\",\"value\":\"orientation\",\"depth\":2,\"slug\":\"orientation\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"tickComponent\",\"depth\":2,\"slug\":\"tick-component\"},{\"type\":\"heading\",\"value\":\"tickCount\",\"depth\":2,\"slug\":\"tick-count\"},{\"type\":\"heading\",\"value\":\"tickFormat\",\"depth\":2,\"slug\":\"tick-format\"},{\"type\":\"heading\",\"value\":\"tickLabelComponent\",\"depth\":2,\"slug\":\"tick-label-component\"},{\"type\":\"heading\",\"value\":\"tickValues\",\"depth\":2,\"slug\":\"tick-values\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"}],\"slug\":\"victory-axis\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryAxis\",\"depth\":1,\"slug\":\"victory-axis\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"axisComponent\",\"depth\":2,\"slug\":\"axis-component\"},{\"type\":\"heading\",\"value\":\"axisLabelComponent\",\"depth\":2,\"slug\":\"axis-label-component\"},{\"type\":\"heading\",\"value\":\"axisValue\",\"depth\":2,\"slug\":\"axis-value\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"crossAxis\",\"depth\":2,\"slug\":\"cross-axis\"},{\"type\":\"heading\",\"value\":\"dependentAxis\",\"depth\":2,\"slug\":\"dependent-axis\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"fixLabelOverlap\",\"depth\":2,\"slug\":\"fix-label-overlap\"},{\"type\":\"heading\",\"value\":\"gridComponent\",\"depth\":2,\"slug\":\"grid-component\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"invertAxis\",\"depth\":2,\"slug\":\"invert-axis\"},{\"type\":\"heading\",\"value\":\"label\",\"depth\":2,\"slug\":\"label\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"offsetX\",\"depth\":2,\"slug\":\"offset-x\"},{\"type\":\"heading\",\"value\":\"offsetY\",\"depth\":2,\"slug\":\"offset-y\"},{\"type\":\"heading\",\"value\":\"orientation\",\"depth\":2,\"slug\":\"orientation\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"tickComponent\",\"depth\":2,\"slug\":\"tick-component\"},{\"type\":\"heading\",\"value\":\"tickCount\",\"depth\":2,\"slug\":\"tick-count\"},{\"type\":\"heading\",\"value\":\"tickFormat\",\"depth\":2,\"slug\":\"tick-format\"},{\"type\":\"heading\",\"value\":\"tickLabelComponent\",\"depth\":2,\"slug\":\"tick-label-component\"},{\"type\":\"heading\",\"value\":\"tickValues\",\"depth\":2,\"slug\":\"tick-values\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 5\\ntitle: VictoryAxis\\ncategory: charts\\ntype: docs\\nscope: null\\n---\\n\\n# VictoryAxis\\n\\nVictoryAxis renders a single axis which can be used on its own or composed with [`VictoryChart`][].\\n\\n```playground\\n<svg width={400} height={400}>\\n  <VictoryAxis crossAxis\\n    width={400}\\n    height={400}\\n    domain={[-10, 10]}\\n    theme={VictoryTheme.material}\\n    offsetY={200}\\n    standalone={false}\\n  />\\n  <VictoryAxis dependentAxis crossAxis\\n    width={400}\\n    height={400}\\n    domain={[-10, 10]}\\n    theme={VictoryTheme.material}\\n    offsetX={200}\\n    standalone={false}\\n  />\\n</svg>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryAxis` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  easing: \\\"bounce\\\"\\n}}\\n```\\n\\n## axisComponent\\n\\n`type: element`\\n\\nThe `axisComponent` prop takes a component instance which will be responsible for rendering an axis line. The new element created from the passed `axisComponent` will be provided with the following props calculated by `VictoryAxis`: `x1`, `y1`, `x2`, `y2`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If an `axisComponent` is not provided, `VictoryAxis` will use its default [LineSegment component][].\\n\\n_default:_ `axisComponent={<LineSegment type={\\\"axis\\\"}/>}`\\n\\n```jsx\\naxisComponent={<LineSegment events={{ onClick: handleClick }}/>}\\n```\\n\\n## axisLabelComponent\\n\\n`type: element`\\n\\nThe `axisLabelComponent` prop takes a component instance which will be used to render the axis label. The new element created from the passed `axisLabelComponent` will be supplied with the following props: `x`, `y`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `axisLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\n_default:_ `axisLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\naxisLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n## axisValue\\n\\nThe `axisValue` prop may be used to position the dependent axis. Ths prop is useful when dependent axes should line up with values on the independent axis.\\n\\n```playground\\n <VictoryChart>\\n  <VictoryBar\\n    style={{ data: { fill: \\\"tomato\\\", width: 25 } }}\\n    data={[\\n      { x: \\\"cat\\\", y: 10 },\\n      { x: \\\"dog\\\", y: 25 },\\n      { x: \\\"bird\\\", y: 40 },\\n      { x: \\\"frog\\\", y: 50 },\\n      { x: \\\"fish\\\", y: 50 }\\n    ]}\\n  />\\n  <VictoryAxis />\\n  {\\n    [\\\"cat\\\", \\\"dog\\\", \\\"bird\\\", \\\"dog\\\", \\\"frog\\\", \\\"fish\\\"].map((d, i) => {\\n      return (\\n        <VictoryAxis dependentAxis\\n          key={i}\\n          label={d}\\n          style={{ tickLabels: { fill: \\\"none\\\" } }}\\n          axisValue={d}\\n        />\\n      );\\n    })\\n  }\\n</VictoryChart>\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryAxis` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryZoomContainer zoomDimension=\\\"x\\\"/>}\\n```\\n\\n## crossAxis\\n\\n`type: boolean`\\n\\nThe `crossAxis` boolean prop specifies whether a given axis is intended to cross another axis. When this prop is true, zeroes will be removed from the array of ticks so that they do not clutter the origin of the chart.\\n\\n_Note:_ When `VictoryAxis` is nested within `VictoryChart`, `VictoryChart` will determine a value for the `crossAxis` prop based on domain, but this prop may be overridden by supplying a `crossAxis` prop directly to the `VictoryAxis` child component.\\n\\n_default:_ `crossAxis={false}` for standalone axes\\n\\n## dependentAxis\\n\\n`type: boolean`\\n\\nThe `dependentAxis` boolean prop specifies whether the axis corresponds to the dependent variable (usually y). This prop is useful when composing `VictoryAxis` with other components to form a chart.\\n\\n_default:_ `dependentAxis={false}`\\n\\n```playground\\n<VictoryAxis dependentAxis />\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryAxis` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryAxis` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## events\\n\\n`type array[object]`\\n\\n`VictoryAxis` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n**note:** valid event targets for `VictoryAxis` are \\\"axis\\\", \\\"axisLabel\\\", \\\"grid\\\", \\\"ticks\\\", and \\\"tickLabels\\\".\\nTargets that correspond to only one element {\\\"axis\\\" and \\\"axisLabel\\\") should use the special eventKey \\\"all\\\".\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryAxis` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## fixLabelOverlap\\n\\n`type: boolean`\\n\\nWhen true, this prop reduces the number of tick labels to fit the length of the axis. Labels are\\nremoved at approximately even intervals from the original array of labels. This feature only works\\nwell for labels that are approximately evenly spaced.\\n\\n_default:_ `fixLabelOverlap={false}`\\n\\n## gridComponent\\n\\n`type: element`\\n\\nThe `gridComponent` prop takes a component instance which will be responsible for rendering a grid element. The new element created from the passed `gridComponent` will be provided with the following props calculated by `VictoryAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `gridComponent` is not provided, `VictoryAxis` will use its default [LineSegment component][].\\n\\n_default:_ `gridComponent={<LineSegment type={\\\"grid\\\"}/>}`\\n\\n```jsx\\ngridComponent={<LineSegment events={{ onClick: handleClick }}/>}\\n```\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryAxis` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryAxis` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## invertAxis\\n\\n`type: boolean`\\n\\nThe `invertAxis` boolean prop specifies whether the domain for a given axis should be inverted. By default, axes will be displayed with lower values on the bottom / left, and higher values on the top / right regardless of orientation.\\n\\n_default:_ `invertAxis={false}`\\n\\n## label\\n\\n`type: string`\\n\\nThe `label` prop defines the label that will appear with the axis. This prop should be given as a string.\\n\\n```playground\\n<VictoryAxis\\n  label=\\\"Time (ms)\\\"\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryAxis` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryAxis\\n  tickValues={[2, 3, 4, 5]}\\n  maxDomain={{ x: 3 }}\\n/>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryAxis` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryAxis\\n  tickValues={[2, 3, 4, 5]}\\n  minDomain={{ x: 0 }}\\n/>\\n```\\n\\n## name\\n\\n`type: string`\\n\\n`VictoryAxis` uses the standard `name` prop. [Read about it here](/docs/common-props#name)\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## offsetX\\n\\n`type: number`\\n\\nThe `offsetX` prop defines how far from the edge of its permitted area an axis should be offset in the x direction. If this prop is not given, the offset will be calculated based on font size, axis orientation, and label padding. When `VictoryAxis` is used with `VictoryChart`, `VictoryChart` will determine a value for `offsetX` that makes the axes line up correctly, but this value may be overridden by supplying an `offsetX` prop directly to the `VictoryAxis` child component.\\n\\n**note:** The `offsetX` prop is relative to the edge corresponding to the orientation of the axis, _e.g._ the left edge when `orientation=\\\"left\\\"`.\\n\\n```playground\\n<VictoryAxis dependentAxis\\n  offsetX={225}\\n/>\\n```\\n\\n## offsetY\\n\\n`type: number`\\n\\nThe `offsetY` prop defines how far from the edge of its permitted area an axis should be offset in the y direction. If this prop is not given, the offset will be calculated based on font size, axis orientation, and label padding. When `VictoryAxis` is used with `VictoryChart`, `VictoryChart` will determine a value for `offsetY` that makes the axes line up correctly, but this value may be overridden by supplying an `offsetY` prop directly to the `VictoryAxis` child component.\\n\\n**note:** The `offsetY` prop is relative to the edge corresponding to the orientation of the axis, _e.g._ the bottom edge when `orientation=\\\"bottom\\\"`.\\n\\n```playground\\n<VictoryAxis\\n  offsetY={150}\\n/>\\n```\\n\\n## orientation\\n\\n`type: \\\"top\\\" || \\\"bottom\\\" || \\\"left\\\" || \\\"right\\\"`\\n\\nThe `orientation` prop specifies the position and orientation of your axis. Options are \\\"top\\\", \\\"bottom\\\", \\\"left\\\", and \\\"right\\\".\\n\\n```playground\\n<VictoryAxis\\n  orientation=\\\"top\\\"\\n/>\\n```\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryAxis` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryAxis` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n**note:** Though `VictoryAxis` can take a `scale` prop with scales defined for both `x` and `y`, only the scale that corresponds the given axis will be used.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{ x: \\\"time\\\" }}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryAxis` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryAxis` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryAxis` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={400} height={400}>\\n  <VictoryAxis crossAxis\\n    width={400}\\n    height={400}\\n    domain={[-10, 10]}\\n    theme={VictoryTheme.material}\\n    offsetY={200}\\n    standalone={false}\\n  />\\n  <VictoryAxis dependentAxis crossAxis\\n    width={400}\\n    height={400}\\n    domain={[-10, 10]}\\n    theme={VictoryTheme.material}\\n    offsetX={200}\\n    standalone={false}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }`\\n\\nThe `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `axis`, `axisLabel`, `grid`, `ticks`, and `tickLabels`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for `grid`, `tick`, and `tickLabel` style properties, and they will be evaluated with the props corresponding to each of these elements, such as `tick`, `index`, and `text`.\\n\\n**note:** When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.\\n\\n**note:** custom `angle` and `verticalAnchor` properties may be included in `labels` styles.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryAxis\\n  label=\\\"Label\\\"\\n  style={{\\n    axis: {stroke: \\\"#756f6a\\\"},\\n    axisLabel: {fontSize: 20, padding: 30},\\n    grid: {stroke: ({ tick }) => tick > 0.5 ? \\\"red\\\" : \\\"grey\\\"},\\n    ticks: {stroke: \\\"grey\\\", size: 5},\\n    tickLabels: {fontSize: 15, padding: 5}\\n  }}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryAxis` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n_Note:_ Use the `dependentAxis` and `independentAxis` namespaces to theme axes by type. These namespaces will be merged with any props and styles supplied in the `axis` namespace.\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## tickComponent\\n\\n`type: element`\\n\\nThe `tickComponent` prop takes a component instance which will be responsible for rendering a tick element. The new element created from the passed `tickComponent` will be provided with the following props calculated by `VictoryAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `tickComponent` is not provided, `VictoryAxis` will use its default [LinSegmente component][].\\n\\n_default:_ `tickComponent={<LineSegment type={\\\"tick\\\"}/>}`\\n\\n```jsx\\ntickComponent={<LineSegment events={{ onClick: handleClick }}/>}\\n```\\n\\n## tickCount\\n\\n`type: number`\\n\\nThe `tickCount` prop specifies approximately how many ticks should be drawn on the axis. If an array of ticks is supplied in `tickValues` or `tickFormat`, the `tickCount` prop will be used to _downsample_ the provided array to the specified length. If `tickValues` are not explicitly provided, this value is used by [d3Scale][] to calculate an _approximate_ number of ticks. [d3Scale][] prioritizes returning \\\"nice\\\" values and evenly spaced ticks over an exact number of ticks. This prop must be given as a positive integer.\\n\\n## tickFormat\\n\\n`type: array || function`\\n\\nThe `tickFormat` prop specifies how tick values should be labeled. The `tickFormat` prop can be given as an array of values to display for each tick, or as a function to be applied to every `tickValue`. When given as a function, `tickFormat` will be called with the following arguments: `tick` - the individual tick value, `index` - the index of the tick in the array, and `ticks` - the entire array of ticks.\\n\\n```playground\\n  <VictoryAxis\\n    tickValues={[2.11, 3.9, 6.1, 8.05]}\\n    tickFormat={(t) => `${Math.round(t)}k`}\\n  />\\n```\\n\\n## tickLabelComponent\\n\\n`type: element`\\n\\nThe `tickLabelComponent` prop takes a component instance which will be used to render the axis label. The new element created from the passed `tickLabelComponent` will be supplied with the following props: `x`, `y`, `text`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `tickLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\n_default:_ `tickLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\ntickLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n## tickValues\\n\\n`type: array`\\n\\nThe `tickValues` prop explicitly specifies a set of tick values to draw on the axis. This prop should be given as an array of unique values of the same type (_i.e.,_ all numbers). The `tickValues` prop is used to specify the _values_ of each tick, so numeric values are typically appropriate. An array of strings or dates may be supplied for categorical and time series data respectively. Use the [tickFormat][] prop to specify how ticks should be labeled. _Note:_ `tickValues` should be given as a unique array.\\n\\n```playground\\n  <VictoryAxis tickValues={[2, 4, 6, 8]}/>\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryAxis` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n[animations guide]: /guides/animations\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\\n[`victorychart`]: /docs/victory-chart\\n\\n[tickformat]: /docs/victory-axis#tickformat\\n\\n[d3scale]: https://github.com/d3/d3-scale\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\\n[linesegment component]: /docs/victory-primitives#linesegment\\n\\n[`victorylabel`]: /docs/victory-label\\n\",\"content\":\"\\n# VictoryAxis\\n\\nVictoryAxis renders a single axis which can be used on its own or composed with [`VictoryChart`][].\\n\\n```playground\\n<svg width={400} height={400}>\\n  <VictoryAxis crossAxis\\n    width={400}\\n    height={400}\\n    domain={[-10, 10]}\\n    theme={VictoryTheme.material}\\n    offsetY={200}\\n    standalone={false}\\n  />\\n  <VictoryAxis dependentAxis crossAxis\\n    width={400}\\n    height={400}\\n    domain={[-10, 10]}\\n    theme={VictoryTheme.material}\\n    offsetX={200}\\n    standalone={false}\\n  />\\n</svg>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryAxis` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  easing: \\\"bounce\\\"\\n}}\\n```\\n\\n## axisComponent\\n\\n`type: element`\\n\\nThe `axisComponent` prop takes a component instance which will be responsible for rendering an axis line. The new element created from the passed `axisComponent` will be provided with the following props calculated by `VictoryAxis`: `x1`, `y1`, `x2`, `y2`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If an `axisComponent` is not provided, `VictoryAxis` will use its default [LineSegment component][].\\n\\n_default:_ `axisComponent={<LineSegment type={\\\"axis\\\"}/>}`\\n\\n```jsx\\naxisComponent={<LineSegment events={{ onClick: handleClick }}/>}\\n```\\n\\n## axisLabelComponent\\n\\n`type: element`\\n\\nThe `axisLabelComponent` prop takes a component instance which will be used to render the axis label. The new element created from the passed `axisLabelComponent` will be supplied with the following props: `x`, `y`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `axisLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\n_default:_ `axisLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\naxisLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n## axisValue\\n\\nThe `axisValue` prop may be used to position the dependent axis. Ths prop is useful when dependent axes should line up with values on the independent axis.\\n\\n```playground\\n <VictoryChart>\\n  <VictoryBar\\n    style={{ data: { fill: \\\"tomato\\\", width: 25 } }}\\n    data={[\\n      { x: \\\"cat\\\", y: 10 },\\n      { x: \\\"dog\\\", y: 25 },\\n      { x: \\\"bird\\\", y: 40 },\\n      { x: \\\"frog\\\", y: 50 },\\n      { x: \\\"fish\\\", y: 50 }\\n    ]}\\n  />\\n  <VictoryAxis />\\n  {\\n    [\\\"cat\\\", \\\"dog\\\", \\\"bird\\\", \\\"dog\\\", \\\"frog\\\", \\\"fish\\\"].map((d, i) => {\\n      return (\\n        <VictoryAxis dependentAxis\\n          key={i}\\n          label={d}\\n          style={{ tickLabels: { fill: \\\"none\\\" } }}\\n          axisValue={d}\\n        />\\n      );\\n    })\\n  }\\n</VictoryChart>\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryAxis` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryZoomContainer zoomDimension=\\\"x\\\"/>}\\n```\\n\\n## crossAxis\\n\\n`type: boolean`\\n\\nThe `crossAxis` boolean prop specifies whether a given axis is intended to cross another axis. When this prop is true, zeroes will be removed from the array of ticks so that they do not clutter the origin of the chart.\\n\\n_Note:_ When `VictoryAxis` is nested within `VictoryChart`, `VictoryChart` will determine a value for the `crossAxis` prop based on domain, but this prop may be overridden by supplying a `crossAxis` prop directly to the `VictoryAxis` child component.\\n\\n_default:_ `crossAxis={false}` for standalone axes\\n\\n## dependentAxis\\n\\n`type: boolean`\\n\\nThe `dependentAxis` boolean prop specifies whether the axis corresponds to the dependent variable (usually y). This prop is useful when composing `VictoryAxis` with other components to form a chart.\\n\\n_default:_ `dependentAxis={false}`\\n\\n```playground\\n<VictoryAxis dependentAxis />\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryAxis` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryAxis` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## events\\n\\n`type array[object]`\\n\\n`VictoryAxis` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n**note:** valid event targets for `VictoryAxis` are \\\"axis\\\", \\\"axisLabel\\\", \\\"grid\\\", \\\"ticks\\\", and \\\"tickLabels\\\".\\nTargets that correspond to only one element {\\\"axis\\\" and \\\"axisLabel\\\") should use the special eventKey \\\"all\\\".\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryAxis` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## fixLabelOverlap\\n\\n`type: boolean`\\n\\nWhen true, this prop reduces the number of tick labels to fit the length of the axis. Labels are\\nremoved at approximately even intervals from the original array of labels. This feature only works\\nwell for labels that are approximately evenly spaced.\\n\\n_default:_ `fixLabelOverlap={false}`\\n\\n## gridComponent\\n\\n`type: element`\\n\\nThe `gridComponent` prop takes a component instance which will be responsible for rendering a grid element. The new element created from the passed `gridComponent` will be provided with the following props calculated by `VictoryAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `gridComponent` is not provided, `VictoryAxis` will use its default [LineSegment component][].\\n\\n_default:_ `gridComponent={<LineSegment type={\\\"grid\\\"}/>}`\\n\\n```jsx\\ngridComponent={<LineSegment events={{ onClick: handleClick }}/>}\\n```\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryAxis` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryAxis` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## invertAxis\\n\\n`type: boolean`\\n\\nThe `invertAxis` boolean prop specifies whether the domain for a given axis should be inverted. By default, axes will be displayed with lower values on the bottom / left, and higher values on the top / right regardless of orientation.\\n\\n_default:_ `invertAxis={false}`\\n\\n## label\\n\\n`type: string`\\n\\nThe `label` prop defines the label that will appear with the axis. This prop should be given as a string.\\n\\n```playground\\n<VictoryAxis\\n  label=\\\"Time (ms)\\\"\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryAxis` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryAxis\\n  tickValues={[2, 3, 4, 5]}\\n  maxDomain={{ x: 3 }}\\n/>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryAxis` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryAxis\\n  tickValues={[2, 3, 4, 5]}\\n  minDomain={{ x: 0 }}\\n/>\\n```\\n\\n## name\\n\\n`type: string`\\n\\n`VictoryAxis` uses the standard `name` prop. [Read about it here](/docs/common-props#name)\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## offsetX\\n\\n`type: number`\\n\\nThe `offsetX` prop defines how far from the edge of its permitted area an axis should be offset in the x direction. If this prop is not given, the offset will be calculated based on font size, axis orientation, and label padding. When `VictoryAxis` is used with `VictoryChart`, `VictoryChart` will determine a value for `offsetX` that makes the axes line up correctly, but this value may be overridden by supplying an `offsetX` prop directly to the `VictoryAxis` child component.\\n\\n**note:** The `offsetX` prop is relative to the edge corresponding to the orientation of the axis, _e.g._ the left edge when `orientation=\\\"left\\\"`.\\n\\n```playground\\n<VictoryAxis dependentAxis\\n  offsetX={225}\\n/>\\n```\\n\\n## offsetY\\n\\n`type: number`\\n\\nThe `offsetY` prop defines how far from the edge of its permitted area an axis should be offset in the y direction. If this prop is not given, the offset will be calculated based on font size, axis orientation, and label padding. When `VictoryAxis` is used with `VictoryChart`, `VictoryChart` will determine a value for `offsetY` that makes the axes line up correctly, but this value may be overridden by supplying an `offsetY` prop directly to the `VictoryAxis` child component.\\n\\n**note:** The `offsetY` prop is relative to the edge corresponding to the orientation of the axis, _e.g._ the bottom edge when `orientation=\\\"bottom\\\"`.\\n\\n```playground\\n<VictoryAxis\\n  offsetY={150}\\n/>\\n```\\n\\n## orientation\\n\\n`type: \\\"top\\\" || \\\"bottom\\\" || \\\"left\\\" || \\\"right\\\"`\\n\\nThe `orientation` prop specifies the position and orientation of your axis. Options are \\\"top\\\", \\\"bottom\\\", \\\"left\\\", and \\\"right\\\".\\n\\n```playground\\n<VictoryAxis\\n  orientation=\\\"top\\\"\\n/>\\n```\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryAxis` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryAxis` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n**note:** Though `VictoryAxis` can take a `scale` prop with scales defined for both `x` and `y`, only the scale that corresponds the given axis will be used.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{ x: \\\"time\\\" }}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryAxis` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryAxis` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryAxis` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={400} height={400}>\\n  <VictoryAxis crossAxis\\n    width={400}\\n    height={400}\\n    domain={[-10, 10]}\\n    theme={VictoryTheme.material}\\n    offsetY={200}\\n    standalone={false}\\n  />\\n  <VictoryAxis dependentAxis crossAxis\\n    width={400}\\n    height={400}\\n    domain={[-10, 10]}\\n    theme={VictoryTheme.material}\\n    offsetX={200}\\n    standalone={false}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }`\\n\\nThe `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `axis`, `axisLabel`, `grid`, `ticks`, and `tickLabels`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for `grid`, `tick`, and `tickLabel` style properties, and they will be evaluated with the props corresponding to each of these elements, such as `tick`, `index`, and `text`.\\n\\n**note:** When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.\\n\\n**note:** custom `angle` and `verticalAnchor` properties may be included in `labels` styles.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryAxis\\n  label=\\\"Label\\\"\\n  style={{\\n    axis: {stroke: \\\"#756f6a\\\"},\\n    axisLabel: {fontSize: 20, padding: 30},\\n    grid: {stroke: ({ tick }) => tick > 0.5 ? \\\"red\\\" : \\\"grey\\\"},\\n    ticks: {stroke: \\\"grey\\\", size: 5},\\n    tickLabels: {fontSize: 15, padding: 5}\\n  }}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryAxis` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n_Note:_ Use the `dependentAxis` and `independentAxis` namespaces to theme axes by type. These namespaces will be merged with any props and styles supplied in the `axis` namespace.\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## tickComponent\\n\\n`type: element`\\n\\nThe `tickComponent` prop takes a component instance which will be responsible for rendering a tick element. The new element created from the passed `tickComponent` will be provided with the following props calculated by `VictoryAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `tickComponent` is not provided, `VictoryAxis` will use its default [LinSegmente component][].\\n\\n_default:_ `tickComponent={<LineSegment type={\\\"tick\\\"}/>}`\\n\\n```jsx\\ntickComponent={<LineSegment events={{ onClick: handleClick }}/>}\\n```\\n\\n## tickCount\\n\\n`type: number`\\n\\nThe `tickCount` prop specifies approximately how many ticks should be drawn on the axis. If an array of ticks is supplied in `tickValues` or `tickFormat`, the `tickCount` prop will be used to _downsample_ the provided array to the specified length. If `tickValues` are not explicitly provided, this value is used by [d3Scale][] to calculate an _approximate_ number of ticks. [d3Scale][] prioritizes returning \\\"nice\\\" values and evenly spaced ticks over an exact number of ticks. This prop must be given as a positive integer.\\n\\n## tickFormat\\n\\n`type: array || function`\\n\\nThe `tickFormat` prop specifies how tick values should be labeled. The `tickFormat` prop can be given as an array of values to display for each tick, or as a function to be applied to every `tickValue`. When given as a function, `tickFormat` will be called with the following arguments: `tick` - the individual tick value, `index` - the index of the tick in the array, and `ticks` - the entire array of ticks.\\n\\n```playground\\n  <VictoryAxis\\n    tickValues={[2.11, 3.9, 6.1, 8.05]}\\n    tickFormat={(t) => `${Math.round(t)}k`}\\n  />\\n```\\n\\n## tickLabelComponent\\n\\n`type: element`\\n\\nThe `tickLabelComponent` prop takes a component instance which will be used to render the axis label. The new element created from the passed `tickLabelComponent` will be supplied with the following props: `x`, `y`, `text`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `tickLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\n_default:_ `tickLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\ntickLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n## tickValues\\n\\n`type: array`\\n\\nThe `tickValues` prop explicitly specifies a set of tick values to draw on the axis. This prop should be given as an array of unique values of the same type (_i.e.,_ all numbers). The `tickValues` prop is used to specify the _values_ of each tick, so numeric values are typically appropriate. An array of strings or dates may be supplied for categorical and time series data respectively. Use the [tickFormat][] prop to specify how ticks should be labeled. _Note:_ `tickValues` should be given as a unique array.\\n\\n```playground\\n  <VictoryAxis tickValues={[2, 4, 6, 8]}/>\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryAxis` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n[animations guide]: /guides/animations\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n[`victorychart`]: /docs/victory-chart\\n[tickformat]: /docs/victory-axis#tickformat\\n[d3scale]: https://github.com/d3/d3-scale\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n[linesegment component]: /docs/victory-primitives#linesegment\\n[`victorylabel`]: /docs/victory-label\\n\"},{\"data\":{\"id\":6,\"title\":\"VictoryBar\",\"category\":\"charts\",\"type\":\"docs\",\"scope\":[\"sampleData\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryBar\",\"depth\":1,\"slug\":\"victory-bar\"},{\"type\":\"heading\",\"value\":\"alignment\",\"depth\":2,\"slug\":\"alignment\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"barRatio\",\"depth\":2,\"slug\":\"bar-ratio\"},{\"type\":\"heading\",\"value\":\"barWidth\",\"depth\":2,\"slug\":\"bar-width\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"cornerRadius\",\"depth\":2,\"slug\":\"corner-radius\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"},{\"type\":\"heading\",\"value\":\"y0\",\"depth\":2,\"slug\":\"y-0\"}],\"slug\":\"victory-bar\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryBar\",\"depth\":1,\"slug\":\"victory-bar\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"alignment\",\"depth\":2,\"slug\":\"alignment\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"barRatio\",\"depth\":2,\"slug\":\"bar-ratio\"},{\"type\":\"heading\",\"value\":\"barWidth\",\"depth\":2,\"slug\":\"bar-width\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"cornerRadius\",\"depth\":2,\"slug\":\"corner-radius\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"},{\"type\":\"heading\",\"value\":\"y0\",\"depth\":2,\"slug\":\"y-0\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 6\\ntitle: VictoryBar\\ncategory: charts\\ntype: docs\\nscope:\\n  - sampleData\\n---\\n\\n# VictoryBar\\n\\nVictoryBar renders a dataset as series of bars. VictoryBar can be composed with [`VictoryChart`][] to create bar charts.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domainPadding={10}\\n>\\n  <VictoryBar\\n    style={{ data: { fill: \\\"#c43a31\\\" } }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## alignment\\n\\n`type: \\\"start\\\" || \\\"middle\\\" || \\\"end\\\"`\\n\\nThe `alignment` prop specifies how bars should be aligned relative to their data points. This prop may be given as \\\"start\\\", \\\"middle\\\" or \\\"end\\\". When this prop is not specified, bars will have \\\"middle\\\" alignment relative to their data points.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryBar\\n    style={{ data: { fill: \\\"#c43a31\\\" } }}\\n    alignment=\\\"start\\\"\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryBar` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## barRatio\\n\\n`type: number`\\n\\nThe `barRatio` prop specifies an _approximate_ ratio between bar widths and spaces between bars. When width is not specified via the `barWidth` prop or in bar styles, the `barRatio` prop will be used to calculate a default width for each bar given the total number of bars in the data series and the overall width of the chart.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domainPadding={{ x: 15 }}\\n>\\n  <VictoryBar\\n    barRatio={0.8}\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## barWidth\\n\\n`type: number || function`\\n\\nThe `barWidth` prop is used to specify the width of each bar. This prop may be given as a number of pixels or as a function that returns a number. When this prop is given as a function, it will be evaluated for each bar with the props object corresponding to that bar. When this value is not given, a default value will be calculated based on the overall dimensions of the chart, and the number of bars.\\n\\n_Note:_ It is still possible to define bar width via the style prop with the `width` attribute, but `barWidth` will take precedence.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domainPadding={{ x: 20 }}\\n>\\n  <VictoryBar\\n    barWidth={({ index }) => index * 2 + 8}\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryBar` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryBar` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## cornerRadius\\n\\n`type: function || number || { top, bottom, topLeft, topRight, bottomLeft, bottomRight }`\\n\\nThe `cornerRadius` prop specifies a radius to apply to each bar. If this prop is given as a single number, the radius will only be applied to the _top_ of each bar. When this prop is given as a function, it will be evaluated for each bar with the props object corresponding to that bar.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domainPadding={{ x: 15 }}\\n>\\n  <VictoryBar\\n    cornerRadius={{ topLeft: ({ datum }) => datum.x * 4 }}\\n    style={{\\n      data: {\\n        fill: \\\"#c43a31\\\",\\n        width: 25\\n      }\\n    }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryBar` uses the standard `data` prop. [Read about it here](/docs/common-props#data)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\nIn addition to svg style properties and `label`, `VictoryBar` will also preferentially use `width` properties supplied via data objects\\n\\n```playground\\n<VictoryBar\\n  data={[\\n    { x: 1, y: 2, y0: 1 },\\n    { x: 2, y: 3, y0: 2 },\\n    { x: 3, y: 5, y0: 2 },\\n    { x: 4, y: 4, y0: 3 },\\n    { x: 5, y: 6, y0: 3 }\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryBar` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)\\n\\n`VictoryBar` supplies the following props to its `dataComponent`: `data`, `datum`, `horizontal`, `index`, `padding`, `polar`, `origin`, `scale`, `style`, `width`, `height`, `x`, `y`, `y0`, `x0`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Bar/>`\\n\\n```jsx\\ndataComponent={<Bar events={{ onClick: handleClick }}/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryBar` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryBar` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBar` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryBar` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryBar\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: (props) => {\\n                const fill = props.style && props.style.fill;\\n                return fill === \\\"black\\\" ? null : { style: { fill: \\\"black\\\" } };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={sampleData}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryBar` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryBar` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryBar` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe horizontal prop determines whether the bars will be laid vertically or horizontally. The bars will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true.\\n\\n_default:_ horizontal={false}\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domainPadding={{ x: 10 }}\\n>\\n  <VictoryBar horizontal\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryBar` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n  style={{ labels: { fill: \\\"white\\\" } }}\\n  labelComponent={<VictoryLabel dy={30}/>}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryBar` uses the standard `labels` prop. [Read about it here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryBar` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={{ x: 3 }}>\\n  <VictoryBar data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryBar` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={{ x: 2 }}>\\n  <VictoryBar data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryBar` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryBar` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n```playground\\n<VictoryChart polar\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryPolarAxis dependentAxis\\n    style={{ axis: { stroke: \\\"none\\\" } }}\\n    tickFormat={() => null}\\n  />\\n  <VictoryPolarAxis/>\\n  <VictoryBar\\n    data={sampleData}\\n    style={{\\n      data: { fill: \\\"#c43a31\\\", stroke: \\\"black\\\", strokeWidth: 2 }\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: number`\\n\\n`VictoryBar` uses the standard `samples` prop. [Read about it here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryBar` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryBar` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBar` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryBar` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryBar` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryBar\\n    standalone={false}\\n    width={300} height={300} padding={{left: 10, right: 10}}\\n    data={sampleData}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryBar` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n  <VictoryBar\\n    style={{\\n      data: {\\n        fill: ({ datum }) => datum.x === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\",\\n        stroke: ({ index }) => +index % 2 === 0  ? \\\"#000000\\\" : \\\"#c43a31\\\",\\n        fillOpacity: 0.7,\\n        strokeWidth: 3\\n      },\\n      labels: {\\n        fontSize: 15,\\n        fill: ({ datum }) => datum.x === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\"\\n      }\\n    }}\\n    data={sampleData}\\n    labels={({ datum }) => datum.x}\\n  />\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryBar` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryBar` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBar` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBar` uses the standard `y` data accessor prop. [Read about it here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n## y0\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBar` uses the standard `y0` data accessor prop to set a baseline. [Read about it here](/docs/common-props#y0)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryChart domainPadding={30}>\\n  <VictoryBar\\n    data={sampleData}\\n    y0={(d) => d.y - 1}\\n  />\\n</VictoryChart>\\n```\\n\\n[animations guide]: /guides/animations\\n\\n[data accessors guide]: /guides/data-accessors\\n\\n[custom components guide]: /guides/custom-components\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\\n[`victorychart`]: /docs/victory-chart\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\",\"content\":\"\\n# VictoryBar\\n\\nVictoryBar renders a dataset as series of bars. VictoryBar can be composed with [`VictoryChart`][] to create bar charts.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domainPadding={10}\\n>\\n  <VictoryBar\\n    style={{ data: { fill: \\\"#c43a31\\\" } }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## alignment\\n\\n`type: \\\"start\\\" || \\\"middle\\\" || \\\"end\\\"`\\n\\nThe `alignment` prop specifies how bars should be aligned relative to their data points. This prop may be given as \\\"start\\\", \\\"middle\\\" or \\\"end\\\". When this prop is not specified, bars will have \\\"middle\\\" alignment relative to their data points.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryBar\\n    style={{ data: { fill: \\\"#c43a31\\\" } }}\\n    alignment=\\\"start\\\"\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryBar` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## barRatio\\n\\n`type: number`\\n\\nThe `barRatio` prop specifies an _approximate_ ratio between bar widths and spaces between bars. When width is not specified via the `barWidth` prop or in bar styles, the `barRatio` prop will be used to calculate a default width for each bar given the total number of bars in the data series and the overall width of the chart.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domainPadding={{ x: 15 }}\\n>\\n  <VictoryBar\\n    barRatio={0.8}\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## barWidth\\n\\n`type: number || function`\\n\\nThe `barWidth` prop is used to specify the width of each bar. This prop may be given as a number of pixels or as a function that returns a number. When this prop is given as a function, it will be evaluated for each bar with the props object corresponding to that bar. When this value is not given, a default value will be calculated based on the overall dimensions of the chart, and the number of bars.\\n\\n_Note:_ It is still possible to define bar width via the style prop with the `width` attribute, but `barWidth` will take precedence.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domainPadding={{ x: 20 }}\\n>\\n  <VictoryBar\\n    barWidth={({ index }) => index * 2 + 8}\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryBar` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryBar` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## cornerRadius\\n\\n`type: function || number || { top, bottom, topLeft, topRight, bottomLeft, bottomRight }`\\n\\nThe `cornerRadius` prop specifies a radius to apply to each bar. If this prop is given as a single number, the radius will only be applied to the _top_ of each bar. When this prop is given as a function, it will be evaluated for each bar with the props object corresponding to that bar.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domainPadding={{ x: 15 }}\\n>\\n  <VictoryBar\\n    cornerRadius={{ topLeft: ({ datum }) => datum.x * 4 }}\\n    style={{\\n      data: {\\n        fill: \\\"#c43a31\\\",\\n        width: 25\\n      }\\n    }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryBar` uses the standard `data` prop. [Read about it here](/docs/common-props#data)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\nIn addition to svg style properties and `label`, `VictoryBar` will also preferentially use `width` properties supplied via data objects\\n\\n```playground\\n<VictoryBar\\n  data={[\\n    { x: 1, y: 2, y0: 1 },\\n    { x: 2, y: 3, y0: 2 },\\n    { x: 3, y: 5, y0: 2 },\\n    { x: 4, y: 4, y0: 3 },\\n    { x: 5, y: 6, y0: 3 }\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryBar` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)\\n\\n`VictoryBar` supplies the following props to its `dataComponent`: `data`, `datum`, `horizontal`, `index`, `padding`, `polar`, `origin`, `scale`, `style`, `width`, `height`, `x`, `y`, `y0`, `x0`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Bar/>`\\n\\n```jsx\\ndataComponent={<Bar events={{ onClick: handleClick }}/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryBar` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryBar` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBar` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryBar` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryBar\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: (props) => {\\n                const fill = props.style && props.style.fill;\\n                return fill === \\\"black\\\" ? null : { style: { fill: \\\"black\\\" } };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={sampleData}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryBar` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryBar` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryBar` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe horizontal prop determines whether the bars will be laid vertically or horizontally. The bars will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true.\\n\\n_default:_ horizontal={false}\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domainPadding={{ x: 10 }}\\n>\\n  <VictoryBar horizontal\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryBar` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n  style={{ labels: { fill: \\\"white\\\" } }}\\n  labelComponent={<VictoryLabel dy={30}/>}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryBar` uses the standard `labels` prop. [Read about it here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryBar` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={{ x: 3 }}>\\n  <VictoryBar data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryBar` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={{ x: 2 }}>\\n  <VictoryBar data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryBar` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryBar` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n```playground\\n<VictoryChart polar\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryPolarAxis dependentAxis\\n    style={{ axis: { stroke: \\\"none\\\" } }}\\n    tickFormat={() => null}\\n  />\\n  <VictoryPolarAxis/>\\n  <VictoryBar\\n    data={sampleData}\\n    style={{\\n      data: { fill: \\\"#c43a31\\\", stroke: \\\"black\\\", strokeWidth: 2 }\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: number`\\n\\n`VictoryBar` uses the standard `samples` prop. [Read about it here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryBar` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryBar` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBar` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryBar` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryBar` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryBar\\n    standalone={false}\\n    width={300} height={300} padding={{left: 10, right: 10}}\\n    data={sampleData}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryBar` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n  <VictoryBar\\n    style={{\\n      data: {\\n        fill: ({ datum }) => datum.x === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\",\\n        stroke: ({ index }) => +index % 2 === 0  ? \\\"#000000\\\" : \\\"#c43a31\\\",\\n        fillOpacity: 0.7,\\n        strokeWidth: 3\\n      },\\n      labels: {\\n        fontSize: 15,\\n        fill: ({ datum }) => datum.x === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\"\\n      }\\n    }}\\n    data={sampleData}\\n    labels={({ datum }) => datum.x}\\n  />\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryBar` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryBar` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBar` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBar` uses the standard `y` data accessor prop. [Read about it here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n## y0\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryBar` uses the standard `y0` data accessor prop to set a baseline. [Read about it here](/docs/common-props#y0)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryChart domainPadding={30}>\\n  <VictoryBar\\n    data={sampleData}\\n    y0={(d) => d.y - 1}\\n  />\\n</VictoryChart>\\n```\\n\\n[animations guide]: /guides/animations\\n[data accessors guide]: /guides/data-accessors\\n[custom components guide]: /guides/custom-components\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n[`victorychart`]: /docs/victory-chart\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\"},{\"data\":{\"id\":8,\"title\":\"VictoryCandlestick\",\"category\":\"charts\",\"type\":\"docs\",\"scope\":[\"sampleDataDates\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryCandlestick\",\"depth\":1,\"slug\":\"victory-candlestick\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"candleColors\",\"depth\":2,\"slug\":\"candle-colors\"},{\"type\":\"heading\",\"value\":\"candleRatio\",\"depth\":2,\"slug\":\"candle-ratio\"},{\"type\":\"heading\",\"value\":\"candleWidth\",\"depth\":2,\"slug\":\"candle-width\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"close\",\"depth\":2,\"slug\":\"close\"},{\"type\":\"heading\",\"value\":\"closeLabelComponent\",\"depth\":2,\"slug\":\"close-label-component\"},{\"type\":\"heading\",\"value\":\"closeLabels\",\"depth\":2,\"slug\":\"close-labels\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"high\",\"depth\":2,\"slug\":\"high\"},{\"type\":\"heading\",\"value\":\"highLabelComponent\",\"depth\":2,\"slug\":\"high-label-component\"},{\"type\":\"heading\",\"value\":\"highLabels\",\"depth\":2,\"slug\":\"high-labels\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labelOrientation\",\"depth\":2,\"slug\":\"label-orientation\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"low\",\"depth\":2,\"slug\":\"low\"},{\"type\":\"heading\",\"value\":\"lowLabelComponent\",\"depth\":2,\"slug\":\"low-label-component\"},{\"type\":\"heading\",\"value\":\"lowLabels\",\"depth\":2,\"slug\":\"low-labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"open\",\"depth\":2,\"slug\":\"open\"},{\"type\":\"heading\",\"value\":\"openLabelComponent\",\"depth\":2,\"slug\":\"open-label-component\"},{\"type\":\"heading\",\"value\":\"openLabels\",\"depth\":2,\"slug\":\"open-labels\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"wickStrokeWidth\",\"depth\":2,\"slug\":\"wick-stroke-width\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"}],\"slug\":\"victory-candlestick\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryCandlestick\",\"depth\":1,\"slug\":\"victory-candlestick\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"candleColors\",\"depth\":2,\"slug\":\"candle-colors\"},{\"type\":\"heading\",\"value\":\"candleRatio\",\"depth\":2,\"slug\":\"candle-ratio\"},{\"type\":\"heading\",\"value\":\"candleWidth\",\"depth\":2,\"slug\":\"candle-width\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"close\",\"depth\":2,\"slug\":\"close\"},{\"type\":\"heading\",\"value\":\"closeLabelComponent\",\"depth\":2,\"slug\":\"close-label-component\"},{\"type\":\"heading\",\"value\":\"closeLabels\",\"depth\":2,\"slug\":\"close-labels\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"high\",\"depth\":2,\"slug\":\"high\"},{\"type\":\"heading\",\"value\":\"highLabelComponent\",\"depth\":2,\"slug\":\"high-label-component\"},{\"type\":\"heading\",\"value\":\"highLabels\",\"depth\":2,\"slug\":\"high-labels\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labelOrientation\",\"depth\":2,\"slug\":\"label-orientation\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"low\",\"depth\":2,\"slug\":\"low\"},{\"type\":\"heading\",\"value\":\"lowLabelComponent\",\"depth\":2,\"slug\":\"low-label-component\"},{\"type\":\"heading\",\"value\":\"lowLabels\",\"depth\":2,\"slug\":\"low-labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"open\",\"depth\":2,\"slug\":\"open\"},{\"type\":\"heading\",\"value\":\"openLabelComponent\",\"depth\":2,\"slug\":\"open-label-component\"},{\"type\":\"heading\",\"value\":\"openLabels\",\"depth\":2,\"slug\":\"open-labels\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"wickStrokeWidth\",\"depth\":2,\"slug\":\"wick-stroke-width\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 8\\ntitle: VictoryCandlestick\\ncategory: charts\\ntype: docs\\nscope:\\n  - sampleDataDates\\n---\\n\\n# VictoryCandlestick\\n\\nVictoryCandlestick renders a dataset as a series of candlesticks. VictoryCandlestick can be composed with [`VictoryChart`][] to create candlestick charts.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domainPadding={{ x: 25 }}\\n  scale={{ x: \\\"time\\\" }}\\n>\\n<VictoryAxis tickFormat={(t) => `${t.getDate()}/${t.getMonth()}`}/>\\n<VictoryAxis dependentAxis/>\\n<VictoryCandlestick\\n  candleColors={{ positive: \\\"#5f5c5b\\\", negative: \\\"#c43a31\\\" }}\\n  data={sampleDataDates}\\n/>\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryCandlestick` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## candleColors\\n\\n`type: { positive: string, negative: string }`\\n\\nCandle colors are significant in candlestick charts, with colors indicating whether a market closed higher than it opened (positive), or closed lower than it opened (negative). The `candleColors` prop should be given as an object with color strings specified for positive and negative.\\n\\n_default (provided by default theme):_ `candleColors={{positive: \\\"white\\\", negative: \\\"black\\\"}}`\\n\\n```playground\\n<VictoryCandlestick\\n  candleColors={{ positive: \\\"#5f5c5b\\\", negative: \\\"#c43a31\\\" }}\\n  data={sampleDataDates}\\n/>\\n```\\n\\n## candleRatio\\n\\n`type: number`\\n\\nThe `candleRatio` prop specifies an _approximate_ ratio between candle widths and spaces between candles. When width is not specified via the `candleWidth` prop or in candle styles, the `candleRatio` prop will be used to calculate a default width for each candle given the total number of candles in the data series and the overall width of the chart.\\n\\n```playground\\n<VictoryCandlestick\\n  candleRatio={0.8}\\n  data={sampleDataDates}\\n/>\\n```\\n\\n## candleWidth\\n\\n`type: number || function`\\n\\nThe `candleWidth` prop is used to specify the width of each candle. This prop may be given as a number of pixels or as a function that returns a number. When this prop is given as a function, it will be evaluated with a single argument: an object containing all the props passed to the `Candle` component. When this value is not given, a default value will be calculated based on the overall dimensions of the chart, and the number of candles.\\n\\n_Note:_ It is still possible to define candle width via the style prop with the `width` attribute, but `candleWidth` will take precedence.\\n\\n```playground\\n<VictoryCandlestick\\n  candleWidth={55}\\n  data={sampleDataDates}\\n/>\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryCandlestick` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## close\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `close` data accessor prop to define the close value of a candle.\\n\\n**string:** specify which property in an array of data objects should be used as the close value\\n\\n_examples:_ `close=\\\"closing_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a close value\\n\\n_examples:_ `close={() => 10}`\\n\\n**array index:** specify which index of an array should be used as a close value when data is given as an array of arrays\\n\\n_examples:_ `close={1}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a close value\\n\\n_examples:_ `close=\\\"bonds.close\\\"`, `close={[\\\"bonds\\\", \\\"close\\\"]}`\\n\\n## closeLabelComponent\\n\\n`type: element`\\n\\nThe `closeLabelComponent` prop takes a component instance which will be used to render the label corresponding to the close value for each candle. The new element created from the passed `closeLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `closeLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `closeLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\ncloseLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  closeLabels\\n  closeLabelComponent={\\n    <VictoryLabel\\n      dx={-30}\\n      textAnchor=\\\"middle\\\"\\n    />\\n  }\\n/>\\n```\\n\\n## closeLabels\\n\\n`type: array || function || boolean`\\n\\nThe `closeLabels` prop defines the labels that will correspond to the close value for each candle. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.\\n\\n_examples:_\\n\\n-   `closeLabels`\\n-   `closeLabels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n-   `closeLabels={({ datum }) => Math.round(datum.close)}`\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryCandlestick` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\nSpecify data via the `data` prop. By default, `VictoryCandlestick` expects data as an array of objects with `x`, `open`, `close`, `high`, and `low` keys. Use the [`x`][], [`open`][], [`close`][], [`high`][], and [`low`][] data accessor props to specify custom data formats. Refer to the [Data Accessors Guide][] for more detail.\\n\\n```playground\\n<VictoryCandlestick\\n  data={[\\n    {x: new Date(2016, 6, 1), open: 5, close: 10, high: 15, low: 0},\\n    {x: new Date(2016, 6, 2), open: 10, close: 15, high: 20, low: 5},\\n    {x: new Date(2016, 6, 3), open: 15, close: 20, high: 22, low: 10},\\n    {x: new Date(2016, 6, 4), open: 20, close: 10, high: 25, low: 7},\\n    {x: new Date(2016, 6, 5), open: 10, close: 8, high: 15, low: 5}\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryCandlestick` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)\\n\\n`VictoryCandlestick` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `padding`, `polar`, `origin`, `scale`, `style`, `candleHeight`, `x1`, `y1`, `y2`, `x2`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Candle/>`\\n\\n```jsx\\ndataComponent={<Candle events={{ onClick: handleClick }}/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryCandlestick` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryCandlestick` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryCandlestick` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryCandlestick` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryCandlestick\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: (props) => {\\n                const fill = props.style && props.style.fill;\\n                return fill === \\\"#c43a31\\\" ? null : { style: { fill: \\\"#c43a31\\\" } };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={sampleDataDates}\\n  />\\n</div>\\n```\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryCandlestick` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryCandlestick` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## high\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `high` data accessor prop to define the high value of a candle.\\n\\n**string:** specify which property in an array of data objects should be used as the high value\\n\\n_examples:_ `high=\\\"highest_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a high value\\n\\n_examples:_ `high={() => 10}`\\n\\n**array index:** specify which index of an array should be used as a high value when data is given as an array of arrays\\n\\n_examples:_ `high={1}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a high value\\n\\n_examples:_ `high=\\\"bonds.high\\\"`, `high={[\\\"bonds\\\", \\\"high\\\"]}`\\n\\n## highLabelComponent\\n\\n`type: element`\\n\\nThe `highLabelComponent` prop takes a component instance which will be used to render the label corresponding to the highest value for each candle. The new element created from the passed `highLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `highLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `highLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nhighLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  highLabels\\n  highLabelComponent={\\n    <VictoryLabel\\n      dx={-10}\\n      textAnchor=\\\"middle\\\"\\n    />\\n  }\\n/>\\n```\\n\\n## highLabels\\n\\n`type: array || function || boolean`\\n\\nThe `highLabels` prop defines the labels that will correspond to the high value for each candle. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.\\n\\n_examples:_\\n\\n-   `highLabels`\\n-   `highLabels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n-   `highLabels={({ datum }) => Math.round(datum.high)}`\\n\\n## horizontal\\n\\n`type: boolean`\\n\\n`VictoryCandlestick` uses the standard `horizontal` prop. [Read about it in detail](/docs/common-props#horizontal)\\n\\n```playground\\n<VictoryCandlestick horizontal\\n  data={sampleDataDates}\\n/>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryCandlestick` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  labels={({ datum }) => datum.open}\\n  style={{\\n  \\tlabels: {\\n    \\tfill: ({ datum}) => datum.close > datum.open\\n        \\t? \\\"black\\\"\\n            : \\\"white\\\"\\n      }\\n  }}\\n  labelComponent={\\n  \\t<VictoryLabel\\n    \\tdx={({ text }) => text[0].length === 1 ? -4 : -8}\\n    />\\n  }\\n/>\\n```\\n\\n## labelOrientation\\n\\n`type: \\\"top\\\", \\\"bottom\\\", \\\"left\\\", \\\"right\\\" || { open, close, low, high }`\\n\\nThe `labelOrientation` prop determines where a label should be placed in relation to the candle it corresponds to. This prop may be given as \\\"top\\\", \\\"bottom\\\", \\\"left\\\", \\\"right\\\", or as an object with an option defined for some or all of the labels.\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  closeLabels={() => \\\"close\\\"}\\n  highLabels={() => \\\"high\\\"}\\n  lowLabels={() => \\\"low\\\"}\\n  openLabels={() => \\\"open\\\"}\\n  style={{ labels: { padding: 4 } }}\\n  labelOrientation={{\\n    close: \\\"right\\\",\\n    open: \\\"right\\\",\\n    high: \\\"top\\\",\\n    low: \\\"bottom\\\"\\n  }}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryCandlestick` uses the standard `labels` prop. [Read about it here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  labels={({ datum }) => `open: ${datum.open}`}\\n/>\\n```\\n\\n## low\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `low` data accessor prop to define the low value of a candle.\\n\\n**string:** specify which property in an array of data objects should be used as the low value\\n\\n_examples:_ `low=\\\"lowest_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a low value\\n\\n_examples:_ `low={() => 10}`\\n\\n**array index:** specify which index of an array should be used as a low value when data is given as an array of arrays\\n\\n_examples:_ `low={1}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a low value\\n\\n_examples:_ `low=\\\"bonds.low\\\"`, `low={[\\\"bonds\\\", \\\"low\\\"]}`\\n\\n## lowLabelComponent\\n\\n`type: element`\\n\\nThe `lowLabelComponent` prop takes a component instance which will be used to render the label corresponding to the lowest value for each candle. The new element created from the passed `lowLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `lowLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `lowLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nlowLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  lowLabels\\n  lowLabelComponent={<VictoryTooltip pointerLength={0}/>}\\n  events={[{\\n  \\ttarget: \\\"data\\\",\\n    eventHandlers: {\\n      onMouseOver: () => ({\\n        target: \\\"lowLabels\\\", mutation: () => ({ active: true })\\n      }),\\n      onMouseOut: () => ({\\n        target: \\\"lowLabels\\\", mutation: () => ({ active: false })\\n      })\\n    }\\n  }]}\\n/>\\n```\\n\\n## lowLabels\\n\\n`type: array || function || boolean`\\n\\nThe `lowLabels` prop defines the labels that will correspond to the low value for each candle. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.\\n\\n_examples:_\\n\\n-   `lowLabels`\\n-   `lowLabels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n-   `lowLabels={({ datum }) => Math.round(datum.low)}`\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryCandlestick` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart\\n  maxDomain={{ y: 30 }}\\n  scale={{ x: \\\"time\\\" }}\\n>\\n  <VictoryCandlestick\\n    data={sampleDataDates}\\n  />\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryCandlestick` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart\\n  minDomain={{ y: 0 }}\\n  scale={{ x: \\\"time\\\" }}\\n>\\n  <VictoryCandlestick\\n    data={sampleDataDates}\\n  />\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## open\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `open` data accessor prop to define the open value of a candle.\\n\\n**string:** specify which property in an array of data objects should be used as the open value\\n\\n_examples:_ `open=\\\"opening_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a open value\\n\\n_examples:_ `open={() => 10}`\\n\\n**array index:** specify which index of an array should be used as a open value when data is given as an array of arrays\\n\\n_examples:_ `open={1}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a open value\\n\\n_examples:_ `open=\\\"bonds.open\\\"`, `open={[\\\"bonds\\\", \\\"open\\\"]}`\\n\\n## openLabelComponent\\n\\n`type: element`\\n\\nThe `openLabelComponent` prop takes a component instance which will be used to render the label corresponding to the open value for each candle. The new element created from the passed `openLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `openLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `openLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nopenLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  openLabels\\n  openLabelComponent={\\n    <VictoryLabel\\n      dx={-30}\\n      textAnchor=\\\"middle\\\"\\n    />\\n  }\\n/>\\n```\\n\\n## openLabels\\n\\n`type: array || function || boolean`\\n\\nThe `openLabels` prop defines the labels that will correspond to the open value for each candle. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.\\n\\n_examples:_\\n\\n-   `openLabels`\\n-   `openLabels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n-   `openLabels={({ datum }) => Math.round(datum.open)}`\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryCandlestick` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryCandlestick` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n**Note:** Polar Charts are not yet supported for `VictoryCandlestick`\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: number`\\n\\n`VictoryCandlestick` uses the standard `samples` prop. [Read about it here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryCandlestick` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryCandlestick` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryCandlestick` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryCandlestick` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryCandlestick` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryCandlestick\\n    standalone={false}\\n    width={300} height={300}\\n    data={sampleDataDates}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n    type: {\\n      parent: object,\\n      data: object,\\n      labels: object,\\n      closeLabels: object,\\n      highLabels: object,\\n      lowLabels: object,\\n      openLabels: object\\n    }\\n\\nThe `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `data`, `labels`, `closeLabels`, `highLabels`,`lowLabels`, and `openLabels`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for style properties, and they will be evaluated with the props corresponding to each element.\\n\\n**note:** When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.\\n\\n**note:** custom `angle` and `verticalAnchor` properties may be included in `labels` styles.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  labels={() => \\\"labels\\\"}\\n  closeLabels={() => \\\"close\\\"}\\n  highLabels={() => \\\"high\\\"}\\n  lowLabels={() => \\\"low\\\"}\\n  openLabels={() => \\\"open\\\"}\\n  style={{\\n    data: {\\n      fill: \\\"#c43a31\\\", fillOpacity: 0.7, stroke: \\\"#c43a31\\\", strokeWidth: 3\\n    },\\n    labels: { fill: \\\"tomato\\\", padding: 2 },\\n    closeLabels: { fill: \\\"orange\\\", padding: 2 },\\n    highLabels: { fill: \\\"blue\\\", padding: 2 },\\n    lowLabels: { fill: \\\"teal\\\", padding: 2 },\\n    openLabels: { fill: \\\"green\\\", padding: 2 },\\n  }}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryCandlestick` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## wickStrokeWidth\\n\\n`type: number`\\n\\nWhen the `wickStrokeWidth` prop is set, this value will be used to determine the stroke width for the candle wick. When this prop is not set, the `strokeWidth` set by the `style` prop will apply to both the candle and the wick.\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryCandlestick` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryCandlestick` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx={(datum) => new Date(datum.day)}\\n```\\n\\n[animations guide]: /guides/animations\\n\\n[data accessors guide]: /guides/data-accessors\\n\\n[custom components guide]: /guides/custom-components\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\\n[`victorychart`]: /docs/victory-chart\\n\\n[`x`]: /docs/victory-candlestick#x\\n\\n[`open`]: /docs/victory-candlestick#open\\n\\n[`close`]: /docs/victory-candlestick#close\\n\\n[`high`]: /docs/victory-candlestick#high\\n\\n[`low`]: /docs/victory-candlestick#low\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\",\"content\":\"\\n# VictoryCandlestick\\n\\nVictoryCandlestick renders a dataset as a series of candlesticks. VictoryCandlestick can be composed with [`VictoryChart`][] to create candlestick charts.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domainPadding={{ x: 25 }}\\n  scale={{ x: \\\"time\\\" }}\\n>\\n<VictoryAxis tickFormat={(t) => `${t.getDate()}/${t.getMonth()}`}/>\\n<VictoryAxis dependentAxis/>\\n<VictoryCandlestick\\n  candleColors={{ positive: \\\"#5f5c5b\\\", negative: \\\"#c43a31\\\" }}\\n  data={sampleDataDates}\\n/>\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryCandlestick` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## candleColors\\n\\n`type: { positive: string, negative: string }`\\n\\nCandle colors are significant in candlestick charts, with colors indicating whether a market closed higher than it opened (positive), or closed lower than it opened (negative). The `candleColors` prop should be given as an object with color strings specified for positive and negative.\\n\\n_default (provided by default theme):_ `candleColors={{positive: \\\"white\\\", negative: \\\"black\\\"}}`\\n\\n```playground\\n<VictoryCandlestick\\n  candleColors={{ positive: \\\"#5f5c5b\\\", negative: \\\"#c43a31\\\" }}\\n  data={sampleDataDates}\\n/>\\n```\\n\\n## candleRatio\\n\\n`type: number`\\n\\nThe `candleRatio` prop specifies an _approximate_ ratio between candle widths and spaces between candles. When width is not specified via the `candleWidth` prop or in candle styles, the `candleRatio` prop will be used to calculate a default width for each candle given the total number of candles in the data series and the overall width of the chart.\\n\\n```playground\\n<VictoryCandlestick\\n  candleRatio={0.8}\\n  data={sampleDataDates}\\n/>\\n```\\n\\n## candleWidth\\n\\n`type: number || function`\\n\\nThe `candleWidth` prop is used to specify the width of each candle. This prop may be given as a number of pixels or as a function that returns a number. When this prop is given as a function, it will be evaluated with a single argument: an object containing all the props passed to the `Candle` component. When this value is not given, a default value will be calculated based on the overall dimensions of the chart, and the number of candles.\\n\\n_Note:_ It is still possible to define candle width via the style prop with the `width` attribute, but `candleWidth` will take precedence.\\n\\n```playground\\n<VictoryCandlestick\\n  candleWidth={55}\\n  data={sampleDataDates}\\n/>\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryCandlestick` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## close\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `close` data accessor prop to define the close value of a candle.\\n\\n**string:** specify which property in an array of data objects should be used as the close value\\n\\n_examples:_ `close=\\\"closing_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a close value\\n\\n_examples:_ `close={() => 10}`\\n\\n**array index:** specify which index of an array should be used as a close value when data is given as an array of arrays\\n\\n_examples:_ `close={1}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a close value\\n\\n_examples:_ `close=\\\"bonds.close\\\"`, `close={[\\\"bonds\\\", \\\"close\\\"]}`\\n\\n## closeLabelComponent\\n\\n`type: element`\\n\\nThe `closeLabelComponent` prop takes a component instance which will be used to render the label corresponding to the close value for each candle. The new element created from the passed `closeLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `closeLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `closeLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\ncloseLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  closeLabels\\n  closeLabelComponent={\\n    <VictoryLabel\\n      dx={-30}\\n      textAnchor=\\\"middle\\\"\\n    />\\n  }\\n/>\\n```\\n\\n## closeLabels\\n\\n`type: array || function || boolean`\\n\\nThe `closeLabels` prop defines the labels that will correspond to the close value for each candle. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.\\n\\n_examples:_\\n\\n- `closeLabels`\\n- `closeLabels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n- `closeLabels={({ datum }) => Math.round(datum.close)}`\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryCandlestick` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\nSpecify data via the `data` prop. By default, `VictoryCandlestick` expects data as an array of objects with `x`, `open`, `close`, `high`, and `low` keys. Use the [`x`][], [`open`][], [`close`][], [`high`][], and [`low`][] data accessor props to specify custom data formats. Refer to the [Data Accessors Guide][] for more detail.\\n\\n```playground\\n<VictoryCandlestick\\n  data={[\\n    {x: new Date(2016, 6, 1), open: 5, close: 10, high: 15, low: 0},\\n    {x: new Date(2016, 6, 2), open: 10, close: 15, high: 20, low: 5},\\n    {x: new Date(2016, 6, 3), open: 15, close: 20, high: 22, low: 10},\\n    {x: new Date(2016, 6, 4), open: 20, close: 10, high: 25, low: 7},\\n    {x: new Date(2016, 6, 5), open: 10, close: 8, high: 15, low: 5}\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryCandlestick` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)\\n\\n`VictoryCandlestick` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `padding`, `polar`, `origin`, `scale`, `style`, `candleHeight`, `x1`, `y1`, `y2`, `x2`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Candle/>`\\n\\n```jsx\\ndataComponent={<Candle events={{ onClick: handleClick }}/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryCandlestick` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryCandlestick` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryCandlestick` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryCandlestick` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryCandlestick\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: (props) => {\\n                const fill = props.style && props.style.fill;\\n                return fill === \\\"#c43a31\\\" ? null : { style: { fill: \\\"#c43a31\\\" } };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={sampleDataDates}\\n  />\\n</div>\\n```\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryCandlestick` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryCandlestick` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## high\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `high` data accessor prop to define the high value of a candle.\\n\\n**string:** specify which property in an array of data objects should be used as the high value\\n\\n_examples:_ `high=\\\"highest_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a high value\\n\\n_examples:_ `high={() => 10}`\\n\\n**array index:** specify which index of an array should be used as a high value when data is given as an array of arrays\\n\\n_examples:_ `high={1}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a high value\\n\\n_examples:_ `high=\\\"bonds.high\\\"`, `high={[\\\"bonds\\\", \\\"high\\\"]}`\\n\\n## highLabelComponent\\n\\n`type: element`\\n\\nThe `highLabelComponent` prop takes a component instance which will be used to render the label corresponding to the highest value for each candle. The new element created from the passed `highLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `highLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `highLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nhighLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  highLabels\\n  highLabelComponent={\\n    <VictoryLabel\\n      dx={-10}\\n      textAnchor=\\\"middle\\\"\\n    />\\n  }\\n/>\\n```\\n\\n## highLabels\\n\\n`type: array || function || boolean`\\n\\nThe `highLabels` prop defines the labels that will correspond to the high value for each candle. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.\\n\\n_examples:_\\n\\n- `highLabels`\\n- `highLabels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n- `highLabels={({ datum }) => Math.round(datum.high)}`\\n\\n## horizontal\\n\\n`type: boolean`\\n\\n`VictoryCandlestick` uses the standard `horizontal` prop. [Read about it in detail](/docs/common-props#horizontal)\\n\\n```playground\\n<VictoryCandlestick horizontal\\n  data={sampleDataDates}\\n/>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryCandlestick` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  labels={({ datum }) => datum.open}\\n  style={{\\n  \\tlabels: {\\n    \\tfill: ({ datum}) => datum.close > datum.open\\n        \\t? \\\"black\\\"\\n            : \\\"white\\\"\\n      }\\n  }}\\n  labelComponent={\\n  \\t<VictoryLabel\\n    \\tdx={({ text }) => text[0].length === 1 ? -4 : -8}\\n    />\\n  }\\n/>\\n```\\n\\n## labelOrientation\\n\\n`type: \\\"top\\\", \\\"bottom\\\", \\\"left\\\", \\\"right\\\" || { open, close, low, high }`\\n\\nThe `labelOrientation` prop determines where a label should be placed in relation to the candle it corresponds to. This prop may be given as \\\"top\\\", \\\"bottom\\\", \\\"left\\\", \\\"right\\\", or as an object with an option defined for some or all of the labels.\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  closeLabels={() => \\\"close\\\"}\\n  highLabels={() => \\\"high\\\"}\\n  lowLabels={() => \\\"low\\\"}\\n  openLabels={() => \\\"open\\\"}\\n  style={{ labels: { padding: 4 } }}\\n  labelOrientation={{\\n    close: \\\"right\\\",\\n    open: \\\"right\\\",\\n    high: \\\"top\\\",\\n    low: \\\"bottom\\\"\\n  }}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryCandlestick` uses the standard `labels` prop. [Read about it here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  labels={({ datum }) => `open: ${datum.open}`}\\n/>\\n```\\n\\n## low\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `low` data accessor prop to define the low value of a candle.\\n\\n**string:** specify which property in an array of data objects should be used as the low value\\n\\n_examples:_ `low=\\\"lowest_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a low value\\n\\n_examples:_ `low={() => 10}`\\n\\n**array index:** specify which index of an array should be used as a low value when data is given as an array of arrays\\n\\n_examples:_ `low={1}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a low value\\n\\n_examples:_ `low=\\\"bonds.low\\\"`, `low={[\\\"bonds\\\", \\\"low\\\"]}`\\n\\n## lowLabelComponent\\n\\n`type: element`\\n\\nThe `lowLabelComponent` prop takes a component instance which will be used to render the label corresponding to the lowest value for each candle. The new element created from the passed `lowLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `lowLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `lowLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nlowLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  lowLabels\\n  lowLabelComponent={<VictoryTooltip pointerLength={0}/>}\\n  events={[{\\n  \\ttarget: \\\"data\\\",\\n    eventHandlers: {\\n      onMouseOver: () => ({\\n        target: \\\"lowLabels\\\", mutation: () => ({ active: true })\\n      }),\\n      onMouseOut: () => ({\\n        target: \\\"lowLabels\\\", mutation: () => ({ active: false })\\n      })\\n    }\\n  }]}\\n/>\\n```\\n\\n## lowLabels\\n\\n`type: array || function || boolean`\\n\\nThe `lowLabels` prop defines the labels that will correspond to the low value for each candle. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.\\n\\n_examples:_\\n\\n- `lowLabels`\\n- `lowLabels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n- `lowLabels={({ datum }) => Math.round(datum.low)}`\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryCandlestick` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart\\n  maxDomain={{ y: 30 }}\\n  scale={{ x: \\\"time\\\" }}\\n>\\n  <VictoryCandlestick\\n    data={sampleDataDates}\\n  />\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryCandlestick` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart\\n  minDomain={{ y: 0 }}\\n  scale={{ x: \\\"time\\\" }}\\n>\\n  <VictoryCandlestick\\n    data={sampleDataDates}\\n  />\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## open\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `open` data accessor prop to define the open value of a candle.\\n\\n**string:** specify which property in an array of data objects should be used as the open value\\n\\n_examples:_ `open=\\\"opening_value\\\"`\\n\\n**function:** use a function to translate each element in a data array into a open value\\n\\n_examples:_ `open={() => 10}`\\n\\n**array index:** specify which index of an array should be used as a open value when data is given as an array of arrays\\n\\n_examples:_ `open={1}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a open value\\n\\n_examples:_ `open=\\\"bonds.open\\\"`, `open={[\\\"bonds\\\", \\\"open\\\"]}`\\n\\n## openLabelComponent\\n\\n`type: element`\\n\\nThe `openLabelComponent` prop takes a component instance which will be used to render the label corresponding to the open value for each candle. The new element created from the passed `openLabelComponent` will be supplied with the following props: `x`, `y`, `datum`, `index`, `scale`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `openLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own components\\n\\n_default:_ `openLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\nopenLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  openLabels\\n  openLabelComponent={\\n    <VictoryLabel\\n      dx={-30}\\n      textAnchor=\\\"middle\\\"\\n    />\\n  }\\n/>\\n```\\n\\n## openLabels\\n\\n`type: array || function || boolean`\\n\\nThe `openLabels` prop defines the labels that will correspond to the open value for each candle. This prop should be given as a boolean, an array or as a function of the props corresponding to that label. When given as a boolean value, the max value of each datum will be used for the label.\\n\\n_examples:_\\n\\n- `openLabels`\\n- `openLabels={[\\\"first\\\", \\\"second\\\", \\\"third\\\"]}`\\n- `openLabels={({ datum }) => Math.round(datum.open)}`\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryCandlestick` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryCandlestick` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n**Note:** Polar Charts are not yet supported for `VictoryCandlestick`\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: number`\\n\\n`VictoryCandlestick` uses the standard `samples` prop. [Read about it here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryCandlestick` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryCandlestick` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryCandlestick` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryCandlestick` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryCandlestick` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryCandlestick\\n    standalone={false}\\n    width={300} height={300}\\n    data={sampleDataDates}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n```\\ntype: {\\n  parent: object,\\n  data: object,\\n  labels: object,\\n  closeLabels: object,\\n  highLabels: object,\\n  lowLabels: object,\\n  openLabels: object\\n}\\n```\\n\\nThe `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `data`, `labels`, `closeLabels`, `highLabels`,`lowLabels`, and `openLabels`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for style properties, and they will be evaluated with the props corresponding to each element.\\n\\n**note:** When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.\\n\\n**note:** custom `angle` and `verticalAnchor` properties may be included in `labels` styles.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryCandlestick\\n  data={sampleDataDates}\\n  labels={() => \\\"labels\\\"}\\n  closeLabels={() => \\\"close\\\"}\\n  highLabels={() => \\\"high\\\"}\\n  lowLabels={() => \\\"low\\\"}\\n  openLabels={() => \\\"open\\\"}\\n  style={{\\n    data: {\\n      fill: \\\"#c43a31\\\", fillOpacity: 0.7, stroke: \\\"#c43a31\\\", strokeWidth: 3\\n    },\\n    labels: { fill: \\\"tomato\\\", padding: 2 },\\n    closeLabels: { fill: \\\"orange\\\", padding: 2 },\\n    highLabels: { fill: \\\"blue\\\", padding: 2 },\\n    lowLabels: { fill: \\\"teal\\\", padding: 2 },\\n    openLabels: { fill: \\\"green\\\", padding: 2 },\\n  }}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryCandlestick` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## wickStrokeWidth\\n\\n`type: number`\\n\\nWhen the `wickStrokeWidth` prop is set, this value will be used to determine the stroke width for the candle wick. When this prop is not set, the `strokeWidth` set by the `style` prop will apply to both the candle and the wick.\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryCandlestick` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryCandlestick` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx={(datum) => new Date(datum.day)}\\n```\\n\\n[animations guide]: /guides/animations\\n[data accessors guide]: /guides/data-accessors\\n[custom components guide]: /guides/custom-components\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n[`victorychart`]: /docs/victory-chart\\n[`x`]: /docs/victory-candlestick#x\\n[`open`]: /docs/victory-candlestick#open\\n[`close`]: /docs/victory-candlestick#close\\n[`high`]: /docs/victory-candlestick#high\\n[`low`]: /docs/victory-candlestick#low\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\"},{\"data\":{\"id\":9,\"title\":\"VictoryChart\",\"category\":\"charts\",\"type\":\"docs\",\"scope\":[\"sampleData\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryChart\",\"depth\":1,\"slug\":\"victory-chart\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"backgroundComponent\",\"depth\":2,\"slug\":\"background-component\"},{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"endAngle\",\"depth\":2,\"slug\":\"end-angle\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"innerRadius\",\"depth\":2,\"slug\":\"inner-radius\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"startAngle\",\"depth\":2,\"slug\":\"start-angle\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"}],\"slug\":\"victory-chart\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryChart\",\"depth\":1,\"slug\":\"victory-chart\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"backgroundComponent\",\"depth\":2,\"slug\":\"background-component\"},{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"endAngle\",\"depth\":2,\"slug\":\"end-angle\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"innerRadius\",\"depth\":2,\"slug\":\"inner-radius\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"startAngle\",\"depth\":2,\"slug\":\"start-angle\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 9\\ntitle: VictoryChart\\ncategory: charts\\ntype: docs\\nscope:\\n  - sampleData\\n---\\n\\n# VictoryChart\\n\\n`VictoryChart` is a wrapper component that renders a given set of children on a set of Cartesian or polar axes. `VictoryChart` reconciles the domain for all its children, controls the layout of the chart, and coordinates animations and shared events. If no children are provided, `VictoryChart` will render a set of empty default axes.\\n\\n```playground\\n<div>\\n  <VictoryChart\\n    theme={VictoryTheme.material}\\n  >\\n    <VictoryArea data={sampleData}/>\\n    <VictoryAxis/>\\n  </VictoryChart>\\n  <VictoryChart polar\\n    theme={VictoryTheme.material}\\n  >\\n    <VictoryArea data={sampleData}/>\\n    <VictoryPolarAxis/>\\n  </VictoryChart>\\n</div>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryChart` uses the standard `animate` prop. [Read about it here](/docs/common-props/#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n**note: `VictoryChart` controls the `animate` prop of its children when set. To animate individual children of `VictoryChart`, set the `animate` prop only on children, and not on the `VictoryChart` wrapper.**\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## backgroundComponent\\n\\n`type: element`\\n\\nThe `backgroundComponent` prop takes a component instance which will be responsible for rendering a background if the `VictoryChart`'s `style` component includes `background` styles. The new element created from the passed `backgroundComponent` will be provided with the following properties calculated by `VictoryChart`: `height`, `polar`, `scale`, `style`, `x`, `y`, `width`. All of these props on `Background` should take prececence over what `VictoryChart` is trying to set.\\n\\n_default:_ `<Background/>`\\n\\n```jsx\\nbackgroundComponent={<Background/>}\\n```\\n\\n```playground\\n<VictoryChart\\n  height={300}\\n  width={300}\\n  domain={[-1, 1]}\\n  style={{\\n    background: { fill: \\\"pink\\\" }\\n  }}\\n  backgroundComponent={<Background y={20} height={100}/>}\\n/>\\n```\\n\\n## children\\n\\n`type: element || array[element]`\\n\\n`VictoryChart` works with any combination of the following children: [VictoryArea][], [VictoryAxis][] / [VictoryPolarAxis][], [VictoryBar][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryGroup][], [VictoryLine][], [VictoryScatter][], [VictoryHistogram][], [VictoryStack][], and [VictoryVoronoi][]. Children supplied to `VictoryChart` will be cloned and rendered with new props so that all children share common props such as `domain` and `scale`.\\n\\n**Note: polar charts must use `VictoryPolarAxis` rather than `VictoryAxis`**\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryChart` uses the standard `containerComponent` prop. [Read about it in detail here](/docs/common-props/#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryChart` uses the standard `domain` prop. [Read about it in detail here](/docs/common-props/#domain)\\n\\n**note: `VictoryChart` controls the `domain` prop of its children.**\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryChart` uses the standard `domainPadding` prop. [Read about it in detail here](/docs/common-props#domainpadding)\\n\\n**note: `VictoryChart` controls the `domainPadding` prop of its children.**\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## endAngle\\n\\n`type: number`\\n\\nThe `endAngle` props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with `startAngle` to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.\\n\\n_default:_ `endAngle={360}`\\n\\n```playground\\n<div>\\n  <VictoryChart polar\\n    theme={VictoryTheme.material}\\n    startAngle={90}\\n    endAngle={450}\\n  >\\n    <VictoryPolarAxis\\n      tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}\\n      labelPlacement=\\\"vertical\\\"\\n    />\\n    <VictoryBar style={{ data: { fill: \\\"tomato\\\", width: 30 } }}\\n      data={[\\n        { x: 0, y: 2 },\\n        { x: 60, y: 3 },\\n        { x: 120, y: 5 },\\n        { x: 180, y: 4 },\\n        { x: 240, y: 4 },\\n        { x: 300, y: 4 }\\n      ]}\\n    />\\n  </VictoryChart>\\n\\n  <VictoryChart polar\\n    theme={VictoryTheme.material}\\n    startAngle={0}\\n    endAngle={180}\\n  >\\n    <VictoryPolarAxis\\n      tickValues={[0, 45, 90, 135, 180]}\\n      labelPlacement=\\\"vertical\\\"\\n    />\\n    <VictoryBar style={{ data: { fill: \\\"tomato\\\", width: 30 } }}\\n      data={[\\n        { x: 0, y: 2 },\\n        { x: 45, y: 3 },\\n        { x: 90, y: 5 },\\n        { x: 135, y: 4 },\\n        { x: 180, y: 7 }\\n      ]}\\n    />\\n  </VictoryChart>\\n</div>\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryChart` uses the standard `events` prop. [Read about it in more detail here](/docs/common-props/#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n**Note: `VictoryChart` coordinates events between children using the `VictorySharedEvents` and the `sharedEvents` prop**\\n\\n```playground\\n<VictoryChart\\n  events={[{\\n    childName: \\\"all\\\",\\n    target: \\\"data\\\",\\n    eventHandlers: {\\n      onClick: () => {\\n        return [\\n          {\\n            childName: \\\"area-2\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"gold\\\" }) })\\n          }, {\\n            childName: \\\"area-3\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"orange\\\" }) })\\n          }, {\\n            childName: \\\"area-4\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"red\\\" }) })\\n          }\\n        ];\\n      }\\n    }\\n  }]}\\n>\\n  <VictoryStack>\\n    <VictoryArea name=\\\"area-1\\\" data={sampleData}/>\\n    <VictoryArea name=\\\"area-2\\\" data={sampleData}/>\\n    <VictoryArea name=\\\"area-3\\\" data={sampleData}/>\\n    <VictoryArea name=\\\"area-4\\\" data={sampleData}/>\\n  </VictoryStack>\\n</VictoryChart>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryChart` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props/#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryChart` uses the standard `groupComponent` prop. [Read about it in detail here](/docs/common-props/#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryChart` uses the standard `height` prop. [Read about it in detail here](/docs/common-props/#height)\\n\\n**note: `VictoryChart` controls the `height` prop of its children.**\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the independent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis.\\n\\n_default:_ horizontal={false}\\n\\n```playground\\n<VictoryChart horizontal\\n  domainPadding={{ x: 8 }}\\n>\\n  <VictoryBar\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleData}\\n  />\\n  <VictoryScatter\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## innerRadius\\n\\n`type: number`\\n\\nWhen the `innerRadius` prop is set, polar charts will be hollow rather than circular.\\n\\n```playground\\n<VictoryChart polar theme={VictoryTheme.material} innerRadius={50}>\\n  <VictoryPolarAxis/>\\n  <VictoryPolarAxis dependentAxis tickValues={[1, 3, 5]} axisAngle={40}/>\\n  <VictoryBar data={sampleData} style={{ data: { fill: \\\"#c43a31\\\", width: 30 } }}/>\\n</VictoryChart>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryChart` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={{ y: 4.5 }}>\\n  <VictoryLine data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryChart` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={{ y: 0 }}>\\n  <VictoryLine data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryChart` uses the standard `padding` prop. [Read about it in detail here](/docs/common-props/#padding)\\n\\n**note: `VictoryChart` controls the `padding` prop of its children.**\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryChart` uses the standard `polar` prop. [Read about it in detail here](/docs/common-props/#polar)\\n\\n**Notes:**\\n\\n-   `VictoryChart` controls the `polar` prop of its children\\n-   Polar charts should use `VictoryPolarAxis` rather than `VictoryAxis`\\n\\n```playground\\n<div>\\n  <VictoryChart polar\\n    theme={VictoryTheme.material}\\n  >\\n    <VictoryPolarAxis/>\\n    <VictoryBar\\n      data={sampleData}\\n      style={{ data: { fill: \\\"#c43a31\\\", stroke: \\\"black\\\", strokeWidth: 2 }}}\\n    />\\n  </VictoryChart>\\n\\n  <VictoryChart\\n    theme={VictoryTheme.material}\\n  >\\n    <VictoryAxis/>\\n    <VictoryBar\\n      data={sampleData}\\n      style={{ data: { fill: \\\"#c43a31\\\", stroke: \\\"black\\\", strokeWidth: 2 }}}\\n    />\\n  </VictoryChart>\\n</div>\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually calculated based on other props. It will not typically be necessary to set a `range` prop manually**\\n\\n**note: `VictoryChart` controls the `range` prop of its children.**\\n\\n[Read about the `range` prop in detail](/docs/common-props/#range)\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryChart` uses the standard `scale` prop. [Read about it here](/docs/common-props/#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n**note: `VictoryChart` controls the `scale` prop of its children.**\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryChart` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryChart` uses the standard `standalone` prop. [Read about it in detail here](/docs/common-props/#standalone)\\n\\n**note:** `VictoryChart` sets \\\\`standalone={false} for all of its children.\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryChart\\n    standalone={false}\\n    width={300} height={300}\\n  />\\n</svg>\\n```\\n\\n## startAngle\\n\\n`type: number`\\n\\nThe `startAngle` props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction with `endAngle` to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.\\n\\n_default:_ `startAngle={0}`\\n\\n```playground\\n<div>\\n  <VictoryChart polar\\n    theme={VictoryTheme.material}\\n    startAngle={90}\\n    endAngle={450}\\n  >\\n    <VictoryPolarAxis\\n      tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}\\n      labelPlacement=\\\"vertical\\\"\\n    />\\n    <VictoryBar style={{ data: { fill: \\\"tomato\\\", width: 30 } }}\\n      data={[\\n        { x: 0, y: 2 },\\n        { x: 60, y: 3 },\\n        { x: 120, y: 5 },\\n        { x: 180, y: 4 },\\n        { x: 240, y: 4 },\\n        { x: 300, y: 4 }\\n      ]}\\n    />\\n  </VictoryChart>\\n\\n  <VictoryChart polar\\n    theme={VictoryTheme.material}\\n    startAngle={0}\\n    endAngle={180}\\n  >\\n    <VictoryPolarAxis\\n      tickValues={[0, 45, 90, 135, 180]}\\n      labelPlacement=\\\"vertical\\\"\\n    />\\n    <VictoryBar style={{ data: { fill: \\\"tomato\\\", width: 30 } }}\\n      data={[\\n        { x: 0, y: 2 },\\n        { x: 45, y: 3 },\\n        { x: 90, y: 5 },\\n        { x: 135, y: 4 },\\n        { x: 180, y: 7 }\\n      ]}\\n    />\\n  </VictoryChart>\\n</div>\\n```\\n\\n## style\\n\\n`type: { parent: object, background: object }`\\n\\n`VictoryChart` uses the standard `style` prop. [Read about it in detail here](/docs/common-props/#style)\\n\\nnote: custom valid svg style properties that are supported may be included in `background` styles.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryChart\\n  style={{\\n    parent: {\\n      border: \\\"1px solid #ccc\\\"\\n    },\\n    background: {\\n      fill: \\\"pink\\\"\\n    }\\n  }}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryChart` uses the standard `theme` prop. [Read about it in detail here](/docs/common-props/#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryChart` uses the standard `width` prop. [Read about it in detail here](/docs/common-props/#width)\\n\\n**note: `VictoryChart` controls the `width` prop of its children.**\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n[victoryarea]: /docs/victory-area\\n\\n[victoryaxis]: /docs/victory-axis\\n\\n[victorypolaraxis]: /docs/victory-polar-axis\\n\\n[victorybar]: /docs/victory-bar\\n\\n[victorycandlestick]: /docs/victory-candlestick\\n\\n[victoryerrorbar]: /docs/victory-errorbar\\n\\n[victorygroup]: /docs/victory-group\\n\\n[victoryline]: /docs/victory-line\\n\\n[victoryscatter]: /docs/victory-scatter\\n\\n[victoryhistogram]: /docs/victory-histogram\\n\\n[victorystack]: /docs/victory-stack\\n\\n[victoryvoronoi]: /docs/victory-voronoi\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\\n[animations guide]: /guides/animations\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\",\"content\":\"\\n# VictoryChart\\n\\n`VictoryChart` is a wrapper component that renders a given set of children on a set of Cartesian or polar axes. `VictoryChart` reconciles the domain for all its children, controls the layout of the chart, and coordinates animations and shared events. If no children are provided, `VictoryChart` will render a set of empty default axes.\\n\\n```playground\\n<div>\\n  <VictoryChart\\n    theme={VictoryTheme.material}\\n  >\\n    <VictoryArea data={sampleData}/>\\n    <VictoryAxis/>\\n  </VictoryChart>\\n  <VictoryChart polar\\n    theme={VictoryTheme.material}\\n  >\\n    <VictoryArea data={sampleData}/>\\n    <VictoryPolarAxis/>\\n  </VictoryChart>\\n</div>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryChart` uses the standard `animate` prop. [Read about it here](/docs/common-props/#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n**note: `VictoryChart` controls the `animate` prop of its children when set. To animate individual children of `VictoryChart`, set the `animate` prop only on children, and not on the `VictoryChart` wrapper.**\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## backgroundComponent\\n\\n`type: element`\\n\\nThe `backgroundComponent` prop takes a component instance which will be responsible for rendering a background if the `VictoryChart`'s `style` component includes `background` styles. The new element created from the passed `backgroundComponent` will be provided with the following properties calculated by `VictoryChart`: `height`, `polar`, `scale`, `style`, `x`, `y`, `width`. All of these props on `Background` should take prececence over what `VictoryChart` is trying to set.\\n\\n_default:_ `<Background/>`\\n\\n```jsx\\nbackgroundComponent={<Background/>}\\n```\\n\\n```playground\\n<VictoryChart\\n  height={300}\\n  width={300}\\n  domain={[-1, 1]}\\n  style={{\\n    background: { fill: \\\"pink\\\" }\\n  }}\\n  backgroundComponent={<Background y={20} height={100}/>}\\n/>\\n```\\n\\n## children\\n\\n`type: element || array[element]`\\n\\n`VictoryChart` works with any combination of the following children: [VictoryArea][], [VictoryAxis][] / [VictoryPolarAxis][], [VictoryBar][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryGroup][], [VictoryLine][], [VictoryScatter][], [VictoryHistogram][], [VictoryStack][], and [VictoryVoronoi][]. Children supplied to `VictoryChart` will be cloned and rendered with new props so that all children share common props such as `domain` and `scale`.\\n\\n**Note: polar charts must use `VictoryPolarAxis` rather than `VictoryAxis`**\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryChart` uses the standard `containerComponent` prop. [Read about it in detail here](/docs/common-props/#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryChart` uses the standard `domain` prop. [Read about it in detail here](/docs/common-props/#domain)\\n\\n**note: `VictoryChart` controls the `domain` prop of its children.**\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryChart` uses the standard `domainPadding` prop. [Read about it in detail here](/docs/common-props#domainpadding)\\n\\n**note: `VictoryChart` controls the `domainPadding` prop of its children.**\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## endAngle\\n\\n`type: number`\\n\\nThe `endAngle` props defines the overall end angle of a polar chart in degrees. This prop is used in conjunction with `startAngle` to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.\\n\\n_default:_ `endAngle={360}`\\n\\n```playground\\n<div>\\n  <VictoryChart polar\\n    theme={VictoryTheme.material}\\n    startAngle={90}\\n    endAngle={450}\\n  >\\n    <VictoryPolarAxis\\n      tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}\\n      labelPlacement=\\\"vertical\\\"\\n    />\\n    <VictoryBar style={{ data: { fill: \\\"tomato\\\", width: 30 } }}\\n      data={[\\n        { x: 0, y: 2 },\\n        { x: 60, y: 3 },\\n        { x: 120, y: 5 },\\n        { x: 180, y: 4 },\\n        { x: 240, y: 4 },\\n        { x: 300, y: 4 }\\n      ]}\\n    />\\n  </VictoryChart>\\n\\n  <VictoryChart polar\\n    theme={VictoryTheme.material}\\n    startAngle={0}\\n    endAngle={180}\\n  >\\n    <VictoryPolarAxis\\n      tickValues={[0, 45, 90, 135, 180]}\\n      labelPlacement=\\\"vertical\\\"\\n    />\\n    <VictoryBar style={{ data: { fill: \\\"tomato\\\", width: 30 } }}\\n      data={[\\n        { x: 0, y: 2 },\\n        { x: 45, y: 3 },\\n        { x: 90, y: 5 },\\n        { x: 135, y: 4 },\\n        { x: 180, y: 7 }\\n      ]}\\n    />\\n  </VictoryChart>\\n</div>\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryChart` uses the standard `events` prop. [Read about it in more detail here](/docs/common-props/#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n**Note: `VictoryChart` coordinates events between children using the `VictorySharedEvents` and the `sharedEvents` prop**\\n\\n```playground\\n<VictoryChart\\n  events={[{\\n    childName: \\\"all\\\",\\n    target: \\\"data\\\",\\n    eventHandlers: {\\n      onClick: () => {\\n        return [\\n          {\\n            childName: \\\"area-2\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"gold\\\" }) })\\n          }, {\\n            childName: \\\"area-3\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"orange\\\" }) })\\n          }, {\\n            childName: \\\"area-4\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"red\\\" }) })\\n          }\\n        ];\\n      }\\n    }\\n  }]}\\n>\\n  <VictoryStack>\\n    <VictoryArea name=\\\"area-1\\\" data={sampleData}/>\\n    <VictoryArea name=\\\"area-2\\\" data={sampleData}/>\\n    <VictoryArea name=\\\"area-3\\\" data={sampleData}/>\\n    <VictoryArea name=\\\"area-4\\\" data={sampleData}/>\\n  </VictoryStack>\\n</VictoryChart>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryChart` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props/#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryChart` uses the standard `groupComponent` prop. [Read about it in detail here](/docs/common-props/#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryChart` uses the standard `height` prop. [Read about it in detail here](/docs/common-props/#height)\\n\\n**note: `VictoryChart` controls the `height` prop of its children.**\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe horizontal prop determines whether data will be plotted horizontally. When this prop is set to true, the independent variable will be plotted on the y axis and the dependent variable will be plotted on the x axis.\\n\\n_default:_ horizontal={false}\\n\\n```playground\\n<VictoryChart horizontal\\n  domainPadding={{ x: 8 }}\\n>\\n  <VictoryBar\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleData}\\n  />\\n  <VictoryScatter\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## innerRadius\\n\\n`type: number`\\n\\nWhen the `innerRadius` prop is set, polar charts will be hollow rather than circular.\\n\\n```playground\\n<VictoryChart polar theme={VictoryTheme.material} innerRadius={50}>\\n  <VictoryPolarAxis/>\\n  <VictoryPolarAxis dependentAxis tickValues={[1, 3, 5]} axisAngle={40}/>\\n  <VictoryBar data={sampleData} style={{ data: { fill: \\\"#c43a31\\\", width: 30 } }}/>\\n</VictoryChart>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryChart` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={{ y: 4.5 }}>\\n  <VictoryLine data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryChart` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={{ y: 0 }}>\\n  <VictoryLine data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryChart` uses the standard `padding` prop. [Read about it in detail here](/docs/common-props/#padding)\\n\\n**note: `VictoryChart` controls the `padding` prop of its children.**\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryChart` uses the standard `polar` prop. [Read about it in detail here](/docs/common-props/#polar)\\n\\n**Notes:**\\n\\n- `VictoryChart` controls the `polar` prop of its children\\n- Polar charts should use `VictoryPolarAxis` rather than `VictoryAxis`\\n\\n```playground\\n<div>\\n  <VictoryChart polar\\n    theme={VictoryTheme.material}\\n  >\\n    <VictoryPolarAxis/>\\n    <VictoryBar\\n      data={sampleData}\\n      style={{ data: { fill: \\\"#c43a31\\\", stroke: \\\"black\\\", strokeWidth: 2 }}}\\n    />\\n  </VictoryChart>\\n\\n  <VictoryChart\\n    theme={VictoryTheme.material}\\n  >\\n    <VictoryAxis/>\\n    <VictoryBar\\n      data={sampleData}\\n      style={{ data: { fill: \\\"#c43a31\\\", stroke: \\\"black\\\", strokeWidth: 2 }}}\\n    />\\n  </VictoryChart>\\n</div>\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually calculated based on other props. It will not typically be necessary to set a `range` prop manually**\\n\\n**note: `VictoryChart` controls the `range` prop of its children.**\\n\\n[Read about the `range` prop in detail](/docs/common-props/#range)\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryChart` uses the standard `scale` prop. [Read about it here](/docs/common-props/#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n**note: `VictoryChart` controls the `scale` prop of its children.**\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryChart` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryChart` uses the standard `standalone` prop. [Read about it in detail here](/docs/common-props/#standalone)\\n\\n**note:** `VictoryChart` sets `standalone={false} for all of its children.\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryChart\\n    standalone={false}\\n    width={300} height={300}\\n  />\\n</svg>\\n```\\n\\n## startAngle\\n\\n`type: number`\\n\\nThe `startAngle` props defines the overall start angle of a polar chart in degrees. This prop is used in conjunction with `endAngle` to create polar chart that spans only a segment of a circle, or to change overall rotation of the chart. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.\\n\\n_default:_ `startAngle={0}`\\n\\n```playground\\n<div>\\n  <VictoryChart polar\\n    theme={VictoryTheme.material}\\n    startAngle={90}\\n    endAngle={450}\\n  >\\n    <VictoryPolarAxis\\n      tickValues={[0, 45, 90, 135, 180, 225, 270, 315]}\\n      labelPlacement=\\\"vertical\\\"\\n    />\\n    <VictoryBar style={{ data: { fill: \\\"tomato\\\", width: 30 } }}\\n      data={[\\n        { x: 0, y: 2 },\\n        { x: 60, y: 3 },\\n        { x: 120, y: 5 },\\n        { x: 180, y: 4 },\\n        { x: 240, y: 4 },\\n        { x: 300, y: 4 }\\n      ]}\\n    />\\n  </VictoryChart>\\n\\n  <VictoryChart polar\\n    theme={VictoryTheme.material}\\n    startAngle={0}\\n    endAngle={180}\\n  >\\n    <VictoryPolarAxis\\n      tickValues={[0, 45, 90, 135, 180]}\\n      labelPlacement=\\\"vertical\\\"\\n    />\\n    <VictoryBar style={{ data: { fill: \\\"tomato\\\", width: 30 } }}\\n      data={[\\n        { x: 0, y: 2 },\\n        { x: 45, y: 3 },\\n        { x: 90, y: 5 },\\n        { x: 135, y: 4 },\\n        { x: 180, y: 7 }\\n      ]}\\n    />\\n  </VictoryChart>\\n</div>\\n```\\n\\n## style\\n\\n`type: { parent: object, background: object }`\\n\\n`VictoryChart` uses the standard `style` prop. [Read about it in detail here](/docs/common-props/#style)\\n\\nnote: custom valid svg style properties that are supported may be included in `background` styles.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryChart\\n  style={{\\n    parent: {\\n      border: \\\"1px solid #ccc\\\"\\n    },\\n    background: {\\n      fill: \\\"pink\\\"\\n    }\\n  }}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryChart` uses the standard `theme` prop. [Read about it in detail here](/docs/common-props/#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryChart` uses the standard `width` prop. [Read about it in detail here](/docs/common-props/#width)\\n\\n**note: `VictoryChart` controls the `width` prop of its children.**\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n[victoryarea]: /docs/victory-area\\n[victoryaxis]: /docs/victory-axis\\n[victorypolaraxis]: /docs/victory-polar-axis\\n[victorybar]: /docs/victory-bar\\n[victorycandlestick]: /docs/victory-candlestick\\n[victoryerrorbar]: /docs/victory-errorbar\\n[victorygroup]: /docs/victory-group\\n[victoryline]: /docs/victory-line\\n[victoryscatter]: /docs/victory-scatter\\n[victoryhistogram]: /docs/victory-histogram\\n[victorystack]: /docs/victory-stack\\n[victoryvoronoi]: /docs/victory-voronoi\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n[animations guide]: /guides/animations\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n\"},{\"data\":{\"id\":13,\"title\":\"VictoryErrorBar\",\"category\":\"charts\",\"type\":\"docs\",\"scope\":[\"sampleErrorData\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryErrorBar\",\"depth\":1,\"slug\":\"victory-error-bar\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"borderWidth\",\"depth\":2,\"slug\":\"border-width\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"errorX\",\"depth\":2,\"slug\":\"error-x\"},{\"type\":\"heading\",\"value\":\"errorY\",\"depth\":2,\"slug\":\"error-y\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"}],\"slug\":\"victory-error-bar\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryErrorBar\",\"depth\":1,\"slug\":\"victory-error-bar\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"borderWidth\",\"depth\":2,\"slug\":\"border-width\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"errorX\",\"depth\":2,\"slug\":\"error-x\"},{\"type\":\"heading\",\"value\":\"errorY\",\"depth\":2,\"slug\":\"error-y\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 13\\ntitle: VictoryErrorBar\\ncategory: charts\\ntype: docs\\nscope:\\n  - sampleErrorData\\n---\\n\\n# VictoryErrorBar\\n\\n`VictoryErrorBar` renders a dataset as a series of error bars. `VictoryErrorBar` can be composed with other components to add x and y error bars to data.\\n\\n```playground\\n<VictoryChart\\n  domainPadding={15}\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryErrorBar\\n    data={[\\n      {x: 15, y: 35000, error: 0.2},\\n      {x: 20, y: 42000, error: 0.05},\\n      {x: 25, y: 30000, error: 0.1},\\n      {x: 30, y: 35000, error: 0.2},\\n      {x: 35, y: 22000, error: 0.15}\\n    ]}\\n    errorX={(datum) => datum.error * datum.x}\\n    errorY={(datum) => datum.error * datum.y}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryErrorBar` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## borderWidth\\n\\n`type: number`\\n\\nThe `borderWidth` prop sets the border width of the error bars. `borderWidth` will set both x and y error bar width.\\n\\n```jsx\\nborderWidth={10}\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryErrorBar` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryErrorBar` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\nSpecify data via the `data` prop. By default, `VictoryErrorBar` expects data as an array of objects with `x`, `y`, `errorX` and `errorY` keys. Use the [`x`][], [`y`][], [`errorX`][] and [`errorY`][] data accessor props to specify custom data formats. Refer to the [Data Accessors Guide][] for more detail.\\n\\n```playground\\n<VictoryErrorBar\\n  data={[\\n    {x: 15, y: 35, errorX: 1, errorY: 3},\\n    {x: 20, y: 42, errorX: 3, errorY: 2},\\n    {x: 25, y: 30, errorX: 5, errorY: 5},\\n    {x: 30, y: 35, errorX: 5, errorY: 3},\\n    {x: 35, y: 22, errorX: 8, errorY: 2}\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryErrorBar` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)\\n\\n`VictoryErrorBar` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `padding`, `polar`, `origin`, `scale`, `style`, `borderWidth`, `x`, `y`, `errorX`, `errorY`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<ErrorBar/>`\\n\\n```jsx\\ndataComponent={<ErrorBar events={{ onClick: handleClick }}/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryErrorBar` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryErrorBar` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## errorX\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `errorX` data accessor prop to define the x error bar.\\n\\n**string:** specify which property in an array of data objects should be used as the errorX value\\n\\n_examples:_ `errorX=\\\"uncertainty\\\"`\\n\\n**function:** use a function to translate each element in a data array into a errorX value\\n\\n_examples:_ `errorX={() => 10}`\\n\\n**array index:** specify which index of an array should be used as a errorX value when data is given as an array of arrays\\n\\n_examples:_ `errorX={1}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a errorX value\\n\\n_examples:_ `errorX=\\\"measurement.uncertainty\\\"`, `errorX={[\\\"measurement\\\", \\\"uncertainty\\\"]}`\\n\\n## errorY\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `errorY` data accessor prop to define the y error bar.\\n\\n**string:** specify which property in an array of data objects should be used as the errorY value\\n\\n_examples:_ `errorY=\\\"uncertainty\\\"`\\n\\n**function:** use a function to translate each element in a data array into a errorY value\\n\\n_examples:_ `errorY={() => 10}`\\n\\n**array index:** specify which index of an array should be used as a errorY value when data is given as an array of arrays\\n\\n_examples:_ `errorY={1}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a errorY value\\n\\n_examples:_ `errorY=\\\"measurement.uncertainty\\\"`, `errorY={[\\\"measurement\\\", \\\"uncertainty\\\"]}`\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryErrorBar` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryErrorBar` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryErrorBar\\n    style={{\\n      data: { strokeWidth: 5}\\n    }}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: (props) => {\\n                const stroke = props.style && props.style.stroke;\\n                return stroke === \\\"#c43a31\\\" ? null : { style: { stroke: \\\"#c43a31\\\", strokeWidth: 7 } };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={[\\n      {x: 15, y: 35, errorX: 1, errorY: 3},\\n      {x: 20, y: 42, errorX: 3, errorY: 2},\\n      {x: 25, y: 30, errorX: 5, errorY: 5},\\n      {x: 30, y: 35, errorX: 5, errorY: 3},\\n      {x: 35, y: 22, errorX: 8, errorY: 2}\\n    ]}\\n  />\\n</div>\\n```\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryErrorBar` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryErrorBar` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\n`VictoryErrorBar` uses the standard `horizontal` prop. [Read about it in detail](/docs/common-props#horizontal)\\n\\n```jsx\\nhorizontal = { true };\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryErrorBar` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryErrorBar\\n  data={sampleErrorData}\\n  labels={({ datum }) => datum.y}\\n  labelComponent={<VictoryLabel angle={45}/>}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryErrorBar` uses the standard `labels` prop. [Read about it here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryErrorBar\\n  data={sampleErrorData}\\n  labels={({ datum }) => datum.y}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryErrorBar` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={8}>\\n  <VictoryErrorBar data={sampleErrorData}/>\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryErrorBar` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={0}>\\n  <VictoryErrorBar data={sampleErrorData}/>\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryErrorBar` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryErrorBar` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n**Note:** Polar Charts are not yet supported for `VictoryErrorBar`\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: number`\\n\\n`VictoryErrorBar` uses the standard `samples` prop. [Read about it here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryErrorBar` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryErrorBar` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryErrorBar` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryErrorBar` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryErrorBar` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryErrorBar\\n    standalone={false}\\n    width={300} height={300} padding={20}\\n    data={sampleErrorData}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryErrorBar` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n  <VictoryErrorBar\\n    style={{\\n      data: {\\n        stroke: \\\"#c43a31\\\", strokeWidth: 5\\n      },\\n      labels: {\\n        fontSize: 15, fill: \\\"#c43a31\\\"\\n      }\\n    }}\\n    data={sampleErrorData}\\n    labels={({ datum }) => datum.x}\\n  />\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryErrorBar` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryErrorBar` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryErrorBar` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx={(datum) => new Date(datum.day)}\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryErrorBar` uses the standard `y` data accessor prop. [Read about it here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n[animations guide]: /guides/animations\\n\\n[data accessors guide]: /guides/data-accessors\\n\\n[custom components guide]: /guides/custom-components\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\\n[`x`]: /docs/victory-candlestick#x\\n\\n[`y`]: /docs/victory-candlestick#y\\n\\n[`errorx`]: /docs/victory-candlestick#errorX\\n\\n[`errory`]: /docs/victory-candlestick#errorY\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\",\"content\":\"\\n# VictoryErrorBar\\n\\n`VictoryErrorBar` renders a dataset as a series of error bars. `VictoryErrorBar` can be composed with other components to add x and y error bars to data.\\n\\n```playground\\n<VictoryChart\\n  domainPadding={15}\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryErrorBar\\n    data={[\\n      {x: 15, y: 35000, error: 0.2},\\n      {x: 20, y: 42000, error: 0.05},\\n      {x: 25, y: 30000, error: 0.1},\\n      {x: 30, y: 35000, error: 0.2},\\n      {x: 35, y: 22000, error: 0.15}\\n    ]}\\n    errorX={(datum) => datum.error * datum.x}\\n    errorY={(datum) => datum.error * datum.y}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryErrorBar` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## borderWidth\\n\\n`type: number`\\n\\nThe `borderWidth` prop sets the border width of the error bars. `borderWidth` will set both x and y error bar width.\\n\\n```jsx\\nborderWidth={10}\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryErrorBar` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryErrorBar` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\nSpecify data via the `data` prop. By default, `VictoryErrorBar` expects data as an array of objects with `x`, `y`, `errorX` and `errorY` keys. Use the [`x`][], [`y`][], [`errorX`][] and [`errorY`][] data accessor props to specify custom data formats. Refer to the [Data Accessors Guide][] for more detail.\\n\\n```playground\\n<VictoryErrorBar\\n  data={[\\n    {x: 15, y: 35, errorX: 1, errorY: 3},\\n    {x: 20, y: 42, errorX: 3, errorY: 2},\\n    {x: 25, y: 30, errorX: 5, errorY: 5},\\n    {x: 30, y: 35, errorX: 5, errorY: 3},\\n    {x: 35, y: 22, errorX: 8, errorY: 2}\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryErrorBar` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)\\n\\n`VictoryErrorBar` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `padding`, `polar`, `origin`, `scale`, `style`, `borderWidth`, `x`, `y`, `errorX`, `errorY`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<ErrorBar/>`\\n\\n```jsx\\ndataComponent={<ErrorBar events={{ onClick: handleClick }}/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryErrorBar` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryErrorBar` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## errorX\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `errorX` data accessor prop to define the x error bar.\\n\\n**string:** specify which property in an array of data objects should be used as the errorX value\\n\\n_examples:_ `errorX=\\\"uncertainty\\\"`\\n\\n**function:** use a function to translate each element in a data array into a errorX value\\n\\n_examples:_ `errorX={() => 10}`\\n\\n**array index:** specify which index of an array should be used as a errorX value when data is given as an array of arrays\\n\\n_examples:_ `errorX={1}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a errorX value\\n\\n_examples:_ `errorX=\\\"measurement.uncertainty\\\"`, `errorX={[\\\"measurement\\\", \\\"uncertainty\\\"]}`\\n\\n## errorY\\n\\n`type: string || integer || array[string] || function`\\n\\nUse `errorY` data accessor prop to define the y error bar.\\n\\n**string:** specify which property in an array of data objects should be used as the errorY value\\n\\n_examples:_ `errorY=\\\"uncertainty\\\"`\\n\\n**function:** use a function to translate each element in a data array into a errorY value\\n\\n_examples:_ `errorY={() => 10}`\\n\\n**array index:** specify which index of an array should be used as a errorY value when data is given as an array of arrays\\n\\n_examples:_ `errorY={1}`\\n\\n**path string or path array:** specify which property in an array of nested data objects should be used as a errorY value\\n\\n_examples:_ `errorY=\\\"measurement.uncertainty\\\"`, `errorY={[\\\"measurement\\\", \\\"uncertainty\\\"]}`\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryErrorBar` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryErrorBar` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryErrorBar\\n    style={{\\n      data: { strokeWidth: 5}\\n    }}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: (props) => {\\n                const stroke = props.style && props.style.stroke;\\n                return stroke === \\\"#c43a31\\\" ? null : { style: { stroke: \\\"#c43a31\\\", strokeWidth: 7 } };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={[\\n      {x: 15, y: 35, errorX: 1, errorY: 3},\\n      {x: 20, y: 42, errorX: 3, errorY: 2},\\n      {x: 25, y: 30, errorX: 5, errorY: 5},\\n      {x: 30, y: 35, errorX: 5, errorY: 3},\\n      {x: 35, y: 22, errorX: 8, errorY: 2}\\n    ]}\\n  />\\n</div>\\n```\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryErrorBar` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryErrorBar` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\n`VictoryErrorBar` uses the standard `horizontal` prop. [Read about it in detail](/docs/common-props#horizontal)\\n\\n```jsx\\nhorizontal = { true };\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryErrorBar` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryErrorBar\\n  data={sampleErrorData}\\n  labels={({ datum }) => datum.y}\\n  labelComponent={<VictoryLabel angle={45}/>}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryErrorBar` uses the standard `labels` prop. [Read about it here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryErrorBar\\n  data={sampleErrorData}\\n  labels={({ datum }) => datum.y}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryErrorBar` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={8}>\\n  <VictoryErrorBar data={sampleErrorData}/>\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryErrorBar` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={0}>\\n  <VictoryErrorBar data={sampleErrorData}/>\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryErrorBar` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryErrorBar` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n**Note:** Polar Charts are not yet supported for `VictoryErrorBar`\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: number`\\n\\n`VictoryErrorBar` uses the standard `samples` prop. [Read about it here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryErrorBar` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryErrorBar` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryErrorBar` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryErrorBar` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryErrorBar` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryErrorBar\\n    standalone={false}\\n    width={300} height={300} padding={20}\\n    data={sampleErrorData}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryErrorBar` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n  <VictoryErrorBar\\n    style={{\\n      data: {\\n        stroke: \\\"#c43a31\\\", strokeWidth: 5\\n      },\\n      labels: {\\n        fontSize: 15, fill: \\\"#c43a31\\\"\\n      }\\n    }}\\n    data={sampleErrorData}\\n    labels={({ datum }) => datum.x}\\n  />\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryErrorBar` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryErrorBar` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryErrorBar` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx={(datum) => new Date(datum.day)}\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryErrorBar` uses the standard `y` data accessor prop. [Read about it here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n[animations guide]: /guides/animations\\n[data accessors guide]: /guides/data-accessors\\n[custom components guide]: /guides/custom-components\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n[`x`]: /docs/victory-candlestick#x\\n[`y`]: /docs/victory-candlestick#y\\n[`errorx`]: /docs/victory-candlestick#errorX\\n[`errory`]: /docs/victory-candlestick#errorY\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\"},{\"data\":{\"id\":14,\"title\":\"VictoryGroup\",\"category\":\"charts\",\"type\":\"docs\",\"scope\":[\"sampleData\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryGroup\",\"depth\":1,\"slug\":\"victory-group\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"color\",\"depth\":2,\"slug\":\"color\"},{\"type\":\"heading\",\"value\":\"colorScale\",\"depth\":2,\"slug\":\"color-scale\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"offset\",\"depth\":2,\"slug\":\"offset\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"},{\"type\":\"heading\",\"value\":\"y0\",\"depth\":2,\"slug\":\"y-0\"}],\"slug\":\"victory-group\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryGroup\",\"depth\":1,\"slug\":\"victory-group\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"color\",\"depth\":2,\"slug\":\"color\"},{\"type\":\"heading\",\"value\":\"colorScale\",\"depth\":2,\"slug\":\"color-scale\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"offset\",\"depth\":2,\"slug\":\"offset\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"},{\"type\":\"heading\",\"value\":\"y0\",\"depth\":2,\"slug\":\"y-0\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 14\\ntitle: VictoryGroup\\ncategory: charts\\ntype: docs\\nscope:\\n  - sampleData\\n---\\n\\n# VictoryGroup\\n\\n`VictoryGroup` is a wrapper component that renders a given set of children with some shared props. `VictoryGroup` reconciles the domain and layout for all its children, and coordinates animations and shared events. `VictoryGroup` may also be used to supply common data and styles to all its children. This is especially useful when adding markers to a line, or adding voronoi tooltips to data. `VictoryGroup` may also be used to apply an offset to a group of children, as with grouped bar charts, or may be used to stack several components on the same level, _e.g.,_ stacked area charts with data markers.\\n\\n`VictoryGroup` works with:\\n[VictoryArea][], [VictoryBar][], [VictoryBoxPlot][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryLine][], [VictoryScatter][], [VictoryHistogram][], [VictoryStack][], and [VictoryVoronoi][].\\n\\n`VictoryGroup` _should not_ be used with [VictoryAxis][] children. Use [VictoryChart][] instead.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryGroup offset={20}\\n    colorScale={\\\"qualitative\\\"}\\n  >\\n    <VictoryBar\\n      data={[{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 5 }]}\\n    />\\n    <VictoryBar\\n      data={[{ x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 7 }]}\\n    />\\n    <VictoryBar\\n      data={[{ x: 1, y: 3 }, { x: 2, y: 4 }, { x: 3, y: 9 }]}\\n    />\\n  </VictoryGroup>\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryGroup` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n**note: `VictoryGroup` controls the `animate` prop of its children when set**\\n\\n```jsx\\n  animate={{\\n    duration: 2000,\\n    onLoad: { duration: 1000 }\\n  }}\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryGroup` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n**note: When this prop is set, `VictoryGroup` controls the `categories` prop of its children.**\\n\\n```jsx\\ncategories={[\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"]}\\n```\\n\\n## children\\n\\n`type: element || array[element]`\\n\\n`VictoryGroup` works with any combination of the following children: [VictoryArea][], [VictoryBar][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryLine][], [VictoryScatter][], [VictoryHistogram][], [VictoryStack][], and [VictoryVoronoi][]. Children supplied to `VictoryGroup` will be cloned and rendered with new props so that all children share common props such as `domain` and `scale`.\\n\\n## color\\n\\n`type: string`\\n\\nThe `color` prop is an optional prop that defines a single color to be applied to the children of `VictoryGroup`. The `color` prop will override colors specified via `colorScale`.\\n\\n```playground\\n<VictoryGroup\\n  data={sampleData}\\n  color=\\\"blue\\\"\\n>\\n  <VictoryLine/>\\n  <VictoryScatter size={6} symbol=\\\"star\\\"/>\\n</VictoryGroup>\\n```\\n\\n## colorScale\\n\\n`type: array[string]`\\n\\nThe `colorScale` prop is an optional prop that defines a color scale to be applied to the children of `VictoryGroup`. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: \\\"grayscale\\\", \\\"qualitative\\\", \\\"heatmap\\\", \\\"warm\\\", \\\"cool\\\", \\\"red\\\", \\\"green\\\", \\\"blue\\\". `VictoryGroup` will assign colors to its children by index, unless they are explicitly specified in styles. Colors will repeat when there are more children than colors in the provided `colorScale`.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryGroup\\n  offset={25}\\n  colorScale={[\\\"tomato\\\", \\\"orange\\\", \\\"gold\\\"]}\\n>\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}]}\\n  />\\n</VictoryGroup>\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryGroup` uses the standard `containerComponent` prop. [Read about it in detail here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryGroup` uses the standard `data` prop. [Read about it here](/docs/common-props#data)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\nWhen `data` is provided for `VictoryGroup` it will be passed to every child in the group. Use this as a convenience in cases where all components should have identical data, for example, adding data points to a line, or adding voronoi tooltips to data. Omit this prop when child components should not share data. By default, Victory components expect data as an array of objects with `x` and `y` props. Use the [x][] and [y][] data accessor props to define a custom data format. The `data` prop must be given as an array.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryGroup data={sampleData}>\\n    <VictoryLine/>\\n    <VictoryScatter/>\\n  </VictoryGroup>\\n</VictoryChart>\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryGroup` uses the standard `domain` prop. [Read about it in detail here](/docs/common-props#domain)\\n\\n**note: `VictoryGroup` controls the `domain` prop of its children.**\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryGroup` uses the standard `domainPadding` prop. [Read about it in detail here](/docs/common-props#domainpadding)\\n\\n**note: `VictoryGroup` controls the `domainPadding` prop of its children.**\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryGroup` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryGroup` uses the standard `events` prop. [Read about it in more detail here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n**Note: `VictoryGroup` coordinates events between children using the `VictorySharedEvents` and the `sharedEvents` prop**\\n\\n```playground\\n<VictoryGroup\\n  offset={20}\\n  events={[{\\n    childName: \\\"all\\\",\\n    target: \\\"data\\\",\\n    eventHandlers: {\\n      onClick: () => {\\n        return [\\n          {\\n            childName: \\\"bar-2\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"gold\\\" }) })\\n          }, {\\n            childName: \\\"bar-3\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"orange\\\" }) })\\n          }, {\\n            childName: \\\"bar-4\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"red\\\" }) })\\n          }\\n        ];\\n      }\\n    }\\n  }]}\\n>\\n  <VictoryBar name=\\\"bar-1\\\"\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar name=\\\"bar-2\\\"\\n    data={[{x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar name=\\\"bar-3\\\"\\n    data={[{x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}]}\\n  />\\n  <VictoryBar name=\\\"bar-4\\\"\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 3}]}\\n  />\\n</VictoryGroup>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryGroup` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryGroup` uses the standard `groupComponent` prop. [Read about it in detail here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryGroup` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe `horizontal` prop determines whether the children supplied to `VictoryGroup` will be laid out vertically or horizontally. [Read about the horizontal prop in detail](/docs/common-props#horizontal)\\n\\n## labels\\n\\n`type: array || function`\\n\\nThe `labels` prop defines labels that will appear above each group of data. This prop should be given as an array of values or as a function. When given as a function, `labels` will be called with a single argument: an object of all the props provided to the label component. If given as an array, the number of elements in the array should be equal to the length of the data array. Group labels will appear above the center series of the group, and will override the `labels` prop of child components. Omit this prop, and set `labels` props on children for individual labels.\\n\\n```jsx\\nlabels={[\\\"spring\\\", \\\"summer\\\", \\\"fall\\\", \\\"winter\\\"]}`, `labels={({ datum }) => datum.title}\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\nThe `labelComponent` prop takes a component instance which will be used to render labels for each group. The new element created from the passed `labelComponent` will be supplied with the following props: `x`, `y`, `index`, `datum`, `verticalAnchor`, `textAnchor`, `angle`, `style`, `text`, and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above.\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```jsx\\nlabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryGroup` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryGroup` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## offset\\n\\n`type: number`\\n\\nThe `offset` prop determines the number of pixels each element in a group should be offset from its original position of the on the independent axis. In the case of groups of bars, this number should be equal to the width of the bar plus the desired spacing between bars.\\n\\n```playground\\n<VictoryGroup\\n  offset={25}\\n>\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}]}\\n  />\\n</VictoryGroup>\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryGroup` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryGroup` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: integer`\\n\\n`VictoryGroup` uses the standard `samples` prop. [Read about it here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryGroup` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n**note: `VictoryGroup` controls the `scale` prop of its children.**\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryGroup` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryGroup` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryGroup` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryGroup` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryGroup` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\nStyles on children of `VictoryGroup` will override styles set on the `VictoryGroup` component.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryGroup\\n  offset={25}\\n  style={{\\n    data: {\\n      fillOpacity: 0.7, stroke: \\\"black\\\", strokeWidth: 3\\n    }\\n  }}\\n>\\n  <VictoryBar\\n    style={{ data: { stroke: \\\"#c43a31\\\" }}}\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}]}\\n  />\\n</VictoryGroup>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryGroup` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryGroup` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryGroup` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryGroup` uses the standard `y` data accessor prop. [Read about it here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n## y0\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryGroup` uses the standard `y0` data accessor prop. [Read about it here](/docs/common-props#y0)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny0={() => 10}\\n```\\n\\n[animations guide]: /guides/animations\\n\\n[data accessors guide]: /guides/data-accessors\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\\n[victoryarea]: /docs/victory-area\\n\\n[victoryaxis]: /docs/victory-axis\\n\\n[victorybar]: /docs/victory-bar\\n\\n[victoryboxplot]: /docs/victory-boxplot\\n\\n[victorycandlestick]: /docs/victory-candlestick\\n\\n[victorychart]: /docs/victory-chart\\n\\n[victoryerrorbar]: /docs/victory-errorbar\\n\\n[victoryline]: /docs/victory-line\\n\\n[victoryscatter]: /docs/victory-scatter\\n\\n[victoryhistogram]: /docs/victory-histogram\\n\\n[victorystack]: /docs/victory-stack\\n\\n[victoryvoronoi]: /docs/victory-voronoi\\n\\n[victorylabel]: /docs/victory-label\\n\\n[x]: /docs/common-props#x\\n\\n[y]: /docs/common-props#y\\n\",\"content\":\"\\n# VictoryGroup\\n\\n`VictoryGroup` is a wrapper component that renders a given set of children with some shared props. `VictoryGroup` reconciles the domain and layout for all its children, and coordinates animations and shared events. `VictoryGroup` may also be used to supply common data and styles to all its children. This is especially useful when adding markers to a line, or adding voronoi tooltips to data. `VictoryGroup` may also be used to apply an offset to a group of children, as with grouped bar charts, or may be used to stack several components on the same level, _e.g.,_ stacked area charts with data markers.\\n\\n`VictoryGroup` works with:\\n[VictoryArea][], [VictoryBar][], [VictoryBoxPlot][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryLine][], [VictoryScatter][], [VictoryHistogram][], [VictoryStack][], and [VictoryVoronoi][].\\n\\n`VictoryGroup` _should not_ be used with [VictoryAxis][] children. Use [VictoryChart][] instead.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryGroup offset={20}\\n    colorScale={\\\"qualitative\\\"}\\n  >\\n    <VictoryBar\\n      data={[{ x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 5 }]}\\n    />\\n    <VictoryBar\\n      data={[{ x: 1, y: 2 }, { x: 2, y: 1 }, { x: 3, y: 7 }]}\\n    />\\n    <VictoryBar\\n      data={[{ x: 1, y: 3 }, { x: 2, y: 4 }, { x: 3, y: 9 }]}\\n    />\\n  </VictoryGroup>\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryGroup` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n**note: `VictoryGroup` controls the `animate` prop of its children when set**\\n\\n```jsx\\n  animate={{\\n    duration: 2000,\\n    onLoad: { duration: 1000 }\\n  }}\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryGroup` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n**note: When this prop is set, `VictoryGroup` controls the `categories` prop of its children.**\\n\\n```jsx\\ncategories={[\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"]}\\n```\\n\\n## children\\n\\n`type: element || array[element]`\\n\\n`VictoryGroup` works with any combination of the following children: [VictoryArea][], [VictoryBar][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryLine][], [VictoryScatter][], [VictoryHistogram][], [VictoryStack][], and [VictoryVoronoi][]. Children supplied to `VictoryGroup` will be cloned and rendered with new props so that all children share common props such as `domain` and `scale`.\\n\\n## color\\n\\n`type: string`\\n\\nThe `color` prop is an optional prop that defines a single color to be applied to the children of `VictoryGroup`. The `color` prop will override colors specified via `colorScale`.\\n\\n```playground\\n<VictoryGroup\\n  data={sampleData}\\n  color=\\\"blue\\\"\\n>\\n  <VictoryLine/>\\n  <VictoryScatter size={6} symbol=\\\"star\\\"/>\\n</VictoryGroup>\\n```\\n\\n## colorScale\\n\\n`type: array[string]`\\n\\nThe `colorScale` prop is an optional prop that defines a color scale to be applied to the children of `VictoryGroup`. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: \\\"grayscale\\\", \\\"qualitative\\\", \\\"heatmap\\\", \\\"warm\\\", \\\"cool\\\", \\\"red\\\", \\\"green\\\", \\\"blue\\\". `VictoryGroup` will assign colors to its children by index, unless they are explicitly specified in styles. Colors will repeat when there are more children than colors in the provided `colorScale`.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryGroup\\n  offset={25}\\n  colorScale={[\\\"tomato\\\", \\\"orange\\\", \\\"gold\\\"]}\\n>\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}]}\\n  />\\n</VictoryGroup>\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryGroup` uses the standard `containerComponent` prop. [Read about it in detail here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryGroup` uses the standard `data` prop. [Read about it here](/docs/common-props#data)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\nWhen `data` is provided for `VictoryGroup` it will be passed to every child in the group. Use this as a convenience in cases where all components should have identical data, for example, adding data points to a line, or adding voronoi tooltips to data. Omit this prop when child components should not share data. By default, Victory components expect data as an array of objects with `x` and `y` props. Use the [x][] and [y][] data accessor props to define a custom data format. The `data` prop must be given as an array.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryGroup data={sampleData}>\\n    <VictoryLine/>\\n    <VictoryScatter/>\\n  </VictoryGroup>\\n</VictoryChart>\\n\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryGroup` uses the standard `domain` prop. [Read about it in detail here](/docs/common-props#domain)\\n\\n**note: `VictoryGroup` controls the `domain` prop of its children.**\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryGroup` uses the standard `domainPadding` prop. [Read about it in detail here](/docs/common-props#domainpadding)\\n\\n**note: `VictoryGroup` controls the `domainPadding` prop of its children.**\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryGroup` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryGroup` uses the standard `events` prop. [Read about it in more detail here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n**Note: `VictoryGroup` coordinates events between children using the `VictorySharedEvents` and the `sharedEvents` prop**\\n\\n```playground\\n<VictoryGroup\\n  offset={20}\\n  events={[{\\n    childName: \\\"all\\\",\\n    target: \\\"data\\\",\\n    eventHandlers: {\\n      onClick: () => {\\n        return [\\n          {\\n            childName: \\\"bar-2\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"gold\\\" }) })\\n          }, {\\n            childName: \\\"bar-3\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"orange\\\" }) })\\n          }, {\\n            childName: \\\"bar-4\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"red\\\" }) })\\n          }\\n        ];\\n      }\\n    }\\n  }]}\\n>\\n  <VictoryBar name=\\\"bar-1\\\"\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar name=\\\"bar-2\\\"\\n    data={[{x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar name=\\\"bar-3\\\"\\n    data={[{x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}]}\\n  />\\n  <VictoryBar name=\\\"bar-4\\\"\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 3}]}\\n  />\\n</VictoryGroup>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryGroup` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryGroup` uses the standard `groupComponent` prop. [Read about it in detail here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryGroup` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe `horizontal` prop determines whether the children supplied to `VictoryGroup` will be laid out vertically or horizontally. [Read about the horizontal prop in detail](/docs/common-props#horizontal)\\n\\n## labels\\n\\n`type: array || function`\\n\\nThe `labels` prop defines labels that will appear above each group of data. This prop should be given as an array of values or as a function. When given as a function, `labels` will be called with a single argument: an object of all the props provided to the label component. If given as an array, the number of elements in the array should be equal to the length of the data array. Group labels will appear above the center series of the group, and will override the `labels` prop of child components. Omit this prop, and set `labels` props on children for individual labels.\\n\\n```jsx\\nlabels={[\\\"spring\\\", \\\"summer\\\", \\\"fall\\\", \\\"winter\\\"]}`, `labels={({ datum }) => datum.title}\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\nThe `labelComponent` prop takes a component instance which will be used to render labels for each group. The new element created from the passed `labelComponent` will be supplied with the following props: `x`, `y`, `index`, `datum`, `verticalAnchor`, `textAnchor`, `angle`, `style`, `text`, and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above.\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```jsx\\nlabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryGroup` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryGroup` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## offset\\n\\n`type: number`\\n\\nThe `offset` prop determines the number of pixels each element in a group should be offset from its original position of the on the independent axis. In the case of groups of bars, this number should be equal to the width of the bar plus the desired spacing between bars.\\n\\n```playground\\n<VictoryGroup\\n  offset={25}\\n>\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}]}\\n  />\\n</VictoryGroup>\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryGroup` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryGroup` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: integer`\\n\\n`VictoryGroup` uses the standard `samples` prop. [Read about it here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryGroup` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n**note: `VictoryGroup` controls the `scale` prop of its children.**\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryGroup` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryGroup` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryGroup` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryGroup` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryGroup` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\nStyles on children of `VictoryGroup` will override styles set on the `VictoryGroup` component.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryGroup\\n  offset={25}\\n  style={{\\n    data: {\\n      fillOpacity: 0.7, stroke: \\\"black\\\", strokeWidth: 3\\n    }\\n  }}\\n>\\n  <VictoryBar\\n    style={{ data: { stroke: \\\"#c43a31\\\" }}}\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}]}\\n  />\\n</VictoryGroup>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryGroup` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryGroup` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryGroup` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryGroup` uses the standard `y` data accessor prop. [Read about it here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n## y0\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryGroup` uses the standard `y0` data accessor prop. [Read about it here](/docs/common-props#y0)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny0={() => 10}\\n```\\n\\n[animations guide]: /guides/animations\\n[data accessors guide]: /guides/data-accessors\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n[victoryarea]: /docs/victory-area\\n[victoryaxis]: /docs/victory-axis\\n[victorybar]: /docs/victory-bar\\n[victoryboxplot]: /docs/victory-boxplot\\n[victorycandlestick]: /docs/victory-candlestick\\n[victorychart]: /docs/victory-chart\\n[victoryerrorbar]: /docs/victory-errorbar\\n[victoryline]: /docs/victory-line\\n[victoryscatter]: /docs/victory-scatter\\n[victoryhistogram]: /docs/victory-histogram\\n[victorystack]: /docs/victory-stack\\n[victoryvoronoi]: /docs/victory-voronoi\\n[victorylabel]: /docs/victory-label\\n[x]: /docs/common-props#x\\n[y]: /docs/common-props#y\\n\"},{\"data\":{\"id\":17,\"title\":\"VictoryLine\",\"category\":\"charts\",\"type\":\"docs\",\"scope\":[\"sampleData\",\"range\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryLine\",\"depth\":1,\"slug\":\"victory-line\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"interpolation\",\"depth\":2,\"slug\":\"interpolation\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"},{\"type\":\"heading\",\"value\":\"y0\",\"depth\":2,\"slug\":\"y-0\"}],\"slug\":\"victory-line\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryLine\",\"depth\":1,\"slug\":\"victory-line\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"interpolation\",\"depth\":2,\"slug\":\"interpolation\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"},{\"type\":\"heading\",\"value\":\"y0\",\"depth\":2,\"slug\":\"y-0\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 17\\ntitle: VictoryLine\\ncategory: charts\\ntype: docs\\nscope:\\n  - sampleData\\n  - range\\n---\\n\\n# VictoryLine\\n\\nVictoryLine renders a dataset as a single line. VictoryLine can be composed with [`VictoryChart`][] to create line charts.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryLine\\n    style={{\\n      data: { stroke: \\\"#c43a31\\\" },\\n      parent: { border: \\\"1px solid #ccc\\\"}\\n    }}\\n    data={[\\n      { x: 1, y: 2 },\\n      { x: 2, y: 3 },\\n      { x: 3, y: 5 },\\n      { x: 4, y: 4 },\\n      { x: 5, y: 7 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryLine` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryLine` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryLine` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryLine` uses the standard `data` prop. [Read about it here](/docs/common-props#data)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryLine\\n    data={[\\n      { x: 1, y: 2 },\\n      { x: 2, y: 3 },\\n      { x: 3, y: 5 },\\n      { x: 4, y: 4 },\\n      { x: 5, y: 6 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryLine` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)\\n\\n`VictoryLine` supplies the following props to its `dataComponent`: `data`, `events`, `groupComponent`, `interpolation`, `origin` (for polar charts), `polar`, `scale`, `style`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Curve/>`\\n\\n```jsx\\ndataComponent={<Curve events={{ onClick: handleClick }}/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryLine` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryLine` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryLine` uses the standard `eventKey` prop. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n**note:** `VictoryLine` only renders one element per dataset, so only one event key will be generated.\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryLine` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n**note:** `VictoryLine` will use the special `eventKey` \\\"all\\\" rather than referring to data by index, as it renders only one element for an entire dataset\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryLine\\n    style={{\\n      data: { stroke: \\\"#c43a31\\\" }\\n    }}\\n    events={[{\\n      target: \\\"parent\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              eventKey: \\\"all\\\",\\n              mutation: ({ style }) => {\\n                return style.stroke === \\\"black\\\"\\n                  ? null\\n                  : { style: { stroke: \\\"black\\\", strokeWidth: 5 } };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={sampleData}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryLine` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryLine` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n**note:** `VictoryLine` uses [`VictoryClipContainer`][] as its default `groupComponent` `VictoryClipContainer` renders a `<g>` tag with a `clipPath` `def`. This allows continuous data components to transition smoothly when new data points enter and exit. **Supplying a completely custom `groupComponent` to `VictoryLine` may result in broken animations.**\\n\\n_default:_ `<VictoryClipContainer/>`\\n\\n```playground\\n<VictoryChart>\\n  <VictoryLine\\n    groupComponent={<VictoryClipContainer clipPadding={{ top: 5, right: 10 }}/>}\\n    style={{ data: { stroke: \\\"#c43a31\\\", strokeWidth: 15, strokeLinecap: \\\"round\\\" } }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryLine` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\n`VictoryLine` uses the standard `horizontal` prop. [Read about it in detail](/docs/common-props#horizontal)\\n\\n```playground\\n<VictoryLine horizontal\\n  data={sampleData}\\n/>\\n```\\n\\n## interpolation\\n\\n`type: options || function`\\n\\nThe `interpolation` prop determines how data points should be connected when creating a path. Victory uses [d3-shape](https://github.com/d3/d3-shape#curves) for interpolating curves.\\n\\nPolar line charts may use the following interpolation options: \\\"basis\\\", \\\"cardinal\\\", \\\"catmullRom\\\", \\\"linear\\\"\\n\\nCartesian line charts may use the following interpolation options: \\\"basis\\\", \\\"bundle\\\", \\\"cardinal\\\", \\\"catmullRom\\\", \\\"linear\\\", \\\"monotoneX\\\", \\\"monotoneY\\\", \\\"natural\\\", \\\"step\\\", \\\"stepAfter\\\", \\\"stepBefore\\\"\\n\\nYou can also provide a function if you need to adjust parameters for d3-shape curves or to use a [custom curve function](https://github.com/d3/d3-shape#custom-curves).\\n\\n[Explore all the interpolation options][].\\n\\n_default:_ `\\\"linear\\\"`\\n\\n```playground\\n<VictoryLine\\n  interpolation=\\\"natural\\\"\\n  data={sampleData}\\n/>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryLine` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel renderInPortal/>`\\n\\n```playground\\n<VictoryLine\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n  labelComponent={<VictoryLabel renderInPortal dy={-20}/>}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryLine` uses the standard `labels` prop. [Read about it here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryLine\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryLine` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={{ y: 4.5 }}>\\n  <VictoryLine data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryLine` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={{ y: 0 }}>\\n  <VictoryLine data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryLine` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryLine` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n```playground\\n<VictoryChart polar\\n  domain={{ y: [0, 7]}}\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryPolarAxis dependentAxis\\n    style={{ axis: { stroke: \\\"none\\\" } }}\\n    tickFormat={() => null}\\n  />\\n  <VictoryPolarAxis/>\\n  <VictoryLine\\n    data={sampleData}\\n    style={{\\n      data: { stroke: \\\"#c43a31\\\" },\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: number`\\n\\n`VictoryLine` uses the standard `samples` prop. [Read about it here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```playground\\n<VictoryChart>\\n  <VictoryLine\\n    samples={25}\\n    y={(d) => Math.sin(5 * Math.PI * d.x)}\\n  />\\n  <VictoryLine\\n    samples={100}\\n    style={{ data: { stroke: \\\"red\\\" } }}\\n    y={(d) => Math.cos(5 * Math.PI * d.x)}\\n  />\\n</VictoryChart>\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryLine` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryLine` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryLine` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryLine\\n  data={range(0, 2 * Math.PI, 0.01).map((t) => ({ t }))}\\n  sortKey=\\\"t\\\"\\n  x={(d) => Math.sin(3 * d.t + (2 * Math.PI))}\\n  y={(d) => Math.sin(2 * d.t)}\\n/>\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryLine` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryLine` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryLine\\n    standalone={false}\\n    width={300} height={300} padding={0}\\n    data={sampleData}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryLine` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n  <VictoryLine\\n    style={{\\n      data: {\\n        stroke: \\\"#c43a31\\\",\\n        strokeWidth: ({ data }) => data.length\\n      },\\n      labels: {\\n        fontSize: 15,\\n        fill: ({ datum }) => datum.x === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\"\\n      }\\n    }}\\n    data={sampleData}\\n    labels={({ datum }) => datum.x}\\n  />\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryLine` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryLine` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryLine` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryLine` uses the standard `y` data accessor prop. [Read about it here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n## y0\\n\\n`type: string || integer || array[string] || function`\\n\\n**It is not common to set a `y0` prop with `VictoryLine`, as baselines for `VictoryLine` are only relevant for stacked lines.** [Read more about the `y0` prop here](/docs/common-props#y0)\\n\\n[animations guide]: /guides/animations\\n\\n[data accessors guide]: /guides/data-accessors\\n\\n[custom components guide]: /guides/custom-components\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\\n[`victorychart`]: /docs/victory-chart\\n\\n[`victoryclipcontainer`]: /docs/victory-clip-container\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\\n[explore all the interpolation options]: /gallery/interpolation\\n\",\"content\":\"\\n# VictoryLine\\n\\nVictoryLine renders a dataset as a single line. VictoryLine can be composed with [`VictoryChart`][] to create line charts.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryLine\\n    style={{\\n      data: { stroke: \\\"#c43a31\\\" },\\n      parent: { border: \\\"1px solid #ccc\\\"}\\n    }}\\n    data={[\\n      { x: 1, y: 2 },\\n      { x: 2, y: 3 },\\n      { x: 3, y: 5 },\\n      { x: 4, y: 4 },\\n      { x: 5, y: 7 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryLine` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryLine` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryLine` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryLine` uses the standard `data` prop. [Read about it here](/docs/common-props#data)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryChart>\\n  <VictoryLine\\n    data={[\\n      { x: 1, y: 2 },\\n      { x: 2, y: 3 },\\n      { x: 3, y: 5 },\\n      { x: 4, y: 4 },\\n      { x: 5, y: 6 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryLine` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)\\n\\n`VictoryLine` supplies the following props to its `dataComponent`: `data`, `events`, `groupComponent`, `interpolation`, `origin` (for polar charts), `polar`, `scale`, `style`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Curve/>`\\n\\n```jsx\\ndataComponent={<Curve events={{ onClick: handleClick }}/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryLine` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryLine` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryLine` uses the standard `eventKey` prop. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n**note:** `VictoryLine` only renders one element per dataset, so only one event key will be generated.\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryLine` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n**note:** `VictoryLine` will use the special `eventKey` \\\"all\\\" rather than referring to data by index, as it renders only one element for an entire dataset\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryLine\\n    style={{\\n      data: { stroke: \\\"#c43a31\\\" }\\n    }}\\n    events={[{\\n      target: \\\"parent\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              eventKey: \\\"all\\\",\\n              mutation: ({ style }) => {\\n                return style.stroke === \\\"black\\\"\\n                  ? null\\n                  : { style: { stroke: \\\"black\\\", strokeWidth: 5 } };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={sampleData}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryLine` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryLine` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n**note:** `VictoryLine` uses [`VictoryClipContainer`][] as its default `groupComponent` `VictoryClipContainer` renders a `<g>` tag with a `clipPath` `def`. This allows continuous data components to transition smoothly when new data points enter and exit. **Supplying a completely custom `groupComponent` to `VictoryLine` may result in broken animations.**\\n\\n_default:_ `<VictoryClipContainer/>`\\n\\n```playground\\n<VictoryChart>\\n  <VictoryLine\\n    groupComponent={<VictoryClipContainer clipPadding={{ top: 5, right: 10 }}/>}\\n    style={{ data: { stroke: \\\"#c43a31\\\", strokeWidth: 15, strokeLinecap: \\\"round\\\" } }}\\n    data={sampleData}\\n  />\\n</VictoryChart>\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryLine` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\n`VictoryLine` uses the standard `horizontal` prop. [Read about it in detail](/docs/common-props#horizontal)\\n\\n```playground\\n<VictoryLine horizontal\\n  data={sampleData}\\n/>\\n```\\n\\n## interpolation\\n\\n`type: options || function`\\n\\nThe `interpolation` prop determines how data points should be connected when creating a path. Victory uses [d3-shape](https://github.com/d3/d3-shape#curves) for interpolating curves.\\n\\nPolar line charts may use the following interpolation options: \\\"basis\\\", \\\"cardinal\\\", \\\"catmullRom\\\", \\\"linear\\\"\\n\\nCartesian line charts may use the following interpolation options: \\\"basis\\\", \\\"bundle\\\", \\\"cardinal\\\", \\\"catmullRom\\\", \\\"linear\\\", \\\"monotoneX\\\", \\\"monotoneY\\\", \\\"natural\\\", \\\"step\\\", \\\"stepAfter\\\", \\\"stepBefore\\\"\\n\\nYou can also provide a function if you need to adjust parameters for d3-shape curves or to use a [custom curve function](https://github.com/d3/d3-shape#custom-curves).\\n\\n[Explore all the interpolation options][].\\n\\n_default:_ `\\\"linear\\\"`\\n\\n```playground\\n<VictoryLine\\n  interpolation=\\\"natural\\\"\\n  data={sampleData}\\n/>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryLine` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel renderInPortal/>`\\n\\n```playground\\n<VictoryLine\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n  labelComponent={<VictoryLabel renderInPortal dy={-20}/>}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryLine` uses the standard `labels` prop. [Read about it here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryLine\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryLine` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={{ y: 4.5 }}>\\n  <VictoryLine data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryLine` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={{ y: 0 }}>\\n  <VictoryLine data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryLine` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryLine` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n```playground\\n<VictoryChart polar\\n  domain={{ y: [0, 7]}}\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryPolarAxis dependentAxis\\n    style={{ axis: { stroke: \\\"none\\\" } }}\\n    tickFormat={() => null}\\n  />\\n  <VictoryPolarAxis/>\\n  <VictoryLine\\n    data={sampleData}\\n    style={{\\n      data: { stroke: \\\"#c43a31\\\" },\\n    }}\\n  />\\n</VictoryChart>\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: number`\\n\\n`VictoryLine` uses the standard `samples` prop. [Read about it here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```playground\\n<VictoryChart>\\n  <VictoryLine\\n    samples={25}\\n    y={(d) => Math.sin(5 * Math.PI * d.x)}\\n  />\\n  <VictoryLine\\n    samples={100}\\n    style={{ data: { stroke: \\\"red\\\" } }}\\n    y={(d) => Math.cos(5 * Math.PI * d.x)}\\n  />\\n</VictoryChart>\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryLine` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryLine` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryLine` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryLine\\n  data={range(0, 2 * Math.PI, 0.01).map((t) => ({ t }))}\\n  sortKey=\\\"t\\\"\\n  x={(d) => Math.sin(3 * d.t + (2 * Math.PI))}\\n  y={(d) => Math.sin(2 * d.t)}\\n/>\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryLine` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryLine` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryLine\\n    standalone={false}\\n    width={300} height={300} padding={0}\\n    data={sampleData}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryLine` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n  <VictoryLine\\n    style={{\\n      data: {\\n        stroke: \\\"#c43a31\\\",\\n        strokeWidth: ({ data }) => data.length\\n      },\\n      labels: {\\n        fontSize: 15,\\n        fill: ({ datum }) => datum.x === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\"\\n      }\\n    }}\\n    data={sampleData}\\n    labels={({ datum }) => datum.x}\\n  />\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryLine` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryLine` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryLine` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryLine` uses the standard `y` data accessor prop. [Read about it here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n## y0\\n\\n`type: string || integer || array[string] || function`\\n\\n**It is not common to set a `y0` prop with `VictoryLine`, as baselines for `VictoryLine` are only relevant for stacked lines.** [Read more about the `y0` prop here](/docs/common-props#y0)\\n\\n[animations guide]: /guides/animations\\n[data accessors guide]: /guides/data-accessors\\n[custom components guide]: /guides/custom-components\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n[`victorychart`]: /docs/victory-chart\\n[`victoryclipcontainer`]: /docs/victory-clip-container\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n[explore all the interpolation options]: /gallery/interpolation\\n\"},{\"data\":{\"id\":18,\"title\":\"VictoryPie\",\"category\":\"charts\",\"type\":\"docs\",\"scope\":[\"sampleData\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryPie\",\"depth\":1,\"slug\":\"victory-pie\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"colorScale\",\"depth\":2,\"slug\":\"color-scale\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"cornerRadius\",\"depth\":2,\"slug\":\"corner-radius\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"endAngle\",\"depth\":2,\"slug\":\"end-angle\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"innerRadius\",\"depth\":2,\"slug\":\"inner-radius\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labelPosition\",\"depth\":2,\"slug\":\"label-position\"},{\"type\":\"heading\",\"value\":\"labelRadius\",\"depth\":2,\"slug\":\"label-radius\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padAngle\",\"depth\":2,\"slug\":\"pad-angle\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"radius\",\"depth\":2,\"slug\":\"radius\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"startAngle\",\"depth\":2,\"slug\":\"start-angle\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"}],\"slug\":\"victory-pie\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryPie\",\"depth\":1,\"slug\":\"victory-pie\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"colorScale\",\"depth\":2,\"slug\":\"color-scale\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"cornerRadius\",\"depth\":2,\"slug\":\"corner-radius\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"endAngle\",\"depth\":2,\"slug\":\"end-angle\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"innerRadius\",\"depth\":2,\"slug\":\"inner-radius\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labelPosition\",\"depth\":2,\"slug\":\"label-position\"},{\"type\":\"heading\",\"value\":\"labelRadius\",\"depth\":2,\"slug\":\"label-radius\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padAngle\",\"depth\":2,\"slug\":\"pad-angle\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"radius\",\"depth\":2,\"slug\":\"radius\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"startAngle\",\"depth\":2,\"slug\":\"start-angle\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 18\\ntitle: VictoryPie\\ncategory: charts\\ntype: docs\\nscope:\\n  - sampleData\\n---\\n\\n# VictoryPie\\n\\n`VictoryPie` renders a dataset as a pie chart.\\n\\n```playground\\n<VictoryPie\\n  data={[\\n    { x: \\\"Cats\\\", y: 35 },\\n    { x: \\\"Dogs\\\", y: 40 },\\n    { x: \\\"Birds\\\", y: 55 }\\n  ]}\\n/>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryPie` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000\\n}}\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryPie` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## colorScale\\n\\n`type: array[string]`\\n\\nThe `colorScale` prop defines a color scale to be applied to each slice of `VictoryPie`. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: \\\"grayscale\\\", \\\"qualitative\\\", \\\"heatmap\\\", \\\"warm\\\", \\\"cool\\\", \\\"red\\\", \\\"green\\\", \\\"blue\\\". `VictoryPie` will assign a color to each slice by index, unless they are explicitly specified in the data object. Colors will repeat when there are more slices than colors in the provided `colorScale`.\\n\\n_default (provided by default theme):_ `colorScale=\\\"grayscale\\\"`\\n\\n```playground\\n<VictoryPie\\n  colorScale={[\\\"tomato\\\", \\\"orange\\\", \\\"gold\\\", \\\"cyan\\\", \\\"navy\\\" ]}\\n  data={sampleData}\\n/>\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryPie` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n**Note:** `VictoryPie` only works with the `VictoryContainer` component\\n\\n_default:_ `containerComponent={<VictoryContainer/>}`\\n\\n```jsx\\ncontainerComponent={<VictoryContainer responsive={false}/>}\\n```\\n\\n## cornerRadius\\n\\n`type: number || function`\\n\\nThe `cornerRadius` prop specifies the corner radius of the slices rendered in the pie chart. When given as a function, `cornerRadius` will be evaluated for each slice of the pie with an object corresponding to the props for that slice.\\n\\n```playground\\n<VictoryPie\\n  cornerRadius={({ datum }) => datum.y * 5}\\n  data={sampleData}\\n/>\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryPie` uses the standard `data` prop. [Read about it here](/docs/common-props#data)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryPie\\n  data={[\\n    { x: 1, y: 2, label: \\\"one\\\" },\\n    { x: 2, y: 3, label: \\\"two\\\" },\\n    { x: 3, y: 5, label: \\\"three\\\" }\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryPie` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)\\n\\n`VictoryPie` supplies the following props to its `dataComponent`: `data`, `datum`, `events`, `index`, `pathFunction`, `slice`, `style`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Slice/>`\\n\\n```jsx\\ndataComponent={<Slice events={{ onClick: handleClick }}/>}\\n```\\n\\n## endAngle\\n\\n`type: number`\\n\\nThe `endAngle` props defines the overall end angle of the pie in degrees. This prop is used in conjunction with `startAngle` to create a pie that spans only a segment of a circle, or to change overall rotation of the pie. This prop should be given as a number of degrees. Degrees are defined as starting at the 12 o'clock position, and proceeding clockwise.\\n\\n_default:_ `endAngle={360}`\\n\\n```playground\\n<div>\\n<VictoryPie\\n  startAngle={90}\\n  endAngle={450}\\n  data={sampleData}\\n/>\\n<VictoryPie\\n  startAngle={90}\\n  endAngle={-90}\\n  data={sampleData}\\n/>\\n</div>\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryPie` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryPie` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryPie\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: ({ style }) => {\\n                return style.fill === \\\"#c43a31\\\" ? null : { style: { fill: \\\"#c43a31\\\" } };\\n              }\\n            }, {\\n              target: \\\"labels\\\",\\n              mutation: ({ text }) => {\\n                return text === \\\"clicked\\\" ? null : { text: \\\"clicked\\\" };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={sampleData}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryPie` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryPie` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"rotate(90)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryPie` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={400}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## innerRadius\\n\\n`type: number || function`\\n\\nThe `innerRadius` prop determines the number of pixels between the center of the chart and the inner edge of a donut chart. When this prop is set to zero a regular pie chart is rendered. When this prop is given as a function, `innerRadius` will be evaluated for each slice of the pie with the props corresponding to that slice\\n\\n```playground\\n<VictoryPie\\n  innerRadius={({ datum }) => datum.y * 20}\\n  data={sampleData}\\n/>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryPie` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryPie\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n  labelComponent={<VictoryLabel angle={45}/>}\\n/>\\n```\\n\\n## labelPosition\\n\\n\\\\`type \\\"startAngle\\\" || \\\"endAngle\\\" || \\\"centroid\\\"\\n\\nThe `labelPosition` prop specifies the angular position of each label relative to its corresponding slice. When this prop is not given, the label will be positioned at the centroid of each slice.\\n\\n```playground\\n<VictoryPie\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n  labelPosition=\\\"endAngle\\\"\\n/>\\n```\\n\\n## labelRadius\\n\\n`type: number || function`\\n\\nThe `labelRadius` prop defines the radius of the arc that will be used for positioning each slice label. If this prop is not set, the label radius will default to the radius of the pie + label padding. If this prop is given as a function, it will be evaluated for each label `VictoryPie` renders, and will be evaluated with the props that correspond to that label, as well as the radius and innerRadius of the corresponding slice.\\n\\n```playground\\n<VictoryPie\\n  data={sampleData}\\n  labelRadius={({ innerRadius }) => innerRadius + 5 }\\n  radius={({ datum }) => 50 + datum.y * 20}\\n  innerRadius={50}\\n  style={{ labels: { fill: \\\"white\\\", fontSize: 20, fontWeight: \\\"bold\\\" } }}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryPie` uses the standard `labels` prop. [Read about it here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryPie\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n/>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\nThe `origin` prop specifies coordinates for the center of the pie. When this prop is not given, the origin will be calculated based on the `width`, `height`, and `padding` props.\\n\\n```playground\\n<VictoryPie\\n  origin={{ y: 250 }}\\n  padding={100}\\n  data={sampleData}\\n/>\\n```\\n\\n## padAngle\\n\\n`type: number || function`\\n\\nThe `padAngle` prop defines the amount of separation between adjacent data slices in number of degrees. When this prop is given as a function it will be evaluated for each slice, and will be evaluated with the props that correspond to that slice.\\n\\n```playground\\n<VictoryPie\\n  padAngle={({ datum }) => datum.y}\\n  innerRadius={100}\\n  data={sampleData}\\n/>\\n```\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryPie` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## radius\\n\\n`type: number || function`\\n\\nThe `radius` prop specifies the radius of the pie. When this prop is not given, it will be calculated based on the `width`, `height`, and `padding` props. When this prop is given as a function it will be evaluated for each slice with the props corresponding to that slice.\\n\\n```playground\\n<VictoryPie\\n  radius={({ datum }) => 20 + datum.y * 20}\\n  data={sampleData}\\n/>\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryPie` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryPie` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={50} fill=\\\"#c43a31\\\"/>\\n  <VictoryPie\\n    standalone={false}\\n    width={300} height={300}\\n    innerRadius={75}\\n    data={sampleData}\\n  />\\n</svg>\\n```\\n\\n## startAngle\\n\\n`type: number`\\n\\nThe `startAngle` props defines the overall start angle of the pie in degrees. This prop is used in conjunction with `endAngle` to create a pie that spans only a segment of a circle, or to change overall rotation of the pie. This prop should be given as a number of degrees. Degrees are defined as starting at the 12 o'clock position, and proceeding clockwise.\\n\\n_default:_ `endAngle={0}`\\n\\n```playground\\n<div>\\n<VictoryPie\\n  startAngle={90}\\n  endAngle={450}\\n  data={sampleData}\\n/>\\n<VictoryPie\\n  startAngle={90}\\n  endAngle={-90}\\n  data={sampleData}\\n/>\\n</div>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryPie` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n  <VictoryPie\\n    style={{\\n      data: {\\n        fillOpacity: 0.9, stroke: \\\"#c43a31\\\", strokeWidth: 3\\n      },\\n      labels: {\\n        fontSize: 25, fill: \\\"#c43a31\\\"\\n      }\\n    }}\\n    data={sampleData}\\n  />\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryPie` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryPie` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={400}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryPie` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryPie` uses the standard `y` data accessor prop. [Read about it here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n[animations guide]: /guides/animations\\n\\n[data accessors guide]: /guides/data-accessors\\n\\n[custom components guide]: /guides/custom-components\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\",\"content\":\"\\n# VictoryPie\\n\\n`VictoryPie` renders a dataset as a pie chart.\\n\\n```playground\\n<VictoryPie\\n  data={[\\n    { x: \\\"Cats\\\", y: 35 },\\n    { x: \\\"Dogs\\\", y: 40 },\\n    { x: \\\"Birds\\\", y: 55 }\\n  ]}\\n/>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryPie` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000\\n}}\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryPie` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## colorScale\\n\\n`type: array[string]`\\n\\nThe `colorScale` prop defines a color scale to be applied to each slice of `VictoryPie`. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: \\\"grayscale\\\", \\\"qualitative\\\", \\\"heatmap\\\", \\\"warm\\\", \\\"cool\\\", \\\"red\\\", \\\"green\\\", \\\"blue\\\". `VictoryPie` will assign a color to each slice by index, unless they are explicitly specified in the data object. Colors will repeat when there are more slices than colors in the provided `colorScale`.\\n\\n_default (provided by default theme):_ `colorScale=\\\"grayscale\\\"`\\n\\n```playground\\n<VictoryPie\\n  colorScale={[\\\"tomato\\\", \\\"orange\\\", \\\"gold\\\", \\\"cyan\\\", \\\"navy\\\" ]}\\n  data={sampleData}\\n/>\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryPie` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n**Note:** `VictoryPie` only works with the `VictoryContainer` component\\n\\n_default:_ `containerComponent={<VictoryContainer/>}`\\n\\n```jsx\\ncontainerComponent={<VictoryContainer responsive={false}/>}\\n```\\n\\n## cornerRadius\\n\\n`type: number || function`\\n\\nThe `cornerRadius` prop specifies the corner radius of the slices rendered in the pie chart. When given as a function, `cornerRadius` will be evaluated for each slice of the pie with an object corresponding to the props for that slice.\\n\\n```playground\\n<VictoryPie\\n  cornerRadius={({ datum }) => datum.y * 5}\\n  data={sampleData}\\n/>\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryPie` uses the standard `data` prop. [Read about it here](/docs/common-props#data)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryPie\\n  data={[\\n    { x: 1, y: 2, label: \\\"one\\\" },\\n    { x: 2, y: 3, label: \\\"two\\\" },\\n    { x: 3, y: 5, label: \\\"three\\\" }\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryPie` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)\\n\\n`VictoryPie` supplies the following props to its `dataComponent`: `data`, `datum`, `events`, `index`, `pathFunction`, `slice`, `style`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Slice/>`\\n\\n```jsx\\ndataComponent={<Slice events={{ onClick: handleClick }}/>}\\n```\\n\\n## endAngle\\n\\n`type: number`\\n\\nThe `endAngle` props defines the overall end angle of the pie in degrees. This prop is used in conjunction with `startAngle` to create a pie that spans only a segment of a circle, or to change overall rotation of the pie. This prop should be given as a number of degrees. Degrees are defined as starting at the 12 o'clock position, and proceeding clockwise.\\n\\n_default:_ `endAngle={360}`\\n\\n```playground\\n<div>\\n<VictoryPie\\n  startAngle={90}\\n  endAngle={450}\\n  data={sampleData}\\n/>\\n<VictoryPie\\n  startAngle={90}\\n  endAngle={-90}\\n  data={sampleData}\\n/>\\n</div>\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryPie` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryPie` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryPie\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: ({ style }) => {\\n                return style.fill === \\\"#c43a31\\\" ? null : { style: { fill: \\\"#c43a31\\\" } };\\n              }\\n            }, {\\n              target: \\\"labels\\\",\\n              mutation: ({ text }) => {\\n                return text === \\\"clicked\\\" ? null : { text: \\\"clicked\\\" };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={sampleData}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryPie` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryPie` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"rotate(90)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryPie` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={400}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## innerRadius\\n\\n`type: number || function`\\n\\nThe `innerRadius` prop determines the number of pixels between the center of the chart and the inner edge of a donut chart. When this prop is set to zero a regular pie chart is rendered. When this prop is given as a function, `innerRadius` will be evaluated for each slice of the pie with the props corresponding to that slice\\n\\n```playground\\n<VictoryPie\\n  innerRadius={({ datum }) => datum.y * 20}\\n  data={sampleData}\\n/>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryPie` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryPie\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n  labelComponent={<VictoryLabel angle={45}/>}\\n/>\\n```\\n\\n## labelPosition\\n\\n`type \\\"startAngle\\\" || \\\"endAngle\\\" || \\\"centroid\\\"\\n\\nThe `labelPosition` prop specifies the angular position of each label relative to its corresponding slice. When this prop is not given, the label will be positioned at the centroid of each slice.\\n\\n```playground\\n<VictoryPie\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n  labelPosition=\\\"endAngle\\\"\\n/>\\n```\\n\\n## labelRadius\\n\\n`type: number || function`\\n\\nThe `labelRadius` prop defines the radius of the arc that will be used for positioning each slice label. If this prop is not set, the label radius will default to the radius of the pie + label padding. If this prop is given as a function, it will be evaluated for each label `VictoryPie` renders, and will be evaluated with the props that correspond to that label, as well as the radius and innerRadius of the corresponding slice.\\n\\n```playground\\n<VictoryPie\\n  data={sampleData}\\n  labelRadius={({ innerRadius }) => innerRadius + 5 }\\n  radius={({ datum }) => 50 + datum.y * 20}\\n  innerRadius={50}\\n  style={{ labels: { fill: \\\"white\\\", fontSize: 20, fontWeight: \\\"bold\\\" } }}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryPie` uses the standard `labels` prop. [Read about it here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryPie\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n/>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\nThe `origin` prop specifies coordinates for the center of the pie. When this prop is not given, the origin will be calculated based on the `width`, `height`, and `padding` props.\\n\\n```playground\\n<VictoryPie\\n  origin={{ y: 250 }}\\n  padding={100}\\n  data={sampleData}\\n/>\\n```\\n\\n## padAngle\\n\\n`type: number || function`\\n\\nThe `padAngle` prop defines the amount of separation between adjacent data slices in number of degrees. When this prop is given as a function it will be evaluated for each slice, and will be evaluated with the props that correspond to that slice.\\n\\n```playground\\n<VictoryPie\\n  padAngle={({ datum }) => datum.y}\\n  innerRadius={100}\\n  data={sampleData}\\n/>\\n```\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryPie` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## radius\\n\\n`type: number || function`\\n\\nThe `radius` prop specifies the radius of the pie. When this prop is not given, it will be calculated based on the `width`, `height`, and `padding` props. When this prop is given as a function it will be evaluated for each slice with the props corresponding to that slice.\\n\\n```playground\\n<VictoryPie\\n  radius={({ datum }) => 20 + datum.y * 20}\\n  data={sampleData}\\n/>\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryPie` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryPie` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={50} fill=\\\"#c43a31\\\"/>\\n  <VictoryPie\\n    standalone={false}\\n    width={300} height={300}\\n    innerRadius={75}\\n    data={sampleData}\\n  />\\n</svg>\\n```\\n\\n## startAngle\\n\\n`type: number`\\n\\nThe `startAngle` props defines the overall start angle of the pie in degrees. This prop is used in conjunction with `endAngle` to create a pie that spans only a segment of a circle, or to change overall rotation of the pie. This prop should be given as a number of degrees. Degrees are defined as starting at the 12 o'clock position, and proceeding clockwise.\\n\\n_default:_ `endAngle={0}`\\n\\n```playground\\n<div>\\n<VictoryPie\\n  startAngle={90}\\n  endAngle={450}\\n  data={sampleData}\\n/>\\n<VictoryPie\\n  startAngle={90}\\n  endAngle={-90}\\n  data={sampleData}\\n/>\\n</div>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryPie` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n  <VictoryPie\\n    style={{\\n      data: {\\n        fillOpacity: 0.9, stroke: \\\"#c43a31\\\", strokeWidth: 3\\n      },\\n      labels: {\\n        fontSize: 25, fill: \\\"#c43a31\\\"\\n      }\\n    }}\\n    data={sampleData}\\n  />\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryPie` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryPie` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={400}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryPie` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryPie` uses the standard `y` data accessor prop. [Read about it here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n[animations guide]: /guides/animations\\n[data accessors guide]: /guides/data-accessors\\n[custom components guide]: /guides/custom-components\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\"},{\"data\":{\"id\":19,\"title\":\"VictoryPolarAxis\",\"category\":\"charts\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryPolarAxis\",\"depth\":1,\"slug\":\"victory-polar-axis\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"axisAngle\",\"depth\":2,\"slug\":\"axis-angle\"},{\"type\":\"heading\",\"value\":\"axisComponent\",\"depth\":2,\"slug\":\"axis-component\"},{\"type\":\"heading\",\"value\":\"axisLabelComponent\",\"depth\":2,\"slug\":\"axis-label-component\"},{\"type\":\"heading\",\"value\":\"axisValue\",\"depth\":2,\"slug\":\"axis-value\"},{\"type\":\"heading\",\"value\":\"circularAxisComponent\",\"depth\":2,\"slug\":\"circular-axis-component\"},{\"type\":\"heading\",\"value\":\"circularGridComponent\",\"depth\":2,\"slug\":\"circular-grid-component\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"dependentAxis\",\"depth\":2,\"slug\":\"dependent-axis\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"endAngle\",\"depth\":2,\"slug\":\"end-angle\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"gridComponent\",\"depth\":2,\"slug\":\"grid-component\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"innerRadius\",\"depth\":2,\"slug\":\"inner-radius\"},{\"type\":\"heading\",\"value\":\"invertAxis\",\"depth\":2,\"slug\":\"invert-axis\"},{\"type\":\"heading\",\"value\":\"label\",\"depth\":2,\"slug\":\"label\"},{\"type\":\"heading\",\"value\":\"labelPlacement\",\"depth\":2,\"slug\":\"label-placement\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"startAngle\",\"depth\":2,\"slug\":\"start-angle\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"tickComponent\",\"depth\":2,\"slug\":\"tick-component\"},{\"type\":\"heading\",\"value\":\"tickCount\",\"depth\":2,\"slug\":\"tick-count\"},{\"type\":\"heading\",\"value\":\"tickFormat\",\"depth\":2,\"slug\":\"tick-format\"},{\"type\":\"heading\",\"value\":\"tickLabelComponent\",\"depth\":2,\"slug\":\"tick-label-component\"},{\"type\":\"heading\",\"value\":\"tickValues\",\"depth\":2,\"slug\":\"tick-values\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"}],\"slug\":\"victory-polar-axis\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryPolarAxis\",\"depth\":1,\"slug\":\"victory-polar-axis\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"axisAngle\",\"depth\":2,\"slug\":\"axis-angle\"},{\"type\":\"heading\",\"value\":\"axisComponent\",\"depth\":2,\"slug\":\"axis-component\"},{\"type\":\"heading\",\"value\":\"axisLabelComponent\",\"depth\":2,\"slug\":\"axis-label-component\"},{\"type\":\"heading\",\"value\":\"axisValue\",\"depth\":2,\"slug\":\"axis-value\"},{\"type\":\"heading\",\"value\":\"circularAxisComponent\",\"depth\":2,\"slug\":\"circular-axis-component\"},{\"type\":\"heading\",\"value\":\"circularGridComponent\",\"depth\":2,\"slug\":\"circular-grid-component\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"dependentAxis\",\"depth\":2,\"slug\":\"dependent-axis\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"endAngle\",\"depth\":2,\"slug\":\"end-angle\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"gridComponent\",\"depth\":2,\"slug\":\"grid-component\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"innerRadius\",\"depth\":2,\"slug\":\"inner-radius\"},{\"type\":\"heading\",\"value\":\"invertAxis\",\"depth\":2,\"slug\":\"invert-axis\"},{\"type\":\"heading\",\"value\":\"label\",\"depth\":2,\"slug\":\"label\"},{\"type\":\"heading\",\"value\":\"labelPlacement\",\"depth\":2,\"slug\":\"label-placement\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"startAngle\",\"depth\":2,\"slug\":\"start-angle\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"tickComponent\",\"depth\":2,\"slug\":\"tick-component\"},{\"type\":\"heading\",\"value\":\"tickCount\",\"depth\":2,\"slug\":\"tick-count\"},{\"type\":\"heading\",\"value\":\"tickFormat\",\"depth\":2,\"slug\":\"tick-format\"},{\"type\":\"heading\",\"value\":\"tickLabelComponent\",\"depth\":2,\"slug\":\"tick-label-component\"},{\"type\":\"heading\",\"value\":\"tickValues\",\"depth\":2,\"slug\":\"tick-values\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 19\\ntitle: VictoryPolarAxis\\ncategory: charts\\ntype: docs\\nscope: null\\n---\\n\\n# VictoryPolarAxis\\n\\nVictoryPolarAxis renders a single axis which can be used on its own or composed with [`VictoryChart`][].\\n\\n```playground\\n<svg width={400} height={400}>\\n  <VictoryPolarAxis\\n    width={400}\\n    height={400}\\n    theme={VictoryTheme.material}\\n    standalone={false}\\n  />\\n  <VictoryPolarAxis dependentAxis\\n    width={400}\\n    height={400}\\n    domain={[0, 10]}\\n    theme={VictoryTheme.material}\\n    standalone={false}\\n  />\\n</svg>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryPolarAxis` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  easing: \\\"bounce\\\"\\n}}\\n```\\n\\n## axisAngle\\n\\n`type: number`\\n\\nThe `axisAngle` prop is used to position the dependent axis. This prop should be given in degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise. This prop only affects the dependent axis.\\n\\n_default:_ `axisAngle={0}`\\n\\n```playground\\n<VictoryPolarAxis dependentAxis\\n  theme={VictoryTheme.material}\\n  axisAngle={45}\\n/>\\n```\\n\\n## axisComponent\\n\\n`type: element`\\n\\nThe `axisComponent` prop takes a component instance which will be responsible for rendering an axis line for the dependent axis. The independent axis renders a `circularAxisComponent`. The new element created from the passed `axisComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `x1`, `y1`, `x2`, `y2`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If an `axisComponent` is not provided, `VictoryPolarAxis` will use its default [LineSegment component][].\\n\\n_default:_ `axisComponent={<LineSegment type={\\\"axis\\\"}/>}`\\n\\n```jsx\\naxisComponent={<LineSegment events={{ onClick: handleClick }}/>}\\n```\\n\\n## axisLabelComponent\\n\\n`type: element`\\n\\nThe `axisLabelComponent` prop takes a component instance which will be used to render the axis label. The new element created from the passed `axisLabelComponent` will be supplied with the following props: `x`, `y`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `axisLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\n**Note:** Axis labels are only rendered with the dependent axis in polar charts.\\n\\n_default:_ `axisLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\naxisLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n## axisValue\\n\\n`type: number`\\n\\nThe `axisValue` prop may be used instead of `axisAngle` to position the dependent axis. Ths prop is useful when dependent axes should line up with values on the independent axis.\\n\\n```playground\\n <VictoryChart polar\\n  theme={VictoryTheme.material}\\n>\\n  {\\n     [\\\"cat\\\", \\\"dog\\\", \\\"bird\\\", \\\"dog\\\", \\\"frog\\\", \\\"fish\\\"].map((d, i) => {\\n      return (\\n        <VictoryPolarAxis dependentAxis\\n          key={i}\\n          label={d}\\n          labelPlacement=\\\"perpendicular\\\"\\n          style={{ tickLabels: { fill: \\\"none\\\" } }}\\n          axisValue={d}\\n        />\\n      );\\n    })\\n  }\\n  <VictoryBar\\n    style={{ data: { fill: \\\"tomato\\\", width: 25 } }}\\n    data={[\\n      { x: \\\"cat\\\", y: 10 },\\n      { x: \\\"dog\\\", y: 25 },\\n      { x: \\\"bird\\\", y: 40 },\\n      { x: \\\"frog\\\", y: 50 },\\n      { x: \\\"fish\\\", y: 50 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## circularAxisComponent\\n\\n`type: element`\\n\\nThe `circularAxisComponent` prop takes a component instance which will be responsible for rendering an axis arc for the independent axis. The dependent axis renders an `axisComponent`. The new element created from the passed `circularAxisComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `style`, `events`,\\n`cx`, `cy`, `r`, `startAngle`, and `endAngle`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `circularAxisComponent` is not provided, `VictoryPolarAxis` will use its default [Arc component][].\\n\\n_default:_ `circularAxisComponent={<Arc type={\\\"axis\\\"}/>}`\\n\\n```jsx\\ncircularAxisComponent={<Arc r={300}/>}\\n```\\n\\n## circularGridComponent\\n\\n`type: element`\\n\\nThe `circularGridComponent` prop takes a component instance which will be responsible for rendering a grid element. The new element created from the passed `circularGridComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `circularGridComponent` is not provided, `VictoryPolarAxis` will use its default [Arc component][].\\n\\n_default:_ `circularGridComponent={<Arc type={\\\"grid\\\"}/>}`\\n\\n```jsx\\ncircularGridComponent={<Arc r={300}/>}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryPolarAxis` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\nThe following victory containers work with polar charts:\\n`VictoryContainer`, `VictorySelectionContainer`, `VictoryVoronoiContainer` and `VictoryZoomContainer`\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## dependentAxis\\n\\n`type: boolean`\\n\\nThe `dependentAxis` boolean prop specifies whether the axis corresponds to the dependent variable (usually y, or the radial dimension on a polar chart). This prop is useful when composing `VictoryPolarAxis` with other components to form a chart.\\n\\n_default:_ `dependentAxis={false}`\\n\\n```playground\\n<div style={{ display: \\\"flex\\\" }}>\\n  <VictoryPolarAxis dependentAxis theme={VictoryTheme.material} />\\n  <VictoryPolarAxis theme={VictoryTheme.material} />\\n</div>\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryPolarAxis` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryPolarAxis` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## endAngle\\n\\n`type: number`\\n\\nThe `endAngle` props defines the overall end angle of the axis in degrees. This prop is used in conjunction with `startAngle` to create an axis that spans only a segment of a circle, or to change overall rotation of the axis. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.\\n\\n_default:_ `endAngle={360}`\\n\\n```playground\\n<div style={{ display: \\\"flex\\\" }}>\\n<VictoryPolarAxis\\n  startAngle={90}\\n  endAngle={450}\\n  tickValues={[0, 90, 180, 270]}\\n  labelPlacement=\\\"vertical\\\"\\n/>\\n<VictoryPolarAxis\\n  startAngle={0}\\n  endAngle={180}\\n  tickValues={[0, 45, 90, 135, 180]}\\n/>\\n</div>\\n```\\n\\n## events\\n\\n`type: array[objects]`\\n\\n`VictoryPolarAxis` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][]for more information on defining events.\\n\\n**note:** valid event targets for `VictoryPolarAxis` are \\\"axis\\\", \\\"axisLabel\\\", \\\"grid\\\", \\\"ticks\\\", and \\\"tickLabels\\\".\\nTargets that correspond to only one element {\\\"axis\\\" and \\\"axisLabel\\\") should use the special eventKey \\\"all\\\".\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryPolarAxis` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## gridComponent\\n\\n`type: element`\\n\\nThe `gridComponent` prop takes a component instance which will be responsible for rendering a grid element. The new element created from the passed `gridComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `gridComponent` is not provided, `VictoryPolarAxis` will use its default [LineSegment component][].\\n\\n_default:_ `gridComponent={<LineSegment type={\\\"grid\\\"}/>}`\\n\\n```jsx\\ngridComponent={<LineSegment events={{ onClick: handleClick }}/>}\\n```\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryPolarAxis` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryPolarAxis` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## innerRadius\\n\\n`type: number`\\n\\nWhen the `innerRadius` prop is set, polar axes will be hollow rather than circular.\\n\\n```playground\\n<VictoryPolarAxis theme={VictoryTheme.material} innerRadius={50}/>\\n```\\n\\n## invertAxis\\n\\n`type: boolean`\\n\\nThe `invertAxis` boolean prop specifies whether the domain for a given axis should be inverted. By default, axes will be displayed with lower values on the bottom / left, and higher values on the top / right regardless of orientation.\\n\\n_default:_ `invertAxis={false}`\\n\\n## label\\n\\n`type: string`\\n\\nThe `label` prop defines the label that will appear with a dependent axis. Labels will not appear with independent polar axes. This prop should be given as a string.\\n\\n```playground\\n<VictoryPolarAxis dependentAxis\\n  theme={VictoryTheme.material}\\n  label=\\\"wind speed\\\"\\n  labelPlacement=\\\"perpendicular\\\"\\n/>\\n```\\n\\n## labelPlacement\\n\\n`type: \\\"parallel\\\" || \\\"perpendicular\\\" || \\\"vertical\\\"`\\n\\nThe `labelPlacement` prop specifies how tick labels should be placed relative to the angular tick values. Options for this prop are \\\"vertical\\\", \\\"parallel\\\", and \\\"perpendicular\\\".\\n\\n_default:_ `labelPlacement=\\\"parallel\\\"`\\n\\n```playground\\n<VictoryPolarAxis\\n  labelPlacement=\\\"perpendicular\\\"\\n  theme={VictoryTheme.material}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryPolarAxis` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryPolarAxis\\n  dependentAxis\\n  tickValues={[1, 2, 3]}\\n  maxDomain={5}\\n/>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryPolarAxis` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryPolarAxis\\n  dependentAxis\\n  tickValues={[2, 3, 4, 5]}\\n  minDomain={0}\\n/>\\n```\\n\\n## name\\n\\n`type: string`\\n\\n`VictoryPolarAxis` uses the standard `name` prop. [Read about it here](/docs/common-props#name)\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryPolarAxis` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryPolarAxis` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n**note:** Though `VictoryPolarAxis` can take a `scale` prop with scales defined for both `x` and `y`, only the scale that corresponds the given axis will be used.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryPolarAxis` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryPolarAxis` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryPolarAxis` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={350} height={350}>\\n  <VictoryPolarAxis\\n    theme={VictoryTheme.material}\\n    standalone={false}\\n  />\\n  <VictoryPolarAxis dependentAxis\\n    axisAngle={45}\\n    labelPlacement=\\\"vertical\\\"\\n    theme={VictoryTheme.material}\\n    standalone={false}\\n  />\\n</svg>\\n```\\n\\n## startAngle\\n\\n`type: number`\\n\\nThe `startAngle` props defines the overall end angle of the axis in degrees. This prop is used in conjunction with `endAngle` to create an axis that spans only a segment of a circle, or to change overall rotation of the axis. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.\\n\\n_default:_ `startAngle={0}`\\n\\n```playground\\n<div style={{ display: \\\"flex\\\" }}>\\n  <VictoryPolarAxis\\n    startAngle={90}\\n    endAngle={450}\\n    tickValues={[0, 90, 180, 270]}\\n    labelPlacement=\\\"vertical\\\"\\n  />\\n  <VictoryPolarAxis\\n    startAngle={0}\\n    endAngle={180}\\n    tickValues={[0, 45, 90, 135, 180]}\\n  />\\n</div>\\n```\\n\\n## style\\n\\n`type: { axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }`\\n\\nThe `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `axis`, `axisLabel`, `grid`, `ticks`, and `tickLabels`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for `grid`, `tick`, and `tickLabel` style properties, and they will be evaluated with the props corresponding to each axis element, such as `tick` and `index`.\\n\\n**note:** When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.\\n\\n**note:** custom `angle` and `verticalAnchor` properties may be included in `labels` styles.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryPolarAxis\\n  style={{\\n    axis: {stroke: \\\"black\\\"},\\n    grid: {stroke: ({ tick }) => tick > 0.5 ? \\\"red\\\" : \\\"blue\\\"},\\n    tickLabels: {fontSize: 15, padding: 15}\\n  }}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryPolarAxis` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n_Note:_ Use the `dependentAxis` and `independentAxis` namespaces to theme axes by type. These namespaces will be merged with any props and styles supplied in the `axis` namespace.\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## tickComponent\\n\\n`type: element`\\n\\nThe `tickComponent` prop takes a component instance which will be responsible for rendering a tick element. The new element created from the passed `tickComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `tickComponent` is not provided, `VictoryPolarAxis` will use its default [Line component][].\\n\\n_default:_ `tickComponent={<LineSegment type={\\\"tick\\\"}/>}`\\n\\n```jsx\\ntickComponent={<LineSegment events={{ onClick: handleClick }}/>}\\n```\\n\\n## tickCount\\n\\n`type: number`\\n\\nThe `tickCount` prop specifies approximately how many ticks should be drawn on the axis. If an array of ticks is supplied in `tickValues` or `tickFormat`, the `tickCount` prop will be used to _downsample_ the provided array to the specified length. If `tickValues` are not explicitly provided, this value is used by [d3Scale][] to calculate an _approximate_ number of ticks. [d3Scale][] prioritizes returning \\\"nice\\\" values and evenly spaced ticks over an exact number of ticks. This prop must be given as a positive integer.\\n\\n## tickFormat\\n\\n`type: array || function`\\n\\nThe `tickFormat` prop specifies how tick values should be labeled. The `tickFormat` prop can be given as an array of values to display for each tick, or as a function to be applied to every `tickValue`. When given as a function, `tickFormat` will be called with the following arguments: `tick` - the individual tick value, `index` - the index of the tick in the array, and `ticks` - the entire array of ticks.\\n\\n```playground\\n<VictoryPolarAxis\\n  tickValues={[2.11, 3.9, 6.1, 8.05]}\\n  labelPlacement=\\\"vertical\\\"\\n  tickFormat={(t) => `${Math.round(t)}k`}\\n/>\\n```\\n\\n## tickLabelComponent\\n\\n`type: element`\\n\\nThe `tickLabelComponent` prop takes a component instance which will be used to render the axis label. The new element created from the passed `tickLabelComponent` will be supplied with the following props: `x`, `y`, `tick`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `tickLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\n_default:_ `tickLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\ntickLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n## tickValues\\n\\n`type: array`\\n\\nThe `tickValues` prop explicitly specifies a set of tick values to draw on the axis. This prop should be given as an array of unique values of the same type (_i.e.,_ all numbers). The `tickValues` prop is used to specify the _values_ of each tick, so numeric values are typically appropriate. An array of strings or dates may be supplied for categorical and time series data respectively. Use the [tickFormat][] prop to specify how ticks should be labeled. _Note:_ `tickValues` should be given as a unique array.\\n\\n```playground\\n<VictoryPolarAxis\\n  labelPlacement=\\\"vertical\\\"\\n  tickValues={[2, 4, 6, 8]}\\n/>\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryPolarAxis` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n[animations guide]: /guides/animations\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\\n[`victorychart`]: /docs/victory-chart\\n\\n[tickformat]: /docs/victory-axis#tickformat\\n\\n[d3scale]: https://github.com/d3/d3-scale\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\\n[linesegment component]: /docs/victory-primitives#linesegment\\n\\n[arc component]: /docs/victory-primitives#arc\\n\\n[`victorylabel`]: /docs/victory-label\\n\",\"content\":\"\\n# VictoryPolarAxis\\n\\nVictoryPolarAxis renders a single axis which can be used on its own or composed with [`VictoryChart`][].\\n\\n```playground\\n<svg width={400} height={400}>\\n  <VictoryPolarAxis\\n    width={400}\\n    height={400}\\n    theme={VictoryTheme.material}\\n    standalone={false}\\n  />\\n  <VictoryPolarAxis dependentAxis\\n    width={400}\\n    height={400}\\n    domain={[0, 10]}\\n    theme={VictoryTheme.material}\\n    standalone={false}\\n  />\\n</svg>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryPolarAxis` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  easing: \\\"bounce\\\"\\n}}\\n```\\n\\n## axisAngle\\n\\n`type: number`\\n\\nThe `axisAngle` prop is used to position the dependent axis. This prop should be given in degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise. This prop only affects the dependent axis.\\n\\n_default:_ `axisAngle={0}`\\n\\n```playground\\n<VictoryPolarAxis dependentAxis\\n  theme={VictoryTheme.material}\\n  axisAngle={45}\\n/>\\n```\\n\\n## axisComponent\\n\\n`type: element`\\n\\nThe `axisComponent` prop takes a component instance which will be responsible for rendering an axis line for the dependent axis. The independent axis renders a `circularAxisComponent`. The new element created from the passed `axisComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `x1`, `y1`, `x2`, `y2`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If an `axisComponent` is not provided, `VictoryPolarAxis` will use its default [LineSegment component][].\\n\\n_default:_ `axisComponent={<LineSegment type={\\\"axis\\\"}/>}`\\n\\n```jsx\\naxisComponent={<LineSegment events={{ onClick: handleClick }}/>}\\n```\\n\\n## axisLabelComponent\\n\\n`type: element`\\n\\nThe `axisLabelComponent` prop takes a component instance which will be used to render the axis label. The new element created from the passed `axisLabelComponent` will be supplied with the following props: `x`, `y`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `axisLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\n**Note:** Axis labels are only rendered with the dependent axis in polar charts.\\n\\n_default:_ `axisLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\naxisLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n## axisValue\\n\\n`type: number`\\n\\nThe `axisValue` prop may be used instead of `axisAngle` to position the dependent axis. Ths prop is useful when dependent axes should line up with values on the independent axis.\\n\\n```playground\\n <VictoryChart polar\\n  theme={VictoryTheme.material}\\n>\\n  {\\n     [\\\"cat\\\", \\\"dog\\\", \\\"bird\\\", \\\"dog\\\", \\\"frog\\\", \\\"fish\\\"].map((d, i) => {\\n      return (\\n        <VictoryPolarAxis dependentAxis\\n          key={i}\\n          label={d}\\n          labelPlacement=\\\"perpendicular\\\"\\n          style={{ tickLabels: { fill: \\\"none\\\" } }}\\n          axisValue={d}\\n        />\\n      );\\n    })\\n  }\\n  <VictoryBar\\n    style={{ data: { fill: \\\"tomato\\\", width: 25 } }}\\n    data={[\\n      { x: \\\"cat\\\", y: 10 },\\n      { x: \\\"dog\\\", y: 25 },\\n      { x: \\\"bird\\\", y: 40 },\\n      { x: \\\"frog\\\", y: 50 },\\n      { x: \\\"fish\\\", y: 50 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## circularAxisComponent\\n\\n`type: element`\\n\\nThe `circularAxisComponent` prop takes a component instance which will be responsible for rendering an axis arc for the independent axis. The dependent axis renders an `axisComponent`. The new element created from the passed `circularAxisComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `style`, `events`,\\n`cx`, `cy`, `r`, `startAngle`, and `endAngle`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `circularAxisComponent` is not provided, `VictoryPolarAxis` will use its default [Arc component][].\\n\\n_default:_ `circularAxisComponent={<Arc type={\\\"axis\\\"}/>}`\\n\\n```jsx\\ncircularAxisComponent={<Arc r={300}/>}\\n```\\n\\n## circularGridComponent\\n\\n`type: element`\\n\\nThe `circularGridComponent` prop takes a component instance which will be responsible for rendering a grid element. The new element created from the passed `circularGridComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `circularGridComponent` is not provided, `VictoryPolarAxis` will use its default [Arc component][].\\n\\n_default:_ `circularGridComponent={<Arc type={\\\"grid\\\"}/>}`\\n\\n```jsx\\ncircularGridComponent={<Arc r={300}/>}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryPolarAxis` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\nThe following victory containers work with polar charts:\\n`VictoryContainer`, `VictorySelectionContainer`, `VictoryVoronoiContainer` and `VictoryZoomContainer`\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## dependentAxis\\n\\n`type: boolean`\\n\\nThe `dependentAxis` boolean prop specifies whether the axis corresponds to the dependent variable (usually y, or the radial dimension on a polar chart). This prop is useful when composing `VictoryPolarAxis` with other components to form a chart.\\n\\n_default:_ `dependentAxis={false}`\\n\\n```playground\\n<div style={{ display: \\\"flex\\\" }}>\\n  <VictoryPolarAxis dependentAxis theme={VictoryTheme.material} />\\n  <VictoryPolarAxis theme={VictoryTheme.material} />\\n</div>\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryPolarAxis` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryPolarAxis` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## endAngle\\n\\n`type: number`\\n\\nThe `endAngle` props defines the overall end angle of the axis in degrees. This prop is used in conjunction with `startAngle` to create an axis that spans only a segment of a circle, or to change overall rotation of the axis. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.\\n\\n_default:_ `endAngle={360}`\\n\\n```playground\\n<div style={{ display: \\\"flex\\\" }}>\\n<VictoryPolarAxis\\n  startAngle={90}\\n  endAngle={450}\\n  tickValues={[0, 90, 180, 270]}\\n  labelPlacement=\\\"vertical\\\"\\n/>\\n<VictoryPolarAxis\\n  startAngle={0}\\n  endAngle={180}\\n  tickValues={[0, 45, 90, 135, 180]}\\n/>\\n</div>\\n```\\n\\n## events\\n\\n`type: array[objects]`\\n\\n`VictoryPolarAxis` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][]for more information on defining events.\\n\\n**note:** valid event targets for `VictoryPolarAxis` are \\\"axis\\\", \\\"axisLabel\\\", \\\"grid\\\", \\\"ticks\\\", and \\\"tickLabels\\\".\\nTargets that correspond to only one element {\\\"axis\\\" and \\\"axisLabel\\\") should use the special eventKey \\\"all\\\".\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryPolarAxis` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## gridComponent\\n\\n`type: element`\\n\\nThe `gridComponent` prop takes a component instance which will be responsible for rendering a grid element. The new element created from the passed `gridComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `gridComponent` is not provided, `VictoryPolarAxis` will use its default [LineSegment component][].\\n\\n_default:_ `gridComponent={<LineSegment type={\\\"grid\\\"}/>}`\\n\\n```jsx\\ngridComponent={<LineSegment events={{ onClick: handleClick }}/>}\\n```\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryPolarAxis` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryPolarAxis` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## innerRadius\\n\\n`type: number`\\n\\nWhen the `innerRadius` prop is set, polar axes will be hollow rather than circular.\\n\\n```playground\\n<VictoryPolarAxis theme={VictoryTheme.material} innerRadius={50}/>\\n```\\n\\n## invertAxis\\n\\n`type: boolean`\\n\\nThe `invertAxis` boolean prop specifies whether the domain for a given axis should be inverted. By default, axes will be displayed with lower values on the bottom / left, and higher values on the top / right regardless of orientation.\\n\\n_default:_ `invertAxis={false}`\\n\\n## label\\n\\n`type: string`\\n\\nThe `label` prop defines the label that will appear with a dependent axis. Labels will not appear with independent polar axes. This prop should be given as a string.\\n\\n```playground\\n<VictoryPolarAxis dependentAxis\\n  theme={VictoryTheme.material}\\n  label=\\\"wind speed\\\"\\n  labelPlacement=\\\"perpendicular\\\"\\n/>\\n```\\n\\n## labelPlacement\\n\\n`type: \\\"parallel\\\" || \\\"perpendicular\\\" || \\\"vertical\\\"`\\n\\nThe `labelPlacement` prop specifies how tick labels should be placed relative to the angular tick values. Options for this prop are \\\"vertical\\\", \\\"parallel\\\", and \\\"perpendicular\\\".\\n\\n_default:_ `labelPlacement=\\\"parallel\\\"`\\n\\n```playground\\n<VictoryPolarAxis\\n  labelPlacement=\\\"perpendicular\\\"\\n  theme={VictoryTheme.material}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryPolarAxis` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryPolarAxis\\n  dependentAxis\\n  tickValues={[1, 2, 3]}\\n  maxDomain={5}\\n/>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryPolarAxis` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryPolarAxis\\n  dependentAxis\\n  tickValues={[2, 3, 4, 5]}\\n  minDomain={0}\\n/>\\n```\\n\\n## name\\n\\n`type: string`\\n\\n`VictoryPolarAxis` uses the standard `name` prop. [Read about it here](/docs/common-props#name)\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryPolarAxis` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryPolarAxis` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n**note:** Though `VictoryPolarAxis` can take a `scale` prop with scales defined for both `x` and `y`, only the scale that corresponds the given axis will be used.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryPolarAxis` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryPolarAxis` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryPolarAxis` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={350} height={350}>\\n  <VictoryPolarAxis\\n    theme={VictoryTheme.material}\\n    standalone={false}\\n  />\\n  <VictoryPolarAxis dependentAxis\\n    axisAngle={45}\\n    labelPlacement=\\\"vertical\\\"\\n    theme={VictoryTheme.material}\\n    standalone={false}\\n  />\\n</svg>\\n```\\n\\n## startAngle\\n\\n`type: number`\\n\\nThe `startAngle` props defines the overall end angle of the axis in degrees. This prop is used in conjunction with `endAngle` to create an axis that spans only a segment of a circle, or to change overall rotation of the axis. This prop should be given as a number of degrees. Degrees are defined as starting at the 3 o'clock position, and proceeding counterclockwise.\\n\\n_default:_ `startAngle={0}`\\n\\n```playground\\n<div style={{ display: \\\"flex\\\" }}>\\n  <VictoryPolarAxis\\n    startAngle={90}\\n    endAngle={450}\\n    tickValues={[0, 90, 180, 270]}\\n    labelPlacement=\\\"vertical\\\"\\n  />\\n  <VictoryPolarAxis\\n    startAngle={0}\\n    endAngle={180}\\n    tickValues={[0, 45, 90, 135, 180]}\\n  />\\n</div>\\n```\\n\\n## style\\n\\n`type: { axis: object, axisLabel: object, grid: object, ticks: object, tickLabels: object }`\\n\\nThe `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `axis`, `axisLabel`, `grid`, `ticks`, and `tickLabels`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for `grid`, `tick`, and `tickLabel` style properties, and they will be evaluated with the props corresponding to each axis element, such as `tick` and `index`.\\n\\n**note:** When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.\\n\\n**note:** custom `angle` and `verticalAnchor` properties may be included in `labels` styles.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryPolarAxis\\n  style={{\\n    axis: {stroke: \\\"black\\\"},\\n    grid: {stroke: ({ tick }) => tick > 0.5 ? \\\"red\\\" : \\\"blue\\\"},\\n    tickLabels: {fontSize: 15, padding: 15}\\n  }}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryPolarAxis` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n_Note:_ Use the `dependentAxis` and `independentAxis` namespaces to theme axes by type. These namespaces will be merged with any props and styles supplied in the `axis` namespace.\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## tickComponent\\n\\n`type: element`\\n\\nThe `tickComponent` prop takes a component instance which will be responsible for rendering a tick element. The new element created from the passed `tickComponent` will be provided with the following props calculated by `VictoryPolarAxis`: `x1`, `y1`, `x2`, `y2`, `tick`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `tickComponent` is not provided, `VictoryPolarAxis` will use its default [Line component][].\\n\\n_default:_ `tickComponent={<LineSegment type={\\\"tick\\\"}/>}`\\n\\n```jsx\\ntickComponent={<LineSegment events={{ onClick: handleClick }}/>}\\n```\\n\\n## tickCount\\n\\n`type: number`\\n\\nThe `tickCount` prop specifies approximately how many ticks should be drawn on the axis. If an array of ticks is supplied in `tickValues` or `tickFormat`, the `tickCount` prop will be used to _downsample_ the provided array to the specified length. If `tickValues` are not explicitly provided, this value is used by [d3Scale][] to calculate an _approximate_ number of ticks. [d3Scale][] prioritizes returning \\\"nice\\\" values and evenly spaced ticks over an exact number of ticks. This prop must be given as a positive integer.\\n\\n## tickFormat\\n\\n`type: array || function`\\n\\nThe `tickFormat` prop specifies how tick values should be labeled. The `tickFormat` prop can be given as an array of values to display for each tick, or as a function to be applied to every `tickValue`. When given as a function, `tickFormat` will be called with the following arguments: `tick` - the individual tick value, `index` - the index of the tick in the array, and `ticks` - the entire array of ticks.\\n\\n```playground\\n<VictoryPolarAxis\\n  tickValues={[2.11, 3.9, 6.1, 8.05]}\\n  labelPlacement=\\\"vertical\\\"\\n  tickFormat={(t) => `${Math.round(t)}k`}\\n/>\\n```\\n\\n## tickLabelComponent\\n\\n`type: element`\\n\\nThe `tickLabelComponent` prop takes a component instance which will be used to render the axis label. The new element created from the passed `tickLabelComponent` will be supplied with the following props: `x`, `y`, `tick`, `verticalAnchor`, `textAnchor`, `angle`, `transform`, `style` and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `tickLabelComponent` is omitted, a new [`VictoryLabel`][] will be created with props described above.\\n\\n_default:_ `tickLabelComponent={<VictoryLabel/>}`\\n\\n```jsx\\ntickLabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n## tickValues\\n\\n`type: array`\\n\\nThe `tickValues` prop explicitly specifies a set of tick values to draw on the axis. This prop should be given as an array of unique values of the same type (_i.e.,_ all numbers). The `tickValues` prop is used to specify the _values_ of each tick, so numeric values are typically appropriate. An array of strings or dates may be supplied for categorical and time series data respectively. Use the [tickFormat][] prop to specify how ticks should be labeled. _Note:_ `tickValues` should be given as a unique array.\\n\\n```playground\\n<VictoryPolarAxis\\n  labelPlacement=\\\"vertical\\\"\\n  tickValues={[2, 4, 6, 8]}\\n/>\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryPolarAxis` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n[animations guide]: /guides/animations\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n[`victorychart`]: /docs/victory-chart\\n[tickformat]: /docs/victory-axis#tickformat\\n[d3scale]: https://github.com/d3/d3-scale\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n[linesegment component]: /docs/victory-primitives#linesegment\\n[arc component]: /docs/victory-primitives#arc\\n[`victorylabel`]: /docs/victory-label\\n\"},{\"data\":{\"id\":22,\"title\":\"VictoryScatter\",\"category\":\"charts\",\"type\":\"docs\",\"scope\":[\"sampleData\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryScatter\",\"depth\":1,\"slug\":\"victory-scatter\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"bubbleProperty\",\"depth\":2,\"slug\":\"bubble-property\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxBubbleSize\",\"depth\":2,\"slug\":\"max-bubble-size\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minBubbleSize\",\"depth\":2,\"slug\":\"min-bubble-size\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"size\",\"depth\":2,\"slug\":\"size\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"symbol\",\"depth\":2,\"slug\":\"symbol\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"},{\"type\":\"heading\",\"value\":\"y0\",\"depth\":2,\"slug\":\"y-0\"}],\"slug\":\"victory-scatter\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryScatter\",\"depth\":1,\"slug\":\"victory-scatter\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"bubbleProperty\",\"depth\":2,\"slug\":\"bubble-property\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxBubbleSize\",\"depth\":2,\"slug\":\"max-bubble-size\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minBubbleSize\",\"depth\":2,\"slug\":\"min-bubble-size\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"size\",\"depth\":2,\"slug\":\"size\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"symbol\",\"depth\":2,\"slug\":\"symbol\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"},{\"type\":\"heading\",\"value\":\"y0\",\"depth\":2,\"slug\":\"y-0\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 22\\ntitle: VictoryScatter\\ncategory: charts\\ntype: docs\\nscope:\\n  - sampleData\\n---\\n\\n# VictoryScatter\\n\\nVictoryScatter renders a dataset as a series of points. VictoryScatter can be composed with [`VictoryChart`][] to create scatter plots.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domain={{ x: [0, 5], y: [0, 7] }}\\n>\\n  <VictoryScatter\\n    style={{ data: { fill: \\\"#c43a31\\\" } }}\\n    size={7}\\n    data={[\\n      { x: 1, y: 2 },\\n      { x: 2, y: 3 },\\n      { x: 3, y: 5 },\\n      { x: 4, y: 4 },\\n      { x: 5, y: 7 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryScatter` uses the standard `animate` prop. [Read about it in detail here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## bubbleProperty\\n\\n`type: string`\\n\\nThe `bubbleProperty` prop indicates which property of the data object should be used to scale data points in a bubble chart. If a `bubbleProperty` is given, `size` and `symbol` props will be ignored. Bubble charts always render circular points.\\n\\n_default:_ `bubbleProperty=\\\"z\\\"`\\n\\n```playground\\n<VictoryScatter\\n  style={{ data: { fill: \\\"#c43a31\\\" } }}\\n  bubbleProperty=\\\"amount\\\"\\n  maxBubbleSize={25}\\n  minBubbleSize={5}\\n  data={[\\n    { x: 1, y: 2, amount: 30 },\\n    { x: 2, y: 3, amount: 40 },\\n    { x: 3, y: 5, amount: 25 },\\n    { x: 4, y: 4, amount: 10 },\\n    { x: 5, y: 7, amount: 45 }\\n  ]}\\n/>\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryScatter` uses the standard `categories` prop. [Read about it in detail here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryScatter` uses the standard `containerComponent` prop. [Read about it in detail here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryScatter` uses the standard `data` prop. [Read about it in detail here](/docs/common-props#data)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\nIn addition to svg style properties and `label`, `VictoryScatter` will also preferentially use `symbol` and `size` properties supplied via data objects.\\n\\n```playground\\n<VictoryScatter\\n  data={[\\n    { x: 1, y: 2, symbol: \\\"star\\\", size: 5 },\\n    { x: 2, y: 3, symbol: \\\"square\\\", size: 7 },\\n    { x: 3, y: 5, symbol: \\\"diamond\\\", size: 3 },\\n    { x: 4, y: 4, symbol: \\\"circle\\\", size: 8 },\\n    { x: 5, y: 6, symbol: \\\"triangleUp\\\", size: 4 }\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryScatter` uses the standard `dataComponent` prop. [Read about it in detail here](/docs/common-props#datacomponent)\\n\\n`VictoryScatter` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `origin`, `polar`,`scale`, `size`, `style`, `symbol`, `x`, `y`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Point/>`\\n\\n```playground_norender\\nclass CatPoint extends React.Component {\\n  render() {\\n    const {x, y, datum} = this.props; // VictoryScatter supplies x, y and datum\\n    const cat = datum._y >= 0 ? \\\"\uD83D\uDE3B\\\" : \\\"\uD83D\uDE39\\\";\\n    return (\\n      <text x={x} y={y} fontSize={30}>\\n        {cat}\\n      </text>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart>\\n        <VictoryScatter\\n          dataComponent={<CatPoint/>}\\n          y={(d) => Math.sin(2 * Math.PI * d.x)}\\n          samples={15}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryScatter` uses the standard `domain` prop. [Read about it in detail here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryScatter` uses the standard `domainPadding` prop. [Read about it in detail here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryScatter` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryScatter` uses the standard `events` prop. [Read about it in more detail here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryScatter\\n    style={{ data: { fill: \\\"#c43a31\\\" } }}\\n    size={9}\\n    labels={() => null}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: (props) => {\\n                const fill = props.style && props.style.fill;\\n                return fill === \\\"black\\\" ? null : { style: { fill: \\\"black\\\" } };\\n              }\\n            }, {\\n              target: \\\"labels\\\",\\n              mutation: (props) => {\\n                return props.text === \\\"clicked\\\" ?\\n                  null : { text: \\\"clicked\\\" };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={sampleData}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryScatter` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryScatter` uses the standard `groupComponent` prop. [Read about it in detail here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```playground\\n<VictoryChart>\\n  <VictoryScatter\\n    groupComponent={<VictoryClipContainer/>}\\n    data={sampleData}\\n    size={20}\\n  />\\n</VictoryChart>\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryScatter` uses the standard `height` prop. [Read about it in detail here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\n`VictoryScatter` uses the standard `horizontal` prop. [Read about it in detail](/docs/common-props#horizontal)\\n\\n```jsx\\nhorizontal = { true };\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryScatter` uses the standard `labelComponent` prop. [Read about it in detail here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryScatter\\n  data={sampleData}\\n  size={20}\\n  style={{ labels: { fill: \\\"white\\\", fontSize: 18} }}\\n  labels={({ datum }) => datum.y}\\n  labelComponent={<VictoryLabel dy={8}/>}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryScatter` uses the standard `labels` prop to define labels for each point. [Read about it in more detail here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryScatter\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n/>\\n```\\n\\n## maxBubbleSize\\n\\n`type: number`\\n\\nThe `maxBubbleSize` prop sets an upper limit for scaling data points in a bubble chart. If not given, this prop will be calculated based on the `width`, `height`, and `padding` of the component.\\n\\nFor more information on bubble charts, see [`bubbleProperty`][]\\n\\n```jsx\\nmaxBubbleSize={25}\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryScatter` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={8}>\\n  <VictoryScatter data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## minBubbleSize\\n\\n`type: number`\\n\\nThe `minBubbleSize` prop sets a lower limit for scaling data points in a bubble chart. If not given, this prop will be calculated based on the calculated `maxBubbleSize`.\\n\\nFor more information on bubble charts, see [`bubbleProperty`][]\\n\\n```jsx\\nminBubbleSize={5}\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryScatter` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={0}>\\n  <VictoryScatter data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryScatter` uses the standard `padding` prop. [Read about it in detail here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryScatter` uses the standard `polar` prop. [Read about it in detail here](/docs/common-props#polar)\\n\\n```playground\\n<VictoryChart polar\\n  domain={{ y: [0, 7] }}\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryPolarAxis dependentAxis\\n    style={{ axis: { stroke: \\\"none\\\" } }}\\n    tickFormat={() => null}\\n  />\\n  <VictoryPolarAxis/>\\n  <VictoryScatter\\n    data={sampleData}\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    size={5}\\n  />\\n</VictoryChart>\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: integer`\\n\\n`VictoryScatter` uses the standard `samples` prop to generate data when plotting functions. [Read about it in more detail here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryScatter` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryScatter` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## size\\n\\n`type: number || function`\\n\\nThe `size` prop determines how to scale each data point. When this prop given as a function, it will be called for each point with the props corresponding to that point. If `size` is not specified, either in props or in a theme, it will default to 1. `size` may also be set directly on each data object.\\n\\n```playground\\n<VictoryScatter\\n  size={({ datum }) => datum.y + 2 }\\n  data={sampleData}\\n/>\\n```\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryScatter` uses the standard `sortKey` prop to determine how data should be ordered. [Read about it in more detail here](/docs/common-props#sortkey)\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryScatter` uses the standard `standalone` prop. [Read about it in detail here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryScatter` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryScatter\\n    standalone={false}\\n    width={300} height={300} padding={10}\\n    data={sampleData}\\n    size={7}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryScatter` uses the standard `style` prop. [Read about it in detail here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryScatter\\n  style={{\\n    data: {\\n      fill: ({ datum }) => datum.x === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\",\\n      stroke: ({ datum }) => datum.x === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\",\\n      fillOpacity: 0.7,\\n      strokeWidth: 3\\n    },\\n    labels: {\\n      fontSize: 15,\\n      fill: ({ datum }) => datum.x === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\"\\n    }\\n  }}\\n  size={9}\\n  data={sampleData}\\n  labels={({ datum }) => datum.x}\\n/>\\n```\\n\\n## symbol\\n\\n`type: function || options`\\n\\nThe `symbol` prop determines which symbol should be drawn to represent data points. Options are: \\\"circle\\\", \\\"diamond\\\", \\\"plus\\\", \\\"minus\\\", \\\"square\\\", \\\"star\\\", \\\"triangleDown\\\", \\\"triangleUp\\\". When this prop is given as a function, it will be evaluated for each point with the props corresponding to that point. If no `symbol` prop is specified, a circle will be rendered. `symbol` may also be set directly on each data object.\\n\\n_default:_ `symbol=\\\"circle\\\"`\\n\\n```playground\\n<VictoryScatter\\n  symbol={({ datum }) => datum.y > 3 ? \\\"triangleUp\\\" : \\\"triangleDown\\\"}\\n  size={7}\\n  data={sampleData}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryScatter` uses the standard `theme` prop. [Read about it in detail here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryScatter` uses the standard `width` prop. [Read about it in detail here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryScatter` uses the standard `x` data accessor prop. [Read about it in detail here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryScatter` uses the standard `y` data accessor prop. [Read about it in detail here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n## y0\\n\\n`type: string || integer || array[string] || function`\\n\\n**It is not common to set a `y0` prop with `VictoryScatter`, as baselines for `VictoryScatter` are only relevant for stacked charts.** [Read more about the `y0` prop here](/docs/common-props#y0)\\n\\n[animations guide]: /guides/animations\\n\\n[`bubbleproperty`]: /docs/victory-scatter#bubbleproperty\\n\\n[data accessors guide]: /guides/data-accessors\\n\\n[custom components guide]: /guides/custom-components\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\\n[`victorychart`]: /docs/victory-chart\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\",\"content\":\"\\n# VictoryScatter\\n\\nVictoryScatter renders a dataset as a series of points. VictoryScatter can be composed with [`VictoryChart`][] to create scatter plots.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domain={{ x: [0, 5], y: [0, 7] }}\\n>\\n  <VictoryScatter\\n    style={{ data: { fill: \\\"#c43a31\\\" } }}\\n    size={7}\\n    data={[\\n      { x: 1, y: 2 },\\n      { x: 2, y: 3 },\\n      { x: 3, y: 5 },\\n      { x: 4, y: 4 },\\n      { x: 5, y: 7 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryScatter` uses the standard `animate` prop. [Read about it in detail here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## bubbleProperty\\n\\n`type: string`\\n\\nThe `bubbleProperty` prop indicates which property of the data object should be used to scale data points in a bubble chart. If a `bubbleProperty` is given, `size` and `symbol` props will be ignored. Bubble charts always render circular points.\\n\\n_default:_ `bubbleProperty=\\\"z\\\"`\\n\\n```playground\\n<VictoryScatter\\n  style={{ data: { fill: \\\"#c43a31\\\" } }}\\n  bubbleProperty=\\\"amount\\\"\\n  maxBubbleSize={25}\\n  minBubbleSize={5}\\n  data={[\\n    { x: 1, y: 2, amount: 30 },\\n    { x: 2, y: 3, amount: 40 },\\n    { x: 3, y: 5, amount: 25 },\\n    { x: 4, y: 4, amount: 10 },\\n    { x: 5, y: 7, amount: 45 }\\n  ]}\\n/>\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryScatter` uses the standard `categories` prop. [Read about it in detail here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryScatter` uses the standard `containerComponent` prop. [Read about it in detail here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryScatter` uses the standard `data` prop. [Read about it in detail here](/docs/common-props#data)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\nIn addition to svg style properties and `label`, `VictoryScatter` will also preferentially use `symbol` and `size` properties supplied via data objects.\\n\\n```playground\\n<VictoryScatter\\n  data={[\\n    { x: 1, y: 2, symbol: \\\"star\\\", size: 5 },\\n    { x: 2, y: 3, symbol: \\\"square\\\", size: 7 },\\n    { x: 3, y: 5, symbol: \\\"diamond\\\", size: 3 },\\n    { x: 4, y: 4, symbol: \\\"circle\\\", size: 8 },\\n    { x: 5, y: 6, symbol: \\\"triangleUp\\\", size: 4 }\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryScatter` uses the standard `dataComponent` prop. [Read about it in detail here](/docs/common-props#datacomponent)\\n\\n`VictoryScatter` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `origin`, `polar`,`scale`, `size`, `style`, `symbol`, `x`, `y`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Point/>`\\n\\n```playground_norender\\nclass CatPoint extends React.Component {\\n  render() {\\n    const {x, y, datum} = this.props; // VictoryScatter supplies x, y and datum\\n    const cat = datum._y >= 0 ? \\\"\uD83D\uDE3B\\\" : \\\"\uD83D\uDE39\\\";\\n    return (\\n      <text x={x} y={y} fontSize={30}>\\n        {cat}\\n      </text>\\n    );\\n  }\\n}\\n\\nclass App extends React.Component {\\n  render() {\\n    return (\\n      <VictoryChart>\\n        <VictoryScatter\\n          dataComponent={<CatPoint/>}\\n          y={(d) => Math.sin(2 * Math.PI * d.x)}\\n          samples={15}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n}\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryScatter` uses the standard `domain` prop. [Read about it in detail here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryScatter` uses the standard `domainPadding` prop. [Read about it in detail here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryScatter` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryScatter` uses the standard `events` prop. [Read about it in more detail here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryScatter\\n    style={{ data: { fill: \\\"#c43a31\\\" } }}\\n    size={9}\\n    labels={() => null}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: (props) => {\\n                const fill = props.style && props.style.fill;\\n                return fill === \\\"black\\\" ? null : { style: { fill: \\\"black\\\" } };\\n              }\\n            }, {\\n              target: \\\"labels\\\",\\n              mutation: (props) => {\\n                return props.text === \\\"clicked\\\" ?\\n                  null : { text: \\\"clicked\\\" };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={sampleData}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryScatter` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryScatter` uses the standard `groupComponent` prop. [Read about it in detail here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```playground\\n<VictoryChart>\\n  <VictoryScatter\\n    groupComponent={<VictoryClipContainer/>}\\n    data={sampleData}\\n    size={20}\\n  />\\n</VictoryChart>\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryScatter` uses the standard `height` prop. [Read about it in detail here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\n`VictoryScatter` uses the standard `horizontal` prop. [Read about it in detail](/docs/common-props#horizontal)\\n\\n```jsx\\nhorizontal = { true };\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryScatter` uses the standard `labelComponent` prop. [Read about it in detail here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryScatter\\n  data={sampleData}\\n  size={20}\\n  style={{ labels: { fill: \\\"white\\\", fontSize: 18} }}\\n  labels={({ datum }) => datum.y}\\n  labelComponent={<VictoryLabel dy={8}/>}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryScatter` uses the standard `labels` prop to define labels for each point. [Read about it in more detail here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryScatter\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n/>\\n```\\n\\n## maxBubbleSize\\n\\n`type: number`\\n\\nThe `maxBubbleSize` prop sets an upper limit for scaling data points in a bubble chart. If not given, this prop will be calculated based on the `width`, `height`, and `padding` of the component.\\n\\nFor more information on bubble charts, see [`bubbleProperty`][]\\n\\n```jsx\\nmaxBubbleSize={25}\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryScatter` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={8}>\\n  <VictoryScatter data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## minBubbleSize\\n\\n`type: number`\\n\\nThe `minBubbleSize` prop sets a lower limit for scaling data points in a bubble chart. If not given, this prop will be calculated based on the calculated `maxBubbleSize`.\\n\\nFor more information on bubble charts, see [`bubbleProperty`][]\\n\\n```jsx\\nminBubbleSize={5}\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryScatter` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={0}>\\n  <VictoryScatter data={sampleData}/>\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryScatter` uses the standard `padding` prop. [Read about it in detail here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryScatter` uses the standard `polar` prop. [Read about it in detail here](/docs/common-props#polar)\\n\\n```playground\\n<VictoryChart polar\\n  domain={{ y: [0, 7] }}\\n  theme={VictoryTheme.material}\\n>\\n  <VictoryPolarAxis dependentAxis\\n    style={{ axis: { stroke: \\\"none\\\" } }}\\n    tickFormat={() => null}\\n  />\\n  <VictoryPolarAxis/>\\n  <VictoryScatter\\n    data={sampleData}\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    size={5}\\n  />\\n</VictoryChart>\\n```\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: integer`\\n\\n`VictoryScatter` uses the standard `samples` prop to generate data when plotting functions. [Read about it in more detail here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryScatter` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryScatter` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## size\\n\\n`type: number || function`\\n\\nThe `size` prop determines how to scale each data point. When this prop given as a function, it will be called for each point with the props corresponding to that point. If `size` is not specified, either in props or in a theme, it will default to 1. `size` may also be set directly on each data object.\\n\\n```playground\\n<VictoryScatter\\n  size={({ datum }) => datum.y + 2 }\\n  data={sampleData}\\n/>\\n```\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryScatter` uses the standard `sortKey` prop to determine how data should be ordered. [Read about it in more detail here](/docs/common-props#sortkey)\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryScatter` uses the standard `standalone` prop. [Read about it in detail here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryScatter` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryScatter\\n    standalone={false}\\n    width={300} height={300} padding={10}\\n    data={sampleData}\\n    size={7}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryScatter` uses the standard `style` prop. [Read about it in detail here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryScatter\\n  style={{\\n    data: {\\n      fill: ({ datum }) => datum.x === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\",\\n      stroke: ({ datum }) => datum.x === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\",\\n      fillOpacity: 0.7,\\n      strokeWidth: 3\\n    },\\n    labels: {\\n      fontSize: 15,\\n      fill: ({ datum }) => datum.x === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\"\\n    }\\n  }}\\n  size={9}\\n  data={sampleData}\\n  labels={({ datum }) => datum.x}\\n/>\\n```\\n\\n## symbol\\n\\n`type: function || options`\\n\\nThe `symbol` prop determines which symbol should be drawn to represent data points. Options are: \\\"circle\\\", \\\"diamond\\\", \\\"plus\\\", \\\"minus\\\", \\\"square\\\", \\\"star\\\", \\\"triangleDown\\\", \\\"triangleUp\\\". When this prop is given as a function, it will be evaluated for each point with the props corresponding to that point. If no `symbol` prop is specified, a circle will be rendered. `symbol` may also be set directly on each data object.\\n\\n_default:_ `symbol=\\\"circle\\\"`\\n\\n```playground\\n<VictoryScatter\\n  symbol={({ datum }) => datum.y > 3 ? \\\"triangleUp\\\" : \\\"triangleDown\\\"}\\n  size={7}\\n  data={sampleData}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryScatter` uses the standard `theme` prop. [Read about it in detail here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryScatter` uses the standard `width` prop. [Read about it in detail here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryScatter` uses the standard `x` data accessor prop. [Read about it in detail here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryScatter` uses the standard `y` data accessor prop. [Read about it in detail here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n## y0\\n\\n`type: string || integer || array[string] || function`\\n\\n**It is not common to set a `y0` prop with `VictoryScatter`, as baselines for `VictoryScatter` are only relevant for stacked charts.** [Read more about the `y0` prop here](/docs/common-props#y0)\\n\\n[animations guide]: /guides/animations\\n[`bubbleproperty`]: /docs/victory-scatter#bubbleproperty\\n[data accessors guide]: /guides/data-accessors\\n[custom components guide]: /guides/custom-components\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n[`victorychart`]: /docs/victory-chart\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\"},{\"data\":{\"id\":25,\"title\":\"VictoryStack\",\"category\":\"charts\",\"type\":\"docs\",\"scope\":[\"sampleData\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryStack\",\"depth\":1,\"slug\":\"victory-stack\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"colorScale\",\"depth\":2,\"slug\":\"color-scale\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"xOffset\",\"depth\":2,\"slug\":\"x-offset\"}],\"slug\":\"victory-stack\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryStack\",\"depth\":1,\"slug\":\"victory-stack\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"colorScale\",\"depth\":2,\"slug\":\"color-scale\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"xOffset\",\"depth\":2,\"slug\":\"x-offset\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 25\\ntitle: VictoryStack\\ncategory: charts\\ntype: docs\\nscope:\\n  - sampleData\\n---\\n\\n# VictoryStack\\n\\n`VictoryStack` is a wrapper component that renders a given set of children in a stacked layout. Like other wrapper components, `VictoryStack` also reconciles the domain and layout for all its children, and coordinates animations and shared events.\\n\\n`VictoryStack` works with:\\n[VictoryArea][], [VictoryBar][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryGroup][],[VictoryLine][], [VictoryScatter][], [VictoryHistogram][]\\n\\n`VictoryStack` _should not_ be used with [VictoryAxis][] children.\\n\\n`VictoryStack` does not support stacking `VictoryHistogram` with other Victory components.\\n\\n```playground\\n<VictoryStack>\\n  <VictoryArea\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryArea\\n    data={[{x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryArea\\n    data={[{x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}]}\\n  />\\n</VictoryStack>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryStack` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n**note: `VictoryStack` controls the `animate` prop of its children when set**\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryStack` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n**note: When this prop is set, `VictoryGroup` controls the `categories` prop of its children.**\\n\\n```jsx\\ncategories={[\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"]}\\n```\\n\\n## children\\n\\n`type: element || array[element]`\\n\\n`VictoryStack` works with any combination of the following children: [VictoryArea][], [VictoryBar][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryGroup][], [VictoryLine][], [VictoryScatter][], [VictoryStack][], and [VictoryVoronoi][]. Children supplied to `VictoryGroup` will be cloned and rendered with new props so that all children share common props such as `domain` and `scale`.\\n\\n## colorScale\\n\\n`type: array[string]`\\n\\nThe `colorScale` prop is an optional prop that defines a color scale to be applied to the children of `VictoryStack`. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: \\\"grayscale\\\", \\\"qualitative\\\", \\\"heatmap\\\", \\\"warm\\\", \\\"cool\\\", \\\"red\\\", \\\"green\\\", \\\"blue\\\". `VictoryGroup` will assign colors to its children by index, unless they are explicitly specified in styles. Colors will repeat when there are more children than colors in the provided `colorScale`.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryStack\\n  colorScale={[\\\"tomato\\\", \\\"orange\\\", \\\"gold\\\"]}\\n>\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}]}\\n  />\\n</VictoryStack>\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryStack` uses the standard `containerComponent` prop. [Read about it in detail here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryStack` uses the standard `domain` prop. [Read about it in detail here](/docs/common-props#domain)\\n\\n**note: `VictoryStack` controls the `domain` prop of its children.**\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryStack` uses the standard `domainPadding` prop. [Read about it in detail here](/docs/common-props#domainpadding)\\n\\n**note: `VictoryStack` controls the `domainPadding` prop of its children.**\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryStack` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryStack` uses the standard `events` prop. [Read about it in more detail here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n**Note: `VictoryStack` coordinates events between children using the `VictorySharedEvents` and the `sharedEvents` prop**\\n\\n```playground\\n<VictoryStack\\n  events={[{\\n    childName: \\\"all\\\",\\n    target: \\\"data\\\",\\n    eventHandlers: {\\n      onClick: () => {\\n        return [\\n          {\\n            childName: \\\"area-2\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"gold\\\" }) })\\n          }, {\\n            childName: \\\"area-3\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"orange\\\" }) })\\n          }, {\\n            childName: \\\"area-4\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"red\\\" }) })\\n          }\\n        ];\\n      }\\n    }\\n  }]}\\n>\\n  <VictoryArea name=\\\"area-1\\\" data={sampleData}/>\\n  <VictoryArea name=\\\"area-2\\\" data={sampleData}/>\\n  <VictoryArea name=\\\"area-3\\\" data={sampleData}/>\\n  <VictoryArea name=\\\"area-4\\\" data={sampleData}/>\\n</VictoryStack>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryStack` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryStack` uses the standard `groupComponent` prop. [Read about it in detail here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryStack` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe `horizontal` prop determines whether the children supplied to `VictoryStack` will be laid out vertically or horizontally. The bars will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true. [Read about the horizontal prop in detail](/docs/common-props#horizontal)\\n\\n## labelComponent\\n\\n`type: element`\\n\\nThe `labelComponent` prop takes a component instance which will be used to render labels for each stack. The new element created from the passed `labelComponent` will be supplied with the following props: `x`, `y`, `index`, `datum`, `verticalAnchor`, `textAnchor`, `angle`, `style`, `text`, and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above.\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```jsx\\nlabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\nThe `labels` prop defines labels that will appear above each stack of data. This prop should be given as an array of values or as a function. When this prop is given as a function, it will be evaluated for each label with the props corresponding to that label. If given as an array, the number of elements in the array should be equal to the length of the data array. Group labels will appear above the center series of the group, and will override the `labels` prop of child components. Omit this prop, and set `labels` props on children for individual labels.\\n\\n```jsx\\nlabels={[\\\"spring\\\", \\\"summer\\\", \\\"fall\\\", \\\"winter\\\"]}`, `labels={({ datum }) => datum.title}\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryStack` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryStack` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryStack` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryStack` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryStack` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n**note: `VictoryStack` controls the `scale` prop of its children.**\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryStack` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryStack` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryGroup` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryStack` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\nStyles on children of `VictoryGroup` will override styles set on the `VictoryGroup` component.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryStack\\n  style={{\\n    data: { stroke: \\\"black\\\", strokeWidth: 3 }\\n  }}\\n>\\n  <VictoryBar\\n    style={{ data: { fill: \\\"#c43a31\\\" } }}\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}]}\\n  />\\n</VictoryStack>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryStack` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryStack` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## xOffset\\n\\n`type: number`\\n\\nThe `xOffset` prop is used for grouping stacks of bars. This prop will be set by the `VictoryGroup` component wrapper, or can be set manually.\\n\\n[animations guide]: /guides/animations\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\\n[victoryarea]: /docs/victory-area\\n\\n[victoryaxis]: /docs/victory-axis\\n\\n[victorybar]: /docs/victory-bar\\n\\n[victorycandlestick]: /docs/victory-candlestick\\n\\n[victoryerrorbar]: /docs/victory-errorbar\\n\\n[victorygroup]: /docs/victory-group\\n\\n[victoryline]: /docs/victory-line\\n\\n[victoryscatter]: /docs/victory-scatter\\n\\n[victoryhistogram]: /docs/victory-histogram\\n\\n[victorystack]: /docs/victory-stack\\n\\n[victoryvoronoi]: /docs/victory-voronoi\\n\\n[victorylabel]: /docs/victory-label\\n\",\"content\":\"\\n# VictoryStack\\n\\n`VictoryStack` is a wrapper component that renders a given set of children in a stacked layout. Like other wrapper components, `VictoryStack` also reconciles the domain and layout for all its children, and coordinates animations and shared events.\\n\\n`VictoryStack` works with:\\n[VictoryArea][], [VictoryBar][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryGroup][],[VictoryLine][], [VictoryScatter][], [VictoryHistogram][]\\n\\n`VictoryStack` _should not_ be used with [VictoryAxis][] children.\\n\\n`VictoryStack` does not support stacking `VictoryHistogram` with other Victory components.\\n\\n```playground\\n<VictoryStack>\\n  <VictoryArea\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryArea\\n    data={[{x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryArea\\n    data={[{x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}]}\\n  />\\n</VictoryStack>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryStack` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n**note: `VictoryStack` controls the `animate` prop of its children when set**\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryStack` uses the standard `categories` prop. [Read about it here](/docs/common-props#categories)\\n\\n**note: When this prop is set, `VictoryGroup` controls the `categories` prop of its children.**\\n\\n```jsx\\ncategories={[\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"]}\\n```\\n\\n## children\\n\\n`type: element || array[element]`\\n\\n`VictoryStack` works with any combination of the following children: [VictoryArea][], [VictoryBar][], [VictoryCandlestick][], [VictoryErrorBar][], [VictoryGroup][], [VictoryLine][], [VictoryScatter][], [VictoryStack][], and [VictoryVoronoi][]. Children supplied to `VictoryGroup` will be cloned and rendered with new props so that all children share common props such as `domain` and `scale`.\\n\\n## colorScale\\n\\n`type: array[string]`\\n\\nThe `colorScale` prop is an optional prop that defines a color scale to be applied to the children of `VictoryStack`. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: \\\"grayscale\\\", \\\"qualitative\\\", \\\"heatmap\\\", \\\"warm\\\", \\\"cool\\\", \\\"red\\\", \\\"green\\\", \\\"blue\\\". `VictoryGroup` will assign colors to its children by index, unless they are explicitly specified in styles. Colors will repeat when there are more children than colors in the provided `colorScale`.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryStack\\n  colorScale={[\\\"tomato\\\", \\\"orange\\\", \\\"gold\\\"]}\\n>\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}]}\\n  />\\n</VictoryStack>\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryStack` uses the standard `containerComponent` prop. [Read about it in detail here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryStack` uses the standard `domain` prop. [Read about it in detail here](/docs/common-props#domain)\\n\\n**note: `VictoryStack` controls the `domain` prop of its children.**\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryStack` uses the standard `domainPadding` prop. [Read about it in detail here](/docs/common-props#domainpadding)\\n\\n**note: `VictoryStack` controls the `domainPadding` prop of its children.**\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryStack` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryStack` uses the standard `events` prop. [Read about it in more detail here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n**Note: `VictoryStack` coordinates events between children using the `VictorySharedEvents` and the `sharedEvents` prop**\\n\\n```playground\\n<VictoryStack\\n  events={[{\\n    childName: \\\"all\\\",\\n    target: \\\"data\\\",\\n    eventHandlers: {\\n      onClick: () => {\\n        return [\\n          {\\n            childName: \\\"area-2\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"gold\\\" }) })\\n          }, {\\n            childName: \\\"area-3\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"orange\\\" }) })\\n          }, {\\n            childName: \\\"area-4\\\",\\n            target: \\\"data\\\",\\n            mutation: (props) => ({ style: Object.assign({}, props.style, { fill: \\\"red\\\" }) })\\n          }\\n        ];\\n      }\\n    }\\n  }]}\\n>\\n  <VictoryArea name=\\\"area-1\\\" data={sampleData}/>\\n  <VictoryArea name=\\\"area-2\\\" data={sampleData}/>\\n  <VictoryArea name=\\\"area-3\\\" data={sampleData}/>\\n  <VictoryArea name=\\\"area-4\\\" data={sampleData}/>\\n</VictoryStack>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryStack` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryStack` uses the standard `groupComponent` prop. [Read about it in detail here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryStack` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe `horizontal` prop determines whether the children supplied to `VictoryStack` will be laid out vertically or horizontally. The bars will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true. [Read about the horizontal prop in detail](/docs/common-props#horizontal)\\n\\n## labelComponent\\n\\n`type: element`\\n\\nThe `labelComponent` prop takes a component instance which will be used to render labels for each stack. The new element created from the passed `labelComponent` will be supplied with the following props: `x`, `y`, `index`, `datum`, `verticalAnchor`, `textAnchor`, `angle`, `style`, `text`, and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above.\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```jsx\\nlabelComponent={<VictoryLabel dy={20}/>}\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\nThe `labels` prop defines labels that will appear above each stack of data. This prop should be given as an array of values or as a function. When this prop is given as a function, it will be evaluated for each label with the props corresponding to that label. If given as an array, the number of elements in the array should be equal to the length of the data array. Group labels will appear above the center series of the group, and will override the `labels` prop of child components. Omit this prop, and set `labels` props on children for individual labels.\\n\\n```jsx\\nlabels={[\\\"spring\\\", \\\"summer\\\", \\\"fall\\\", \\\"winter\\\"]}`, `labels={({ datum }) => datum.title}\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryStack` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryStack` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryStack` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryStack` uses the standard `polar` prop. [Read about it here](/docs/common-props#polar)\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryStack` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n**note: `VictoryStack` controls the `scale` prop of its children.**\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryStack` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryStack` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryGroup` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryStack` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\nStyles on children of `VictoryGroup` will override styles set on the `VictoryGroup` component.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryStack\\n  style={{\\n    data: { stroke: \\\"black\\\", strokeWidth: 3 }\\n  }}\\n>\\n  <VictoryBar\\n    style={{ data: { fill: \\\"#c43a31\\\" } }}\\n    data={[{x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}]}\\n  />\\n  <VictoryBar\\n    data={[{x: \\\"a\\\", y: 3}, {x: \\\"b\\\", y: 2}, {x: \\\"c\\\", y: 6}]}\\n  />\\n</VictoryStack>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryStack` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryStack` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## xOffset\\n\\n`type: number`\\n\\nThe `xOffset` prop is used for grouping stacks of bars. This prop will be set by the `VictoryGroup` component wrapper, or can be set manually.\\n\\n[animations guide]: /guides/animations\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n[victoryarea]: /docs/victory-area\\n[victoryaxis]: /docs/victory-axis\\n[victorybar]: /docs/victory-bar\\n[victorycandlestick]: /docs/victory-candlestick\\n[victoryerrorbar]: /docs/victory-errorbar\\n[victorygroup]: /docs/victory-group\\n[victoryline]: /docs/victory-line\\n[victoryscatter]: /docs/victory-scatter\\n[victoryhistogram]: /docs/victory-histogram\\n[victorystack]: /docs/victory-stack\\n[victoryvoronoi]: /docs/victory-voronoi\\n[victorylabel]: /docs/victory-label\\n\"},{\"data\":{\"id\":30,\"title\":\"VictoryVoronoi\",\"category\":\"charts\",\"type\":\"docs\",\"scope\":[\"sampleData\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryVoronoi\",\"depth\":1,\"slug\":\"victory-voronoi\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"size\",\"depth\":2,\"slug\":\"size\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"},{\"type\":\"heading\",\"value\":\"y0\",\"depth\":2,\"slug\":\"y-0\"}],\"slug\":\"victory-voronoi\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryVoronoi\",\"depth\":1,\"slug\":\"victory-voronoi\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"categories\",\"depth\":2,\"slug\":\"categories\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"samples\",\"depth\":2,\"slug\":\"samples\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"size\",\"depth\":2,\"slug\":\"size\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"},{\"type\":\"heading\",\"value\":\"y0\",\"depth\":2,\"slug\":\"y-0\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 30\\ntitle: VictoryVoronoi\\ncategory: charts\\ntype: docs\\nscope:\\n  - sampleData\\n---\\n\\n# VictoryVoronoi\\n\\n`VictoryVoronoi` renders a dataset as a series polygons optimized for the nearest data point. `VictoryVoronoi` can be composed with [`VictoryChart`][] to create voronoi overlays for charts, which are useful for attaching events to pieces of data that are otherwise difficult to interact with, usually due to their size.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domain={{ x: [0, 5], y: [0, 7] }}\\n>\\n  <VictoryVoronoi\\n    style={{ data: { stroke: \\\"#c43a31\\\", strokeWidth: 2 } }}\\n    data={[\\n      { x: 1, y: 2 },\\n      { x: 2, y: 3 },\\n      { x: 3, y: 5 },\\n      { x: 4, y: 4 },\\n      { x: 5, y: 7 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryVoronoi` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryVoronoi` uses the standard `categories` prop. [Read about it in detail here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryVoronoi` uses the standard `containerComponent` prop. [Read about it in detail here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer dimension=\\\"x\\\"/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryVoronoi` uses the standard `data` prop. [Read about it in detail here](/docs/common-props#data)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryVoronoi\\n  style={{ data: { stroke: \\\"#c43a31\\\", strokeWidth: 2 } }}\\n  data={[\\n    { x: 1, y: 2 },\\n    { x: 2, y: 3 },\\n    { x: 3, y: 5 },\\n    { x: 4, y: 4 },\\n    { x: 5, y: 6 }\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryVoronoi` uses the standard `dataComponent` prop. [Read about it in detail here](/docs/common-props#datacomponent)\\n\\n`VictoryVoronoi` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `origin`, `polar`, `polygon`, `scale`, `size`, `style`, `x`, `y`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Voronoi/>`\\n\\n```jsx\\ndataComponent={<Voronoi events={{ onClick: handleClick }}/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryVoronoi` uses the standard `domain` prop. [Read about it in detail here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryVoronoi` uses the standard `domainPadding` prop. [Read about it in detail here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryVoronoi` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryVoronoi` uses the standard `events` prop. [Read about it in more detail here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryVoronoi\\n    style={{ data: { stroke: \\\"#c43a31\\\", strokeWidth: 2 } }}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [{\\n            target: \\\"data\\\",\\n            mutation: (props) => {\\n              const fill = props.style && props.style.fill;\\n              return fill === \\\"black\\\" ? null : { style: { fill: \\\"black\\\" } };\\n            }\\n          }];\\n        }\\n      }\\n    }]}\\n    data={sampleData}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryVoronoi` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryVoronoi` uses the standard `groupComponent` prop. [Read about it in detail here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryVoronoi` uses the standard `height` prop. [Read about it in detail here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\n`VictoryVoronoi` uses the standard `horizontal` prop. [Read about it in detail](/docs/common-props#horizontal)\\n\\n```jsx\\nhorizontal = { true };\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryVoronoi` uses the standard `labelComponent` prop. [Read about it in detail here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryVoronoi\\n  data={sampleData}\\n  style={{\\n    data: { stroke: \\\"#c43a31\\\", strokeWidth: 2 },\\n    labels: { fontSize: 18}\\n  }}\\n  labels={({ datum }) => datum.y}\\n  labelComponent={<VictoryLabel dx={-10}/>}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryVoronoi` uses the standard `labels` prop to define labels for each point. [Read about it in more detail here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryVoronoi\\n  data={sampleData}\\n  style={{\\n    data: { stroke: \\\"#c43a31\\\", strokeWidth: 2 },\\n    labels: { fontSize: 18}\\n  }}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryVoronoi` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryVoronoi` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryVoronoi` uses the standard `padding` prop. [Read about it in detail here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryVoronoi` uses the standard `polar` prop. [Read about it in detail here](/docs/common-props#polar)\\n\\n**Note:** Polar Charts are not yet supported for `VictoryVoronoi`\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: number`\\n\\n`VictoryVoronoi` uses the standard `samples` prop to generate data when plotting functions. [Read about it in more detail here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryVoronoi` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryVoronoi` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## size\\n\\n`type: number`\\n\\nThe size prop determines the maximum size of each voronoi area. When this prop is given, a circular area of the specified size will be rendered, and clipped where it would overlap with other voronoi areas. If this prop is not given, the entire voronoi area will be used.\\n\\n```playground\\n<VictoryVoronoi\\n  style={{\\n    data: { stroke: \\\"#c43a31\\\", strokeWidth: 2 }\\n  }}\\n  data={sampleData}\\n  size={50}\\n/>\\n```\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryVoronoi` uses the standard `sortKey` prop to determine how data should be ordered. [Read about it in more detail here](/docs/common-props#sortkey)\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryVoronoi` uses the standard `standalone` prop. [Read about it in detail here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryVoronoi` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryVoronoi\\n    standalone={false}\\n    width={300} height={300} padding={10}\\n    style={{ data: { stroke: \\\"black\\\", strokeWidth: 2 } }}\\n    data={sampleData}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryVoronoi` uses the standard `style` prop. [Read about it in detail here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryVoronoi\\n  style={{\\n    data: {\\n      stroke: \\\"#c43a31\\\", strokeWidth: 3\\n    },\\n    labels: {\\n      fontSize: 15, fill: \\\"#c43a31\\\", padding: 15\\n    }\\n  }}\\n  size={50}\\n  data={sampleData}\\n  labels={({ datum }) => datum.x}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryVoronoi` uses the standard `theme` prop. [Read about it in detail here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryVoronoi` uses the standard `width` prop. [Read about it in detail here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryVoronoi` uses the standard `x` data accessor prop. [Read about it in detail here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryVoronoi` uses the standard `y` data accessor prop. [Read about it in detail here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n## y0\\n\\n`type: string || integer || array[string] || function`\\n\\n**It is not common to set a `y0` prop with `VictoryVoronoi`, as baselines for `VictoryVoronoi` are only relevant for stacked charts.** [Read more about the `y0` prop here](/docs/common-props#y0)\\n\\n[animations guide]: /guides/animations\\n\\n[data accessors guide]: /guides/data-accessors\\n\\n[custom components guide]: /guides/custom-components\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\\n[`victorychart`]: /docs/victory-chart\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\",\"content\":\"\\n# VictoryVoronoi\\n\\n`VictoryVoronoi` renders a dataset as a series polygons optimized for the nearest data point. `VictoryVoronoi` can be composed with [`VictoryChart`][] to create voronoi overlays for charts, which are useful for attaching events to pieces of data that are otherwise difficult to interact with, usually due to their size.\\n\\n```playground\\n<VictoryChart\\n  theme={VictoryTheme.material}\\n  domain={{ x: [0, 5], y: [0, 7] }}\\n>\\n  <VictoryVoronoi\\n    style={{ data: { stroke: \\\"#c43a31\\\", strokeWidth: 2 } }}\\n    data={[\\n      { x: 1, y: 2 },\\n      { x: 2, y: 3 },\\n      { x: 3, y: 5 },\\n      { x: 4, y: 4 },\\n      { x: 5, y: 7 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryVoronoi` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## categories\\n\\n`type: array[string] || { x: array[string], y: array[string] }`\\n\\n`VictoryVoronoi` uses the standard `categories` prop. [Read about it in detail here](/docs/common-props#categories)\\n\\n```jsx\\ncategories={{ x: [\\\"dogs\\\", \\\"cats\\\", \\\"mice\\\"] }}\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryVoronoi` uses the standard `containerComponent` prop. [Read about it in detail here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer dimension=\\\"x\\\"/>}\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryVoronoi` uses the standard `data` prop. [Read about it in detail here](/docs/common-props#data)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryVoronoi\\n  style={{ data: { stroke: \\\"#c43a31\\\", strokeWidth: 2 } }}\\n  data={[\\n    { x: 1, y: 2 },\\n    { x: 2, y: 3 },\\n    { x: 3, y: 5 },\\n    { x: 4, y: 4 },\\n    { x: 5, y: 6 }\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryVoronoi` uses the standard `dataComponent` prop. [Read about it in detail here](/docs/common-props#datacomponent)\\n\\n`VictoryVoronoi` supplies the following props to its `dataComponent`: `data`, `datum`, `index`, `origin`, `polar`, `polygon`, `scale`, `size`, `style`, `x`, `y`\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Voronoi/>`\\n\\n```jsx\\ndataComponent={<Voronoi events={{ onClick: handleClick }}/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryVoronoi` uses the standard `domain` prop. [Read about it in detail here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryVoronoi` uses the standard `domainPadding` prop. [Read about it in detail here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryVoronoi` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryVoronoi` uses the standard `events` prop. [Read about it in more detail here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryVoronoi\\n    style={{ data: { stroke: \\\"#c43a31\\\", strokeWidth: 2 } }}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [{\\n            target: \\\"data\\\",\\n            mutation: (props) => {\\n              const fill = props.style && props.style.fill;\\n              return fill === \\\"black\\\" ? null : { style: { fill: \\\"black\\\" } };\\n            }\\n          }];\\n        }\\n      }\\n    }]}\\n    data={sampleData}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryVoronoi` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryVoronoi` uses the standard `groupComponent` prop. [Read about it in detail here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryVoronoi` uses the standard `height` prop. [Read about it in detail here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\n`VictoryVoronoi` uses the standard `horizontal` prop. [Read about it in detail](/docs/common-props#horizontal)\\n\\n```jsx\\nhorizontal = { true };\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryVoronoi` uses the standard `labelComponent` prop. [Read about it in detail here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryVoronoi\\n  data={sampleData}\\n  style={{\\n    data: { stroke: \\\"#c43a31\\\", strokeWidth: 2 },\\n    labels: { fontSize: 18}\\n  }}\\n  labels={({ datum }) => datum.y}\\n  labelComponent={<VictoryLabel dx={-10}/>}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryVoronoi` uses the standard `labels` prop to define labels for each point. [Read about it in more detail here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryVoronoi\\n  data={sampleData}\\n  style={{\\n    data: { stroke: \\\"#c43a31\\\", strokeWidth: 2 },\\n    labels: { fontSize: 18}\\n  }}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryVoronoi` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryVoronoi` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\n**The `origin` prop is only used by polar charts, and is usually controlled by `VictoryChart`. It will not typically be necessary to set an `origin` prop manually**\\n\\n[Read about the `origin` prop in detail](/docs/common-props#origin)\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryVoronoi` uses the standard `padding` prop. [Read about it in detail here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n`VictoryVoronoi` uses the standard `polar` prop. [Read about it in detail here](/docs/common-props#polar)\\n\\n**Note:** Polar Charts are not yet supported for `VictoryVoronoi`\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## samples\\n\\n`type: number`\\n\\n`VictoryVoronoi` uses the standard `samples` prop to generate data when plotting functions. [Read about it in more detail here](/docs/common-props#samples)\\n\\n_default:_ `samples={50}`\\n\\n```jsx\\nsamples={100}\\n```\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryVoronoi` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryVoronoi` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## size\\n\\n`type: number`\\n\\nThe size prop determines the maximum size of each voronoi area. When this prop is given, a circular area of the specified size will be rendered, and clipped where it would overlap with other voronoi areas. If this prop is not given, the entire voronoi area will be used.\\n\\n```playground\\n<VictoryVoronoi\\n  style={{\\n    data: { stroke: \\\"#c43a31\\\", strokeWidth: 2 }\\n  }}\\n  data={sampleData}\\n  size={50}\\n/>\\n```\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryVoronoi` uses the standard `sortKey` prop to determine how data should be ordered. [Read about it in more detail here](/docs/common-props#sortkey)\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryVoronoi` uses the standard `standalone` prop. [Read about it in detail here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryVoronoi` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryVoronoi\\n    standalone={false}\\n    width={300} height={300} padding={10}\\n    style={{ data: { stroke: \\\"black\\\", strokeWidth: 2 } }}\\n    data={sampleData}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryVoronoi` uses the standard `style` prop. [Read about it in detail here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryVoronoi\\n  style={{\\n    data: {\\n      stroke: \\\"#c43a31\\\", strokeWidth: 3\\n    },\\n    labels: {\\n      fontSize: 15, fill: \\\"#c43a31\\\", padding: 15\\n    }\\n  }}\\n  size={50}\\n  data={sampleData}\\n  labels={({ datum }) => datum.x}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryVoronoi` uses the standard `theme` prop. [Read about it in detail here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryVoronoi` uses the standard `width` prop. [Read about it in detail here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryVoronoi` uses the standard `x` data accessor prop. [Read about it in detail here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n## y\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryVoronoi` uses the standard `y` data accessor prop. [Read about it in detail here](/docs/common-props#y)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\ny={(d) => d.value + d.error}\\n```\\n\\n## y0\\n\\n`type: string || integer || array[string] || function`\\n\\n**It is not common to set a `y0` prop with `VictoryVoronoi`, as baselines for `VictoryVoronoi` are only relevant for stacked charts.** [Read more about the `y0` prop here](/docs/common-props#y0)\\n\\n[animations guide]: /guides/animations\\n[data accessors guide]: /guides/data-accessors\\n[custom components guide]: /guides/custom-components\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n[`victorychart`]: /docs/victory-chart\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\"},{\"data\":{\"id\":35,\"title\":\"VictoryHistogram\",\"category\":\"charts\",\"type\":\"docs\",\"scope\":[\"sampleHistogramData\",\"sampleHistogramDateData\",\"d3Scale\",\"d3Time\",\"d3Array\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryHistogram\",\"depth\":1,\"slug\":\"victory-histogram\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"bins\",\"depth\":2,\"slug\":\"bins\"},{\"type\":\"heading\",\"value\":\"binSpacing\",\"depth\":2,\"slug\":\"bin-spacing\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"cornerRadius\",\"depth\":2,\"slug\":\"corner-radius\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"}],\"slug\":\"victory-histogram\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryHistogram\",\"depth\":1,\"slug\":\"victory-histogram\",\"category\":\"charts\",\"children\":[{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"bins\",\"depth\":2,\"slug\":\"bins\"},{\"type\":\"heading\",\"value\":\"binSpacing\",\"depth\":2,\"slug\":\"bin-spacing\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"cornerRadius\",\"depth\":2,\"slug\":\"corner-radius\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"domain\",\"depth\":2,\"slug\":\"domain\"},{\"type\":\"heading\",\"value\":\"domainPadding\",\"depth\":2,\"slug\":\"domain-padding\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"maxDomain\",\"depth\":2,\"slug\":\"max-domain\"},{\"type\":\"heading\",\"value\":\"minDomain\",\"depth\":2,\"slug\":\"min-domain\"},{\"type\":\"heading\",\"value\":\"name\",\"depth\":2,\"slug\":\"name\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"range\",\"depth\":2,\"slug\":\"range\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"singleQuadrantDomainPadding\",\"depth\":2,\"slug\":\"single-quadrant-domain-padding\"},{\"type\":\"heading\",\"value\":\"sortKey\",\"depth\":2,\"slug\":\"sort-key\"},{\"type\":\"heading\",\"value\":\"sortOrder\",\"depth\":2,\"slug\":\"sort-order\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 35\\ntitle: VictoryHistogram\\ncategory: charts\\ntype: docs\\nscope:\\n  - sampleHistogramData\\n  - sampleHistogramDateData\\n  - d3Scale\\n  - d3Time\\n  - d3Array\\n---\\n\\n# VictoryHistogram\\n\\nVictoryHistogram renders a dataset as series of bars representing \\\"bins\\\", allowing the ability to view distribution of the data. The data passed in will be \\\"binned\\\" according to the `bin` prop that is provided (if any), allowing for flexibility in how these bins are determined. VictoryHistogram can be composed with [`VictoryChart`][] to create histogram charts.\\n\\n`VictoryHistogram` is intended to be used with quantitative data. Please use [`VictoryBar`][] for qualitative or categorical data.\\n\\n```playground\\n<VictoryChart\\n  domainPadding={10}\\n>\\n  <VictoryHistogram\\n    style={{ data: { fill: \\\"#c43a31\\\" } }}\\n    data={sampleHistogramData}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryHistogram` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## bins\\n\\n`type: number || array[numbers] || array[dates]`\\n\\n_default:_ `undefined`\\n\\n**`VictoryHistogram` uses [`d3.bin`](https://observablehq.com/@d3/d3-bin) to do binning.**\\n\\nThe `bins` prop is used to specify how the data will be binned. There are a few options for this, the first being passing no value, ie the default behavior, which is letting `d3.bin` generate the buckets based on the data. The second is passing a number, which specifies _approximately_ the number of bins to generate, this is not a guarantee (see `d3.bin` for more details). The last options are passing an array of numbers or dates (depending on the data), this array represents an array of thresholds. So for example if the bin prop provided is `[0, 10, 20, 35]`, this would result in 3 bins, that would look like \\\\[0, 10) , \\\\[10, 20), \\\\[20, 35].\\n\\nThis prop allows for a lot of flexibility in how the data is displayed. For example it is possible to have uneven sized bins if so desired. It is also possible to group the data by days, weeks, or years.\\n\\n```playground\\n<VictoryChart\\n  domainPadding={{ x: 20 }}\\n>\\n  <VictoryHistogram\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleHistogramData}\\n    bins={[0, 3, 7, 10]}\\n    // bins={5}\\n  />\\n</VictoryChart>\\n```\\n\\n```playground\\n<VictoryChart\\n  domainPadding={{ x: 20 }}\\n>\\n  <VictoryHistogram\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleHistogramDateData}\\n    bins={[\\n      new Date(2020, 1, 1),\\n      new Date(2020, 4, 1),\\n      new Date(2020, 8, 1),\\n      new Date(2020, 11, 1)\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n```playground_norender\\nconst App = () => {\\n  const niceTimeScale = d3Scale\\n    .scaleTime()\\n    .domain(d3Array.extent(sampleHistogramDateData, ({ x }) => x))\\n    .nice();\\n\\n  // get thresholds to bin data by months\\n  const bins = niceTimeScale.ticks(d3Time.utcMonth); // try utcDay\\n\\n  return (\\n    <VictoryChart\\n      domainPadding={{ x: 20 }}\\n    >\\n      <VictoryHistogram\\n        style={{\\n          data: { fill: \\\"#c43a31\\\" }\\n        }}\\n        data={sampleHistogramDateData}\\n        bins={bins}\\n      />\\n    </VictoryChart>\\n  );\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## binSpacing\\n\\n`type: number`\\n\\nThe `binSpacing` prop is used to specify space between each bin. `binSpacing` represents the number of pixels that will be between each bin (including at the beginning and end of the bins). By default, bins are rendered with no spacing.\\n\\n```playground\\n<VictoryChart\\n  domainPadding={{ x: 20 }}\\n>\\n  <VictoryHistogram\\n    binSpacing={20}\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleHistogramData}\\n  />\\n</VictoryChart>\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryHistogram` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## cornerRadius\\n\\n`type: function || number || { top, bottom, topLeft, topRight, bottomLeft, bottomRight }`\\n\\nThe `cornerRadius` prop specifies a radius to apply to each bar. If this prop is given as a single number, the radius will only be applied to the _top_ of each bar. When this prop is given as a function, it will be evaluated for each bar with the props object corresponding to that bar.\\n\\n```playground\\n<VictoryChart\\n  domainPadding={{ x: 15 }}\\n>\\n  <VictoryHistogram\\n    cornerRadius={{ topLeft: ({ datum }) => datum.y * 4 }}\\n    style={{\\n      data: {\\n        fill: \\\"#c43a31\\\",\\n        width: 25\\n      }\\n    }}\\n    data={sampleHistogramData}\\n  />\\n</VictoryChart>\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryHistogram` uses the standard `data` prop, except for it only expects each object within the array to have `x` properties. The `x` data accessor prop can be used to defined a custom data format. [Read about it here](/docs/common-props#data)\\n\\nBecause each bar represents a bin rather than a particular data point (like with `VictoryScatter` for example), when accessing `datum` via a prop that passes `datum` such as `style`, datum will have properties `x`, `x0`, `x1`, `y`, and `binnedData`. `x` is the midpoint between the bin, `x0` is the beginning of the bin, `x1` is the end of the bin, `y` is the aggregate amount of data points within that bin, and `binnedData` is an array of the original data points that were grouped into this bin.\\n\\n`VictoryHistogram` is intended to be used with quantitative data. Please use [`VictoryBar`][] for qualitative or categorical data.\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryHistogram\\n  data={[\\n    { x: 1 },\\n    { x: 2 },\\n    { x: 2 },\\n    { x: 4 },\\n    { x: 4 },\\n    { x: 5 }\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryHistogram` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)\\n\\n`VictoryHistogram` supplies the following props to its `dataComponent`: `barWidth`, `cornerRadius`, `data`, `datum`, `horizontal`, `index`, `padding`, `origin`, `scale`, `style`, `width`, `height`, `x`, `y`, `y0`, `x0`.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Bar />`\\n\\n```jsx\\ndataComponent={<Bar events={{ onClick: handleClick }}/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryHistogram` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryHistogram` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryHistogram` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryHistogram` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryHistogram\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: (props) => {\\n                const fill = props.style && props.style.fill;\\n                return fill === \\\"black\\\" ? null : { style: { fill: \\\"black\\\" } };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={sampleHistogramData}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryHistogram` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryHistogram` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryHistogram` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe horizontal prop determines whether the bins will be laid vertically or horizontally. The bins will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true.\\n\\n_default:_ horizontal={false}\\n\\n```playground\\n<VictoryChart\\n  domainPadding={{ x: 10 }}\\n>\\n  <VictoryHistogram horizontal\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleHistogramData}\\n  />\\n</VictoryChart>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryHistogram` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryHistogram\\n  data={sampleHistogramData}\\n  labels={({ datum }) => datum.y}\\n  style={{ labels: { fill: \\\"white\\\" } }}\\n  labelComponent={<VictoryLabel dy={30}/>}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryHistogram` uses the standard `labels` prop. [Read about it here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryHistogram\\n  data={sampleHistogramData}\\n  labels={({ datum }) => `Bin count:\\\\n ${datum.y}`}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryHistogram` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={{ x: 3 }}>\\n  <VictoryHistogram data={sampleHistogramData}/>\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryHistogram` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={{ x: 2 }}>\\n  <VictoryHistogram data={sampleHistogramData}/>\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryHistogram` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n**Note:** Polar Charts are not yet supported for `VictoryHistogram`\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryHistogram` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryHistogram` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryHistogram` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryHistogram` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryHistogram` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryHistogram\\n    standalone={false}\\n    width={300} height={300} padding={{left: 10, right: 10}}\\n    data={sampleHistogramData}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryHistogram` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n  <VictoryHistogram\\n    style={{\\n      data: {\\n        fill: ({ datum }) => datum.y === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\",\\n        stroke: ({ index }) => +index % 2 === 0  ? \\\"#000000\\\" : \\\"#c43a31\\\",\\n        fillOpacity: 0.7,\\n        strokeWidth: 3\\n      },\\n      labels: {\\n        fontSize: 15,\\n        fill: ({ datum }) => datum.y === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\"\\n      }\\n    }}\\n    data={sampleHistogramData}\\n    labels={({ datum }) => datum.y}\\n  />\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryHistogram` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryHistogram` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryHistogram` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n[animations guide]: /guides/animations\\n\\n[data accessors guide]: /guides/data-accessors\\n\\n[custom components guide]: /guides/custom-components\\n\\n[events guide]: /guides/events\\n\\n[themes guide]: /guides/themes\\n\\n[`victorychart`]: /docs/victory-chart\\n\\n[`victorybar`]: /docs/victory-bar\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\",\"content\":\"\\n# VictoryHistogram\\n\\nVictoryHistogram renders a dataset as series of bars representing \\\"bins\\\", allowing the ability to view distribution of the data. The data passed in will be \\\"binned\\\" according to the `bin` prop that is provided (if any), allowing for flexibility in how these bins are determined. VictoryHistogram can be composed with [`VictoryChart`][] to create histogram charts.\\n\\n`VictoryHistogram` is intended to be used with quantitative data. Please use [`VictoryBar`][] for qualitative or categorical data.\\n\\n```playground\\n<VictoryChart\\n  domainPadding={10}\\n>\\n  <VictoryHistogram\\n    style={{ data: { fill: \\\"#c43a31\\\" } }}\\n    data={sampleHistogramData}\\n  />\\n</VictoryChart>\\n```\\n\\n## animate\\n\\n`type: boolean || object`\\n\\n`VictoryHistogram` uses the standard `animate` prop. [Read about it here](/docs/common-props#animate)\\n\\nSee the [Animations Guide][] for more detail on animations and transitions\\n\\n```jsx\\nanimate={{\\n  duration: 2000,\\n  onLoad: { duration: 1000 }\\n}}\\n```\\n\\n## bins\\n\\n`type: number || array[numbers] || array[dates]`\\n\\n_default:_ `undefined`\\n\\n**`VictoryHistogram` uses [`d3.bin`](https://observablehq.com/@d3/d3-bin) to do binning.**\\n\\nThe `bins` prop is used to specify how the data will be binned. There are a few options for this, the first being passing no value, ie the default behavior, which is letting `d3.bin` generate the buckets based on the data. The second is passing a number, which specifies _approximately_ the number of bins to generate, this is not a guarantee (see `d3.bin` for more details). The last options are passing an array of numbers or dates (depending on the data), this array represents an array of thresholds. So for example if the bin prop provided is `[0, 10, 20, 35]`, this would result in 3 bins, that would look like [0, 10) , [10, 20), \\\\[20, 35\\\\].\\n\\nThis prop allows for a lot of flexibility in how the data is displayed. For example it is possible to have uneven sized bins if so desired. It is also possible to group the data by days, weeks, or years.\\n\\n```playground\\n<VictoryChart\\n  domainPadding={{ x: 20 }}\\n>\\n  <VictoryHistogram\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleHistogramData}\\n    bins={[0, 3, 7, 10]}\\n    // bins={5}\\n  />\\n</VictoryChart>\\n```\\n\\n```playground\\n<VictoryChart\\n  domainPadding={{ x: 20 }}\\n>\\n  <VictoryHistogram\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleHistogramDateData}\\n    bins={[\\n      new Date(2020, 1, 1),\\n      new Date(2020, 4, 1),\\n      new Date(2020, 8, 1),\\n      new Date(2020, 11, 1)\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n```playground_norender\\nconst App = () => {\\n  const niceTimeScale = d3Scale\\n    .scaleTime()\\n    .domain(d3Array.extent(sampleHistogramDateData, ({ x }) => x))\\n    .nice();\\n\\n  // get thresholds to bin data by months\\n  const bins = niceTimeScale.ticks(d3Time.utcMonth); // try utcDay\\n\\n  return (\\n    <VictoryChart\\n      domainPadding={{ x: 20 }}\\n    >\\n      <VictoryHistogram\\n        style={{\\n          data: { fill: \\\"#c43a31\\\" }\\n        }}\\n        data={sampleHistogramDateData}\\n        bins={bins}\\n      />\\n    </VictoryChart>\\n  );\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\\n## binSpacing\\n\\n`type: number`\\n\\nThe `binSpacing` prop is used to specify space between each bin. `binSpacing` represents the number of pixels that will be between each bin (including at the beginning and end of the bins). By default, bins are rendered with no spacing.\\n\\n```playground\\n<VictoryChart\\n  domainPadding={{ x: 20 }}\\n>\\n  <VictoryHistogram\\n    binSpacing={20}\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleHistogramData}\\n  />\\n</VictoryChart>\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryHistogram` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n```jsx\\ncontainerComponent={<VictoryVoronoiContainer/>}\\n```\\n\\n## cornerRadius\\n\\n`type: function || number || { top, bottom, topLeft, topRight, bottomLeft, bottomRight }`\\n\\nThe `cornerRadius` prop specifies a radius to apply to each bar. If this prop is given as a single number, the radius will only be applied to the _top_ of each bar. When this prop is given as a function, it will be evaluated for each bar with the props object corresponding to that bar.\\n\\n```playground\\n<VictoryChart\\n  domainPadding={{ x: 15 }}\\n>\\n  <VictoryHistogram\\n    cornerRadius={{ topLeft: ({ datum }) => datum.y * 4 }}\\n    style={{\\n      data: {\\n        fill: \\\"#c43a31\\\",\\n        width: 25\\n      }\\n    }}\\n    data={sampleHistogramData}\\n  />\\n</VictoryChart>\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\n`VictoryHistogram` uses the standard `data` prop, except for it only expects each object within the array to have `x` properties. The `x` data accessor prop can be used to defined a custom data format. [Read about it here](/docs/common-props#data)\\n\\nBecause each bar represents a bin rather than a particular data point (like with `VictoryScatter` for example), when accessing `datum` via a prop that passes `datum` such as `style`, datum will have properties `x`, `x0`, `x1`, `y`, and `binnedData`. `x` is the midpoint between the bin, `x0` is the beginning of the bin, `x1` is the end of the bin, `y` is the aggregate amount of data points within that bin, and `binnedData` is an array of the original data points that were grouped into this bin.\\n\\n`VictoryHistogram` is intended to be used with quantitative data. Please use [`VictoryBar`][] for qualitative or categorical data.\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```playground\\n<VictoryHistogram\\n  data={[\\n    { x: 1 },\\n    { x: 2 },\\n    { x: 2 },\\n    { x: 4 },\\n    { x: 4 },\\n    { x: 5 }\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryHistogram` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)\\n\\n`VictoryHistogram` supplies the following props to its `dataComponent`: `barWidth`, `cornerRadius`, `data`, `datum`, `horizontal`, `index`, `padding`, `origin`, `scale`, `style`, `width`, `height`, `x`, `y`, `y0`, `x0`.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Bar />`\\n\\n```jsx\\ndataComponent={<Bar events={{ onClick: handleClick }}/>}\\n```\\n\\n## domain\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n`VictoryHistogram` uses the standard `domain` prop. [Read about it here](/docs/common-props#domain)\\n\\n```jsx\\ndomain={{x: [0, 100], y: [0, 1]}}\\n```\\n\\n## domainPadding\\n\\n`type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`\\n\\n`VictoryHistogram` uses the standard `domainPadding` prop. [Read about it here](/docs/common-props#domainpadding)\\n\\n```jsx\\ndomainPadding={{x: [10, -10], y: 5}}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryHistogram` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryHistogram` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryHistogram\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: (props) => {\\n                const fill = props.style && props.style.fill;\\n                return fill === \\\"black\\\" ? null : { style: { fill: \\\"black\\\" } };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={sampleHistogramData}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryHistogram` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryHistogram` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"translate(10, 10)\\\" />}\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryHistogram` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={300}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe horizontal prop determines whether the bins will be laid vertically or horizontally. The bins will be vertical if this prop is false or unspecified, or horizontal if the prop is set to true.\\n\\n_default:_ horizontal={false}\\n\\n```playground\\n<VictoryChart\\n  domainPadding={{ x: 10 }}\\n>\\n  <VictoryHistogram horizontal\\n    style={{\\n      data: { fill: \\\"#c43a31\\\" }\\n    }}\\n    data={sampleHistogramData}\\n  />\\n</VictoryChart>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryHistogram` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryHistogram\\n  data={sampleHistogramData}\\n  labels={({ datum }) => datum.y}\\n  style={{ labels: { fill: \\\"white\\\" } }}\\n  labelComponent={<VictoryLabel dy={30}/>}\\n/>\\n```\\n\\n## labels\\n\\n`type: array || function`\\n\\n`VictoryHistogram` uses the standard `labels` prop. [Read about it here](/docs/common-props#labels)\\n\\n```playground\\n<VictoryHistogram\\n  data={sampleHistogramData}\\n  labels={({ datum }) => `Bin count:\\\\n ${datum.y}`}\\n/>\\n```\\n\\n## maxDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryHistogram` uses the standard `maxDomain` prop. [Read about it in detail](/docs/common-props#maxDomain)\\n\\n```playground\\n<VictoryChart maxDomain={{ x: 3 }}>\\n  <VictoryHistogram data={sampleHistogramData}/>\\n</VictoryChart>\\n```\\n\\n## minDomain\\n\\n`type: number || { x: number, y: number }`\\n\\n`VictoryHistogram` uses the standard `minDomain` prop. [Read about it in detail](/docs/common-props#minDomain)\\n\\n```playground\\n<VictoryChart minDomain={{ x: 2 }}>\\n  <VictoryHistogram data={sampleHistogramData}/>\\n</VictoryChart>\\n```\\n\\n## name\\n\\n`type: string`\\n\\nThe `name` prop is used to reference a component instance when defining shared events.\\n\\n```jsx\\nname = \\\"series-1\\\";\\n```\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryHistogram` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## polar\\n\\n`type: boolean`\\n\\n**Note:** Polar Charts are not yet supported for `VictoryHistogram`\\n\\n## range\\n\\n`type: array[low, high] || { x: [low, high], y: [low, high] }`\\n\\n**The `range` prop is usually controlled by `VictoryChart`. It will not typically be necessary to set a `range` prop manually**\\n\\n[Read about the `range` prop in detail](/docs/common-props#range)\\n\\n## scale\\n\\n`type: scale || { x: scale, y: scale }`\\n\\n`VictoryHistogram` uses the standard `scale` prop. [Read about it here](/docs/common-props#scale)\\nOptions for scale include \\\"linear\\\", \\\"time\\\", \\\"log\\\", \\\"sqrt\\\" and the `d3-scale` functions that correspond to these options.\\n\\n_default:_ `scale=\\\"linear\\\"`\\n\\n```jsx\\nscale={{x: \\\"linear\\\", y: \\\"log\\\"}}\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## singleQuadrantDomainPadding\\n\\n`type: boolean || { x: boolean, y: boolean }`\\n\\n`VictoryHistogram` uses the standard `singleQuadrantDomainPadding` prop. [Read about it here](/docs/common-props#singlequadrantdomainpadding)\\n\\n## sortKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryHistogram` uses the standard `sortKey` prop. [Read about it here](/docs/common-props#sortkey)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nsortKey = \\\"x\\\";\\n```\\n\\n## sortOrder\\n\\n`type: \\\"ascending\\\" || \\\"descending\\\"`\\n\\nThe `sortOrder` prop specifies whether sorted data should be returned in ascending or descending order.\\n\\n_default:_ `sortOrder=\\\"ascending\\\"`\\n\\n## standalone\\n\\n`type: boolean`\\n\\n`VictoryHistogram` uses the standard `standalone` prop. [Read about it here](/docs/common-props#standalone)\\n\\n**note:** When `VictoryHistogram` is nested within a component like `VictoryChart`, this prop will be set to `false`\\n\\n_default:_ `standalone={true}`\\n\\n```playground\\n<svg width={300} height={300}>\\n  <circle cx={150} cy={150} r={150} fill=\\\"#c43a31\\\"/>\\n  <VictoryHistogram\\n    standalone={false}\\n    width={300} height={300} padding={{left: 10, right: 10}}\\n    data={sampleHistogramData}\\n  />\\n</svg>\\n```\\n\\n## style\\n\\n`type: { parent: object, data: object, labels: object }`\\n\\n`VictoryHistogram` uses the standard `style` prop. [Read about it here](/docs/common-props#style)\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n  <VictoryHistogram\\n    style={{\\n      data: {\\n        fill: ({ datum }) => datum.y === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\",\\n        stroke: ({ index }) => +index % 2 === 0  ? \\\"#000000\\\" : \\\"#c43a31\\\",\\n        fillOpacity: 0.7,\\n        strokeWidth: 3\\n      },\\n      labels: {\\n        fontSize: 15,\\n        fill: ({ datum }) => datum.y === 3 ? \\\"#000000\\\" : \\\"#c43a31\\\"\\n      }\\n    }}\\n    data={sampleHistogramData}\\n    labels={({ datum }) => datum.y}\\n  />\\n```\\n\\n## theme\\n\\n`type: object`\\n\\n`VictoryHistogram` uses the standard `theme` prop. [Read about it here](/docs/common-props#theme)\\n\\nSee the [Themes Guide][] for information about creating custom themes.\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n```jsx\\ntheme={VictoryTheme.material}\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryHistogram` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={450}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryHistogram` uses the standard `x` data accessor prop. [Read about it here](/docs/common-props#x)\\n\\nSee the [Data Accessors Guide][] for more detail on formatting and processing data.\\n\\n```jsx\\nx = \\\"employee.name\\\";\\n```\\n\\n[animations guide]: /guides/animations\\n[data accessors guide]: /guides/data-accessors\\n[custom components guide]: /guides/custom-components\\n[events guide]: /guides/events\\n[themes guide]: /guides/themes\\n[`victorychart`]: /docs/victory-chart\\n[`victorybar`]: /docs/victory-bar\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\"},{\"data\":{\"id\":7,\"title\":\"VictoryBrushContainer\",\"category\":\"containers\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryBrushContainer\",\"depth\":1,\"slug\":\"victory-brush-container\"},{\"type\":\"heading\",\"value\":\"allowDrag\",\"depth\":2,\"slug\":\"allow-drag\"},{\"type\":\"heading\",\"value\":\"allowResize\",\"depth\":2,\"slug\":\"allow-resize\"},{\"type\":\"heading\",\"value\":\"brushComponent\",\"depth\":2,\"slug\":\"brush-component\"},{\"type\":\"heading\",\"value\":\"brushDimension\",\"depth\":2,\"slug\":\"brush-dimension\"},{\"type\":\"heading\",\"value\":\"brushDomain\",\"depth\":2,\"slug\":\"brush-domain\"},{\"type\":\"heading\",\"value\":\"brushStyle\",\"depth\":2,\"slug\":\"brush-style\"},{\"type\":\"heading\",\"value\":\"defaultBrushArea\",\"depth\":2,\"slug\":\"default-brush-area\"},{\"type\":\"heading\",\"value\":\"disable\",\"depth\":2,\"slug\":\"disable\"},{\"type\":\"heading\",\"value\":\"handleComponent\",\"depth\":2,\"slug\":\"handle-component\"},{\"type\":\"heading\",\"value\":\"handleStyle\",\"depth\":2,\"slug\":\"handle-style\"},{\"type\":\"heading\",\"value\":\"onBrushCleared\",\"depth\":2,\"slug\":\"on-brush-cleared\"},{\"type\":\"heading\",\"value\":\"onBrushDomainChange\",\"depth\":2,\"slug\":\"on-brush-domain-change\"},{\"type\":\"heading\",\"value\":\"onBrushDomainChangeEnd\",\"depth\":2,\"slug\":\"on-brush-domain-change-end\"}],\"slug\":\"victory-brush-container\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryBrushContainer\",\"depth\":1,\"slug\":\"victory-brush-container\",\"category\":\"containers\",\"children\":[{\"type\":\"heading\",\"value\":\"allowDrag\",\"depth\":2,\"slug\":\"allow-drag\"},{\"type\":\"heading\",\"value\":\"allowResize\",\"depth\":2,\"slug\":\"allow-resize\"},{\"type\":\"heading\",\"value\":\"brushComponent\",\"depth\":2,\"slug\":\"brush-component\"},{\"type\":\"heading\",\"value\":\"brushDimension\",\"depth\":2,\"slug\":\"brush-dimension\"},{\"type\":\"heading\",\"value\":\"brushDomain\",\"depth\":2,\"slug\":\"brush-domain\"},{\"type\":\"heading\",\"value\":\"brushStyle\",\"depth\":2,\"slug\":\"brush-style\"},{\"type\":\"heading\",\"value\":\"defaultBrushArea\",\"depth\":2,\"slug\":\"default-brush-area\"},{\"type\":\"heading\",\"value\":\"disable\",\"depth\":2,\"slug\":\"disable\"},{\"type\":\"heading\",\"value\":\"handleComponent\",\"depth\":2,\"slug\":\"handle-component\"},{\"type\":\"heading\",\"value\":\"handleStyle\",\"depth\":2,\"slug\":\"handle-style\"},{\"type\":\"heading\",\"value\":\"onBrushCleared\",\"depth\":2,\"slug\":\"on-brush-cleared\"},{\"type\":\"heading\",\"value\":\"onBrushDomainChange\",\"depth\":2,\"slug\":\"on-brush-domain-change\"},{\"type\":\"heading\",\"value\":\"onBrushDomainChangeEnd\",\"depth\":2,\"slug\":\"on-brush-domain-change-end\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 7\\ntitle: VictoryBrushContainer\\ncategory: containers\\ntype: docs\\nscope: null\\n---\\n\\n# VictoryBrushContainer\\n\\n`VictoryBrushContainer` adds the ability to highlight a region of a chart, and interact with\\nhighlighted regions, either by moving the region, expanding the region, or selecting a new region.\\n`VictoryBrushContainer` is useful for selecting a region of a larger dataset by domain. Create a\\nbrush control by tying the domain of the selected region to the domain of a separate chart.\\nSee the [brush and zoom guide][] for an example of using `VictoryBrushContainer` to create a brush\\ncontrol.\\n\\n`VictoryBrushContainer` is similar to `VictorySelectionContainer`. `VictoryBrushContainer` may be\\nused to identify the domain of a selected region, whereas `VictorySelectionContainer` may be used to\\nidentify a list of data points within a selected region. `VictoryBrushContainer` will also create\\npersistent highlighted regions, whereas regions created by `VictorySelectionContainer`\\ndisappear after `onMouseUp` events.\\n\\n`VictoryBrushContainer` may be used with any Victory component that works with an x-y coordinate\\nsystem, and should be added as the `containerComponent` of the top-level component.\\nHowever, the component that uses it must be standalone\\n(`standalone={true}`), which is the default for all top-level Victory components.\\n\\n```playground\\n<VictoryChart\\n  containerComponent={\\n    <VictoryBrushContainer\\n      brushDimension=\\\"x\\\"\\n      brushDomain={{x: [0.1, 0.3]}}\\n    />\\n  }\\n>\\n  <VictoryLine />\\n</VictoryChart>\\n```\\n\\n`VictoryBrushContainer` uses a superset of props used by [VictoryContainer][]. All props are optional.\\n\\n## allowDrag\\n\\n`type: boolean`\\n\\nThe optional `allowDrag` prop accepts a boolean that enables dragging behavior for the highlighted brush area. Resizing will still be enabled when the `allowDrag` prop is set to false.\\n\\n_default:_ `allowDrag={true}`\\n\\n## allowResize\\n\\n`type: boolean`\\n\\nThe optional `allowResize` prop accepts a boolean that enables resizing the highlighted brush area. Dragging will still be enabled when the `allowResize` prop is set to false, but the dimensions of the brush area will be fixed.\\n\\n_default:_ `allowResize={true}`\\n\\n## brushComponent\\n\\n`type: element`\\n\\nThe `brushComponent` prop specifies the component to be rendered for the highlighted area.\\nThis component will be supplied with the following props: x, y, width, height, and style.\\nWhen this prop is not specified, a `<rect/>` will be rendered.\\n\\n_default:_ `brushComponent={<rect/>}`\\n\\n## brushDimension\\n\\n`type: \\\"x\\\" || \\\"y\\\"`\\n\\nWhen the `brushDimension` prop is set, brushing will only be specific to the to the given dimension\\n(either \\\"x\\\" or \\\"y\\\"), and the entire domain of the other dimension will be highlighted. When this prop\\nis not specified, highlighting will occur along both dimensions.\\n\\n_example:_ `brushDimension=\\\"x\\\"`\\n\\n## brushDomain\\n\\n`type: { x: [low, high], y: [low, high] }`\\n\\nThe optional `brushDomain` prop describes the highlighted state. This prop is an object that\\nspecifies separate arrays for `x` and `y`. Each array is a tuple that describes the minimum and maximum\\nvalues to render. If this prop is not provided initially, the chart will render with the entire\\ndomain highlighted. When this prop changes, the chart will render with a new highlighted domain.\\n\\n_example:_ `brushDomain={{x: [50, 100], y: [0, 100]}`\\n\\n## brushStyle\\n\\n`type: object`\\n\\nThe `brushStyle` adds custom styles to the `brushComponent`. This prop should be given as\\nan object of SVG style attributes.\\n\\n_default:_ `brushStyle={{stroke: \\\"transparent\\\", fill: \\\"black\\\", fillOpacity: 0.1}}`\\n\\n## defaultBrushArea\\n\\n`type: \\\"all\\\", \\\"none\\\", \\\"disable\\\", \\\"move\\\"`\\n\\nThe `defaultBrushArea` prop specifies how the container will behave when a region outside the active brush is clicked without selecting a new area. When the prop is set to \\\"all\\\", the entire domain will be selected. When the prop is set to \\\"none\\\", no new region will be selected, and any existing active brush will be cleared. When the prop is set to \\\"disable\\\" the new selected region will default to the current active brush. When this prop is set to \\\"move\\\", the active brush will be moved so that it is centered over the location of the click event.\\n\\n```playground\\n<VictoryChart\\n  containerComponent={\\n    <VictoryBrushContainer\\n      defaultBrushArea=\\\"disable\\\"\\n      brushDomain={{x: [0.1, 0.3]}}\\n    />\\n  }\\n>\\n  <VictoryLine />\\n</VictoryChart>\\n```\\n\\n## disable\\n\\n`type: boolean`\\n\\nWhen the `disable` prop is set to `true`, `VictoryBrushContainer` events will not fire.\\n\\n## handleComponent\\n\\n`type: element`\\n\\nThe `handleComponent` prop specifies the component to be rendered for each handle for the highlighted\\narea. This component will be supplied with the following props: `x`, `y`, `width`, `height`, `cursor`, and `style`.\\nWhen this prop is not specified, a `<rect/>` will be rendered.\\n\\n_default:_ `handleComponent={<rect/>}`\\n\\n## handleStyle\\n\\n`type: object`\\n\\nThe `handleStyle` adds custom styles to the `handleComponents`. This prop should be given as\\nan object of SVG style attributes.\\n\\nHandles refer to the region on each highlighted area where the area may be\\nexpanded. Only handles relevant to the given `dimension` will be rendered. For example, when\\n`brushDimension=\\\"x\\\"` only \\\"left\\\" and \\\"right\\\" handles will be rendered. Handles are automatically styled\\nwith cursors appropriate to their orientation.\\n\\n_default:_ \\\\`handleStyle={{stroke: \\\"transparent\\\", fill: \\\"transparent\\\"}}\\n\\n## onBrushCleared\\n\\n`type: function`\\n\\nThe optional `onBrushCleared` prop accepts an function to be called when tha active brush area is cleared. The function accepts the parameters of `domain` (the updated domain), and `props` (the props used by `VictoryBrushContainer`).\\n\\n_example:_ `onBrushCleared={(domain, props) => handleBrushCleared(domain, props)}`\\n\\n## onBrushDomainChange\\n\\n`type: function`\\n\\nThe optional `onBrushDomainChange` prop accepts an function to be called on each update to the highlighted domain. The function accepts the parameters of `domain` (the updated domain), and `props` (the props used by `VictoryBrushContainer`).\\n\\n_example:_ `onBrushDomainChange={(domain, props) => handleDomainChange(domain, props)}`\\n\\n## onBrushDomainChangeEnd\\n\\n`type: function`\\n\\nThe optional `onBrushDomainChangeEnd` prop accepts an function to be called only on mouse up events. The function accepts the parameters of `domain` (the updated domain), and `props` (the props used by `VictoryBrushContainer`).\\n\\n_example:_ `onBrushDomainChangeEnd={(domain, props) => handleDomainChangeEnd(domain, props)}`\\n\\n[brush and zoom guide]: /guides/brush-and-zoom\\n\\n[victorycontainer]: /docs/victory-container\\n\",\"content\":\"\\n# VictoryBrushContainer\\n\\n`VictoryBrushContainer` adds the ability to highlight a region of a chart, and interact with\\nhighlighted regions, either by moving the region, expanding the region, or selecting a new region.\\n`VictoryBrushContainer` is useful for selecting a region of a larger dataset by domain. Create a\\nbrush control by tying the domain of the selected region to the domain of a separate chart.\\nSee the [brush and zoom guide][] for an example of using `VictoryBrushContainer` to create a brush\\ncontrol.\\n\\n`VictoryBrushContainer` is similar to `VictorySelectionContainer`. `VictoryBrushContainer` may be\\nused to identify the domain of a selected region, whereas `VictorySelectionContainer` may be used to\\nidentify a list of data points within a selected region. `VictoryBrushContainer` will also create\\npersistent highlighted regions, whereas regions created by `VictorySelectionContainer`\\ndisappear after `onMouseUp` events.\\n\\n`VictoryBrushContainer` may be used with any Victory component that works with an x-y coordinate\\nsystem, and should be added as the `containerComponent` of the top-level component.\\nHowever, the component that uses it must be standalone\\n(`standalone={true}`), which is the default for all top-level Victory components.\\n\\n```playground\\n<VictoryChart\\n  containerComponent={\\n    <VictoryBrushContainer\\n      brushDimension=\\\"x\\\"\\n      brushDomain={{x: [0.1, 0.3]}}\\n    />\\n  }\\n>\\n  <VictoryLine />\\n</VictoryChart>\\n```\\n\\n`VictoryBrushContainer` uses a superset of props used by [VictoryContainer][]. All props are optional.\\n\\n## allowDrag\\n\\n`type: boolean`\\n\\nThe optional `allowDrag` prop accepts a boolean that enables dragging behavior for the highlighted brush area. Resizing will still be enabled when the `allowDrag` prop is set to false.\\n\\n_default:_ `allowDrag={true}`\\n\\n## allowResize\\n\\n`type: boolean`\\n\\nThe optional `allowResize` prop accepts a boolean that enables resizing the highlighted brush area. Dragging will still be enabled when the `allowResize` prop is set to false, but the dimensions of the brush area will be fixed.\\n\\n_default:_ `allowResize={true}`\\n\\n## brushComponent\\n\\n`type: element`\\n\\nThe `brushComponent` prop specifies the component to be rendered for the highlighted area.\\nThis component will be supplied with the following props: x, y, width, height, and style.\\nWhen this prop is not specified, a `<rect/>` will be rendered.\\n\\n_default:_ `brushComponent={<rect/>}`\\n\\n## brushDimension\\n\\n`type: \\\"x\\\" || \\\"y\\\"`\\n\\nWhen the `brushDimension` prop is set, brushing will only be specific to the to the given dimension\\n(either \\\"x\\\" or \\\"y\\\"), and the entire domain of the other dimension will be highlighted. When this prop\\nis not specified, highlighting will occur along both dimensions.\\n\\n_example:_ `brushDimension=\\\"x\\\"`\\n\\n## brushDomain\\n\\n`type: { x: [low, high], y: [low, high] }`\\n\\nThe optional `brushDomain` prop describes the highlighted state. This prop is an object that\\nspecifies separate arrays for `x` and `y`. Each array is a tuple that describes the minimum and maximum\\nvalues to render. If this prop is not provided initially, the chart will render with the entire\\ndomain highlighted. When this prop changes, the chart will render with a new highlighted domain.\\n\\n_example:_ `brushDomain={{x: [50, 100], y: [0, 100]}`\\n\\n## brushStyle\\n\\n`type: object`\\n\\nThe `brushStyle` adds custom styles to the `brushComponent`. This prop should be given as\\nan object of SVG style attributes.\\n\\n_default:_ `brushStyle={{stroke: \\\"transparent\\\", fill: \\\"black\\\", fillOpacity: 0.1}}`\\n\\n## defaultBrushArea\\n\\n`type: \\\"all\\\", \\\"none\\\", \\\"disable\\\", \\\"move\\\"`\\n\\nThe `defaultBrushArea` prop specifies how the container will behave when a region outside the active brush is clicked without selecting a new area. When the prop is set to \\\"all\\\", the entire domain will be selected. When the prop is set to \\\"none\\\", no new region will be selected, and any existing active brush will be cleared. When the prop is set to \\\"disable\\\" the new selected region will default to the current active brush. When this prop is set to \\\"move\\\", the active brush will be moved so that it is centered over the location of the click event.\\n\\n```playground\\n<VictoryChart\\n  containerComponent={\\n    <VictoryBrushContainer\\n      defaultBrushArea=\\\"disable\\\"\\n      brushDomain={{x: [0.1, 0.3]}}\\n    />\\n  }\\n>\\n  <VictoryLine />\\n</VictoryChart>\\n```\\n\\n## disable\\n\\n`type: boolean`\\n\\nWhen the `disable` prop is set to `true`, `VictoryBrushContainer` events will not fire.\\n\\n## handleComponent\\n\\n`type: element`\\n\\nThe `handleComponent` prop specifies the component to be rendered for each handle for the highlighted\\narea. This component will be supplied with the following props: `x`, `y`, `width`, `height`, `cursor`, and `style`.\\nWhen this prop is not specified, a `<rect/>` will be rendered.\\n\\n_default:_ `handleComponent={<rect/>}`\\n\\n## handleStyle\\n\\n`type: object`\\n\\nThe `handleStyle` adds custom styles to the `handleComponents`. This prop should be given as\\nan object of SVG style attributes.\\n\\nHandles refer to the region on each highlighted area where the area may be\\nexpanded. Only handles relevant to the given `dimension` will be rendered. For example, when\\n`brushDimension=\\\"x\\\"` only \\\"left\\\" and \\\"right\\\" handles will be rendered. Handles are automatically styled\\nwith cursors appropriate to their orientation.\\n\\n_default:_ `handleStyle={{stroke: \\\"transparent\\\", fill: \\\"transparent\\\"}}\\n\\n## onBrushCleared\\n\\n`type: function`\\n\\nThe optional `onBrushCleared` prop accepts an function to be called when tha active brush area is cleared. The function accepts the parameters of `domain` (the updated domain), and `props` (the props used by `VictoryBrushContainer`).\\n\\n_example:_ `onBrushCleared={(domain, props) => handleBrushCleared(domain, props)}`\\n\\n## onBrushDomainChange\\n\\n`type: function`\\n\\nThe optional `onBrushDomainChange` prop accepts an function to be called on each update to the highlighted domain. The function accepts the parameters of `domain` (the updated domain), and `props` (the props used by `VictoryBrushContainer`).\\n\\n_example:_ `onBrushDomainChange={(domain, props) => handleDomainChange(domain, props)}`\\n\\n## onBrushDomainChangeEnd\\n\\n`type: function`\\n\\nThe optional `onBrushDomainChangeEnd` prop accepts an function to be called only on mouse up events. The function accepts the parameters of `domain` (the updated domain), and `props` (the props used by `VictoryBrushContainer`).\\n\\n_example:_ `onBrushDomainChangeEnd={(domain, props) => handleDomainChangeEnd(domain, props)}`\\n\\n[brush and zoom guide]: /guides/brush-and-zoom\\n[victorycontainer]: /docs/victory-container\\n\"},{\"data\":{\"id\":11,\"title\":\"VictoryContainer\",\"category\":\"containers\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryContainer\",\"depth\":1,\"slug\":\"victory-container\"}],\"slug\":\"victory-container\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryContainer\",\"depth\":1,\"slug\":\"victory-container\",\"category\":\"containers\"}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 11\\ntitle: VictoryContainer\\ncategory: containers\\ntype: docs\\nscope: null\\n---\\n\\n# VictoryContainer\\n\\n`VictoryContainer` provides a top-level `<svg>` element for other Victory components to render within.\\nBy default, `VictoryContainer` renders responsive SVGs. `VictoryContainer` also provides a [Portal][]\\ncontainer that can be accessed via [VictoryPortal][] in order to render specified children above others.\\n\\n[victoryportal]: /docs/victory-portal\\n\\n[portal]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-portal/portal.js\\n\",\"content\":\"# VictoryContainer\\n\\n`VictoryContainer` provides a top-level `<svg>` element for other Victory components to render within.\\nBy default, `VictoryContainer` renders responsive SVGs. `VictoryContainer` also provides a [Portal][]\\ncontainer that can be accessed via [VictoryPortal][] in order to render specified children above others.\\n\\n[VictoryPortal]: /docs/victory-portal\\n[Portal]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-portal/portal.js\\n\"},{\"data\":{\"id\":12,\"title\":\"VictoryCursorContainer\",\"category\":\"containers\",\"type\":\"docs\",\"scope\":[\"round\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryCursorContainer\",\"depth\":1,\"slug\":\"victory-cursor-container\"},{\"type\":\"heading\",\"value\":\"cursorComponent\",\"depth\":2,\"slug\":\"cursor-component\"},{\"type\":\"heading\",\"value\":\"cursorDimension\",\"depth\":2,\"slug\":\"cursor-dimension\"},{\"type\":\"heading\",\"value\":\"cursorLabel\",\"depth\":2,\"slug\":\"cursor-label\"},{\"type\":\"heading\",\"value\":\"cursorLabelComponent\",\"depth\":2,\"slug\":\"cursor-label-component\"},{\"type\":\"heading\",\"value\":\"cursorLabelOffset\",\"depth\":2,\"slug\":\"cursor-label-offset\"},{\"type\":\"heading\",\"value\":\"defaultCursorValue\",\"depth\":2,\"slug\":\"default-cursor-value\"},{\"type\":\"heading\",\"value\":\"disable\",\"depth\":2,\"slug\":\"disable\"},{\"type\":\"heading\",\"value\":\"onCursorChange\",\"depth\":2,\"slug\":\"on-cursor-change\"}],\"slug\":\"victory-cursor-container\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryCursorContainer\",\"depth\":1,\"slug\":\"victory-cursor-container\",\"category\":\"containers\",\"children\":[{\"type\":\"heading\",\"value\":\"cursorComponent\",\"depth\":2,\"slug\":\"cursor-component\"},{\"type\":\"heading\",\"value\":\"cursorDimension\",\"depth\":2,\"slug\":\"cursor-dimension\"},{\"type\":\"heading\",\"value\":\"cursorLabel\",\"depth\":2,\"slug\":\"cursor-label\"},{\"type\":\"heading\",\"value\":\"cursorLabelComponent\",\"depth\":2,\"slug\":\"cursor-label-component\"},{\"type\":\"heading\",\"value\":\"cursorLabelOffset\",\"depth\":2,\"slug\":\"cursor-label-offset\"},{\"type\":\"heading\",\"value\":\"defaultCursorValue\",\"depth\":2,\"slug\":\"default-cursor-value\"},{\"type\":\"heading\",\"value\":\"disable\",\"depth\":2,\"slug\":\"disable\"},{\"type\":\"heading\",\"value\":\"onCursorChange\",\"depth\":2,\"slug\":\"on-cursor-change\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 12\\ntitle: VictoryCursorContainer\\ncategory: containers\\ntype: docs\\nscope:\\n  - round\\n---\\n\\n# VictoryCursorContainer\\n\\n`VictoryCursorContainer` adds a cursor to a chart to inspect coordinates.\\nThe cursor can either be a 2-dimensional crosshair, or a 1-dimensional line.\\nThe cursor moves with the mouse (or on touch on mobile devices) along the visible domain of the chart.\\nThe cursor can also display a label for the active coordinates using the `cursorLabel` prop.\\n\\n`VictoryCursorContainer` may be used with any Victory component that works with an x-y coordinate\\nsystem, and should be added as the `containerComponent` of the top-level component.\\nHowever, the component that uses it must be standalone\\n(`standalone={true}`), which is the default for all top-level Victory components.\\n\\nNote that the cursor allows you to inspect the entire domain, not just the data points.\\nIf you would like to instead highlight only the data points, consider using [VictoryVoronoiContainer][].\\n\\n```playground\\n<VictoryScatter\\n  containerComponent={\\n    <VictoryCursorContainer\\n      cursorLabel={({ datum }) => `${round(datum.x, 2)}, ${round(datum.y, 2)}`}\\n    />\\n  }\\n/>\\n```\\n\\n`VictoryCursorContainer` uses a superset of props used by [VictoryContainer][]. All props are optional.\\n\\n## cursorComponent\\n\\n`type: element`\\n\\nThe `cursorComponent` prop takes a component instance which will be used to render a cursor element. The new element created will be supplied with `x1`, `y1`, `x2` and `y2` positioning props. If a `cursorComponent` is not supplied, a new [LineSegment][] component will be rendered.\\n\\n_default:_ `cursorComponent={<LineSegment/>}`\\n\\n## cursorDimension\\n\\n`type: \\\"x\\\" || \\\"y\\\"`\\n\\nWhen the `cursorDimension` prop is set, the cursor will be a line to inspect the given dimension\\n(either \\\"x\\\" or \\\"y\\\"). When this prop is not specified, the cursor will be a 2-dimensional crosshair.\\nFor example, if you would like to inspect the time of time-series data, set `dimension={\\\"x\\\"}`;\\nthe cursor will then be a vertical line that will inspect the time value of the current mouse position.\\n\\n_example:_ `cursorDimension=\\\"x\\\"`\\n\\n```playground\\n<VictoryScatter\\n  containerComponent={\\n    <VictoryCursorContainer\\n      cursorDimension=\\\"x\\\"\\n      cursorLabel={({ datum }) => `${round(datum.x, 2)}, ${round(datum.y, 2)}`}\\n    />\\n  }\\n/>\\n```\\n\\n## cursorLabel\\n\\n`type: function`\\n\\nThe `cursorLabel` prop defines the label that will appear next to the cursor.\\nA label will only appear if `cursorLabel` is set. This prop should be given as a function of a point (an Object with `x` and `y` properties).\\n\\n_example:_ `cursorLabel={(point) => point.x}`\\n\\n## cursorLabelComponent\\n\\n`type: element`\\n\\nThe `cursorLabelComponent` prop takes a component instance which will be used to render a label for the cursor. The new element created from the passed `cursorLabelComponent` will be supplied with the following props: `x`, `y`, `active`, `text`. If `cursorLabelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above.\\n\\n_default:_ `cursorLabelComponent={<VictoryLabel/>}`\\n\\n## cursorLabelOffset\\n\\n`type: number || { x: number, y: number }`\\n\\nThe `cursorLabelOffset` prop determines the pixel offset of the cursor label from the cursor point.\\nThis prop should be an Object with `x` and `y` properties, or a number to be used for both dimensions.\\n\\n_default:_ `cursorLabelOffset={{ x: 5, y: -10 }}`\\n\\n## defaultCursorValue\\n\\n`type: number || { x: number, y: number }`\\n\\nWhenever the mouse is not over the chart, the cursor will not be displayed.\\nIf instead you would like to keep it displayed, use the `defaultCursorValue` prop to set the default value. The prop should be a point (an Object with `x` and `y` properties) for 2-dimensional cursors, or a number for 1-dimensional cursors.\\n\\n_examples:_ `defaultCursorValue={{x: 1, y: 1}}`, `defaultCursorValue={0}`\\n\\n## disable\\n\\n`type: boolean`\\n\\nWhen the `disable` prop is set to `true`, `VictoryCursorContainer` events will not fire.\\n\\n## onCursorChange\\n\\n`type: function`\\n\\nIf provided, the `onCursorChange` function will be called every time the cursor value changes. `onCursorChange` is called with `value` (the updated cursor value) and `props` (the props used by `VictoryCursorContainer`). A common use for `onCursorChange` is to save the cursor value to state and use it in another part of the view.\\n\\n_example:_ `onCursorChange={(value, props) => this.setState({cursorValue: value})}`\\n\\n[victoryvoronoicontainer]: /docs/victory-voronoi-container\\n\\n[victorycontainer]: /docs/victory-container\\n\\n[victorylabel]: /docs/victory-label\\n\\n[linesegment]: /docs/victory-primitives#linesegment\\n\",\"content\":\"\\n# VictoryCursorContainer\\n\\n`VictoryCursorContainer` adds a cursor to a chart to inspect coordinates.\\nThe cursor can either be a 2-dimensional crosshair, or a 1-dimensional line.\\nThe cursor moves with the mouse (or on touch on mobile devices) along the visible domain of the chart.\\nThe cursor can also display a label for the active coordinates using the `cursorLabel` prop.\\n\\n`VictoryCursorContainer` may be used with any Victory component that works with an x-y coordinate\\nsystem, and should be added as the `containerComponent` of the top-level component.\\nHowever, the component that uses it must be standalone\\n(`standalone={true}`), which is the default for all top-level Victory components.\\n\\nNote that the cursor allows you to inspect the entire domain, not just the data points.\\nIf you would like to instead highlight only the data points, consider using [VictoryVoronoiContainer][].\\n\\n```playground\\n<VictoryScatter\\n  containerComponent={\\n    <VictoryCursorContainer\\n      cursorLabel={({ datum }) => `${round(datum.x, 2)}, ${round(datum.y, 2)}`}\\n    />\\n  }\\n/>\\n```\\n\\n`VictoryCursorContainer` uses a superset of props used by [VictoryContainer][]. All props are optional.\\n\\n## cursorComponent\\n\\n`type: element`\\n\\nThe `cursorComponent` prop takes a component instance which will be used to render a cursor element. The new element created will be supplied with `x1`, `y1`, `x2` and `y2` positioning props. If a `cursorComponent` is not supplied, a new [LineSegment][] component will be rendered.\\n\\n_default:_ `cursorComponent={<LineSegment/>}`\\n\\n## cursorDimension\\n\\n`type: \\\"x\\\" || \\\"y\\\"`\\n\\nWhen the `cursorDimension` prop is set, the cursor will be a line to inspect the given dimension\\n(either \\\"x\\\" or \\\"y\\\"). When this prop is not specified, the cursor will be a 2-dimensional crosshair.\\nFor example, if you would like to inspect the time of time-series data, set `dimension={\\\"x\\\"}`;\\nthe cursor will then be a vertical line that will inspect the time value of the current mouse position.\\n\\n_example:_ `cursorDimension=\\\"x\\\"`\\n\\n```playground\\n<VictoryScatter\\n  containerComponent={\\n    <VictoryCursorContainer\\n      cursorDimension=\\\"x\\\"\\n      cursorLabel={({ datum }) => `${round(datum.x, 2)}, ${round(datum.y, 2)}`}\\n    />\\n  }\\n/>\\n```\\n\\n## cursorLabel\\n\\n`type: function`\\n\\nThe `cursorLabel` prop defines the label that will appear next to the cursor.\\nA label will only appear if `cursorLabel` is set. This prop should be given as a function of a point (an Object with `x` and `y` properties).\\n\\n_example:_ `cursorLabel={(point) => point.x}`\\n\\n## cursorLabelComponent\\n\\n`type: element`\\n\\nThe `cursorLabelComponent` prop takes a component instance which will be used to render a label for the cursor. The new element created from the passed `cursorLabelComponent` will be supplied with the following props: `x`, `y`, `active`, `text`. If `cursorLabelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above.\\n\\n_default:_ `cursorLabelComponent={<VictoryLabel/>}`\\n\\n## cursorLabelOffset\\n\\n`type: number || { x: number, y: number }`\\n\\nThe `cursorLabelOffset` prop determines the pixel offset of the cursor label from the cursor point.\\nThis prop should be an Object with `x` and `y` properties, or a number to be used for both dimensions.\\n\\n_default:_ `cursorLabelOffset={{ x: 5, y: -10 }}`\\n\\n## defaultCursorValue\\n\\n`type: number || { x: number, y: number }`\\n\\nWhenever the mouse is not over the chart, the cursor will not be displayed.\\nIf instead you would like to keep it displayed, use the `defaultCursorValue` prop to set the default value. The prop should be a point (an Object with `x` and `y` properties) for 2-dimensional cursors, or a number for 1-dimensional cursors.\\n\\n_examples:_ `defaultCursorValue={{x: 1, y: 1}}`, `defaultCursorValue={0}`\\n\\n## disable\\n\\n`type: boolean`\\n\\nWhen the `disable` prop is set to `true`, `VictoryCursorContainer` events will not fire.\\n\\n## onCursorChange\\n\\n`type: function`\\n\\nIf provided, the `onCursorChange` function will be called every time the cursor value changes. `onCursorChange` is called with `value` (the updated cursor value) and `props` (the props used by `VictoryCursorContainer`). A common use for `onCursorChange` is to save the cursor value to state and use it in another part of the view.\\n\\n*example:* `onCursorChange={(value, props) => this.setState({cursorValue: value})}`\\n\\n[victoryvoronoicontainer]: /docs/victory-voronoi-container\\n[victorycontainer]: /docs/victory-container\\n[victorylabel]: /docs/victory-label\\n[linesegment]: /docs/victory-primitives#linesegment\\n\"},{\"data\":{\"id\":23,\"title\":\"VictorySelectionContainer\",\"category\":\"containers\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictorySelectionContainer\",\"depth\":1,\"slug\":\"victory-selection-container\"},{\"type\":\"heading\",\"value\":\"activateSelectedData\",\"depth\":2,\"slug\":\"activate-selected-data\"},{\"type\":\"heading\",\"value\":\"disable\",\"depth\":2,\"slug\":\"disable\"},{\"type\":\"heading\",\"value\":\"onSelection\",\"depth\":2,\"slug\":\"on-selection\"},{\"type\":\"heading\",\"value\":\"onSelectionCleared\",\"depth\":2,\"slug\":\"on-selection-cleared\"},{\"type\":\"heading\",\"value\":\"selectionBlacklist\",\"depth\":2,\"slug\":\"selection-blacklist\"},{\"type\":\"heading\",\"value\":\"selectionComponent\",\"depth\":2,\"slug\":\"selection-component\"},{\"type\":\"heading\",\"value\":\"selectionDimension\",\"depth\":2,\"slug\":\"selection-dimension\"},{\"type\":\"heading\",\"value\":\"selectionStyle\",\"depth\":2,\"slug\":\"selection-style\"}],\"slug\":\"victory-selection-container\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictorySelectionContainer\",\"depth\":1,\"slug\":\"victory-selection-container\",\"category\":\"containers\",\"children\":[{\"type\":\"heading\",\"value\":\"activateSelectedData\",\"depth\":2,\"slug\":\"activate-selected-data\"},{\"type\":\"heading\",\"value\":\"disable\",\"depth\":2,\"slug\":\"disable\"},{\"type\":\"heading\",\"value\":\"onSelection\",\"depth\":2,\"slug\":\"on-selection\"},{\"type\":\"heading\",\"value\":\"onSelectionCleared\",\"depth\":2,\"slug\":\"on-selection-cleared\"},{\"type\":\"heading\",\"value\":\"selectionBlacklist\",\"depth\":2,\"slug\":\"selection-blacklist\"},{\"type\":\"heading\",\"value\":\"selectionComponent\",\"depth\":2,\"slug\":\"selection-component\"},{\"type\":\"heading\",\"value\":\"selectionDimension\",\"depth\":2,\"slug\":\"selection-dimension\"},{\"type\":\"heading\",\"value\":\"selectionStyle\",\"depth\":2,\"slug\":\"selection-style\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 23\\ntitle: VictorySelectionContainer\\ncategory: containers\\ntype: docs\\nscope: null\\n---\\n\\n# VictorySelectionContainer\\n\\n`VictorySelectionContainer` is used to enable selecting data points within a highlighted region.\\nClicking and dragging will select an x-y region, and add the `active` prop to any elements\\ncorresponding to data points within the region. Create a select-box control by tying the set of\\nselected data points to other elements, such as filtered table.\\n\\n`VictorySelectionContainer` is similar to `VictoryBrushContainer`. `VictoryBrushContainer` may be\\nused to identify the domain of a selected region, whereas `VictorySelectionContainer` may be used to\\nidentify a list of data points within a selected region. `VictoryBrushContainer` will also create\\npersistent highlighted regions, whereas regions created by `VictorySelectionContainer`\\ndisappear after `onMouseUp` events.\\n\\n`VictorySelectionContainer` may be used with any Victory component that works with an x-y coordinate\\nsystem, and should be added as the `containerComponent` of the top-level component.\\nHowever, the component that uses it must be standalone\\n(`standalone={true}`), which is the default for all top-level Victory components.\\n\\n```playground\\n<VictoryChart containerComponent={<VictorySelectionContainer/>}>\\n  <VictoryScatter\\n    style={{ data: { fill: ({ active }) => active ? \\\"tomato\\\" : \\\"gray\\\" } }}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictorySelectionContainer` uses a superset of props used by [VictoryContainer][]. All props are optional.\\n\\n## activateSelectedData\\n\\n`type: boolean`\\n\\nWhen the `activateSelectedData` prop is set to true, the `active` prop will be set to true on all selected data points. When this prop is set to false, the `onSelection` and `onSelectionCleared` callbacks will still fire, but no mutations will occur via Victory's event system.\\n\\n_default:_ `activateSelectedData={true}`\\n\\n## disable\\n\\n`type: boolean`\\n\\nWhen the `disable` prop is set to `true`, `VictorySelectionContainer` events will not fire.\\n\\n## onSelection\\n\\n`type: function`\\n\\nThe `onSelection` prop accepts a function to be called whenever new data points are selected. The\\nfunction is called with the parameters `points` (an array of objects with `childName`, `eventKey`,\\nand `data`), `bounds` (an object with min / max arrays specified for `x` and `y`), and `props` (the props used by `VictorySelectionContainer`)\\n\\n_example:_ `onSelection={(points, bounds, props) => handleSelection(points, bounds, props)}`\\n\\n## onSelectionCleared\\n\\n`type: function`\\n\\nThe `onSelectionCleared` prop accepts a function to be called whenever the selection is cleared. The function is called with the props used by `VictorySelectionContainer`\\n\\n_example:_ `onSelectionCleared={(props) => handleSelectionCleared(props)}`\\n\\n## selectionBlacklist\\n\\n`type: array[string]`\\n\\nThe `selectionBlacklist` prop is used to exclude data from potential selections. This prop should be given as an array of strings that match the `name` prop of Victory component that should be excluded from selection.\\n\\n_example:_ `selectionBlackList={[\\\"first-line\\\", \\\"second-line\\\"]}`\\n\\n## selectionComponent\\n\\n`type: element`\\n\\nThe `selectionComponent` prop specifies the element to be rendered for the selected area. When\\nthis prop is not specified, a `<rect/>` will be rendered. This component will be supplied with the\\nfollowing props: `x`, `y`, `width`, `height`, and `style`.\\n\\n_default:_ `selectionComponent={<rect/>}`\\n\\n## selectionDimension\\n\\n`type: \\\"x\\\" || \\\"y\\\"`\\n\\nWhen the `selectionDimension` prop is set, the selection will only take the given dimension into account.\\nFor example, when `dimension` is set to \\\"x\\\", the selected area will cover the entire y domain\\nregardless of mouse position.\\n\\n_example:_ `selectionDimension=\\\"x\\\"`\\n\\n```playground\\n<VictoryChart\\n  containerComponent={\\n    <VictorySelectionContainer selectionDimension=\\\"x\\\"/>\\n  }\\n>\\n  <VictoryScatter\\n    style={{ data: { fill: ({ active }) => active ? \\\"tomato\\\" : \\\"gray\\\" } }}\\n  />\\n</VictoryChart>\\n```\\n\\n## selectionStyle\\n\\n`type: object`\\n\\nThe `selectionStyle` prop should be given as an object of style attributes to be applied to the\\n`selectionComponent`\\n\\n_default:_ `selectionStyle={{stroke: \\\"transparent\\\", fill: \\\"black\\\", fillOpacity: 0.1}}`\\n\\n```playground\\n<VictoryChart\\n  containerComponent={\\n    <VictorySelectionContainer\\n      selectionStyle={{\\n        fill: \\\"tomato\\\", fillOpacity: 0.5,\\n        stroke: \\\"tomato\\\", strokeWidth: 2\\n      }}\\n    />\\n  }\\n>\\n  <VictoryScatter\\n    style={{ data: { fill: ({ active }) => active ? \\\"tomato\\\" : \\\"gray\\\" } }}\\n  />\\n</VictoryChart>\\n```\\n\\n[victorycontainer]: /docs/victory-container\\n\",\"content\":\"\\n# VictorySelectionContainer\\n\\n`VictorySelectionContainer` is used to enable selecting data points within a highlighted region.\\nClicking and dragging will select an x-y region, and add the `active` prop to any elements\\ncorresponding to data points within the region. Create a select-box control by tying the set of\\nselected data points to other elements, such as filtered table.\\n\\n`VictorySelectionContainer` is similar to `VictoryBrushContainer`. `VictoryBrushContainer` may be\\nused to identify the domain of a selected region, whereas `VictorySelectionContainer` may be used to\\nidentify a list of data points within a selected region. `VictoryBrushContainer` will also create\\npersistent highlighted regions, whereas regions created by `VictorySelectionContainer`\\ndisappear after `onMouseUp` events.\\n\\n`VictorySelectionContainer` may be used with any Victory component that works with an x-y coordinate\\nsystem, and should be added as the `containerComponent` of the top-level component.\\nHowever, the component that uses it must be standalone\\n(`standalone={true}`), which is the default for all top-level Victory components.\\n\\n```playground\\n<VictoryChart containerComponent={<VictorySelectionContainer/>}>\\n  <VictoryScatter\\n    style={{ data: { fill: ({ active }) => active ? \\\"tomato\\\" : \\\"gray\\\" } }}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictorySelectionContainer` uses a superset of props used by [VictoryContainer][]. All props are optional.\\n\\n## activateSelectedData\\n\\n`type: boolean`\\n\\nWhen the `activateSelectedData` prop is set to true, the `active` prop will be set to true on all selected data points. When this prop is set to false, the `onSelection` and `onSelectionCleared` callbacks will still fire, but no mutations will occur via Victory's event system.\\n\\n_default:_ `activateSelectedData={true}`\\n\\n## disable\\n\\n`type: boolean`\\n\\nWhen the `disable` prop is set to `true`, `VictorySelectionContainer` events will not fire.\\n\\n## onSelection\\n\\n`type: function`\\n\\nThe `onSelection` prop accepts a function to be called whenever new data points are selected. The\\nfunction is called with the parameters `points` (an array of objects with `childName`, `eventKey`,\\nand `data`), `bounds` (an object with min / max arrays specified for `x` and `y`), and `props` (the props used by `VictorySelectionContainer`)\\n\\n_example:_ `onSelection={(points, bounds, props) => handleSelection(points, bounds, props)}`\\n\\n## onSelectionCleared\\n\\n`type: function`\\n\\nThe `onSelectionCleared` prop accepts a function to be called whenever the selection is cleared. The function is called with the props used by `VictorySelectionContainer`\\n\\n_example:_ `onSelectionCleared={(props) => handleSelectionCleared(props)}`\\n\\n## selectionBlacklist\\n\\n`type: array[string]`\\n\\nThe `selectionBlacklist` prop is used to exclude data from potential selections. This prop should be given as an array of strings that match the `name` prop of Victory component that should be excluded from selection.\\n\\n_example:_ `selectionBlackList={[\\\"first-line\\\", \\\"second-line\\\"]}`\\n\\n## selectionComponent\\n\\n`type: element`\\n\\nThe `selectionComponent` prop specifies the element to be rendered for the selected area. When\\nthis prop is not specified, a `<rect/>` will be rendered. This component will be supplied with the\\nfollowing props: `x`, `y`, `width`, `height`, and `style`.\\n\\n_default:_ `selectionComponent={<rect/>}`\\n\\n## selectionDimension\\n\\n`type: \\\"x\\\" || \\\"y\\\"`\\n\\nWhen the `selectionDimension` prop is set, the selection will only take the given dimension into account.\\nFor example, when `dimension` is set to \\\"x\\\", the selected area will cover the entire y domain\\nregardless of mouse position.\\n\\n_example:_ `selectionDimension=\\\"x\\\"`\\n\\n```playground\\n<VictoryChart\\n  containerComponent={\\n    <VictorySelectionContainer selectionDimension=\\\"x\\\"/>\\n  }\\n>\\n  <VictoryScatter\\n    style={{ data: { fill: ({ active }) => active ? \\\"tomato\\\" : \\\"gray\\\" } }}\\n  />\\n</VictoryChart>\\n```\\n\\n## selectionStyle\\n\\n`type: object`\\n\\nThe `selectionStyle` prop should be given as an object of style attributes to be applied to the\\n`selectionComponent`\\n\\n_default:_ `selectionStyle={{stroke: \\\"transparent\\\", fill: \\\"black\\\", fillOpacity: 0.1}}`\\n\\n```playground\\n<VictoryChart\\n  containerComponent={\\n    <VictorySelectionContainer\\n      selectionStyle={{\\n        fill: \\\"tomato\\\", fillOpacity: 0.5,\\n        stroke: \\\"tomato\\\", strokeWidth: 2\\n      }}\\n    />\\n  }\\n>\\n  <VictoryScatter\\n    style={{ data: { fill: ({ active }) => active ? \\\"tomato\\\" : \\\"gray\\\" } }}\\n  />\\n</VictoryChart>\\n```\\n\\n[victorycontainer]: /docs/victory-container\\n\"},{\"data\":{\"id\":29,\"title\":\"VictoryVoronoiContainer\",\"category\":\"containers\",\"type\":\"docs\",\"scope\":[\"round\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryVoronoiContainer\",\"depth\":1,\"slug\":\"victory-voronoi-container\"},{\"type\":\"heading\",\"value\":\"activateData\",\"depth\":2,\"slug\":\"activate-data\"},{\"type\":\"heading\",\"value\":\"activateLabels\",\"depth\":2,\"slug\":\"activate-labels\"},{\"type\":\"heading\",\"value\":\"disable\",\"depth\":2,\"slug\":\"disable\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"mouseFollowTooltips\",\"depth\":2,\"slug\":\"mouse-follow-tooltips\"},{\"type\":\"heading\",\"value\":\"onActivated\",\"depth\":2,\"slug\":\"on-activated\"},{\"type\":\"heading\",\"value\":\"onDeactivated\",\"depth\":2,\"slug\":\"on-deactivated\"},{\"type\":\"heading\",\"value\":\"radius\",\"depth\":2,\"slug\":\"radius\"},{\"type\":\"heading\",\"value\":\"voronoiBlacklist\",\"depth\":2,\"slug\":\"voronoi-blacklist\"},{\"type\":\"heading\",\"value\":\"voronoiDimension\",\"depth\":2,\"slug\":\"voronoi-dimension\"},{\"type\":\"heading\",\"value\":\"voronoiPadding\",\"depth\":2,\"slug\":\"voronoi-padding\"}],\"slug\":\"victory-voronoi-container\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryVoronoiContainer\",\"depth\":1,\"slug\":\"victory-voronoi-container\",\"category\":\"containers\",\"children\":[{\"type\":\"heading\",\"value\":\"activateData\",\"depth\":2,\"slug\":\"activate-data\"},{\"type\":\"heading\",\"value\":\"activateLabels\",\"depth\":2,\"slug\":\"activate-labels\"},{\"type\":\"heading\",\"value\":\"disable\",\"depth\":2,\"slug\":\"disable\"},{\"type\":\"heading\",\"value\":\"labels\",\"depth\":2,\"slug\":\"labels\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"mouseFollowTooltips\",\"depth\":2,\"slug\":\"mouse-follow-tooltips\"},{\"type\":\"heading\",\"value\":\"onActivated\",\"depth\":2,\"slug\":\"on-activated\"},{\"type\":\"heading\",\"value\":\"onDeactivated\",\"depth\":2,\"slug\":\"on-deactivated\"},{\"type\":\"heading\",\"value\":\"radius\",\"depth\":2,\"slug\":\"radius\"},{\"type\":\"heading\",\"value\":\"voronoiBlacklist\",\"depth\":2,\"slug\":\"voronoi-blacklist\"},{\"type\":\"heading\",\"value\":\"voronoiDimension\",\"depth\":2,\"slug\":\"voronoi-dimension\"},{\"type\":\"heading\",\"value\":\"voronoiPadding\",\"depth\":2,\"slug\":\"voronoi-padding\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 29\\ntitle: VictoryVoronoiContainer\\ncategory: containers\\ntype: docs\\nscope:\\n  - round\\n---\\n\\n# VictoryVoronoiContainer\\n\\n`VictoryVoronoiContainer` adds the ability to associate a mouse position with the data point(s)\\nclosest to it. When this container is added to a chart, changes in mouse position will add the `active`\\nprop to data and label components closest to the current mouse position. The closeness of data\\npoints to a given position is determined by calculating a [voronoi diagram][] based on the data of\\nevery child `VictoryVoronoiContainer` renders. This container is useful for adding hover interactions,\\nlike tooltips, to small data points, or charts with dense or overlapping data. See\\n[this example][] to learn how to use `VictoryVoronoiContainer` with tooltips.\\n\\n`VictoryVoronoiContainer` may be used with any Victory component that works with an x-y coordinate\\nsystem, and should be added as the `containerComponent` of the top-level component.\\nHowever, the component that uses it must be standalone\\n(`standalone={true}`), which is the default for all top-level Victory components.\\n\\n```playground\\n<VictoryChart domainPadding={{ y: 10 }}\\n  containerComponent={\\n    <VictoryVoronoiContainer\\n      labels={({ datum }) => `${round(datum.x, 2)}, ${round(datum.y, 2)}`}\\n    />\\n  }\\n>\\n  <VictoryLine\\n    y={(datum) => Math.sin(2 * Math.PI * datum.x)}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictoryVoronoiContainer` uses a superset of props used by [VictoryContainer][]. All props are optional.\\n\\n## activateData\\n\\n`type: boolean`\\n\\nWhen the `activateData` prop is set to true, the `active` prop will be set to true on all data components within a voronoi area. When this prop is set to false, the `onActivated` and `onDeactivated` callbacks will still fire, but no mutations to data components will occur via Victory's event system.\\n\\n_default:_ `activateData={true}`\\n\\n## activateLabels\\n\\n`type: boolean`\\n\\nWhen the `activateLabels` prop is set to true, the `active` prop will be set to true on all labels corresponding to points within a voronoi area. When this prop is set to false, the `onActivated` and `onDeactivated` callbacks will still fire, but no mutations to label components will occur via Victory's event system. Labels defined directly on `VictoryVoronoiContainer` via the `labels` prop will still appear when this prop is set to false.\\n\\n_default:_ `activateLabels={true}`\\n\\n## disable\\n\\n`type: boolean`\\n\\nWhen the `disable` prop is set to `true`, `VictoryVoronoiContainer` events will not fire.\\n\\n## labels\\n\\n`type: function`\\n\\nWhen a `labels` prop is provided to `VictoryVoronoiContainer` it will render a label component\\nrather than activating labels on the child components it renders. This is useful for creating multi-\\npoint tooltips. This prop should be given as a function which will be called once for each active point. The `labels` function will be called with the the props that correspond to the active label.\\n\\n_example:_ `labels={({ datum }) => \\\"y: \\\" + datum.y}`\\n\\n## labelComponent\\n\\n`type: element`\\n\\nThe `labelComponent` prop specified the component that will be rendered when `labels` are defined\\non `VictoryVoronoiContainer`. If the `labels` prop is omitted, no label component will be rendered.\\n\\n_default:_ `labelComponent={<VictoryTooltip centerOffset={{ x: 5 }} />}`\\n\\n```playground\\n<VictoryChart domain={{ y: [0, 6] }}\\n  containerComponent={\\n    <VictoryVoronoiContainer\\n      labels={() => \\\"Long, verbose labels\\\"}\\n      labelComponent={\\n        <VictoryTooltip  dy={-7} constrainToVisibleArea />\\n      }\\n    />\\n  }\\n>\\n  <VictoryScatter\\n  \\tstyle={{ data: { fill: \\\"red\\\" }, labels: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## mouseFollowTooltips\\n\\n`type: boolean`\\n\\nWhen the `mouseFollowTooltip` prop is set on `VictoryVoronoiContainer`, The position of the center of the tooltip follows the position of the mouse.\\n\\n```playground\\n<VictoryChart domain={{ y: [0, 6] }}\\n  containerComponent={\\n    <VictoryVoronoiContainer\\n      mouseFollowTooltips\\n      voronoiDimension=\\\"x\\\"\\n      labels={({ datum }) => `y: ${datum.y}`}\\n    />\\n  }\\n>\\n  <VictoryScatter\\n  \\tstyle={{ data: { fill: \\\"red\\\" }, labels: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## onActivated\\n\\n`type: function`\\n\\nThe `onActivated` prop accepts a function to be called whenever new data points are activated.\\nThe function is called with the parameters `points` (an array of active data objects) and `props` (the props used by `VictoryVoronoiContainer`).\\n\\n_example:_ `onActivated={(points, props) => filterList(points, props)}`\\n\\n## onDeactivated\\n\\n`type: function`\\n\\nThe `onDeactivated` prop accepts a function to be called whenever points are deactivated.\\nThe function is called with the parameters `points` (an array of the newly-deactivated data objects) and `props` (the props used by `VictoryVoronoiContainer`).\\n\\n_example:_ `onDeactivated={(points, props) => removeFromList(points, props)}`\\n\\n## radius\\n\\n`type: number`\\n\\nWhen the `radius` prop is set, the voronoi areas associated with each data point will be no larger\\nthan the given radius. This prop should be given as a number.\\n\\n_example:_ `radius={25}`\\n\\n## voronoiBlacklist\\n\\n`type: array[string]`\\n\\nThe `voronoiBlacklist` prop is used to specify a list of components to ignore when calculating a shared voronoi diagram. Components with a `name` prop matching an element in the `voronoiBlacklist` array will be ignored by `VictoryVoronoiContainer`. Ignored components will never be flagged as active, and will not contribute date to shared tooltips or labels.\\n\\n_example:_ `voronoiBlacklist={[\\\"redPoints\\\"]}`\\n\\n```playground\\n<VictoryChart domain={{ y: [0, 6] }}\\n  containerComponent={\\n    <VictoryVoronoiContainer\\n      voronoiBlacklist={[\\\"redPoints\\\"]}\\n      labels={({ datum }) => `y: ${datum.y}`}\\n    />\\n  }\\n>\\n  <VictoryScatter name=\\\"redPoints\\\"\\n  \\tstyle={{ data: { fill: \\\"red\\\" }, labels: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## voronoiDimension\\n\\n`type: \\\"x\\\" || \\\"y\\\"`\\n\\nWhen the `voronoiDimension` prop is set, voronoi selection will only take the given dimension into account.\\nFor example, when `dimension` is set to \\\"x\\\", all data points matching a particular x mouse position\\nwill be activated regardless of y value. When this prop is not given, voronoi selection is\\ndetermined by both x any y values.\\n\\n_example:_ `voronoiDimension=\\\"x\\\"`\\n\\n```playground\\n<VictoryChart domain={{ y: [0, 6] }}\\n  containerComponent={\\n    <VictoryVoronoiContainer\\n      voronoiDimension=\\\"x\\\"\\n      labels={({ datum }) => `y: ${datum.y}`}\\n    />\\n  }\\n>\\n  <VictoryScatter\\n  \\tstyle={{ data: { fill: \\\"red\\\" }, labels: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## voronoiPadding\\n\\n`type: number`\\n\\nWhen the `voronoiPadding` prop is given, the area of the chart that will trigger voronoi events is\\nreduced by the given padding on every side. By default, no padding is applied, and the entire range\\nof a given chart may trigger voronoi events. This prop should be given as a number.\\n\\n_example:_ `voronoiPadding={5}`\\n\\n[victorycontainer]: /docs/victory-container\\n\\n[voronoi diagram]: https://github.com/d3/d3-voronoi\\n\\n[this example]: /gallery/voronoi-tooltips-grouped\\n\",\"content\":\"\\n# VictoryVoronoiContainer\\n\\n`VictoryVoronoiContainer` adds the ability to associate a mouse position with the data point(s)\\nclosest to it. When this container is added to a chart, changes in mouse position will add the `active`\\nprop to data and label components closest to the current mouse position. The closeness of data\\npoints to a given position is determined by calculating a [voronoi diagram][] based on the data of\\nevery child `VictoryVoronoiContainer` renders. This container is useful for adding hover interactions,\\nlike tooltips, to small data points, or charts with dense or overlapping data. See\\n[this example][] to learn how to use `VictoryVoronoiContainer` with tooltips.\\n\\n`VictoryVoronoiContainer` may be used with any Victory component that works with an x-y coordinate\\nsystem, and should be added as the `containerComponent` of the top-level component.\\nHowever, the component that uses it must be standalone\\n(`standalone={true}`), which is the default for all top-level Victory components.\\n\\n```playground\\n<VictoryChart domainPadding={{ y: 10 }}\\n  containerComponent={\\n    <VictoryVoronoiContainer\\n      labels={({ datum }) => `${round(datum.x, 2)}, ${round(datum.y, 2)}`}\\n    />\\n  }\\n>\\n  <VictoryLine\\n    y={(datum) => Math.sin(2 * Math.PI * datum.x)}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictoryVoronoiContainer` uses a superset of props used by [VictoryContainer][]. All props are optional.\\n\\n## activateData\\n\\n`type: boolean`\\n\\nWhen the `activateData` prop is set to true, the `active` prop will be set to true on all data components within a voronoi area. When this prop is set to false, the `onActivated` and `onDeactivated` callbacks will still fire, but no mutations to data components will occur via Victory's event system.\\n\\n_default:_ `activateData={true}`\\n\\n## activateLabels\\n\\n`type: boolean`\\n\\nWhen the `activateLabels` prop is set to true, the `active` prop will be set to true on all labels corresponding to points within a voronoi area. When this prop is set to false, the `onActivated` and `onDeactivated` callbacks will still fire, but no mutations to label components will occur via Victory's event system. Labels defined directly on `VictoryVoronoiContainer` via the `labels` prop will still appear when this prop is set to false.\\n\\n_default:_ `activateLabels={true}`\\n\\n## disable\\n\\n`type: boolean`\\n\\nWhen the `disable` prop is set to `true`, `VictoryVoronoiContainer` events will not fire.\\n\\n## labels\\n\\n`type: function`\\n\\nWhen a `labels` prop is provided to `VictoryVoronoiContainer` it will render a label component\\nrather than activating labels on the child components it renders. This is useful for creating multi-\\npoint tooltips. This prop should be given as a function which will be called once for each active point. The `labels` function will be called with the the props that correspond to the active label.\\n\\n_example:_ `labels={({ datum }) => \\\"y: \\\" + datum.y}`\\n\\n## labelComponent\\n\\n`type: element`\\n\\nThe `labelComponent` prop specified the component that will be rendered when `labels` are defined\\non `VictoryVoronoiContainer`. If the `labels` prop is omitted, no label component will be rendered.\\n\\n_default:_ `labelComponent={<VictoryTooltip centerOffset={{ x: 5 }} />}`\\n\\n```playground\\n<VictoryChart domain={{ y: [0, 6] }}\\n  containerComponent={\\n    <VictoryVoronoiContainer\\n      labels={() => \\\"Long, verbose labels\\\"}\\n      labelComponent={\\n        <VictoryTooltip  dy={-7} constrainToVisibleArea />\\n      }\\n    />\\n  }\\n>\\n  <VictoryScatter\\n  \\tstyle={{ data: { fill: \\\"red\\\" }, labels: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## mouseFollowTooltips\\n\\n`type: boolean`\\n\\nWhen the `mouseFollowTooltip` prop is set on `VictoryVoronoiContainer`, The position of the center of the tooltip follows the position of the mouse.\\n\\n```playground\\n<VictoryChart domain={{ y: [0, 6] }}\\n  containerComponent={\\n    <VictoryVoronoiContainer\\n      mouseFollowTooltips\\n      voronoiDimension=\\\"x\\\"\\n      labels={({ datum }) => `y: ${datum.y}`}\\n    />\\n  }\\n>\\n  <VictoryScatter\\n  \\tstyle={{ data: { fill: \\\"red\\\" }, labels: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## onActivated\\n\\n`type: function`\\n\\nThe `onActivated` prop accepts a function to be called whenever new data points are activated.\\nThe function is called with the parameters `points` (an array of active data objects) and `props` (the props used by `VictoryVoronoiContainer`).\\n\\n_example:_ `onActivated={(points, props) => filterList(points, props)}`\\n\\n## onDeactivated\\n\\n`type: function`\\n\\nThe `onDeactivated` prop accepts a function to be called whenever points are deactivated.\\nThe function is called with the parameters `points` (an array of the newly-deactivated data objects) and `props` (the props used by `VictoryVoronoiContainer`).\\n\\n_example:_ `onDeactivated={(points, props) => removeFromList(points, props)}`\\n\\n## radius\\n\\n`type: number`\\n\\nWhen the `radius` prop is set, the voronoi areas associated with each data point will be no larger\\nthan the given radius. This prop should be given as a number.\\n\\n_example:_ `radius={25}`\\n\\n## voronoiBlacklist\\n\\n`type: array[string]`\\n\\nThe `voronoiBlacklist` prop is used to specify a list of components to ignore when calculating a shared voronoi diagram. Components with a `name` prop matching an element in the `voronoiBlacklist` array will be ignored by `VictoryVoronoiContainer`. Ignored components will never be flagged as active, and will not contribute date to shared tooltips or labels.\\n\\n_example:_ `voronoiBlacklist={[\\\"redPoints\\\"]}`\\n\\n```playground\\n<VictoryChart domain={{ y: [0, 6] }}\\n  containerComponent={\\n    <VictoryVoronoiContainer\\n      voronoiBlacklist={[\\\"redPoints\\\"]}\\n      labels={({ datum }) => `y: ${datum.y}`}\\n    />\\n  }\\n>\\n  <VictoryScatter name=\\\"redPoints\\\"\\n  \\tstyle={{ data: { fill: \\\"red\\\" }, labels: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## voronoiDimension\\n\\n`type: \\\"x\\\" || \\\"y\\\"`\\n\\nWhen the `voronoiDimension` prop is set, voronoi selection will only take the given dimension into account.\\nFor example, when `dimension` is set to \\\"x\\\", all data points matching a particular x mouse position\\nwill be activated regardless of y value. When this prop is not given, voronoi selection is\\ndetermined by both x any y values.\\n\\n_example:_ `voronoiDimension=\\\"x\\\"`\\n\\n```playground\\n<VictoryChart domain={{ y: [0, 6] }}\\n  containerComponent={\\n    <VictoryVoronoiContainer\\n      voronoiDimension=\\\"x\\\"\\n      labels={({ datum }) => `y: ${datum.y}`}\\n    />\\n  }\\n>\\n  <VictoryScatter\\n  \\tstyle={{ data: { fill: \\\"red\\\" }, labels: { fill: \\\"red\\\" } }}\\n    data={[\\n      { x: 0, y: 2 }, { x: 2, y: 3 }, { x: 4, y: 4 }, { x: 6, y: 5 }\\n    ]}\\n  />\\n  <VictoryScatter\\n    data={[\\n      { x: 2, y: 2 }, { x: 4, y: 3 }, { x: 6, y: 4 }, { x: 8, y: 5 }\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## voronoiPadding\\n\\n`type: number`\\n\\nWhen the `voronoiPadding` prop is given, the area of the chart that will trigger voronoi events is\\nreduced by the given padding on every side. By default, no padding is applied, and the entire range\\nof a given chart may trigger voronoi events. This prop should be given as a number.\\n\\n_example:_ `voronoiPadding={5}`\\n\\n[victorycontainer]: /docs/victory-container\\n[voronoi diagram]: https://github.com/d3/d3-voronoi\\n[this example]: /gallery/voronoi-tooltips-grouped\\n\"},{\"data\":{\"id\":31,\"title\":\"VictoryZoomContainer\",\"category\":\"containers\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryZoomContainer\",\"depth\":1,\"slug\":\"victory-zoom-container\"},{\"type\":\"heading\",\"value\":\"allowPan\",\"depth\":2,\"slug\":\"allow-pan\"},{\"type\":\"heading\",\"value\":\"allowZoom\",\"depth\":2,\"slug\":\"allow-zoom\"},{\"type\":\"heading\",\"value\":\"clipContainerComponent\",\"depth\":2,\"slug\":\"clip-container-component\"},{\"type\":\"heading\",\"value\":\"disable\",\"depth\":2,\"slug\":\"disable\"},{\"type\":\"heading\",\"value\":\"downsample\",\"depth\":2,\"slug\":\"downsample\"},{\"type\":\"heading\",\"value\":\"minimumZoom\",\"depth\":2,\"slug\":\"minimum-zoom\"},{\"type\":\"heading\",\"value\":\"onZoomDomainChange\",\"depth\":2,\"slug\":\"on-zoom-domain-change\"},{\"type\":\"heading\",\"value\":\"zoomDomain\",\"depth\":2,\"slug\":\"zoom-domain\"},{\"type\":\"heading\",\"value\":\"zoomDimension\",\"depth\":2,\"slug\":\"zoom-dimension\"}],\"slug\":\"victory-zoom-container\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryZoomContainer\",\"depth\":1,\"slug\":\"victory-zoom-container\",\"category\":\"containers\",\"children\":[{\"type\":\"heading\",\"value\":\"allowPan\",\"depth\":2,\"slug\":\"allow-pan\"},{\"type\":\"heading\",\"value\":\"allowZoom\",\"depth\":2,\"slug\":\"allow-zoom\"},{\"type\":\"heading\",\"value\":\"clipContainerComponent\",\"depth\":2,\"slug\":\"clip-container-component\"},{\"type\":\"heading\",\"value\":\"disable\",\"depth\":2,\"slug\":\"disable\"},{\"type\":\"heading\",\"value\":\"downsample\",\"depth\":2,\"slug\":\"downsample\"},{\"type\":\"heading\",\"value\":\"minimumZoom\",\"depth\":2,\"slug\":\"minimum-zoom\"},{\"type\":\"heading\",\"value\":\"onZoomDomainChange\",\"depth\":2,\"slug\":\"on-zoom-domain-change\"},{\"type\":\"heading\",\"value\":\"zoomDomain\",\"depth\":2,\"slug\":\"zoom-domain\"},{\"type\":\"heading\",\"value\":\"zoomDimension\",\"depth\":2,\"slug\":\"zoom-dimension\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 31\\ntitle: VictoryZoomContainer\\ncategory: containers\\ntype: docs\\nscope: null\\n---\\n\\n# VictoryZoomContainer\\n\\n`VictoryZoomContainer` provides pan and zoom behavior for any Victory component that works with an\\nx, y axis. Zoom events are controlled by scrolling, and panning events are controlled by dragging.\\n[See an example of a zoomable chart][]\\n\\n`VictoryZoomContainer` may be used with any Victory component that works with an x-y coordinate\\nsystem, and should be added as the `containerComponent` of the top-level component. However, the component that uses it must be standalone\\n(`standalone={true}`), which is the default for all top-level Victory components.\\n\\n```playground\\n<VictoryChart domainPadding={{ y: 10 }}\\n  containerComponent={\\n    <VictoryZoomContainer/>\\n  }\\n>\\n  <VictoryScatter\\n    y={(datum) => Math.sin(2 * Math.PI * datum.x)}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictoryZoomContainer` uses a superset of props used by [VictoryContainer][]. All props are optional.\\n\\n## allowPan\\n\\n`type: boolean`\\n\\nThe optional `allowPan` prop accepts a boolean that enables the panning functionality. Zooming will still be enabled when the `allowPan` prop is set to false.\\n\\n_default:_ `allowPan={true}`\\n\\n## allowZoom\\n\\n`type: boolean`\\n\\nThe optional `allowZoom` prop accepts a boolean that enables the zoom functionality. Panning will still be enabled when the `allowZoom` prop is set to false.\\n\\n_default:_ `allowZoom={true}`\\n\\n## clipContainerComponent\\n\\n`type: element`\\n\\n`VictoryZoomContainer` works by clipping data outside of a given domain. `VictoryZoomContainer` uses `VictoryClipContainer` by default. This prop should not be replaced with a custom component, but you may want to set props on `VictoryClipContainer`, such as `clipPadding`\\n\\n_example:_ `clipContainerComponent={<VictoryClipContainer clipPadding={{top: 10, right: 10}}}/>}`\\n\\n## disable\\n\\n`type: boolean`\\n\\nWhen the `disable` prop is set to `true`, `VictoryZoomContainer` events will not fire.\\n\\n## downsample\\n\\n`type: number || boolean`\\n\\nThe `downsample` prop limits the number of points that will be displayed. This prop may be given as a boolean or a number corresponding to maximum number of points. When given as a boolean, the maximum number of points that will be plotted is 150.\\n\\n## minimumZoom\\n\\n`type: { x: number, y: number }`\\n\\nThe `minimumZoom` prop sets a minimum domain extent for the zoomed chart. When the difference between\\nthe maximum and minimum of a zoomed domain is equal to the `minimumZoom` in either dimension, the\\ncomponent will stop responding to events that would normally trigger zooming in. Zooming out and\\npanning will still be enabled. When this prop is not specified, the default minimum zoom will\\ncover 1 / 1000th of the original domain. This prop should be given as an object with numeric values\\nfor x and y.\\n\\n_example:_ `minimumZoom={{x: 1, y: 0.01}}`\\n\\n## onZoomDomainChange\\n\\n`type: function`\\n\\nThe optional `onZoomDomainChange` prop accepts an function to be called on each update to the visible domain. The function accepts the parameters `domain` (the updated domain) and `props` (the props used by `VictoryZoomContainer`).\\n\\n_example:_ `onZoomDomainChange={(domain, props) => handleDomainChange(domain, props)}`\\n\\n## zoomDomain\\n\\n`type: { x: [low, high], y: [low, high] }`\\n\\nThe `zoomDomain` prop describes the zoomed state. This prop is an object that\\nspecifies separate arrays for x and y. Each array is a tuple that describes the minimum and maximum\\nvalues to render. If this prop is not provided initially, the chart will render without an initial\\nzoom, displaying the entire dataset. Updates to `zoomDomain` will trigger a re-render of the chart\\nwith the new domain.\\n\\n_example:_ `zoomDomain={{x: [0, 100]}}`\\n\\n## zoomDimension\\n\\n`type: \\\"x\\\" || \\\"y\\\"`\\n\\nWhen the `zoomDimension` prop is set, panning and zooming will be restricted to the given dimension\\n(either x or y), and the domain of the other dimension will remain static. When this prop is not\\nspecified, both x and y dimensions will pan and zoom.\\n\\n_example:_ `zoomDimension=\\\"x\\\"`\\n\\n[victorycontainer]: /docs/victory-container\\n\\n[see an example of a zoomable chart]: /guides/brush-and-zoom\\n\",\"content\":\"\\n# VictoryZoomContainer\\n\\n`VictoryZoomContainer` provides pan and zoom behavior for any Victory component that works with an\\nx, y axis. Zoom events are controlled by scrolling, and panning events are controlled by dragging.\\n[See an example of a zoomable chart][]\\n\\n`VictoryZoomContainer` may be used with any Victory component that works with an x-y coordinate\\nsystem, and should be added as the `containerComponent` of the top-level component. However, the component that uses it must be standalone\\n(`standalone={true}`), which is the default for all top-level Victory components.\\n\\n```playground\\n<VictoryChart domainPadding={{ y: 10 }}\\n  containerComponent={\\n    <VictoryZoomContainer/>\\n  }\\n>\\n  <VictoryScatter\\n    y={(datum) => Math.sin(2 * Math.PI * datum.x)}\\n  />\\n</VictoryChart>\\n```\\n\\n`VictoryZoomContainer` uses a superset of props used by [VictoryContainer][]. All props are optional.\\n\\n## allowPan\\n\\n`type: boolean`\\n\\nThe optional `allowPan` prop accepts a boolean that enables the panning functionality. Zooming will still be enabled when the `allowPan` prop is set to false.\\n\\n_default:_ `allowPan={true}`\\n\\n## allowZoom\\n\\n`type: boolean`\\n\\nThe optional `allowZoom` prop accepts a boolean that enables the zoom functionality. Panning will still be enabled when the `allowZoom` prop is set to false.\\n\\n_default:_ `allowZoom={true}`\\n\\n## clipContainerComponent\\n\\n`type: element`\\n\\n`VictoryZoomContainer` works by clipping data outside of a given domain. `VictoryZoomContainer` uses `VictoryClipContainer` by default. This prop should not be replaced with a custom component, but you may want to set props on `VictoryClipContainer`, such as `clipPadding`\\n\\n_example:_ `clipContainerComponent={<VictoryClipContainer clipPadding={{top: 10, right: 10}}}/>}`\\n\\n## disable\\n\\n`type: boolean`\\n\\nWhen the `disable` prop is set to `true`, `VictoryZoomContainer` events will not fire.\\n\\n## downsample\\n\\n`type: number || boolean`\\n\\nThe `downsample` prop limits the number of points that will be displayed. This prop may be given as a boolean or a number corresponding to maximum number of points. When given as a boolean, the maximum number of points that will be plotted is 150.\\n\\n## minimumZoom\\n\\n`type: { x: number, y: number }`\\n\\nThe `minimumZoom` prop sets a minimum domain extent for the zoomed chart. When the difference between\\nthe maximum and minimum of a zoomed domain is equal to the `minimumZoom` in either dimension, the\\ncomponent will stop responding to events that would normally trigger zooming in. Zooming out and\\npanning will still be enabled. When this prop is not specified, the default minimum zoom will\\ncover 1 / 1000th of the original domain. This prop should be given as an object with numeric values\\nfor x and y.\\n\\n_example:_ `minimumZoom={{x: 1, y: 0.01}}`\\n\\n## onZoomDomainChange\\n\\n`type: function`\\n\\nThe optional `onZoomDomainChange` prop accepts an function to be called on each update to the visible domain. The function accepts the parameters `domain` (the updated domain) and `props` (the props used by `VictoryZoomContainer`).\\n\\n_example:_ `onZoomDomainChange={(domain, props) => handleDomainChange(domain, props)}`\\n\\n## zoomDomain\\n\\n`type: { x: [low, high], y: [low, high] }`\\n\\nThe `zoomDomain` prop describes the zoomed state. This prop is an object that\\nspecifies separate arrays for x and y. Each array is a tuple that describes the minimum and maximum\\nvalues to render. If this prop is not provided initially, the chart will render without an initial\\nzoom, displaying the entire dataset. Updates to `zoomDomain` will trigger a re-render of the chart\\nwith the new domain.\\n\\n_example:_ `zoomDomain={{x: [0, 100]}}`\\n\\n## zoomDimension\\n\\n`type: \\\"x\\\" || \\\"y\\\"`\\n\\nWhen the `zoomDimension` prop is set, panning and zooming will be restricted to the given dimension\\n(either x or y), and the domain of the other dimension will remain static. When this prop is not\\nspecified, both x and y dimensions will pan and zoom.\\n\\n_example:_ `zoomDimension=\\\"x\\\"`\\n\\n[victorycontainer]: /docs/victory-container\\n[see an example of a zoomable chart]: /guides/brush-and-zoom\\n\"},{\"data\":{\"id\":32,\"title\":\"createContainer\",\"category\":\"containers\",\"type\":\"docs\",\"scope\":[\"random\",\"range\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"createContainer\",\"depth\":1,\"slug\":\"create-container\"},{\"type\":\"heading\",\"value\":\"Arguments\",\"depth\":2,\"slug\":\"arguments\"},{\"type\":\"heading\",\"value\":\"Behavior\",\"depth\":3,\"slug\":\"behavior\"},{\"type\":\"heading\",\"value\":\"Example\",\"depth\":3,\"slug\":\"example\"}],\"slug\":\"create-container\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"createContainer\",\"depth\":1,\"slug\":\"create-container\",\"category\":\"containers\",\"children\":[{\"type\":\"heading\",\"value\":\"Arguments\",\"depth\":2,\"slug\":\"arguments\",\"children\":[{\"type\":\"heading\",\"value\":\"Behavior\",\"depth\":3,\"slug\":\"behavior\"},{\"type\":\"heading\",\"value\":\"Example\",\"depth\":3,\"slug\":\"example\"}]}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 32\\ntitle: createContainer\\ncategory: containers\\ntype: docs\\nscope:\\n  - random\\n  - range\\n---\\n\\n# createContainer\\n\\n`createContainer` makes a container component with multiple behaviors. It allows you to effectively\\ncombine any two of the following containers: `VictoryBrushContainer`,\\n`VictoryCursorContainer`, `VictorySelectionContainer`, `VictoryVoronoiContainer`, or `VictoryZoomContainer`.\\n\\n```js\\nconst VictoryZoomVoronoiContainer = createContainer(\\\"zoom\\\", \\\"voronoi\\\");\\n```\\n\\n## Arguments\\n\\nThe function takes two `behavior` arguments as strings:\\n\\n```js\\ncreateContainer(behaviorA, behaviorB)\\n```\\n\\n### Behavior\\n\\nEach `behavior` must be one of the following strings:\\n`\\\"brush\\\"`, `\\\"cursor\\\"`, `\\\"selection\\\"`, `\\\"voronoi\\\"`, and `\\\"zoom\\\"`.\\nThe resulting container uses the events from both behaviors.\\nFor example, if both behaviors use the click event (like zoom and selection) the combined container\\nwill trigger both behaviors' events on each click.\\n\\n**Note**: Order of the behaviors matters in a few cases.\\nIt is recommended to use `\\\"zoom\\\"` before any other behaviors: for example,\\n`createContainer(\\\"zoom\\\", \\\"voronoi\\\")` instead of `createContainer(\\\"voronoi\\\", \\\"zoom\\\")`.\\n\\n### Example\\n\\nThe following example creates a custom container that combines `VictoryVoronoiContainer` and\\n`VictoryZoomContainer`. Hovering over the chart will use Voronoi to highlight data points,\\nwhile scrolling and dragging will zoom and pan.\\n\\n```playground_norender\\nconst VictoryZoomVoronoiContainer = createContainer(\\\"zoom\\\", \\\"voronoi\\\");\\nconst data = range(100).map((x) => ({x, y: 100 + x + random(10)}));\\n\\nconst App = () => (\\n  <VictoryChart\\n    containerComponent={\\n      <VictoryZoomVoronoiContainer\\n        labels={({ datum }) => `${datum.x}, ${datum.y}`}\\n      />\\n    }>\\n    <VictoryScatter data={data} />\\n  </VictoryChart>\\n);\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\",\"content\":\"# createContainer\\n\\n`createContainer` makes a container component with multiple behaviors. It allows you to effectively\\ncombine any two of the following containers: `VictoryBrushContainer`,\\n`VictoryCursorContainer`, `VictorySelectionContainer`, `VictoryVoronoiContainer`, or `VictoryZoomContainer`.\\n\\n```js\\nconst VictoryZoomVoronoiContainer = createContainer(\\\"zoom\\\", \\\"voronoi\\\");\\n```\\n\\n## Arguments\\n\\nThe function takes two `behavior` arguments as strings:\\n\\n```js\\ncreateContainer(behaviorA, behaviorB)\\n```\\n\\n### Behavior\\n\\nEach `behavior` must be one of the following strings:\\n`\\\"brush\\\"`, `\\\"cursor\\\"`, `\\\"selection\\\"`, `\\\"voronoi\\\"`, and `\\\"zoom\\\"`.\\nThe resulting container uses the events from both behaviors.\\nFor example, if both behaviors use the click event (like zoom and selection) the combined container\\nwill trigger both behaviors' events on each click.\\n\\n**Note**: Order of the behaviors matters in a few cases.\\nIt is recommended to use `\\\"zoom\\\"` before any other behaviors: for example,\\n`createContainer(\\\"zoom\\\", \\\"voronoi\\\")` instead of `createContainer(\\\"voronoi\\\", \\\"zoom\\\")`.\\n\\n### Example\\n\\nThe following example creates a custom container that combines `VictoryVoronoiContainer` and\\n`VictoryZoomContainer`. Hovering over the chart will use Voronoi to highlight data points,\\nwhile scrolling and dragging will zoom and pan.\\n\\n```playground_norender\\nconst VictoryZoomVoronoiContainer = createContainer(\\\"zoom\\\", \\\"voronoi\\\");\\nconst data = range(100).map((x) => ({x, y: 100 + x + random(10)}));\\n\\nconst App = () => (\\n  <VictoryChart\\n    containerComponent={\\n      <VictoryZoomVoronoiContainer\\n        labels={({ datum }) => `${datum.x}, ${datum.y}`}\\n      />\\n    }>\\n    <VictoryScatter data={data} />\\n  </VictoryChart>\\n);\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\"},{\"data\":{\"id\":33,\"title\":\"Common Container Props\",\"category\":\"containers\",\"sidebar\":true,\"scope\":null,\"type\":\"docs\",\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Common Container Props\",\"depth\":1,\"slug\":\"common-container-props\"},{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"className\",\"depth\":2,\"slug\":\"class-name\"},{\"type\":\"heading\",\"value\":\"containerId\",\"depth\":2,\"slug\":\"container-id\"},{\"type\":\"heading\",\"value\":\"containerRef\",\"depth\":2,\"slug\":\"container-ref\"},{\"type\":\"heading\",\"value\":\"desc\",\"depth\":2,\"slug\":\"desc\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"portalComponent\",\"depth\":2,\"slug\":\"portal-component\"},{\"type\":\"heading\",\"value\":\"portalZIndex\",\"depth\":2,\"slug\":\"portal-z-index\"},{\"type\":\"heading\",\"value\":\"responsive\",\"depth\":2,\"slug\":\"responsive\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"title\",\"depth\":2,\"slug\":\"title\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"Native-Only Props\",\"depth\":2,\"slug\":\"native-only-props\"},{\"type\":\"heading\",\"value\":\"onTouchStart\",\"depth\":2,\"slug\":\"on-touch-start\"},{\"type\":\"heading\",\"value\":\"onTouchEnd\",\"depth\":2,\"slug\":\"on-touch-end\"}],\"slug\":\"common-container-props\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Common Container Props\",\"depth\":1,\"slug\":\"common-container-props\",\"category\":\"containers\",\"children\":[{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"className\",\"depth\":2,\"slug\":\"class-name\"},{\"type\":\"heading\",\"value\":\"containerId\",\"depth\":2,\"slug\":\"container-id\"},{\"type\":\"heading\",\"value\":\"containerRef\",\"depth\":2,\"slug\":\"container-ref\"},{\"type\":\"heading\",\"value\":\"desc\",\"depth\":2,\"slug\":\"desc\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"portalComponent\",\"depth\":2,\"slug\":\"portal-component\"},{\"type\":\"heading\",\"value\":\"portalZIndex\",\"depth\":2,\"slug\":\"portal-z-index\"},{\"type\":\"heading\",\"value\":\"responsive\",\"depth\":2,\"slug\":\"responsive\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"title\",\"depth\":2,\"slug\":\"title\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"Native-Only Props\",\"depth\":2,\"slug\":\"native-only-props\"},{\"type\":\"heading\",\"value\":\"onTouchStart\",\"depth\":2,\"slug\":\"on-touch-start\"},{\"type\":\"heading\",\"value\":\"onTouchEnd\",\"depth\":2,\"slug\":\"on-touch-end\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 33\\ntitle: Common Container Props\\ncategory: containers\\nsidebar: true\\nscope: null\\ntype: docs\\n---\\n\\n# Common Container Props\\n\\n## children\\n\\n`type: element || array[element]`\\n\\nThe `children` prop specifies the child or children that will be rendered within the container. This prop should not be set manually. It will be set by whatever Victory component is rendering the container.\\n\\n## className\\n\\n`type: string`\\n\\nThe `className` prop specifies a className that will be applied to the outer-most div rendered by `VictoryContainer` if this prop is not set, the className will default to \\\"VictoryContainer\\\"\\n\\n_example:_ `className=\\\"myChart\\\"`\\n\\n## containerId\\n\\n`type: number || string`\\n\\nThe `containerId` prop may be used to set a deterministic id for the container. When a `containerId` is not manually set, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing.\\n\\n## containerRef\\n\\n`type: function`\\n\\nThe `containerRef` prop may be used to attach a ref to the outermost element rendered by the container. This prop should be given as a function.\\n\\n_example:_ `containerRef={(ref) => { this.chartRef = ref; }}`\\n\\n## desc\\n\\n`type: string`\\n\\nThe `desc` prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more descriptive this title is, the more useful it will be for people using screen readers.\\n\\n_example:_ `desc=\\\"Golden retrievers make up 30%, Labs make up 25%, and other dog breeds are not represented above 5% each.\\\"`\\n\\n## events\\n\\n`type: object`\\n\\nThe `events` prop attaches arbitrary event handlers to the container element. This prop should be\\ngiven as an object of event names and corresponding [React event handlers][]. Events defined directly\\nvia this prop will be masked by `defaultEvents` on `VictorySelectionContainer` (`onMouseDown`,\\n`onMouseUp`, and `onMouseMove`), and by any events defined through Victory's event\\nsystem that target parent elements.\\n\\n_example:_ `events={{onClick: (evt) => alert(\\\"x: \\\" + evt.clientX)}}`\\n\\n## height\\n\\n`type: number`\\n\\nThe `height` prop determines the height of the containing `<svg>`. By default VictoryContainer renders responsive containers with the `viewBox` attribute set to `viewBox=\\\"0, 0, width, height\\\"` and `width=\\\"100%\\\"`, `height=\\\"100%\\\"`. In responsive containers, the `width` and `height` props affect the _aspect ratio_ of the rendered component, while the absolute width and height are determined by the container. To render a static container, set `responsive={false}`\\n\\n_example:_ `height={350}`\\n\\n## portalComponent\\n\\n`type: element`\\n\\nThe `portalComponent` prop takes a component instance which will be used as a container for children that should render inside a top-level container so that they will always appear above other elements. [VictoryTooltip][] renders inside a portal so that tooltips always render above data. [VictoryPortal][] is used to define elements that should render in the portal container. This prop defaults to [Portal][], and should only be overridden when changing rendered elements from SVG to another type of element _e.g.,_ [react-native-svg][] elements.\\n\\n_default:_ `portalComponent={<Portal/>}`\\n\\n## portalZIndex\\n\\n`type: number`\\n\\nThe `portalZIndex` prop determines the z-index of the div enclosing the portal component. If a `portalZIndex` prop is not set, the z-index of the enclosing div will be set to 99.\\n\\n## responsive\\n\\n`type: boolean`\\n\\nThe `responsive` prop specifies whether the rendered container should be a responsive container with a `viewBox` attribute, or a static container with absolute width and height.\\n\\n_default:_ `responsive={true}`\\n\\n## style\\n\\n`type: object`\\n\\nThe `style` prop defines the style of the container, and should be given as an object of style attributes.\\nThe `width` and `height` should be specified via props instead of style attributes as they determine\\nrelative layout for components.\\n\\n_example:_ `style={{border: \\\"1px solid #ccc\\\"}}`\\n\\n_default (provided by default theme):_ VictoryTheme.grayscale. See [VictoryTheme][] for more detail.\\n\\n## theme\\n\\n`type: object`\\n\\nThe `theme` prop specifies a theme to use for determining styles and layout props for a\\ncomponent. Any styles or props defined in `theme` may be overridden by props specified on the\\ncomponent instance. By default, components use a [grayscale theme][]. [Read more about themes here][].\\n\\n_example:_ `theme={VictoryTheme.material}`\\n\\n## title\\n\\n`type: string`\\n\\nThe `title` prop specifies the title to be applied to the SVG to assist with accessibility for screen readers. The more descriptive this title is, the more useful it will be for people using screen readers\\n\\n_example:_ `title=\\\"Popularity of Dog Breeds by Percentage\\\"`\\n\\n## width\\n\\n`type: number`\\n\\nThe `width` prop determines the width of the containing `<svg>`. By default VictoryContainer renders responsive containers with the `viewBox` attribute set to `viewBox=\\\"0, 0, width, height\\\"` and `width=\\\"100%\\\"`, `height=\\\"auto\\\"`. In responsive containers, the `width` and `height` props affect the _aspect ratio_ of the rendered component, while the absolute width and height are determined by the container. To render a static container, set `responsive={false}`\\n\\n_example:_ `width={350}`\\n\\n## Native-Only Props\\n\\n## onTouchStart\\n\\n`type: function`\\n\\nThe optional `onTouchStart` prop takes a function that is called on every touch event on the chart (when using `victory-native`). The most common use of `onTouchStart` is to prevent the chart's parent `ScrollView` from scrolling, so that the chart and container can be interacted with unencumbered. The function accepts a single parameter, `event`, a React Native [Synthetic Event][]. Also see `onTouchEnd`.\\n\\n_example:_\\n\\n```jsx\\n<ScrollView scrollEnabled={this.state.scrollEnabled}>\\n  <VictoryChart\\n    containerComponent={\\n      <VictoryContainer\\n        onTouchStart={() => this.setState({ scrollEnabled: false })}\\n        onTouchEnd={() => this.setState({ scrollEnabled: true })}\\n      />\\n    }\\n  >\\n    <VictoryBar />\\n  </VictoryChart>\\n</ScrollView>\\n```\\n\\n## onTouchEnd\\n\\n`type: function`\\n\\nThe optional `onTouchEnd` prop takes a function that is called at the conclusion of every touch event on the chart (when using `victory-native`). The most common use of `onTouchEnd` is to prevent the chart's parent `ScrollView` from scrolling, so that the chart and container can be interacted with unencumbered. The function accepts a single parameter, `event`, a React Native [Synthetic Event][]. Also see `onTouchStart`.\\n\\n[victoryportal]: /docs/victory-portal\\n\\n[portal]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-portal/portal.js\\n\\n[react-native-svg]: https://github.com/react-native-community/react-native-svg\\n\\n[victorytheme]: /docs/victory-theme\\n\\n[victorytooltip]: /docs/victory-tooltip\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\\n[read more about themes here]: /guides/themes\\n\\n[synthetic event]: https://facebook.github.io/react-native/docs/gesture-responder-system.html#responder-lifecycle\\n\\n[react event handlers]: https://reactjs.org/docs/handling-events.html\\n\",\"content\":\"\\n# Common Container Props\\n\\n## children\\n\\n`type: element || array[element]`\\n\\nThe `children` prop specifies the child or children that will be rendered within the container. This prop should not be set manually. It will be set by whatever Victory component is rendering the container.\\n\\n## className\\n\\n`type: string`\\n\\nThe `className` prop specifies a className that will be applied to the outer-most div rendered by `VictoryContainer` if this prop is not set, the className will default to \\\"VictoryContainer\\\"\\n\\n_example:_ `className=\\\"myChart\\\"`\\n\\n## containerId\\n\\n`type: number || string`\\n\\nThe `containerId` prop may be used to set a deterministic id for the container. When a `containerId` is not manually set, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing.\\n\\n## containerRef\\n\\n`type: function`\\n\\nThe `containerRef` prop may be used to attach a ref to the outermost element rendered by the container. This prop should be given as a function.\\n\\n_example:_ `containerRef={(ref) => { this.chartRef = ref; }}`\\n\\n## desc\\n\\n`type: string`\\n\\nThe `desc` prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more descriptive this title is, the more useful it will be for people using screen readers.\\n\\n_example:_ `desc=\\\"Golden retrievers make up 30%, Labs make up 25%, and other dog breeds are not represented above 5% each.\\\"`\\n\\n## events\\n\\n`type: object`\\n\\nThe `events` prop attaches arbitrary event handlers to the container element. This prop should be\\ngiven as an object of event names and corresponding [React event handlers][]. Events defined directly\\nvia this prop will be masked by `defaultEvents` on `VictorySelectionContainer` (`onMouseDown`,\\n`onMouseUp`, and `onMouseMove`), and by any events defined through Victory's event\\nsystem that target parent elements.\\n\\n_example:_ `events={{onClick: (evt) => alert(\\\"x: \\\" + evt.clientX)}}`\\n\\n## height\\n\\n`type: number`\\n\\nThe `height` prop determines the height of the containing `<svg>`. By default VictoryContainer renders responsive containers with the `viewBox` attribute set to `viewBox=\\\"0, 0, width, height\\\"` and `width=\\\"100%\\\"`, `height=\\\"100%\\\"`. In responsive containers, the `width` and `height` props affect the _aspect ratio_ of the rendered component, while the absolute width and height are determined by the container. To render a static container, set `responsive={false}`\\n\\n_example:_ `height={350}`\\n\\n## portalComponent\\n\\n`type: element`\\n\\nThe `portalComponent` prop takes a component instance which will be used as a container for children that should render inside a top-level container so that they will always appear above other elements. [VictoryTooltip][] renders inside a portal so that tooltips always render above data. [VictoryPortal][] is used to define elements that should render in the portal container. This prop defaults to [Portal][], and should only be overridden when changing rendered elements from SVG to another type of element _e.g.,_ [react-native-svg][] elements.\\n\\n_default:_ `portalComponent={<Portal/>}`\\n\\n## portalZIndex\\n\\n`type: number`\\n\\nThe `portalZIndex` prop determines the z-index of the div enclosing the portal component. If a `portalZIndex` prop is not set, the z-index of the enclosing div will be set to 99.\\n\\n## responsive\\n\\n`type: boolean`\\n\\nThe `responsive` prop specifies whether the rendered container should be a responsive container with a `viewBox` attribute, or a static container with absolute width and height.\\n\\n_default:_ `responsive={true}`\\n\\n## style\\n\\n`type: object`\\n\\nThe `style` prop defines the style of the container, and should be given as an object of style attributes.\\nThe `width` and `height` should be specified via props instead of style attributes as they determine\\nrelative layout for components.\\n\\n_example:_ `style={{border: \\\"1px solid #ccc\\\"}}`\\n\\n_default (provided by default theme):_ VictoryTheme.grayscale. See [VictoryTheme][] for more detail.\\n\\n## theme\\n\\n`type: object`\\n\\nThe `theme` prop specifies a theme to use for determining styles and layout props for a\\ncomponent. Any styles or props defined in `theme` may be overridden by props specified on the\\ncomponent instance. By default, components use a [grayscale theme][]. [Read more about themes here][].\\n\\n_example:_ `theme={VictoryTheme.material}`\\n\\n## title\\n\\n`type: string`\\n\\nThe `title` prop specifies the title to be applied to the SVG to assist with accessibility for screen readers. The more descriptive this title is, the more useful it will be for people using screen readers\\n\\n_example:_ `title=\\\"Popularity of Dog Breeds by Percentage\\\"`\\n\\n## width\\n\\n`type: number`\\n\\nThe `width` prop determines the width of the containing `<svg>`. By default VictoryContainer renders responsive containers with the `viewBox` attribute set to `viewBox=\\\"0, 0, width, height\\\"` and `width=\\\"100%\\\"`, `height=\\\"auto\\\"`. In responsive containers, the `width` and `height` props affect the _aspect ratio_ of the rendered component, while the absolute width and height are determined by the container. To render a static container, set `responsive={false}`\\n\\n_example:_ `width={350}`\\n\\n## Native-Only Props\\n\\n## onTouchStart\\n\\n`type: function`\\n\\nThe optional `onTouchStart` prop takes a function that is called on every touch event on the chart (when using `victory-native`). The most common use of `onTouchStart` is to prevent the chart's parent `ScrollView` from scrolling, so that the chart and container can be interacted with unencumbered. The function accepts a single parameter, `event`, a React Native [Synthetic Event][]. Also see `onTouchEnd`.\\n\\n_example:_\\n\\n```jsx\\n<ScrollView scrollEnabled={this.state.scrollEnabled}>\\n  <VictoryChart\\n    containerComponent={\\n      <VictoryContainer\\n        onTouchStart={() => this.setState({ scrollEnabled: false })}\\n        onTouchEnd={() => this.setState({ scrollEnabled: true })}\\n      />\\n    }\\n  >\\n    <VictoryBar />\\n  </VictoryChart>\\n</ScrollView>\\n```\\n\\n## onTouchEnd\\n\\n`type: function`\\n\\nThe optional `onTouchEnd` prop takes a function that is called at the conclusion of every touch event on the chart (when using `victory-native`). The most common use of `onTouchEnd` is to prevent the chart's parent `ScrollView` from scrolling, so that the chart and container can be interacted with unencumbered. The function accepts a single parameter, `event`, a React Native [Synthetic Event][]. Also see `onTouchStart`.\\n\\n[victoryportal]: /docs/victory-portal\\n[portal]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-portal/portal.js\\n[react-native-svg]: https://github.com/react-native-community/react-native-svg\\n[victorytheme]: /docs/victory-theme\\n[victorytooltip]: /docs/victory-tooltip\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n[read more about themes here]: /guides/themes\\n[synthetic event]: https://facebook.github.io/react-native/docs/gesture-responder-system.html#responder-lifecycle\\n[react event handlers]: https://reactjs.org/docs/handling-events.html\\n\"},{\"data\":{\"id\":3,\"title\":\"VictoryAnimation\",\"category\":\"more\",\"scope\":null,\"type\":\"docs\",\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryAnimation\",\"depth\":1,\"slug\":\"victory-animation\"},{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"duration\",\"depth\":2,\"slug\":\"duration\"},{\"type\":\"heading\",\"value\":\"delay\",\"depth\":2,\"slug\":\"delay\"},{\"type\":\"heading\",\"value\":\"easing\",\"depth\":2,\"slug\":\"easing\"},{\"type\":\"heading\",\"value\":\"onEnd\",\"depth\":2,\"slug\":\"on-end\"}],\"slug\":\"victory-animation\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryAnimation\",\"depth\":1,\"slug\":\"victory-animation\",\"category\":\"more\",\"children\":[{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"duration\",\"depth\":2,\"slug\":\"duration\"},{\"type\":\"heading\",\"value\":\"delay\",\"depth\":2,\"slug\":\"delay\"},{\"type\":\"heading\",\"value\":\"easing\",\"depth\":2,\"slug\":\"easing\"},{\"type\":\"heading\",\"value\":\"onEnd\",\"depth\":2,\"slug\":\"on-end\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 3\\ntitle: VictoryAnimation\\ncategory: more\\nscope: null\\ntype: docs\\n---\\n\\n# VictoryAnimation\\n\\n`VictoryAnimation` animates prop changes for any React component. To animate prop changes, define a child function that accepts an object of tweened values and other animation information and returns a component to render.\\n\\n```jsx\\n<VictoryAnimation {...animationProps} data={myComponentProps}>\\n  {(tweenedProps, animationInfo) => {\\n    if (animationInfo.animating && animationInfo.progress < 1) {\\n      return <MyComponent {...tweenedProps} />;\\n    }\\n  }}\\n</VictoryAnimation>\\n```\\n\\n## children\\n\\n`type: function`\\n\\n`VictoryAnimation` takes a single child, which should be given as a function of a tweened props object and an animation information object. The child function should return a component to render.\\n\\n## data\\n\\n`type: object || array`\\n\\nThe `data` prop specifies a set of values to tween between. When this prop changes, `VictoryAnimation` will begin animating between the current and next values. This prop should be given as an array or an object. `VictoryAnimation` uses [d3-interpolate][] to tween between values, with some [slight modifications][].\\n\\n_examples:_ `data={this.props}`\\n\\n## duration\\n\\n`type: number`\\n\\nThe `duration` prop determines the number of milliseconds the animation should take to complete. This prop should be given as a number.\\n\\n_default:_ `duration={1000}`\\n\\n## delay\\n\\n`type: number`\\n\\nThe `delay` prop specifies a delay in milliseconds before the start of an animation, or between each animation in the queue. This prop should be given as a number.\\n\\n_default:_ `delay={0}`\\n\\n## easing\\n\\n`type: options`\\n\\nThe `easing` prop specifies the type of easing to use for an animation. The supported types of easing are: _\\\"back\\\", \\\"backIn\\\", \\\"backOut\\\", \\\"backInOut\\\", \\\"bounce\\\", \\\"bounceIn\\\", \\\"bounceOut\\\", \\\"bounceInOut\\\", \\\"circle\\\", \\\"circleIn\\\", \\\"circleOut\\\", \\\"circleInOut\\\", \\\"linear\\\", \\\"linearIn\\\", \\\"linearOut\\\", \\\"linearInOut\\\", \\\"cubic\\\", \\\"cubicIn\\\", \\\"cubicOut\\\", \\\"cubicInOut\\\", \\\"elastic\\\", \\\"elasticIn\\\", \\\"elasticOut\\\", \\\"elasticInOut\\\", \\\"exp\\\", \\\"expIn\\\", \\\"expOut\\\", \\\"expInOut\\\", \\\"poly\\\", \\\"polyIn\\\", \\\"polyOut\\\", \\\"polyInOut\\\", \\\"quad\\\", \\\"quadIn\\\", \\\"quadOut\\\", \\\"quadInOut\\\", \\\"sin\\\", \\\"sinIn\\\", \\\"sinOut\\\", \\\"sinInOut\\\"_.\\n\\n_default:_ `easing=\\\"quadInOut\\\"`\\n\\n## onEnd\\n\\n`type: function`\\n\\nThe `onEnd` prop specifies a function that will be called when the animation ends. If there are multiple animations in the queue, the `onEnd` function will be called after the last animation in the queue completes.\\n\\n[d3-interpolate]: https://github.com/d3/d3-interpolate\\n\\n[slight modifications]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-animation/util.js\\n\",\"content\":\"\\n# VictoryAnimation\\n\\n`VictoryAnimation` animates prop changes for any React component. To animate prop changes, define a child function that accepts an object of tweened values and other animation information and returns a component to render.\\n\\n```jsx\\n<VictoryAnimation {...animationProps} data={myComponentProps}>\\n  {(tweenedProps, animationInfo) => {\\n    if (animationInfo.animating && animationInfo.progress < 1) {\\n      return <MyComponent {...tweenedProps} />;\\n    }\\n  }}\\n</VictoryAnimation>\\n```\\n\\n## children\\n\\n`type: function`\\n\\n`VictoryAnimation` takes a single child, which should be given as a function of a tweened props object and an animation information object. The child function should return a component to render.\\n\\n## data\\n\\n`type: object || array`\\n\\nThe `data` prop specifies a set of values to tween between. When this prop changes, `VictoryAnimation` will begin animating between the current and next values. This prop should be given as an array or an object. `VictoryAnimation` uses [d3-interpolate][] to tween between values, with some [slight modifications][].\\n\\n_examples:_ `data={this.props}`\\n\\n## duration\\n\\n`type: number`\\n\\nThe `duration` prop determines the number of milliseconds the animation should take to complete. This prop should be given as a number.\\n\\n_default:_ `duration={1000}`\\n\\n## delay\\n\\n`type: number`\\n\\nThe `delay` prop specifies a delay in milliseconds before the start of an animation, or between each animation in the queue. This prop should be given as a number.\\n\\n_default:_ `delay={0}`\\n\\n## easing\\n\\n`type: options`\\n\\nThe `easing` prop specifies the type of easing to use for an animation. The supported types of easing are: _\\\"back\\\", \\\"backIn\\\", \\\"backOut\\\", \\\"backInOut\\\", \\\"bounce\\\", \\\"bounceIn\\\", \\\"bounceOut\\\", \\\"bounceInOut\\\", \\\"circle\\\", \\\"circleIn\\\", \\\"circleOut\\\", \\\"circleInOut\\\", \\\"linear\\\", \\\"linearIn\\\", \\\"linearOut\\\", \\\"linearInOut\\\", \\\"cubic\\\", \\\"cubicIn\\\", \\\"cubicOut\\\", \\\"cubicInOut\\\", \\\"elastic\\\", \\\"elasticIn\\\", \\\"elasticOut\\\", \\\"elasticInOut\\\", \\\"exp\\\", \\\"expIn\\\", \\\"expOut\\\", \\\"expInOut\\\", \\\"poly\\\", \\\"polyIn\\\", \\\"polyOut\\\", \\\"polyInOut\\\", \\\"quad\\\", \\\"quadIn\\\", \\\"quadOut\\\", \\\"quadInOut\\\", \\\"sin\\\", \\\"sinIn\\\", \\\"sinOut\\\", \\\"sinInOut\\\"_.\\n\\n_default:_ `easing=\\\"quadInOut\\\"`\\n\\n## onEnd\\n\\n`type: function`\\n\\nThe `onEnd` prop specifies a function that will be called when the animation ends. If there are multiple animations in the queue, the `onEnd` function will be called after the last animation in the queue completes.\\n\\n[d3-interpolate]: https://github.com/d3/d3-interpolate\\n[slight modifications]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-animation/util.js\\n\"},{\"data\":{\"id\":4,\"title\":\"VictoryBrushLine\",\"category\":\"more\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryBrushLine\",\"depth\":1,\"slug\":\"victory-brush-line\"},{\"type\":\"heading\",\"value\":\"allowDrag\",\"depth\":2,\"slug\":\"allow-drag\"},{\"type\":\"heading\",\"value\":\"allowResize\",\"depth\":2,\"slug\":\"allow-resize\"},{\"type\":\"heading\",\"value\":\"brushAreaComponent\",\"depth\":2,\"slug\":\"brush-area-component\"},{\"type\":\"heading\",\"value\":\"brushAreaStyle\",\"depth\":2,\"slug\":\"brush-area-style\"},{\"type\":\"heading\",\"value\":\"brushAreaWidth\",\"depth\":2,\"slug\":\"brush-area-width\"},{\"type\":\"heading\",\"value\":\"brushComponent\",\"depth\":2,\"slug\":\"brush-component\"},{\"type\":\"heading\",\"value\":\"brushDomain\",\"depth\":2,\"slug\":\"brush-domain\"},{\"type\":\"heading\",\"value\":\"brushStyle\",\"depth\":2,\"slug\":\"brush-style\"},{\"type\":\"heading\",\"value\":\"brushWidth\",\"depth\":2,\"slug\":\"brush-width\"},{\"type\":\"heading\",\"value\":\"className\",\"depth\":2,\"slug\":\"class-name\"},{\"type\":\"heading\",\"value\":\"dimension\",\"depth\":2,\"slug\":\"dimension\"},{\"type\":\"heading\",\"value\":\"disable\",\"depth\":2,\"slug\":\"disable\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"handleComponent\",\"depth\":2,\"slug\":\"handle-component\"},{\"type\":\"heading\",\"value\":\"handleStyle\",\"depth\":2,\"slug\":\"handle-style\"},{\"type\":\"heading\",\"value\":\"handleWidth\",\"depth\":2,\"slug\":\"handle-width\"},{\"type\":\"heading\",\"value\":\"lineComponent\",\"depth\":2,\"slug\":\"line-component\"},{\"type\":\"heading\",\"value\":\"onBrushDomainChange\",\"depth\":2,\"slug\":\"on-brush-domain-change\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"type\",\"depth\":2,\"slug\":\"type\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"}],\"slug\":\"victory-brush-line\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryBrushLine\",\"depth\":1,\"slug\":\"victory-brush-line\",\"category\":\"more\",\"children\":[{\"type\":\"heading\",\"value\":\"allowDrag\",\"depth\":2,\"slug\":\"allow-drag\"},{\"type\":\"heading\",\"value\":\"allowResize\",\"depth\":2,\"slug\":\"allow-resize\"},{\"type\":\"heading\",\"value\":\"brushAreaComponent\",\"depth\":2,\"slug\":\"brush-area-component\"},{\"type\":\"heading\",\"value\":\"brushAreaStyle\",\"depth\":2,\"slug\":\"brush-area-style\"},{\"type\":\"heading\",\"value\":\"brushAreaWidth\",\"depth\":2,\"slug\":\"brush-area-width\"},{\"type\":\"heading\",\"value\":\"brushComponent\",\"depth\":2,\"slug\":\"brush-component\"},{\"type\":\"heading\",\"value\":\"brushDomain\",\"depth\":2,\"slug\":\"brush-domain\"},{\"type\":\"heading\",\"value\":\"brushStyle\",\"depth\":2,\"slug\":\"brush-style\"},{\"type\":\"heading\",\"value\":\"brushWidth\",\"depth\":2,\"slug\":\"brush-width\"},{\"type\":\"heading\",\"value\":\"className\",\"depth\":2,\"slug\":\"class-name\"},{\"type\":\"heading\",\"value\":\"dimension\",\"depth\":2,\"slug\":\"dimension\"},{\"type\":\"heading\",\"value\":\"disable\",\"depth\":2,\"slug\":\"disable\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"handleComponent\",\"depth\":2,\"slug\":\"handle-component\"},{\"type\":\"heading\",\"value\":\"handleStyle\",\"depth\":2,\"slug\":\"handle-style\"},{\"type\":\"heading\",\"value\":\"handleWidth\",\"depth\":2,\"slug\":\"handle-width\"},{\"type\":\"heading\",\"value\":\"lineComponent\",\"depth\":2,\"slug\":\"line-component\"},{\"type\":\"heading\",\"value\":\"onBrushDomainChange\",\"depth\":2,\"slug\":\"on-brush-domain-change\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"type\",\"depth\":2,\"slug\":\"type\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 4\\ntitle: VictoryBrushLine\\ncategory: more\\ntype: docs\\nscope: null\\n---\\n\\n# VictoryBrushLine\\n\\n`VictoryBrushLine` renders a brush component centered around a line. It may be used in place of the default `axisComponent` or `gridComponent` within `VictoryAxis`. Use `VictoryBrushLine` instead of [`VictoryBrushContainer`][] in charts that require multiple brushes.\\n\\n```playground\\n<VictoryChart domainPadding={50}>\\n  <VictoryScatter\\n    size={4}\\n    style={{ data: { fill: \\\"tomato\\\" }}}\\n    data={[\\n      { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 4 }\\n    ]}\\n  />\\n  <VictoryAxis\\n    tickValues={[1, 2, 3]}\\n    gridComponent={<VictoryBrushLine width={30}/>}\\n  />\\n</VictoryChart>\\n```\\n\\n## allowDrag\\n\\n`type: boolean`\\n\\nThe optional `allowDrag` prop accepts a boolean that enables dragging behavior for the highlighted brush area. Resizing will still be enabled when the `allowDrag` prop is set to false.\\n\\n_default:_ `allowDrag={true}`\\n\\n## allowResize\\n\\n`type: boolean`\\n\\nThe optional `allowResize` prop accepts a boolean that enables resizing the highlighted brush area. Dragging will still be enabled when the `allowResize` prop is set to false, but the dimensions of the brush area will be fixed.\\n\\n_default:_ `allowResize={true}`\\n\\n## brushAreaComponent\\n\\n`type: element`\\n\\nThe `brushAreaComponent` prop specifies the component to be rendered for the interactive brush region.\\nThis component will be supplied with the following props: x, y, width, height, and style.\\nWhen this prop is not specified, a [`Box`][] component will be rendered.\\n\\n_default:_ `brushAreaComponent={<Box/>}`\\n\\n## brushAreaStyle\\n\\n`type: object`\\n\\nThe `brushAreaStyle` prop adds custom styles to the `brushAreaComponent`. This prop should be given as\\nan object of SVG style attributes. Styles supplied to `brushAreaStyle` are assigned to the following default styles:\\n\\n```js\\n{\\n  stroke: \\\"none\\\",\\n  fill: \\\"black\\\",\\n  opacity: ({ active }) => active ? 0.2 : 0.1\\n}\\n```\\n\\n**Note:** `cursor` styles should not be applied via this prop, as they are dynamically assigned\\n\\n## brushAreaWidth\\n\\n`type: number`\\n\\nThe `brushAreaWidth` prop is used to specify the width of the interactive brush region. If this prop is not supplied, the `width` prop will be used.\\n\\n## brushComponent\\n\\n`type: element`\\n\\nThe `brushComponent` prop specifies the component to be rendered for active brush.\\nThis component will be supplied with the following props: x, y, width, height, and style.\\nWhen this prop is not specified, a [`Box`][] component will be rendered.\\n\\n_default:_ `brushComponent={<Box/>}`\\n\\n## brushDomain\\n\\n`type: array[low, high]`\\n\\nThe optional `brushDomain` prop describes the highlighted state. This prop should be given as an array of the minimum and maximum values of the highlighted region.\\n\\n_example:_ `brushDomain={[50, 100]}`\\n\\n## brushStyle\\n\\n`type: object`\\n\\nThe `brushStyle` prop adds custom styles to the `brushComponent`. This prop should be given as\\nan object of SVG style attributes. Styles supplied to `brushStyle` are assigned to the following default styles:\\n\\n```js\\n{\\n  pointerEvents: \\\"none\\\",\\n  stroke: \\\"none\\\",\\n  fill: \\\"black\\\",\\n  opacity: ({ active }) => active ? 0.4 : 0.3\\n}\\n```\\n\\n## brushWidth\\n\\n`type: number`\\n\\nThe `brushWidth` prop is used to specify the width of the active brush. If this prop is not supplied, the `width` prop will be used.\\n\\n## className\\n\\n`type: string`\\n\\nThis prop specifies the class name that will be applied to the rendered element\\n\\n## dimension\\n\\n`type: \\\"x\\\" || \\\"y\\\"`\\n\\nThe `dimension` prop specified whether the brush will be vertical (\\\"y\\\"), or horizontal (\\\"x\\\")\\n\\n## disable\\n\\n`type: boolean`\\n\\nWhen the `disable` prop is set to `true`, `VictoryBrushLine` events will not fire.\\n\\n## events\\n\\n`type: object`\\n\\nThe `events` prop specifies a set of events that will be attached to the brush component group. This prop should not be set manually.\\n\\n## groupComponent\\n\\n`type: element`\\n\\nThis prop specifies the element used to group rendered elements\\n\\n_default:_ `<g/>`\\n\\n## handleComponent\\n\\n`type: element`\\n\\nThe `handleComponent` prop specifies the component to be rendered for each handle.\\nThis component will be supplied with the following props: x, y, width, height, and style.\\nWhen this prop is not specified, a [`Box`][] component will be rendered.\\n\\n_default:_ `handleComponent={<Box/>}`\\n\\n## handleStyle\\n\\n`type: object`\\n\\nThe `handleStyle` props adds custom styles to the `handleComponent`. This prop should be given as\\nan object of SVG style attributes. Styles supplied to `handleStyle` are assigned to the following default styles:\\n\\n```js\\n{\\n  pointerEvents: \\\"none\\\",\\n  stroke: \\\"none\\\",\\n  fill: \\\"none\\\"\\n}\\n```\\n\\n## handleWidth\\n\\n`type: number`\\n\\nThe `handleWidth` prop is used to specify the width of each handle component.\\n\\n_default:_ `handleWidth={10}`\\n\\n## lineComponent\\n\\n`type: element`\\n\\nThe `lineComponent` prop specifies the component to render for the underlying axis or grid line.\\nThis component will be supplied with the following props: x1, y1, x2, y2 and style.\\nWhen this prop is not specified, an [`Axis`][] component will be rendered.\\n\\n_default:_ `lineComponent={<Axis/>}`\\n\\n## onBrushDomainChange\\n\\n`type: function`\\n\\nThe `onBrushDomainChange` prop specifies a callback function which will be called whenever the brush domain changes. The callback provided will be called with the following arguments:\\n\\n-   `currentDomain`: The current brush domain\\n-   `props`: the current set of props for `VictoryBrushLine`\\n\\n## scale\\n\\n`type: object`\\n\\nThis prop specifies `scale` of the parent chart with `domain` and `range` applied. This prop should not be set manually.\\n\\n## style\\n\\n`type: object`\\n\\nThe `style` prop specifies the styles that will be applied to the `lineComponent`. This prop should be given as\\nan object of SVG style attributes.\\n\\n## type\\n\\n`type: string`\\n\\nThe `type` is used to specify which event target a particular `VictoryBrushLine` belongs to. When `VictoryBrushLine` is used by `VictoryAxis` as its `axisComponent` or `gridComponent`, this prop will be set automatically to \\\"axis\\\" or \\\"grid\\\" as appropriate.\\n\\n## width\\n\\n`type: number`\\n\\nThe `width` prop specified the width of both the `brush` and `brushArea`. When `brushWidth` or `brushAreaWidth` are specified, this prop will not be used\\n\\n_default:_ `width={10}`\\n\\n[`victorybrushcontainer`]: /docs/victory-brush-container\\n\\n[`box`]: /docs/victory-primitives#box\\n\\n[`axis`]: /docs/victory-primitives#axis\\n\",\"content\":\"\\n# VictoryBrushLine\\n\\n`VictoryBrushLine` renders a brush component centered around a line. It may be used in place of the default `axisComponent` or `gridComponent` within `VictoryAxis`. Use `VictoryBrushLine` instead of [`VictoryBrushContainer`][] in charts that require multiple brushes.\\n\\n```playground\\n<VictoryChart domainPadding={50}>\\n  <VictoryScatter\\n    size={4}\\n    style={{ data: { fill: \\\"tomato\\\" }}}\\n    data={[\\n      { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 4 }\\n    ]}\\n  />\\n  <VictoryAxis\\n    tickValues={[1, 2, 3]}\\n    gridComponent={<VictoryBrushLine width={30}/>}\\n  />\\n</VictoryChart>\\n```\\n\\n## allowDrag\\n\\n`type: boolean`\\n\\nThe optional `allowDrag` prop accepts a boolean that enables dragging behavior for the highlighted brush area. Resizing will still be enabled when the `allowDrag` prop is set to false.\\n\\n_default:_ `allowDrag={true}`\\n\\n## allowResize\\n\\n`type: boolean`\\n\\nThe optional `allowResize` prop accepts a boolean that enables resizing the highlighted brush area. Dragging will still be enabled when the `allowResize` prop is set to false, but the dimensions of the brush area will be fixed.\\n\\n_default:_ `allowResize={true}`\\n\\n## brushAreaComponent\\n\\n`type: element`\\n\\nThe `brushAreaComponent` prop specifies the component to be rendered for the interactive brush region.\\nThis component will be supplied with the following props: x, y, width, height, and style.\\nWhen this prop is not specified, a [`Box`][] component will be rendered.\\n\\n_default:_ `brushAreaComponent={<Box/>}`\\n\\n## brushAreaStyle\\n\\n`type: object`\\n\\nThe `brushAreaStyle` prop adds custom styles to the `brushAreaComponent`. This prop should be given as\\nan object of SVG style attributes. Styles supplied to `brushAreaStyle` are assigned to the following default styles:\\n\\n```js\\n{\\n  stroke: \\\"none\\\",\\n  fill: \\\"black\\\",\\n  opacity: ({ active }) => active ? 0.2 : 0.1\\n}\\n```\\n\\n**Note:** `cursor` styles should not be applied via this prop, as they are dynamically assigned\\n\\n## brushAreaWidth\\n\\n`type: number`\\n\\nThe `brushAreaWidth` prop is used to specify the width of the interactive brush region. If this prop is not supplied, the `width` prop will be used.\\n\\n## brushComponent\\n\\n`type: element`\\n\\nThe `brushComponent` prop specifies the component to be rendered for active brush.\\nThis component will be supplied with the following props: x, y, width, height, and style.\\nWhen this prop is not specified, a [`Box`][] component will be rendered.\\n\\n_default:_ `brushComponent={<Box/>}`\\n\\n## brushDomain\\n\\n`type: array[low, high]`\\n\\nThe optional `brushDomain` prop describes the highlighted state. This prop should be given as an array of the minimum and maximum values of the highlighted region.\\n\\n_example:_ `brushDomain={[50, 100]}`\\n\\n## brushStyle\\n\\n`type: object`\\n\\nThe `brushStyle` prop adds custom styles to the `brushComponent`. This prop should be given as\\nan object of SVG style attributes. Styles supplied to `brushStyle` are assigned to the following default styles:\\n\\n```js\\n{\\n  pointerEvents: \\\"none\\\",\\n  stroke: \\\"none\\\",\\n  fill: \\\"black\\\",\\n  opacity: ({ active }) => active ? 0.4 : 0.3\\n}\\n```\\n\\n## brushWidth\\n\\n`type: number`\\n\\nThe `brushWidth` prop is used to specify the width of the active brush. If this prop is not supplied, the `width` prop will be used.\\n\\n## className\\n\\n`type: string`\\n\\nThis prop specifies the class name that will be applied to the rendered element\\n\\n## dimension\\n\\n`type: \\\"x\\\" || \\\"y\\\"`\\n\\nThe `dimension` prop specified whether the brush will be vertical (\\\"y\\\"), or horizontal (\\\"x\\\")\\n\\n## disable\\n\\n`type: boolean`\\n\\nWhen the `disable` prop is set to `true`, `VictoryBrushLine` events will not fire.\\n\\n## events\\n\\n`type: object`\\n\\nThe `events` prop specifies a set of events that will be attached to the brush component group. This prop should not be set manually.\\n\\n## groupComponent\\n\\n`type: element`\\n\\nThis prop specifies the element used to group rendered elements\\n\\n_default:_ `<g/>`\\n\\n## handleComponent\\n\\n`type: element`\\n\\nThe `handleComponent` prop specifies the component to be rendered for each handle.\\nThis component will be supplied with the following props: x, y, width, height, and style.\\nWhen this prop is not specified, a [`Box`][] component will be rendered.\\n\\n_default:_ `handleComponent={<Box/>}`\\n\\n## handleStyle\\n\\n`type: object`\\n\\nThe `handleStyle` props adds custom styles to the `handleComponent`. This prop should be given as\\nan object of SVG style attributes. Styles supplied to `handleStyle` are assigned to the following default styles:\\n\\n```js\\n{\\n  pointerEvents: \\\"none\\\",\\n  stroke: \\\"none\\\",\\n  fill: \\\"none\\\"\\n}\\n```\\n\\n## handleWidth\\n\\n`type: number`\\n\\nThe `handleWidth` prop is used to specify the width of each handle component.\\n\\n_default:_ `handleWidth={10}`\\n\\n## lineComponent\\n\\n`type: element`\\n\\nThe `lineComponent` prop specifies the component to render for the underlying axis or grid line.\\nThis component will be supplied with the following props: x1, y1, x2, y2 and style.\\nWhen this prop is not specified, an [`Axis`][] component will be rendered.\\n\\n_default:_ `lineComponent={<Axis/>}`\\n\\n## onBrushDomainChange\\n\\n`type: function`\\n\\nThe `onBrushDomainChange` prop specifies a callback function which will be called whenever the brush domain changes. The callback provided will be called with the following arguments:\\n\\n- `currentDomain`: The current brush domain\\n- `props`: the current set of props for `VictoryBrushLine`\\n\\n## scale\\n\\n`type: object`\\n\\nThis prop specifies `scale` of the parent chart with `domain` and `range` applied. This prop should not be set manually.\\n\\n## style\\n\\n`type: object`\\n\\nThe `style` prop specifies the styles that will be applied to the `lineComponent`. This prop should be given as\\nan object of SVG style attributes.\\n\\n## type\\n\\n`type: string`\\n\\nThe `type` is used to specify which event target a particular `VictoryBrushLine` belongs to. When `VictoryBrushLine` is used by `VictoryAxis` as its `axisComponent` or `gridComponent`, this prop will be set automatically to \\\"axis\\\" or \\\"grid\\\" as appropriate.\\n\\n## width\\n\\n`type: number`\\n\\nThe `width` prop specified the width of both the `brush` and `brushArea`. When `brushWidth` or `brushAreaWidth` are specified, this prop will not be used\\n\\n_default:_ `width={10}`\\n\\n[`victorybrushcontainer`]: /docs/victory-brush-container\\n[`box`]: /docs/victory-primitives#box\\n[`axis`]: /docs/victory-primitives#axis\\n\"},{\"data\":{\"id\":10,\"title\":\"VictoryClipContainer\",\"category\":\"more\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryClipContainer\",\"depth\":1,\"slug\":\"victory-clip-container\"},{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"circleComponent\",\"depth\":2,\"slug\":\"circle-component\"},{\"type\":\"heading\",\"value\":\"className\",\"depth\":2,\"slug\":\"class-name\"},{\"type\":\"heading\",\"value\":\"clipHeight\",\"depth\":2,\"slug\":\"clip-height\"},{\"type\":\"heading\",\"value\":\"clipId\",\"depth\":2,\"slug\":\"clip-id\"},{\"type\":\"heading\",\"value\":\"clipPadding\",\"depth\":2,\"slug\":\"clip-padding\"},{\"type\":\"heading\",\"value\":\"clipPathComponent\",\"depth\":2,\"slug\":\"clip-path-component\"},{\"type\":\"heading\",\"value\":\"clipWidth\",\"depth\":2,\"slug\":\"clip-width\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"radius\",\"depth\":2,\"slug\":\"radius\"},{\"type\":\"heading\",\"value\":\"rectComponent\",\"depth\":2,\"slug\":\"rect-component\"},{\"type\":\"heading\",\"value\":\"translateX\",\"depth\":2,\"slug\":\"translate-x\"},{\"type\":\"heading\",\"value\":\"translateY\",\"depth\":2,\"slug\":\"translate-y\"}],\"slug\":\"victory-clip-container\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryClipContainer\",\"depth\":1,\"slug\":\"victory-clip-container\",\"category\":\"more\",\"children\":[{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"circleComponent\",\"depth\":2,\"slug\":\"circle-component\"},{\"type\":\"heading\",\"value\":\"className\",\"depth\":2,\"slug\":\"class-name\"},{\"type\":\"heading\",\"value\":\"clipHeight\",\"depth\":2,\"slug\":\"clip-height\"},{\"type\":\"heading\",\"value\":\"clipId\",\"depth\":2,\"slug\":\"clip-id\"},{\"type\":\"heading\",\"value\":\"clipPadding\",\"depth\":2,\"slug\":\"clip-padding\"},{\"type\":\"heading\",\"value\":\"clipPathComponent\",\"depth\":2,\"slug\":\"clip-path-component\"},{\"type\":\"heading\",\"value\":\"clipWidth\",\"depth\":2,\"slug\":\"clip-width\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"radius\",\"depth\":2,\"slug\":\"radius\"},{\"type\":\"heading\",\"value\":\"rectComponent\",\"depth\":2,\"slug\":\"rect-component\"},{\"type\":\"heading\",\"value\":\"translateX\",\"depth\":2,\"slug\":\"translate-x\"},{\"type\":\"heading\",\"value\":\"translateY\",\"depth\":2,\"slug\":\"translate-y\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 10\\ntitle: VictoryClipContainer\\ncategory: more\\ntype: docs\\nscope: null\\n---\\n\\n# VictoryClipContainer\\n\\n`VictoryClipContainer` is a specialized group container that enables curtain-style transitions for continuous data types like `VictoryLine` and `VictoryArea`. `VictoryClipContainer` will render its children either in a regular `<g>` element, or in a `<g>` element clipped by a rectangular clip path when a `clipWidth` is supplied.\\n\\n## children\\n\\n`type: element || array[element]`\\n\\n`VictoryClipContainer` renders a single child, or an array of children in group element.\\n\\n## circleComponent\\n\\n`type: element`\\n\\nThe `circleComponent` prop specifies the element to use when a `VictoryClipContainer` renders a circular clip path. By default, `VictoryClipContainer` uses the [Circle component][].\\n\\n_default:_ `<Circle/>`\\n\\n## className\\n\\n`type: string`\\n\\nThe `className` prop specifies a class name that will be applied to the rendered element.\\n\\n_example:_ `className=\\\"myClipPath\\\"`\\n\\n## clipHeight\\n\\n`type: number`\\n\\nThe `clipHeight` prop determines the base height of the rectangular clip path. This prop should be\\ngiven as a number. If this prop is not given, it will be calculated based on the height and padding\\nof the parent chart.\\n\\n## clipId\\n\\n`type: string || number`\\n\\nThe `clipId` prop may be used to set a deterministic id for the container. When a `containerId` is not manually set, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing.\\n\\n## clipPadding\\n\\n`type: { top: number, bottom: number, left: number, right: number }`\\n\\nThe `clipPadding` prop is used when the clipped area should be larger than the range of a chart.\\nThis prop should be given as an object with `top`, `bottom`, `left`, and `right` properties. Set\\nthe `clipPadding` prop is useful for extending the visible area of a chart in some dimension so\\nthat data or labels are not cut off.\\n\\n## clipPathComponent\\n\\n`type: element`\\n\\nThe `clipPathComponent` prop specifies the clip path to apply to the rendered group when appropriate. By default, `VictoryClipContainer` uses the [ClipPath component][].\\n\\n_default:_ `<ClipPath/>`\\n\\n## clipWidth\\n\\n`type: number`\\n\\nThe `clipWidth` prop determines the base width of the rectangular clip path. This prop should be\\ngiven as a number. If this prop is not given, it will be calculated based on the width and padding\\nof the parent chart.\\n\\n## events\\n\\n`type: object`\\n\\nThe `events` prop attaches arbitrary event handlers to the group element. This prop should be given as an object of event names and corresponding event handlers. When events are provided via Victory's event system, event handlers will be called with the event, the props of the component it is attached to, and an `eventKey` when applicable.\\n\\n_examples:_ `events={{onClick: (evt) => alert(\\\"x: \\\" + evt.clientX)}}`\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryClipContainer` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\nVictory components will pass an `origin` prop is to define the center point in svg coordinates for polar charts. **This prop should not be set manually.**\\n\\n## polar\\n\\n`type: boolean`\\n\\nVictory components can pass a boolean `polar` prop to specify whether a label is part of a polar chart. **This prop should not be set manually.**\\n\\n## radius\\n\\n`type: number`\\n\\nThe `radius` prop determines the radius of the circular clip path used for polar charts. This prop should be\\ngiven as a number. If this prop is not given, it will be calculated based on the dimensions and padding\\nof the parent chart.\\n\\n## rectComponent\\n\\n`type: element`\\n\\nThe `rectComponent` prop specifies the element to use when a `VictoryClipContainer` renders a rectangular clip path. By default, `VictoryClipContainer` uses the [Rect component][].\\n\\n_default:_ `<Rect/>`\\n\\n## translateX\\n\\n`type: number`\\n\\nThe `translateX` prop determines the offset of the clip path from the base x coordinate. This prop\\nshould be given as a number. If this prop is not given, it will be calculated based on the padding\\nof the parent chart.\\n\\n## translateY\\n\\n`type: number`\\n\\nThe `translateY` prop determines the offset of the clip path from the base y coordinate. This prop\\nshould be given as a number. If this prop is not given, it will be calculated based on the padding\\nof the parent chart.\\n\\n[clippath component]: /docs/victory-primitives#clippath\\n\\n[circle component]: /docs/victory-primitives#circle\\n\\n[rect component]: /docs/victory-primitives#rect\\n\",\"content\":\"\\n# VictoryClipContainer\\n\\n`VictoryClipContainer` is a specialized group container that enables curtain-style transitions for continuous data types like `VictoryLine` and `VictoryArea`. `VictoryClipContainer` will render its children either in a regular `<g>` element, or in a `<g>` element clipped by a rectangular clip path when a `clipWidth` is supplied.\\n\\n## children\\n\\n`type: element || array[element]`\\n\\n`VictoryClipContainer` renders a single child, or an array of children in group element.\\n\\n## circleComponent\\n\\n`type: element`\\n\\nThe `circleComponent` prop specifies the element to use when a `VictoryClipContainer` renders a circular clip path. By default, `VictoryClipContainer` uses the [Circle component][].\\n\\n_default:_ `<Circle/>`\\n\\n## className\\n\\n`type: string`\\n\\nThe `className` prop specifies a class name that will be applied to the rendered element.\\n\\n_example:_ `className=\\\"myClipPath\\\"`\\n\\n## clipHeight\\n\\n`type: number`\\n\\nThe `clipHeight` prop determines the base height of the rectangular clip path. This prop should be\\ngiven as a number. If this prop is not given, it will be calculated based on the height and padding\\nof the parent chart.\\n\\n## clipId\\n\\n`type: string || number`\\n\\nThe `clipId` prop may be used to set a deterministic id for the container. When a `containerId` is not manually set, a unique id will be generated. It is usually necessary to set deterministic ids for automated testing.\\n\\n## clipPadding\\n\\n`type: { top: number, bottom: number, left: number, right: number }`\\n\\nThe `clipPadding` prop is used when the clipped area should be larger than the range of a chart.\\nThis prop should be given as an object with `top`, `bottom`, `left`, and `right` properties. Set\\nthe `clipPadding` prop is useful for extending the visible area of a chart in some dimension so\\nthat data or labels are not cut off.\\n\\n## clipPathComponent\\n\\n`type: element`\\n\\nThe `clipPathComponent` prop specifies the clip path to apply to the rendered group when appropriate. By default, `VictoryClipContainer` uses the [ClipPath component][].\\n\\n_default:_ `<ClipPath/>`\\n\\n## clipWidth\\n\\n`type: number`\\n\\nThe `clipWidth` prop determines the base width of the rectangular clip path. This prop should be\\ngiven as a number. If this prop is not given, it will be calculated based on the width and padding\\nof the parent chart.\\n\\n## events\\n\\n`type: object`\\n\\nThe `events` prop attaches arbitrary event handlers to the group element. This prop should be given as an object of event names and corresponding event handlers. When events are provided via Victory's event system, event handlers will be called with the event, the props of the component it is attached to, and an `eventKey` when applicable.\\n\\n_examples:_ `events={{onClick: (evt) => alert(\\\"x: \\\" + evt.clientX)}}`\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryClipContainer` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\nVictory components will pass an `origin` prop is to define the center point in svg coordinates for polar charts. **This prop should not be set manually.**\\n\\n## polar\\n\\n`type: boolean`\\n\\nVictory components can pass a boolean `polar` prop to specify whether a label is part of a polar chart. **This prop should not be set manually.**\\n\\n## radius\\n\\n`type: number`\\n\\nThe `radius` prop determines the radius of the circular clip path used for polar charts. This prop should be\\ngiven as a number. If this prop is not given, it will be calculated based on the dimensions and padding\\nof the parent chart.\\n\\n## rectComponent\\n\\n`type: element`\\n\\nThe `rectComponent` prop specifies the element to use when a `VictoryClipContainer` renders a rectangular clip path. By default, `VictoryClipContainer` uses the [Rect component][].\\n\\n_default:_ `<Rect/>`\\n\\n## translateX\\n\\n`type: number`\\n\\nThe `translateX` prop determines the offset of the clip path from the base x coordinate. This prop\\nshould be given as a number. If this prop is not given, it will be calculated based on the padding\\nof the parent chart.\\n\\n## translateY\\n\\n`type: number`\\n\\nThe `translateY` prop determines the offset of the clip path from the base y coordinate. This prop\\nshould be given as a number. If this prop is not given, it will be calculated based on the padding\\nof the parent chart.\\n\\n[clippath component]: /docs/victory-primitives#clippath\\n[circle component]: /docs/victory-primitives#circle\\n[rect component]: /docs/victory-primitives#rect\\n\"},{\"data\":{\"id\":15,\"title\":\"VictoryLabel\",\"category\":\"more\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryLabel\",\"depth\":1,\"slug\":\"victory-label\"},{\"type\":\"heading\",\"value\":\"active\",\"depth\":2,\"slug\":\"active\"},{\"type\":\"heading\",\"value\":\"angle\",\"depth\":2,\"slug\":\"angle\"},{\"type\":\"heading\",\"value\":\"capHeight\",\"depth\":2,\"slug\":\"cap-height\"},{\"type\":\"heading\",\"value\":\"className\",\"depth\":2,\"slug\":\"class-name\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"datum\",\"depth\":2,\"slug\":\"datum\"},{\"type\":\"heading\",\"value\":\"desc\",\"depth\":2,\"slug\":\"desc\"},{\"type\":\"heading\",\"value\":\"direction\",\"depth\":2,\"slug\":\"direction\"},{\"type\":\"heading\",\"value\":\"dx\",\"depth\":2,\"slug\":\"dx\"},{\"type\":\"heading\",\"value\":\"dy\",\"depth\":2,\"slug\":\"dy\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"id\",\"depth\":2,\"slug\":\"id\"},{\"type\":\"heading\",\"value\":\"index\",\"depth\":2,\"slug\":\"index\"},{\"type\":\"heading\",\"value\":\"inline\",\"depth\":2,\"slug\":\"inline\"},{\"type\":\"heading\",\"value\":\"labelPlacement\",\"depth\":2,\"slug\":\"label-placement\"},{\"type\":\"heading\",\"value\":\"lineHeight\",\"depth\":2,\"slug\":\"line-height\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"renderInPortal\",\"depth\":2,\"slug\":\"render-in-portal\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"text\",\"depth\":2,\"slug\":\"text\"},{\"type\":\"heading\",\"value\":\"textAnchor\",\"depth\":2,\"slug\":\"text-anchor\"},{\"type\":\"heading\",\"value\":\"transform\",\"depth\":2,\"slug\":\"transform\"},{\"type\":\"heading\",\"value\":\"verticalAnchor\",\"depth\":2,\"slug\":\"vertical-anchor\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"}],\"slug\":\"victory-label\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryLabel\",\"depth\":1,\"slug\":\"victory-label\",\"category\":\"more\",\"children\":[{\"type\":\"heading\",\"value\":\"active\",\"depth\":2,\"slug\":\"active\"},{\"type\":\"heading\",\"value\":\"angle\",\"depth\":2,\"slug\":\"angle\"},{\"type\":\"heading\",\"value\":\"capHeight\",\"depth\":2,\"slug\":\"cap-height\"},{\"type\":\"heading\",\"value\":\"className\",\"depth\":2,\"slug\":\"class-name\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"datum\",\"depth\":2,\"slug\":\"datum\"},{\"type\":\"heading\",\"value\":\"desc\",\"depth\":2,\"slug\":\"desc\"},{\"type\":\"heading\",\"value\":\"direction\",\"depth\":2,\"slug\":\"direction\"},{\"type\":\"heading\",\"value\":\"dx\",\"depth\":2,\"slug\":\"dx\"},{\"type\":\"heading\",\"value\":\"dy\",\"depth\":2,\"slug\":\"dy\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"id\",\"depth\":2,\"slug\":\"id\"},{\"type\":\"heading\",\"value\":\"index\",\"depth\":2,\"slug\":\"index\"},{\"type\":\"heading\",\"value\":\"inline\",\"depth\":2,\"slug\":\"inline\"},{\"type\":\"heading\",\"value\":\"labelPlacement\",\"depth\":2,\"slug\":\"label-placement\"},{\"type\":\"heading\",\"value\":\"lineHeight\",\"depth\":2,\"slug\":\"line-height\"},{\"type\":\"heading\",\"value\":\"origin\",\"depth\":2,\"slug\":\"origin\"},{\"type\":\"heading\",\"value\":\"polar\",\"depth\":2,\"slug\":\"polar\"},{\"type\":\"heading\",\"value\":\"renderInPortal\",\"depth\":2,\"slug\":\"render-in-portal\"},{\"type\":\"heading\",\"value\":\"scale\",\"depth\":2,\"slug\":\"scale\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"text\",\"depth\":2,\"slug\":\"text\"},{\"type\":\"heading\",\"value\":\"textAnchor\",\"depth\":2,\"slug\":\"text-anchor\"},{\"type\":\"heading\",\"value\":\"transform\",\"depth\":2,\"slug\":\"transform\"},{\"type\":\"heading\",\"value\":\"verticalAnchor\",\"depth\":2,\"slug\":\"vertical-anchor\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 15\\ntitle: VictoryLabel\\ncategory: more\\ntype: docs\\nscope: null\\n---\\n\\n# VictoryLabel\\n\\nVictoryLabel renders the label components that are used across all of Victory.\\n\\n## active\\n\\n`type: boolean`\\n\\nThe `active` prop specifies whether the label is active or not. The `active` prop is set by `defaultEvents` in components like `VictoryTooltip` and `VictorySelectionContainer`. The `active` prop is used when evaluating functional styles and props.\\n\\n## angle\\n\\n`type: string || number`\\n\\nThe `angle` prop specifies the angle to rotate the text around its anchor point.\\n\\n## capHeight\\n\\n`type: string || number || function`\\n\\nThe `capHeight` prop defines a text metric for the font being used: the expected height of capital letters. This is necessary because of SVG, which (a) positions the _bottom_ of the text at `y`, and (b) has no notion of line height. This prop should be given as a number of ems.\\n\\n## className\\n\\n`type: string`\\n\\nThe `className` prop specifies a class name that will be applied to the rendered text element.\\n\\n_example:_ `className=\\\"myLabel\\\"`\\n\\n## data\\n\\n`type: array[object]`\\n\\nVictory components can pass a `data` prop to their label component. This can be useful in custom components that need to make use of the entire dataset.\\n\\n## datum\\n\\n`type: object`\\n\\nVictory components can pass a `datum` prop to their label component. This can be used to calculate functional styles, and determine text. If `x` and `y` are not specified, `datum` will be used to determine label position.\\n\\n## desc\\n\\n`type: string`\\n\\nThe `desc` prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more descriptive this title is, the more useful it will be for people using screen readers.\\n\\n## direction\\n\\n`type: \\\"rtl\\\" || \\\"ltr\\\" || \\\"inherit\\\"`\\n\\nThe `direction` prop determines which text direction to apply to the rendered `text` element\\n\\n_default:_ `direction=\\\"inherit\\\"`\\n\\n## dx\\n\\n`type: string || number || function`\\n\\nThe `dx` prop defines a horizontal shift from the `x` coordinate.\\n\\n## dy\\n\\n`type: string || number || function`\\n\\nThe `dy` prop defines a vertical shift from the `y` coordinate. This prop is affected by `capHeight`, `lineHeight`, and `verticalAnchor`, and the number of lines of text that make up the label.\\n\\n## events\\n\\n`type: object`\\n\\nThe `events` prop attaches arbitrary event handlers to the label component. This prop should be given as an object of event names and corresponding event handlers. When events are provided via Victory's event system, event handlers will be called with the event, the props of the component it is attached to, and an `eventKey`.\\n\\n_example:_ `events={{onClick: (evt) => alert(\\\"x: \\\" + evt.clientX)}}`\\n\\n## height\\n\\n`type: number`\\n\\nThis prop refers to the height of the `svg` that `VictoryLabel` is rendered within. **This prop is passed from parents of `VictoryLabel`, and should not be set manually.**\\n\\n## id\\n\\n`type: string || number || function`\\n\\nThe `id` prop specifies a HTML ID that will be applied to the rendered text element.\\n\\n## index\\n\\n`type: string || number`\\n\\nThe `index` prop represents the index of the datum in the data array. **This prop should not be set manually.**\\n\\n## inline\\n\\n`type: boolean`\\n\\nWhen the `text` property contains an array of strings, the `inline` property lets the `<tspan />` elements lay out next to each other. If this property is not specified, the `<tspan />` elements will stack vertically instead.\\n\\n_default:_ `false`\\n\\n## labelPlacement\\n\\n`type: \\\"parallel\\\" || \\\"perpendicular\\\" || \\\"vertical\\\"`\\n\\nThe `labelPlacement` prop is used to specify the placement of labels relative to the data point they represent. This prop may be given as \\\"vertical\\\", \\\"parallel\\\" or \\\"perpendicular\\\". This props is particularly useful in polar charts, where it may be desireable to position a label either parallel or perpendicular to its corresponding angle. When this prop is not set, perpendicular label placement will be used for polar charts, and vertical label placement will be used for cartesian charts.\\n\\n## lineHeight\\n\\n`type: string || number || function`\\n\\nThe `lineHeight` prop defines how much space a single line of text should take up. Note that SVG has no notion of line-height, so the positioning may differ slightly from what you would expect with CSS, but the result is similar: a roughly equal amount of extra space is distributed above and below the line of text. This prop should be given as a number of ems.\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\nVictory components will pass an `origin` prop is to define the center point in svg coordinates for polar charts. **This prop should not be set manually.**\\n\\n## polar\\n\\n`type: boolean`\\n\\nVictory components can pass a boolean `polar` prop to specify whether a label is part of a polar chart. **This prop should not be set manually.**\\n\\n## renderInPortal\\n\\n`type: boolean`\\n\\nThe `renderInPortal` prop specifies whether `VictoryLabel` should render text in place or within a `VictoryPortal`. Setting `renderInPortal` to true is equivalent to wrapping `VictoryLabel` in a `VictoryPortal`. This prop is false by default.\\n\\n## scale\\n\\n`type: { x: scale, y: scale }`\\n\\nVictory components can pass a `scale` prop to their label component. This can be used to calculate the position of label elements from `datum`. **This prop should not be set manually.**\\n\\n## style\\n\\n`type: object`\\n\\nThe `style` prop defines a set of SVG style properties that will be applied to the rendered\\n`<text/>` element. This prop should be given as an object, or array of objects. When this prop is\\ngiven as an array of objects, each style object in the array will be applied to the corresponding\\n`<tspan/>` in multi-line labels.\\n\\n## text\\n\\n`type: string || number || function || array`\\n\\nThe `text` prop defines the text `VictoryLabel` will render. The `text` prop may be given as a\\nstring, number, a function of `datum`, or an array of any of these. Strings may include newline\\ncharacters, which `VictoryLabel` will split into separate `<tspan/>` elements. When `text` is given\\nas an array, separate `<tspan/>` elements will be created for each element in the array.\\n\\n_examples:_ `text={(datum) => \\\"x: \\\" + datum.x}`, `text=\\\"Apples\\\\n(green)\\\"`, `text={[\\\"first line\\\", \\\"second line\\\"]}`\\n\\n## textAnchor\\n\\n`type: \\\"start\\\" || \\\"middle\\\" || \\\"end\\\" || \\\"inherit\\\"`\\n\\nThe `textAnchor` prop defines how the text is horizontally positioned relative to the given `x` and `y` coordinates. Options are \\\"start\\\", \\\"middle\\\", \\\"end\\\", and \\\"inherit\\\".\\n\\n## transform\\n\\n`type: string || object || function`\\n\\nThe `transform` prop applies a transform to the rendered `<text>` element. This prop may be supplied as a string or an object containing transform definitions.\\n\\n## verticalAnchor\\n\\n`type: \\\"start\\\" || \\\"middle\\\" || \\\"end\\\"`\\n\\nThe `verticalAnchor` prop defines how the text is vertically positioned relative to the given `x` and `y` coordinates. Options are \\\"start\\\", \\\"middle\\\" and \\\"end\\\".\\n\\n## width\\n\\n`type: number`\\n\\nThis props refers to the width of the `svg` that `VictoryLabel` is rendered within. **This prop is passed from parents of `VictoryLabel`, and should not be set manually.**\\n\\n## x\\n\\n`type: number`\\n\\nThe `x` prop defines the x coordinate to use as a basis for positioning the label element.\\n\\n## y\\n\\n`type: number`\\n\\nThe `y` prop defines the y coordinate to use as a basis for positioning the label element.\\n\",\"content\":\"\\n# VictoryLabel\\n\\nVictoryLabel renders the label components that are used across all of Victory.\\n\\n## active\\n\\n`type: boolean`\\n\\nThe `active` prop specifies whether the label is active or not. The `active` prop is set by `defaultEvents` in components like `VictoryTooltip` and `VictorySelectionContainer`. The `active` prop is used when evaluating functional styles and props.\\n\\n## angle\\n\\n`type: string || number`\\n\\nThe `angle` prop specifies the angle to rotate the text around its anchor point.\\n\\n## capHeight\\n\\n`type: string || number || function`\\n\\nThe `capHeight` prop defines a text metric for the font being used: the expected height of capital letters. This is necessary because of SVG, which (a) positions the _bottom_ of the text at `y`, and (b) has no notion of line height. This prop should be given as a number of ems.\\n\\n## className\\n\\n`type: string`\\n\\nThe `className` prop specifies a class name that will be applied to the rendered text element.\\n\\n_example:_ `className=\\\"myLabel\\\"`\\n\\n## data\\n\\n`type: array[object]`\\n\\nVictory components can pass a `data` prop to their label component. This can be useful in custom components that need to make use of the entire dataset.\\n\\n## datum\\n\\n`type: object`\\n\\nVictory components can pass a `datum` prop to their label component. This can be used to calculate functional styles, and determine text. If `x` and `y` are not specified, `datum` will be used to determine label position.\\n\\n## desc\\n\\n`type: string`\\n\\nThe `desc` prop specifies the description of the chart/SVG to assist with accessibility for screen readers. The more descriptive this title is, the more useful it will be for people using screen readers.\\n\\n## direction\\n\\n`type: \\\"rtl\\\" || \\\"ltr\\\" || \\\"inherit\\\"`\\n\\nThe `direction` prop determines which text direction to apply to the rendered `text` element\\n\\n_default:_ `direction=\\\"inherit\\\"`\\n\\n## dx\\n\\n`type: string || number || function`\\n\\nThe `dx` prop defines a horizontal shift from the `x` coordinate.\\n\\n## dy\\n\\n`type: string || number || function`\\n\\nThe `dy` prop defines a vertical shift from the `y` coordinate. This prop is affected by `capHeight`, `lineHeight`, and `verticalAnchor`, and the number of lines of text that make up the label.\\n\\n## events\\n\\n`type: object`\\n\\nThe `events` prop attaches arbitrary event handlers to the label component. This prop should be given as an object of event names and corresponding event handlers. When events are provided via Victory's event system, event handlers will be called with the event, the props of the component it is attached to, and an `eventKey`.\\n\\n_example:_ `events={{onClick: (evt) => alert(\\\"x: \\\" + evt.clientX)}}`\\n\\n## height\\n\\n`type: number`\\n\\nThis prop refers to the height of the `svg` that `VictoryLabel` is rendered within. **This prop is passed from parents of `VictoryLabel`, and should not be set manually.**\\n\\n## id\\n\\n`type: string || number || function`\\n\\nThe `id` prop specifies a HTML ID that will be applied to the rendered text element.\\n\\n## index\\n\\n`type: string || number`\\n\\nThe `index` prop represents the index of the datum in the data array. **This prop should not be set manually.**\\n\\n## inline\\n\\n`type: boolean`\\n\\nWhen the `text` property contains an array of strings, the `inline` property lets the `<tspan />` elements lay out next to each other. If this property is not specified, the `<tspan />` elements will stack vertically instead.\\n\\n_default:_ `false`\\n\\n## labelPlacement\\n\\n`type: \\\"parallel\\\" || \\\"perpendicular\\\" || \\\"vertical\\\"`\\n\\nThe `labelPlacement` prop is used to specify the placement of labels relative to the data point they represent. This prop may be given as \\\"vertical\\\", \\\"parallel\\\" or \\\"perpendicular\\\". This props is particularly useful in polar charts, where it may be desireable to position a label either parallel or perpendicular to its corresponding angle. When this prop is not set, perpendicular label placement will be used for polar charts, and vertical label placement will be used for cartesian charts.\\n\\n## lineHeight\\n\\n`type: string || number || function`\\n\\nThe `lineHeight` prop defines how much space a single line of text should take up. Note that SVG has no notion of line-height, so the positioning may differ slightly from what you would expect with CSS, but the result is similar: a roughly equal amount of extra space is distributed above and below the line of text. This prop should be given as a number of ems.\\n\\n## origin\\n\\n`type: { x: number, y: number }`\\n\\nVictory components will pass an `origin` prop is to define the center point in svg coordinates for polar charts. **This prop should not be set manually.**\\n\\n## polar\\n\\n`type: boolean`\\n\\nVictory components can pass a boolean `polar` prop to specify whether a label is part of a polar chart. **This prop should not be set manually.**\\n\\n## renderInPortal\\n\\n`type: boolean`\\n\\nThe `renderInPortal` prop specifies whether `VictoryLabel` should render text in place or within a `VictoryPortal`. Setting `renderInPortal` to true is equivalent to wrapping `VictoryLabel` in a `VictoryPortal`. This prop is false by default.\\n\\n## scale\\n\\n`type: { x: scale, y: scale }`\\n\\nVictory components can pass a `scale` prop to their label component. This can be used to calculate the position of label elements from `datum`. **This prop should not be set manually.**\\n\\n## style\\n\\n`type: object`\\n\\nThe `style` prop defines a set of SVG style properties that will be applied to the rendered\\n`<text/>` element. This prop should be given as an object, or array of objects. When this prop is\\ngiven as an array of objects, each style object in the array will be applied to the corresponding\\n`<tspan/>` in multi-line labels.\\n\\n## text\\n\\n`type: string || number || function || array`\\n\\nThe `text` prop defines the text `VictoryLabel` will render. The `text` prop may be given as a\\nstring, number, a function of `datum`, or an array of any of these. Strings may include newline\\ncharacters, which `VictoryLabel` will split into separate `<tspan/>` elements. When `text` is given\\nas an array, separate `<tspan/>` elements will be created for each element in the array.\\n\\n_examples:_ `text={(datum) => \\\"x: \\\" + datum.x}`, `text=\\\"Apples\\\\n(green)\\\"`, `text={[\\\"first line\\\", \\\"second line\\\"]}`\\n\\n## textAnchor\\n\\n`type: \\\"start\\\" || \\\"middle\\\" || \\\"end\\\" || \\\"inherit\\\"`\\n\\nThe `textAnchor` prop defines how the text is horizontally positioned relative to the given `x` and `y` coordinates. Options are \\\"start\\\", \\\"middle\\\", \\\"end\\\", and \\\"inherit\\\".\\n\\n## transform\\n\\n`type: string || object || function`\\n\\nThe `transform` prop applies a transform to the rendered `<text>` element. This prop may be supplied as a string or an object containing transform definitions.\\n\\n## verticalAnchor\\n\\n`type: \\\"start\\\" || \\\"middle\\\" || \\\"end\\\"`\\n\\nThe `verticalAnchor` prop defines how the text is vertically positioned relative to the given `x` and `y` coordinates. Options are \\\"start\\\", \\\"middle\\\" and \\\"end\\\".\\n\\n## width\\n\\n`type: number`\\n\\nThis props refers to the width of the `svg` that `VictoryLabel` is rendered within. **This prop is passed from parents of `VictoryLabel`, and should not be set manually.**\\n\\n## x\\n\\n`type: number`\\n\\nThe `x` prop defines the x coordinate to use as a basis for positioning the label element.\\n\\n## y\\n\\n`type: number`\\n\\nThe `y` prop defines the y coordinate to use as a basis for positioning the label element.\\n\"},{\"data\":{\"id\":16,\"title\":\"VictoryLegend\",\"category\":\"more\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryLegend\",\"depth\":1,\"slug\":\"victory-legend\"},{\"type\":\"heading\",\"value\":\"borderComponent\",\"depth\":2,\"slug\":\"border-component\"},{\"type\":\"heading\",\"value\":\"borderPadding\",\"depth\":2,\"slug\":\"border-padding\"},{\"type\":\"heading\",\"value\":\"centerTitle\",\"depth\":2,\"slug\":\"center-title\"},{\"type\":\"heading\",\"value\":\"colorScale\",\"depth\":2,\"slug\":\"color-scale\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"gutter\",\"depth\":2,\"slug\":\"gutter\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"itemsPerRow\",\"depth\":2,\"slug\":\"items-per-row\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"orientation\",\"depth\":2,\"slug\":\"orientation\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"rowGutter\",\"depth\":2,\"slug\":\"row-gutter\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"symbolSpacer\",\"depth\":2,\"slug\":\"symbol-spacer\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"title\",\"depth\":2,\"slug\":\"title\"},{\"type\":\"heading\",\"value\":\"titleComponent\",\"depth\":2,\"slug\":\"title-component\"},{\"type\":\"heading\",\"value\":\"titleOrientation\",\"depth\":2,\"slug\":\"title-orientation\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"}],\"slug\":\"victory-legend\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryLegend\",\"depth\":1,\"slug\":\"victory-legend\",\"category\":\"more\",\"children\":[{\"type\":\"heading\",\"value\":\"borderComponent\",\"depth\":2,\"slug\":\"border-component\"},{\"type\":\"heading\",\"value\":\"borderPadding\",\"depth\":2,\"slug\":\"border-padding\"},{\"type\":\"heading\",\"value\":\"centerTitle\",\"depth\":2,\"slug\":\"center-title\"},{\"type\":\"heading\",\"value\":\"colorScale\",\"depth\":2,\"slug\":\"color-scale\"},{\"type\":\"heading\",\"value\":\"containerComponent\",\"depth\":2,\"slug\":\"container-component\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"dataComponent\",\"depth\":2,\"slug\":\"data-component\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"gutter\",\"depth\":2,\"slug\":\"gutter\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"itemsPerRow\",\"depth\":2,\"slug\":\"items-per-row\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"orientation\",\"depth\":2,\"slug\":\"orientation\"},{\"type\":\"heading\",\"value\":\"padding\",\"depth\":2,\"slug\":\"padding\"},{\"type\":\"heading\",\"value\":\"rowGutter\",\"depth\":2,\"slug\":\"row-gutter\"},{\"type\":\"heading\",\"value\":\"sharedEvents\",\"depth\":2,\"slug\":\"shared-events\"},{\"type\":\"heading\",\"value\":\"standalone\",\"depth\":2,\"slug\":\"standalone\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"symbolSpacer\",\"depth\":2,\"slug\":\"symbol-spacer\"},{\"type\":\"heading\",\"value\":\"theme\",\"depth\":2,\"slug\":\"theme\"},{\"type\":\"heading\",\"value\":\"title\",\"depth\":2,\"slug\":\"title\"},{\"type\":\"heading\",\"value\":\"titleComponent\",\"depth\":2,\"slug\":\"title-component\"},{\"type\":\"heading\",\"value\":\"titleOrientation\",\"depth\":2,\"slug\":\"title-orientation\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 16\\ntitle: VictoryLegend\\ncategory: more\\ntype: docs\\nscope: null\\n---\\n\\n# VictoryLegend\\n\\n`VictoryLegend` renders a chart legend component.\\n\\n```playground\\n<VictoryChart domain={[0, 10]}>\\n  <VictoryLegend x={125} y={50}\\n  \\ttitle=\\\"Legend\\\"\\n    centerTitle\\n    orientation=\\\"horizontal\\\"\\n    gutter={20}\\n    style={{ border: { stroke: \\\"black\\\" }, title: {fontSize: 20 } }}\\n    data={[\\n      { name: \\\"One\\\", symbol: { fill: \\\"tomato\\\", type: \\\"star\\\" } },\\n      { name: \\\"Two\\\", symbol: { fill: \\\"orange\\\" } },\\n      { name: \\\"Three\\\", symbol: { fill: \\\"gold\\\" } }\\n    ]}\\n  />\\n  <VictoryBar\\n      data={[\\n      { x: 2, y: 6, fill: \\\"tomato\\\" },\\n      { x: 4, y: 4, fill: \\\"orange\\\" },\\n      { x: 6, y: 2, fill: \\\"gold\\\" },\\n      { x: 8, y: 4, fill: \\\"tomato\\\" },\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## borderComponent\\n\\n`type: element`\\n\\nThe `borderComponent` prop takes a component instance which will be responsible for rendering a border around the legend. The new element created from the passed `borderComponent` will be provided with the following properties calculated by `VictoryLegend`: `x`, `y`, `width`, `height`, and `style`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `borderComponent` is not provided, `VictoryLegend` will use its default [Border component][]. Please note that the default width and height calculated for the border component is based on _approximated_ text measurements, and may need to be adjusted.\\n\\n_default:_ `<Border/>`\\n\\n```jsx\\nborderComponent={<Border width={300}/>}\\n```\\n\\n## borderPadding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\nThe `borderPadding` specifies the amount of padding that should be added between the legend items and the border. This prop may be given as a number, or as an object with values specified for `top`, `bottom`, `left`, and `right`. Please note that the default width and height calculated for the border component is based on _approximated_ text measurements, so padding may need to be adjusted.\\n\\n```jsx\\nborderPadding={{ top: 20, bottom: 10 }}\\n```\\n\\n## centerTitle\\n\\n`type: boolean`\\n\\nThe `centerTitle` boolean prop specifies whether a legend title should be centered.\\n\\n```playground\\n<VictoryLegend x={125} y={10}\\n  title=\\\"Legend\\\"\\n  centerTitle\\n  orientation=\\\"horizontal\\\"\\n  gutter={20}\\n  style={{ border: { stroke: \\\"black\\\" }, title: {fontSize: 20 } }}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## colorScale\\n\\n`type: array[string]`\\n\\nThe `colorScale` prop defines a color scale to be applied to each data symbol in `VictoryLegend`. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: \\\"grayscale\\\", \\\"qualitative\\\", \\\"heatmap\\\", \\\"warm\\\", \\\"cool\\\", \\\"red\\\", \\\"green\\\", \\\"blue\\\". `VictoryLegend` will assign a color to each symbol by index, unless they are explicitly specified in the data object. Colors will repeat when there are more symbols than colors in the provided `colorScale`.\\n\\n```playground\\n<VictoryLegend x={125} y={10}\\n  orientation=\\\"horizontal\\\"\\n  gutter={20}\\n  style={{ border: { stroke: \\\"black\\\" } }}\\n  colorScale={[ \\\"navy\\\", \\\"blue\\\", \\\"cyan\\\" ]}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryLegend` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n**Note:** `VictoryLegend` only works with the `VictoryContainer` component\\n\\n_default:_ `containerComponent={<VictoryContainer/>}`\\n\\n```jsx\\ncontainerComponent={<VictoryContainer responsive={false}/>}\\n```\\n\\n## data\\n\\n`type: array[{ name, symbol, labels }]`\\n\\nSpecify data via the `data` prop. `VictoryLegend` expects data as an array of objects with `name` (required), `symbol`, and `labels` properties. The `data` prop must be given as an array. The symbol rendered may be changed by altering the `type` property of the `symbol` object. Valid types include: circle\\\", \\\"diamond\\\", \\\"plus\\\", \\\"minus\\\", \\\"square\\\", \\\"star\\\", \\\"triangleDown\\\", and \\\"triangleUp\\\"\\n\\n_default:_ `data={[{ name: \\\"Series 1\\\" }, { name: \\\"Series 2\\\" }]}`\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  orientation=\\\"horizontal\\\"\\n  gutter={20}\\n  style={{ border: { stroke: \\\"black\\\" } }}\\n  data={[\\n    { name: \\\"One\\\", symbol: { fill: \\\"tomato\\\", type: \\\"star\\\" } },\\n    { name: \\\"Two\\\", symbol: { fill: \\\"orange\\\" }, labels: { fill: \\\"orange\\\" } },\\n    { name: \\\"Three\\\", symbol: { fill: \\\"gold\\\" } }\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryLegend` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)\\n\\n`VictoryLegend` supplies the following props to its `dataComponent`: `data`, `datum`, `events`, `index`, `x`, `y`, `size`, `style`, and `symbol`. `VictoryLegend` renders a [Point component][] by default.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Point/>`\\n\\n```jsx\\ndataComponent={<Point events={{ onClick: handleClick }}/>}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryLegend` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryLegend` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryLegend\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: (props) => {\\n                const fill = props.style && props.style.fill;\\n                return fill === \\\"#c43a31\\\" ? null : { style: { fill: \\\"#c43a31\\\" } };\\n              }\\n            }, {\\n              target: \\\"labels\\\",\\n              mutation: (props) => {\\n                return props.text === \\\"clicked\\\" ? null : { text: \\\"clicked\\\" };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={[\\n      { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n    ]}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryLegend` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryLegend` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"rotate(90)\\\" />}\\n```\\n\\n## gutter\\n\\n`type: number || { left: number, right: number }`\\n\\nThe `gutter` prop defines the number of pixels between legend columns. This prop may be given as a number, or as an object with values specified for \\\"left\\\" and \\\"right\\\" gutters. To set spacing between rows, use the `rowGutter` prop.\\n\\n_default:_ `gutter={10}`\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  orientation=\\\"horizontal\\\"\\n  gutter={50}\\n  style={{ border: { stroke: \\\"black\\\" } }}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryLegend` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={400}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## itemsPerRow\\n\\n`type: number`\\n\\nThe `itemsPerRow` prop determines how many items to render in each row of a horizontal legend, or in each column of a vertical legend. This prop should be given as an integer. When this prop is not given, legend items will be rendered in a single row or column.\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  orientation=\\\"horizontal\\\"\\n  itemsPerRow={3}\\n  gutter={20}\\n  style={{ border: { stroke: \\\"black\\\" } }}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }, { name: \\\"Four\\\" }\\n  ]}\\n/>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryLegend` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryLegend\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n  labelComponent={<VictoryLabel angle={45}/>}\\n/>\\n```\\n\\n## orientation\\n\\n`type: \\\"vertical\\\" || \\\"horizontal\\\"`\\n\\nThe `orientation` prop takes a string that defines whether legend data are displayed in a row or column. When `orientation` is `\\\"horizontal\\\"`, legend items will be displayed in rows. When `orientation` is `\\\"vertical\\\"`, legend items will be displayed in columns.\\n\\n_default:_ `orientation=\\\"vertical\\\"`\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryLegend` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## rowGutter\\n\\n`type: number || { top: number, bottom: number }`\\n\\nThe `rowGutter` prop defines the number of pixels between legend rows. This prop may be given as a number, or as an object with values specified for \\\"top\\\" and \\\"bottom\\\" gutters. To set spacing between columns, use the `gutter` prop.\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  orientation=\\\"vertical\\\"\\n  gutter={20}\\n  rowGutter={{ top: 0, bottom: 10 }}\\n  style={{ border: { stroke: \\\"black\\\" } }}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## standalone\\n\\n`type: boolean`\\n\\nThe `standalone` props specifies whether the component should be rendered in an independent `<svg>` element or in a `<g>` tag. This prop defaults to true, and renders an `svg`.\\n\\n_default:_ `standalone={true}`\\n\\n## style\\n\\n`type: { border: object, data: object, labels: object, parent: object, title: object }`\\n\\nThe `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `data`, `labels`, `title`, and `border`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for `data`, and `labels` style properties, and they will be evaluated with the props corresponding to each element.\\n\\n**note:** When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.\\n\\n**note:** custom `angle` and `verticalAnchor` properties may be included in `labels` and `title` styles.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  title=\\\"Legend\\\"\\n  centerTitle\\n  orientation=\\\"horizontal\\\"\\n  gutter={20}\\n  style={{\\n    data: { fill: \\\"blue\\\", stroke: \\\"navy\\\", strokeWidth: 2 },\\n    labels: { fill: \\\"navy\\\" },\\n    border: { stroke: \\\"black\\\" },\\n    title: {fontSize: 20 }\\n  }}\\n  data={[\\n    { name: \\\"One\\\", symbol: { fill: \\\"tomato\\\" } },\\n    { name: \\\"Two\\\", labels: { fill: \\\"orange\\\" } },\\n    { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## symbolSpacer\\n\\n`type: number`\\n\\nThe `symbolSpacer` prop defines the number of pixels between data components and label components. When a `symbolSpacer` is not defined, spacing is calculated based on symbol size and label font size.\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  orientation=\\\"horizontal\\\"\\n  symbolSpacer={5}\\n  gutter={20}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\nThe `theme` prop specifies a theme to use for determining styles and layout properties for a component. Any styles or props defined in `theme` may be overridden by props specified on the component instance. By default, components use a [grayscale theme][]. [Read more about themes here][].\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n## title\\n\\n`type: string || array[string]`\\n\\nThe `title` prop specifies a title to render with the legend. This prop should be given as a string, or an array of strings for multi-line titles.\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  title=\\\"Legend Title\\\"\\n  gutter={20}\\n  orientation=\\\"horizontal\\\"\\n  style={{ border: { stroke: \\\"black\\\" }, title: { fontSize: 20 } }}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## titleComponent\\n\\n`type: element`\\n\\nThe `titleComponent` prop takes a component instance which will be used to render a title for the component. The new element created from the passed `labelComponent` will be supplied with the following properties: `x`, `y`, `index`, `data`, `datum`, `verticalAnchor`, `textAnchor`, `style`, `text`, and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above.\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  title={[\\\"Legend Title\\\", \\\"subtitle\\\"]}\\n  gutter={20}\\n  orientation=\\\"horizontal\\\"\\n  style={{ border: { stroke: \\\"black\\\" } }}\\n  titleComponent={<VictoryLabel style={[{ fontSize: 20 }, { fontSize: 12 }]}/>}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## titleOrientation\\n\\n`type: \\\"top\\\" || \\\"bottom\\\" || \\\"left\\\" || \\\"right\\\"`\\n\\nThe `titleOrientation` prop specifies where the a title should be rendered in relation to the rest of the legend. Possible values for this prop are \\\"top\\\", \\\"bottom\\\", \\\"left\\\", and \\\"right\\\".\\n\\n_default (provided by default theme):_ `titleOrientation=\\\"top\\\"`\\n\\n```playground\\n<VictoryLegend x={50} y={50}\\n  title=\\\"Legend Title\\\"\\n  titleOrientation=\\\"left\\\"\\n  gutter={20}\\n  orientation=\\\"horizontal\\\"\\n  style={{ border: { stroke: \\\"black\\\" }, title: { fontSize: 20 } }}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryLegend` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={400}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: number`\\n\\nThe `x` prop defines the x coordinate corresponding to the upper left corner of the legend.\\n\\n## y\\n\\n`type: number`\\n\\nThe `y` prop defines the y coordinate corresponding to the upper left corner of the legend.\\n\\n[victorylabel]: /docs/victory-label\\n\\n[point component]: /docs/victory-primitives#point\\n\\n[border component]: /docs/victory-primitives#border\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\\n[read more about themes here]: /guides/themes\\n\\n[custom components guide]: /guides/custom-components\\n\\n[events guide]: /guides/events\\n\",\"content\":\"\\n# VictoryLegend\\n\\n`VictoryLegend` renders a chart legend component.\\n\\n```playground\\n<VictoryChart domain={[0, 10]}>\\n  <VictoryLegend x={125} y={50}\\n  \\ttitle=\\\"Legend\\\"\\n    centerTitle\\n    orientation=\\\"horizontal\\\"\\n    gutter={20}\\n    style={{ border: { stroke: \\\"black\\\" }, title: {fontSize: 20 } }}\\n    data={[\\n      { name: \\\"One\\\", symbol: { fill: \\\"tomato\\\", type: \\\"star\\\" } },\\n      { name: \\\"Two\\\", symbol: { fill: \\\"orange\\\" } },\\n      { name: \\\"Three\\\", symbol: { fill: \\\"gold\\\" } }\\n    ]}\\n  />\\n  <VictoryBar\\n      data={[\\n      { x: 2, y: 6, fill: \\\"tomato\\\" },\\n      { x: 4, y: 4, fill: \\\"orange\\\" },\\n      { x: 6, y: 2, fill: \\\"gold\\\" },\\n      { x: 8, y: 4, fill: \\\"tomato\\\" },\\n    ]}\\n  />\\n</VictoryChart>\\n```\\n\\n## borderComponent\\n\\n`type: element`\\n\\nThe `borderComponent` prop takes a component instance which will be responsible for rendering a border around the legend. The new element created from the passed `borderComponent` will be provided with the following properties calculated by `VictoryLegend`: `x`, `y`, `width`, `height`, and `style`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If a `borderComponent` is not provided, `VictoryLegend` will use its default [Border component][]. Please note that the default width and height calculated for the border component is based on _approximated_ text measurements, and may need to be adjusted.\\n\\n_default:_ `<Border/>`\\n\\n```jsx\\nborderComponent={<Border width={300}/>}\\n```\\n\\n## borderPadding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\nThe `borderPadding` specifies the amount of padding that should be added between the legend items and the border. This prop may be given as a number, or as an object with values specified for `top`, `bottom`, `left`, and `right`. Please note that the default width and height calculated for the border component is based on _approximated_ text measurements, so padding may need to be adjusted.\\n\\n```jsx\\nborderPadding={{ top: 20, bottom: 10 }}\\n```\\n\\n## centerTitle\\n\\n`type: boolean`\\n\\nThe `centerTitle` boolean prop specifies whether a legend title should be centered.\\n\\n```playground\\n<VictoryLegend x={125} y={10}\\n  title=\\\"Legend\\\"\\n  centerTitle\\n  orientation=\\\"horizontal\\\"\\n  gutter={20}\\n  style={{ border: { stroke: \\\"black\\\" }, title: {fontSize: 20 } }}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## colorScale\\n\\n`type: array[string]`\\n\\nThe `colorScale` prop defines a color scale to be applied to each data symbol in `VictoryLegend`. This prop should be given as an array of CSS colors, or as a string corresponding to one of the built in color scales: \\\"grayscale\\\", \\\"qualitative\\\", \\\"heatmap\\\", \\\"warm\\\", \\\"cool\\\", \\\"red\\\", \\\"green\\\", \\\"blue\\\". `VictoryLegend` will assign a color to each symbol by index, unless they are explicitly specified in the data object. Colors will repeat when there are more symbols than colors in the provided `colorScale`.\\n\\n```playground\\n<VictoryLegend x={125} y={10}\\n  orientation=\\\"horizontal\\\"\\n  gutter={20}\\n  style={{ border: { stroke: \\\"black\\\" } }}\\n  colorScale={[ \\\"navy\\\", \\\"blue\\\", \\\"cyan\\\" ]}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## containerComponent\\n\\n`type: element`\\n\\n`VictoryLegend` uses the standard `containerComponent` prop. [Read about it here](/docs/common-props#containercomponent)\\n\\n**Note:** `VictoryLegend` only works with the `VictoryContainer` component\\n\\n_default:_ `containerComponent={<VictoryContainer/>}`\\n\\n```jsx\\ncontainerComponent={<VictoryContainer responsive={false}/>}\\n```\\n\\n## data\\n\\n`type: array[{ name, symbol, labels }]`\\n\\nSpecify data via the `data` prop. `VictoryLegend` expects data as an array of objects with `name` (required), `symbol`, and `labels` properties. The `data` prop must be given as an array. The symbol rendered may be changed by altering the `type` property of the `symbol` object. Valid types include: circle\\\", \\\"diamond\\\", \\\"plus\\\", \\\"minus\\\", \\\"square\\\", \\\"star\\\", \\\"triangleDown\\\", and \\\"triangleUp\\\"\\n\\n_default:_ `data={[{ name: \\\"Series 1\\\" }, { name: \\\"Series 2\\\" }]}`\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  orientation=\\\"horizontal\\\"\\n  gutter={20}\\n  style={{ border: { stroke: \\\"black\\\" } }}\\n  data={[\\n    { name: \\\"One\\\", symbol: { fill: \\\"tomato\\\", type: \\\"star\\\" } },\\n    { name: \\\"Two\\\", symbol: { fill: \\\"orange\\\" }, labels: { fill: \\\"orange\\\" } },\\n    { name: \\\"Three\\\", symbol: { fill: \\\"gold\\\" } }\\n  ]}\\n/>\\n```\\n\\n## dataComponent\\n\\n`type: element`\\n\\n`VictoryLegend` uses the standard `dataComponent` prop. [Read about it here](/docs/common-props#datacomponent)\\n\\n`VictoryLegend` supplies the following props to its `dataComponent`: `data`, `datum`, `events`, `index`, `x`, `y`, `size`, `style`, and `symbol`. `VictoryLegend` renders a [Point component][] by default.\\n\\nSee the [Custom Components Guide][] for more detail on creating your own `dataComponents`\\n\\n_default:_ `<Point/>`\\n\\n```jsx\\ndataComponent={<Point events={{ onClick: handleClick }}/>}\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\n`VictoryLegend` uses the standard `eventKey` prop to specify how event targets are addressed. **This prop is not commonly used.** [Read about the `eventKey` prop in more detail here](/docs/common-props#eventkey)\\n\\n```jsx\\neventKey = \\\"x\\\";\\n```\\n\\n## events\\n\\n`type: array[object]`\\n\\n`VictoryLegend` uses the standard `events` prop. [Read about it here](/docs/common-props#events)\\n\\nSee the [Events Guide][] for more information on defining events.\\n\\n```playground\\n<div>\\n  <h3>Click Me</h3>\\n  <VictoryLegend\\n    events={[{\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onClick: () => {\\n          return [\\n            {\\n              target: \\\"data\\\",\\n              mutation: (props) => {\\n                const fill = props.style && props.style.fill;\\n                return fill === \\\"#c43a31\\\" ? null : { style: { fill: \\\"#c43a31\\\" } };\\n              }\\n            }, {\\n              target: \\\"labels\\\",\\n              mutation: (props) => {\\n                return props.text === \\\"clicked\\\" ? null : { text: \\\"clicked\\\" };\\n              }\\n            }\\n          ];\\n        }\\n      }\\n    }]}\\n    data={[\\n      { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n    ]}\\n  />\\n</div>\\n```\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\n`VictoryLegend` uses the standard `externalEventMutations` prop. [Read about it in detail](/docs/common-props#externalEventsMutations)\\n\\n## groupComponent\\n\\n`type: element`\\n\\n`VictoryLegend` uses the standard `groupComponent` prop. [Read about it here](/docs/common-props#groupcomponent)\\n\\n_default:_ `<g/>`\\n\\n```jsx\\ngroupComponent={<g transform=\\\"rotate(90)\\\" />}\\n```\\n\\n## gutter\\n\\n`type: number || { left: number, right: number }`\\n\\nThe `gutter` prop defines the number of pixels between legend columns. This prop may be given as a number, or as an object with values specified for \\\"left\\\" and \\\"right\\\" gutters. To set spacing between rows, use the `rowGutter` prop.\\n\\n_default:_ `gutter={10}`\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  orientation=\\\"horizontal\\\"\\n  gutter={50}\\n  style={{ border: { stroke: \\\"black\\\" } }}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## height\\n\\n`type: number`\\n\\n`VictoryLegend` uses the standard `height` prop. [Read about it here](/docs/common-props#height)\\n\\n_default (provided by default theme):_ `height={400}`\\n\\n```jsx\\nheight={400}\\n```\\n\\n## itemsPerRow\\n\\n`type: number`\\n\\nThe `itemsPerRow` prop determines how many items to render in each row of a horizontal legend, or in each column of a vertical legend. This prop should be given as an integer. When this prop is not given, legend items will be rendered in a single row or column.\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  orientation=\\\"horizontal\\\"\\n  itemsPerRow={3}\\n  gutter={20}\\n  style={{ border: { stroke: \\\"black\\\" } }}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }, { name: \\\"Four\\\" }\\n  ]}\\n/>\\n```\\n\\n## labelComponent\\n\\n`type: element`\\n\\n`VictoryLegend` uses the standard `labelComponent` prop. [Read about it here](/docs/common-props#labelcomponent)\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryLegend\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n  labelComponent={<VictoryLabel angle={45}/>}\\n/>\\n```\\n\\n## orientation\\n\\n`type: \\\"vertical\\\" || \\\"horizontal\\\"`\\n\\nThe `orientation` prop takes a string that defines whether legend data are displayed in a row or column. When `orientation` is `\\\"horizontal\\\"`, legend items will be displayed in rows. When `orientation` is `\\\"vertical\\\"`, legend items will be displayed in columns.\\n\\n_default:_ `orientation=\\\"vertical\\\"`\\n\\n## padding\\n\\n`type: number || { top: number, bottom: number, left: number, right: number }`\\n\\n`VictoryLegend` uses the standard `padding` prop. [Read about it here](/docs/common-props#padding)\\n\\n_default (provided by default theme):_ `padding={50}`\\n\\n```jsx\\npadding={{ top: 20, bottom: 60 }}\\n```\\n\\n## rowGutter\\n\\n`type: number || { top: number, bottom: number }`\\n\\nThe `rowGutter` prop defines the number of pixels between legend rows. This prop may be given as a number, or as an object with values specified for \\\"top\\\" and \\\"bottom\\\" gutters. To set spacing between columns, use the `gutter` prop.\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  orientation=\\\"vertical\\\"\\n  gutter={20}\\n  rowGutter={{ top: 0, bottom: 10 }}\\n  style={{ border: { stroke: \\\"black\\\" } }}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## sharedEvents\\n\\n**The `sharedEvents` prop is used internally to coordinate events between components. It should not be set manually.**\\n\\n## standalone\\n\\n`type: boolean`\\n\\nThe `standalone` props specifies whether the component should be rendered in an independent `<svg>` element or in a `<g>` tag. This prop defaults to true, and renders an `svg`.\\n\\n_default:_ `standalone={true}`\\n\\n## style\\n\\n`type: { border: object, data: object, labels: object, parent: object, title: object }`\\n\\nThe `style` prop defines the style of the component. The style prop should be given as an object with styles defined for `parent`, `data`, `labels`, `title`, and `border`. Any valid svg styles are supported, but `width`, `height`, and `padding` should be specified via props as they determine relative layout for components in VictoryChart. Functional styles may be defined for `data`, and `labels` style properties, and they will be evaluated with the props corresponding to each element.\\n\\n**note:** When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.\\n\\n**note:** custom `angle` and `verticalAnchor` properties may be included in `labels` and `title` styles.\\n\\n_default (provided by default theme):_ See [grayscale theme][] for more detail\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  title=\\\"Legend\\\"\\n  centerTitle\\n  orientation=\\\"horizontal\\\"\\n  gutter={20}\\n  style={{\\n    data: { fill: \\\"blue\\\", stroke: \\\"navy\\\", strokeWidth: 2 },\\n    labels: { fill: \\\"navy\\\" },\\n    border: { stroke: \\\"black\\\" },\\n    title: {fontSize: 20 }\\n  }}\\n  data={[\\n    { name: \\\"One\\\", symbol: { fill: \\\"tomato\\\" } },\\n    { name: \\\"Two\\\", labels: { fill: \\\"orange\\\" } },\\n    { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## symbolSpacer\\n\\n`type: number`\\n\\nThe `symbolSpacer` prop defines the number of pixels between data components and label components. When a `symbolSpacer` is not defined, spacing is calculated based on symbol size and label font size.\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  orientation=\\\"horizontal\\\"\\n  symbolSpacer={5}\\n  gutter={20}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## theme\\n\\n`type: object`\\n\\nThe `theme` prop specifies a theme to use for determining styles and layout properties for a component. Any styles or props defined in `theme` may be overridden by props specified on the component instance. By default, components use a [grayscale theme][]. [Read more about themes here][].\\n\\n_default:_ `theme={VictoryTheme.grayscale}`\\n\\n## title\\n\\n`type: string || array[string]`\\n\\nThe `title` prop specifies a title to render with the legend. This prop should be given as a string, or an array of strings for multi-line titles.\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  title=\\\"Legend Title\\\"\\n  gutter={20}\\n  orientation=\\\"horizontal\\\"\\n  style={{ border: { stroke: \\\"black\\\" }, title: { fontSize: 20 } }}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## titleComponent\\n\\n`type: element`\\n\\nThe `titleComponent` prop takes a component instance which will be used to render a title for the component. The new element created from the passed `labelComponent` will be supplied with the following properties: `x`, `y`, `index`, `data`, `datum`, `verticalAnchor`, `textAnchor`, `style`, `text`, and `events`. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above.\\n\\n_default:_ `<VictoryLabel/>`\\n\\n```playground\\n<VictoryLegend x={125} y={50}\\n  title={[\\\"Legend Title\\\", \\\"subtitle\\\"]}\\n  gutter={20}\\n  orientation=\\\"horizontal\\\"\\n  style={{ border: { stroke: \\\"black\\\" } }}\\n  titleComponent={<VictoryLabel style={[{ fontSize: 20 }, { fontSize: 12 }]}/>}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## titleOrientation\\n\\n`type: \\\"top\\\" || \\\"bottom\\\" || \\\"left\\\" || \\\"right\\\"`\\n\\nThe `titleOrientation` prop specifies where the a title should be rendered in relation to the rest of the legend. Possible values for this prop are \\\"top\\\", \\\"bottom\\\", \\\"left\\\", and \\\"right\\\".\\n\\n_default (provided by default theme):_ `titleOrientation=\\\"top\\\"`\\n\\n```playground\\n<VictoryLegend x={50} y={50}\\n  title=\\\"Legend Title\\\"\\n  titleOrientation=\\\"left\\\"\\n  gutter={20}\\n  orientation=\\\"horizontal\\\"\\n  style={{ border: { stroke: \\\"black\\\" }, title: { fontSize: 20 } }}\\n  data={[\\n    { name: \\\"One\\\" }, { name: \\\"Two\\\" }, { name: \\\"Three\\\" }\\n  ]}\\n/>\\n```\\n\\n## width\\n\\n`type: number`\\n\\n`VictoryLegend` uses the standard `width` prop. [Read about it here](/docs/common-props#width)\\n\\n_default (provided by default theme):_ `width={400}`\\n\\n```jsx\\nwidth={400}\\n```\\n\\n## x\\n\\n`type: number`\\n\\nThe `x` prop defines the x coordinate corresponding to the upper left corner of the legend.\\n\\n## y\\n\\n`type: number`\\n\\nThe `y` prop defines the y coordinate corresponding to the upper left corner of the legend.\\n\\n[victorylabel]: /docs/victory-label\\n[point component]: /docs/victory-primitives#point\\n[border component]: /docs/victory-primitives#border\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n[read more about themes here]: /guides/themes\\n[custom components guide]: /guides/custom-components\\n[events guide]: /guides/events\\n\"},{\"data\":{\"id\":20,\"title\":\"VictoryPortal\",\"category\":\"more\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryPortal\",\"depth\":1,\"slug\":\"victory-portal\"},{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"}],\"slug\":\"victory-portal\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryPortal\",\"depth\":1,\"slug\":\"victory-portal\",\"category\":\"more\",\"children\":[{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 20\\ntitle: VictoryPortal\\ncategory: more\\ntype: docs\\nscope: null\\n---\\n\\n# VictoryPortal\\n\\n`VictoryPortal` is a wrapper component that renders a child in a top-level [Portal][] element within [VictoryContainer][]. This is useful in instances where elements should always be rendered above others, like tooltips and labels. If a Portal element is not found, `VictoryPortal` will render its child in place.\\n\\n## children\\n\\n`type: element`\\n\\n`VictoryPortal` takes a single `children`, and renders it in a top level portal element. Any additional props passed to `VictoryPortal` will be spread onto the child. In the following example, the `labelComponent` passed to the first series of bars has been wrapped in `VictoryPortal`. The resulting labels will be rendered in a top-level portal container, and will not be overlapped by subsequent data series, as they otherwise would have.\\n\\n```playground\\n<VictoryChart domainPadding={{ x: 50 }}>\\n  <VictoryGroup offset={15}>\\n    <VictoryBar\\n      labels={[\\\"apples\\\", \\\"bananas\\\", \\\"cherries\\\"]}\\n      style={{\\n        labels: { fontSize: 20, fill: \\\"tomato\\\" }\\n      }}\\n      labelComponent={<VictoryPortal><VictoryLabel/></VictoryPortal>}\\n      data={[{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 5}]}\\n    />\\n    <VictoryBar\\n      data={[{x: 1, y: 2}, {x: 2, y: 1}, {x: 3, y: 7}]}\\n    />\\n    <VictoryBar\\n      data={[{x: 1, y: 3}, {x: 2, y: 4}, {x: 3, y: 9}]}\\n    />\\n  </VictoryGroup>\\n</VictoryChart>\\n```\\n\\n## groupComponent\\n\\n`type: element`\\n\\nThe `groupComponent` prop takes a component instance which will be used to create a group element for `VictoryPortal` to render its child component into. This prop defaults to a `<g>` tag.\\n\\n[victorycontainer]: /docs/victory-container\\n\\n[portal]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-portal/portal.js\\n\",\"content\":\"\\n# VictoryPortal\\n\\n`VictoryPortal` is a wrapper component that renders a child in a top-level [Portal][] element within [VictoryContainer][]. This is useful in instances where elements should always be rendered above others, like tooltips and labels. If a Portal element is not found, `VictoryPortal` will render its child in place.\\n\\n## children\\n\\n`type: element`\\n\\n`VictoryPortal` takes a single `children`, and renders it in a top level portal element. Any additional props passed to `VictoryPortal` will be spread onto the child. In the following example, the `labelComponent` passed to the first series of bars has been wrapped in `VictoryPortal`. The resulting labels will be rendered in a top-level portal container, and will not be overlapped by subsequent data series, as they otherwise would have.\\n\\n```playground\\n<VictoryChart domainPadding={{ x: 50 }}>\\n  <VictoryGroup offset={15}>\\n    <VictoryBar\\n      labels={[\\\"apples\\\", \\\"bananas\\\", \\\"cherries\\\"]}\\n      style={{\\n        labels: { fontSize: 20, fill: \\\"tomato\\\" }\\n      }}\\n      labelComponent={<VictoryPortal><VictoryLabel/></VictoryPortal>}\\n      data={[{x: 1, y: 1}, {x: 2, y: 2}, {x: 3, y: 5}]}\\n    />\\n    <VictoryBar\\n      data={[{x: 1, y: 2}, {x: 2, y: 1}, {x: 3, y: 7}]}\\n    />\\n    <VictoryBar\\n      data={[{x: 1, y: 3}, {x: 2, y: 4}, {x: 3, y: 9}]}\\n    />\\n  </VictoryGroup>\\n</VictoryChart>\\n\\n```\\n\\n## groupComponent\\n\\n`type: element`\\n\\nThe `groupComponent` prop takes a component instance which will be used to create a group element for `VictoryPortal` to render its child component into. This prop defaults to a `<g>` tag.\\n\\n[victorycontainer]: /docs/victory-container\\n[portal]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-portal/portal.js\\n\"},{\"data\":{\"id\":21,\"title\":\"VictoryPrimitives\",\"category\":\"more\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"Victory Primitives\",\"depth\":1,\"slug\":\"victory-primitives\"},{\"type\":\"heading\",\"value\":\"Primitive Components\",\"depth\":2,\"slug\":\"primitive-components\"},{\"type\":\"heading\",\"value\":\"Circle\",\"depth\":3,\"slug\":\"circle\"},{\"type\":\"heading\",\"value\":\"ClipPath\",\"depth\":3,\"slug\":\"clip-path\"},{\"type\":\"heading\",\"value\":\"Line\",\"depth\":3,\"slug\":\"line\"},{\"type\":\"heading\",\"value\":\"Path\",\"depth\":3,\"slug\":\"path\"},{\"type\":\"heading\",\"value\":\"Rect\",\"depth\":3,\"slug\":\"rect\"},{\"type\":\"heading\",\"value\":\"Text\",\"depth\":3,\"slug\":\"text\"},{\"type\":\"heading\",\"value\":\"TSpan\",\"depth\":3,\"slug\":\"t-span\"},{\"type\":\"heading\",\"value\":\"Simple Components\",\"depth\":2,\"slug\":\"simple-components\"},{\"type\":\"heading\",\"value\":\"Arc\",\"depth\":3,\"slug\":\"arc\"},{\"type\":\"heading\",\"value\":\"Area\",\"depth\":3,\"slug\":\"area\"},{\"type\":\"heading\",\"value\":\"LineSegment\",\"depth\":3,\"slug\":\"line-segment\"},{\"type\":\"heading\",\"value\":\"Background\",\"depth\":3,\"slug\":\"background\"},{\"type\":\"heading\",\"value\":\"Bar\",\"depth\":3,\"slug\":\"bar\"},{\"type\":\"heading\",\"value\":\"Box\",\"depth\":3,\"slug\":\"box\"},{\"type\":\"heading\",\"value\":\"Candle\",\"depth\":3,\"slug\":\"candle\"},{\"type\":\"heading\",\"value\":\"Curve\",\"depth\":3,\"slug\":\"curve\"},{\"type\":\"heading\",\"value\":\"ErrorBar\",\"depth\":3,\"slug\":\"error-bar\"},{\"type\":\"heading\",\"value\":\"Flyout\",\"depth\":3,\"slug\":\"flyout\"},{\"type\":\"heading\",\"value\":\"Point\",\"depth\":3,\"slug\":\"point\"},{\"type\":\"heading\",\"value\":\"Slice\",\"depth\":3,\"slug\":\"slice\"},{\"type\":\"heading\",\"value\":\"Voronoi\",\"depth\":3,\"slug\":\"voronoi\"},{\"type\":\"heading\",\"value\":\"Whisker\",\"depth\":3,\"slug\":\"whisker\"}],\"slug\":\"victory-primitives\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"Victory Primitives\",\"depth\":1,\"slug\":\"victory-primitives\",\"category\":\"more\",\"children\":[{\"type\":\"heading\",\"value\":\"Primitive Components\",\"depth\":2,\"slug\":\"primitive-components\",\"children\":[{\"type\":\"heading\",\"value\":\"Circle\",\"depth\":3,\"slug\":\"circle\"},{\"type\":\"heading\",\"value\":\"ClipPath\",\"depth\":3,\"slug\":\"clip-path\"},{\"type\":\"heading\",\"value\":\"Line\",\"depth\":3,\"slug\":\"line\"},{\"type\":\"heading\",\"value\":\"Path\",\"depth\":3,\"slug\":\"path\"},{\"type\":\"heading\",\"value\":\"Rect\",\"depth\":3,\"slug\":\"rect\"},{\"type\":\"heading\",\"value\":\"Text\",\"depth\":3,\"slug\":\"text\"},{\"type\":\"heading\",\"value\":\"TSpan\",\"depth\":3,\"slug\":\"t-span\"}]},{\"type\":\"heading\",\"value\":\"Simple Components\",\"depth\":2,\"slug\":\"simple-components\",\"children\":[{\"type\":\"heading\",\"value\":\"Arc\",\"depth\":3,\"slug\":\"arc\"},{\"type\":\"heading\",\"value\":\"Area\",\"depth\":3,\"slug\":\"area\"},{\"type\":\"heading\",\"value\":\"LineSegment\",\"depth\":3,\"slug\":\"line-segment\"},{\"type\":\"heading\",\"value\":\"Background\",\"depth\":3,\"slug\":\"background\"},{\"type\":\"heading\",\"value\":\"Bar\",\"depth\":3,\"slug\":\"bar\"},{\"type\":\"heading\",\"value\":\"Box\",\"depth\":3,\"slug\":\"box\"},{\"type\":\"heading\",\"value\":\"Candle\",\"depth\":3,\"slug\":\"candle\"},{\"type\":\"heading\",\"value\":\"Curve\",\"depth\":3,\"slug\":\"curve\"},{\"type\":\"heading\",\"value\":\"ErrorBar\",\"depth\":3,\"slug\":\"error-bar\"},{\"type\":\"heading\",\"value\":\"Flyout\",\"depth\":3,\"slug\":\"flyout\"},{\"type\":\"heading\",\"value\":\"Point\",\"depth\":3,\"slug\":\"point\"},{\"type\":\"heading\",\"value\":\"Slice\",\"depth\":3,\"slug\":\"slice\"},{\"type\":\"heading\",\"value\":\"Voronoi\",\"depth\":3,\"slug\":\"voronoi\"},{\"type\":\"heading\",\"value\":\"Whisker\",\"depth\":3,\"slug\":\"whisker\"}]}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 21\\ntitle: VictoryPrimitives\\ncategory: more\\ntype: docs\\nscope: null\\n---\\n\\n# Victory Primitives\\n\\nVictory is built around a set of simple, stateless components. Along with [VictoryContainer][], [VictoryClipContainer][], and [VictoryLabel][], the following list represents every simple element a Victory component might render. These simple components are responsible for supplying props to primitive components. Victory maintains a small subset of primitive components with additional logic in place to prevent unnecessary rendering. Extracting every rendered element into its own component allows Victory to support both web and React Native applications with very little additional code, as only a few components need to be modified to render [react-native-svg][] elements rather than SVG elements. These primitives are also exposed for users to wrap, extend or reference when creating their own custom rendered components.\\n\\n## Primitive Components\\n\\nEach of these primitive components renders SVG elements. The following components are the only Victory components that render SVG elements with the exception of `VictoryContainer` and `VictoryPortal`. These elements are used by other simple components such as `Bar` and `Area`.\\n\\n### Circle\\n\\nUsed by `Background`, `VictoryClipContainer`, and `Voronoi`\\n\\n```jsx\\nconst Circle = props => <circle vectorEffect=\\\"non-scaling-stroke\\\" {...props} />;\\n```\\n\\n### ClipPath\\n\\nUsed by `VictoryClipContainer` and `Voronoi`\\n\\n```jsx\\nconst ClipPath = props => (\\n  <defs>\\n    <clipPath id={props.clipId}>{props.children}</clipPath>\\n  </defs>\\n);\\n```\\n\\n### Line\\n\\nUsed by `Axis`, `Candle`, and `ErrorBar`\\n\\n```jsx\\nconst Line = props => <line vectorEffect=\\\"non-scaling-stroke\\\" {...props} />;\\n```\\n\\n### Path\\n\\nUsed by `Arc`, `Area`, `Bar`, `Curve`, `Flyout`, `Point`, `Slice`, and `Voronoi`\\n\\n```jsx\\nconst Path = props => <path {...props} />;\\n```\\n\\n### Rect\\n\\nUsed by `VictoryClipPath`, `Background`, `Border`, and `Candle`\\n\\n```jsx\\nconst Rect = props => <rect vectorEffect=\\\"non-scaling-stroke\\\" {...props} />;\\n```\\n\\n### Text\\n\\nUsed by `VictoryLabel`\\n\\n```jsx\\nconst Text = props => {\\n  const { children, title, desc, ...rest } = props;\\n  return (\\n    <text {...rest}>\\n      {title && <title>{title}</title>}\\n      {desc && <desc>{desc}</desc>}\\n      {children}\\n    </text>\\n  );\\n};\\n```\\n\\n### TSpan\\n\\nUsed by `VictoryLabel`\\n\\n```jsx\\nconst TSpan = props => <tspan {...props} />;\\n```\\n\\n## Simple Components\\n\\n### Arc\\n\\n[VictoryPolarAxis][] uses the `Arc` primitive to draw circular axes and grid lines. `Arc` renders a `<Path>` element. [View the source][arc]\\n\\n**Props**\\n\\n-   `active` _boolean_ a flag signifying whether the component is active\\n-   `className` _string_ the class name that will be applied to the rendered path\\n-   `closedPath` _boolean_ a flag signifying whether this arc is should render a closed path\\n-   `cx` _number_ the x coordinate of the center of the arc path\\n-   `cy` _number_ the y coordinate of the center of the arc path\\n-   `datum` _any_ the data point or tick corresponding to this arc\\n-   `endAngle` _number_ the end angle of the arc given in degrees\\n-   `events` _object_ events to attach to the rendered element\\n-   `groupComponent` _element_ the element used to group rendered elements _default_ `<g/>`\\n-   `id` _string or number_ an id to apply to the rendered component\\n-   `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n-   `r` _number_ the radius of the arc\\n-   `role` _string_ the aria role to assign to the element\\n-   `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n-   `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n-   `startAngle` _number_ the start angle of the arc given in degrees\\n-   `style` _object_ the styles to apply to the rendered element\\n-   `transform` _string_ a transform that will be supplied to elements this component renders\\n\\n### Area\\n\\n[VictoryArea][] uses `Area` to represent an entire dataset. `Area` renders a `<Path/>` element, or a group of paths if the stroke of the area should be rendered in a different style from the filled section of the area. [View the source][area]\\n\\n**Props**\\n\\n-   `active` _boolean_ a flag signifying whether the component is active\\n-   `className` _string_ the class name that will be applied to the rendered path\\n-   `data` _array_ the entire dataset used to define the area\\n-   `events` _object_ events to attach to the rendered element\\n-   `groupComponent` _element_ the element used to group rendered elements _default_ `<g/>`\\n-   `id` _string or number_ an id to apply to the rendered component\\n-   `interpolation` _string or function_ the interpolation to use when calculating a path\\n-   `origin` _object_ the svg coordinates of the center point of a polar chart\\n-   `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n-   `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n-   `role` _string_ the aria role to assign to the element\\n-   `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n-   `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n-   `style` _object_ the styles to apply to the rendered element\\n-   `transform` _string_ a transform that will be supplied to elements this component renders\\n\\n### LineSegment\\n\\nThe `LineSegment` component renders straight lines. This component is used to render grids, ticks, and axis lines in [VictoryAxis][]. [View the source][axis]\\n\\n**Props**\\n\\n-   `active` _boolean_ a flag signifying whether the component is active\\n-   `className` _string_ the class name that will be applied to the rendered element\\n-   `data` _array_ the entire dataset\\n-   `datum` _object_ the data point corresponding to this line\\n-   `events` _object_ events to attach to the rendered element\\n-   `id` _string or number_ an id to apply to the rendered component\\n-   `index` _number_ the index of this line within the dataset\\n-   `lineComponent` _element_ the rendered line element _default_ `<Line/>`\\n-   `role` _string_ the aria role to assign to the element\\n-   `shapeRendering` _string_ the shape rendering attribute to apply to the rendered elements\\n-   `style` _object_ the styles to apply to the rendered element\\n-   `transform` _string_ a transform that will be supplied to elements this component renders\\n-   `x1` _number_ the x coordinate of the beginning of the line\\n-   `x2` _number_ the x coordinate of the end of the line\\n-   `y1` _number_ the y coordinate of the beginning of the line\\n-   `y2` _number_ the y coordinate of the end of the line\\n\\n### Background\\n\\nThe `Background` component is used to render an SVG background on VictoryChart. `Background` will render a `<Circle>` for charts with `polar={true}` and a `<Rect>` element for all other charts. [View the source][background]\\n\\n**Props**\\n\\n-   `className` _string_ the class name that will be applied to the rendered path\\n-   `circleComponent` _element_ the rendered circle element _default_ `<Circle/>`\\n-   `events` _object_ events to attach to the rendered element\\n-   `height` _number_ the height of the `<rect/>` element\\n-   `id` _string or number_ an id to apply to the rendered component\\n-   `origin` _object_ the svg coordinates of the center point of a polar chart\\n-   `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n-   `rectComponent` _element_ the rendered rect element _default_ `<Rect/>`\\n-   `role` _string_ the aria role to assign to the element\\n-   `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n-   `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n-   `style` _object_ the styles to apply to the rendered element\\n-   `width` _number_ the width of the `<rect/>` element\\n-   `x` _number_ the x coordinate of the upper-left corner of the background for non-polar charts and center of the background for polar charts\\n-   `y` _number_ the y coordinate of the top of the background\\n\\n### Bar\\n\\n[VictoryBar][] uses `Bar` to represent a single data point as a bar extending horizontally or vertically from the independent axis. `Bar` renders a `<Path>` element. It is also used by [VictoryHistogram][] to represent \\\"bins\\\" of data. [View the source][bar]\\n\\n**Props**\\n\\n-   `active` _boolean_ a flag signifying whether the component is active\\n-   `alignment` \\\\*\\\"start\\\", \\\"middle\\\", or \\\"end\\\" specifies how a bar path should be aligned in relation to its data point\\n-   `barRatio` _number_ a number between zero and one that will be used to calculate bar width when an explicit width is not given\\n-   `barWidth` _number or function_ A prop defining the width of the bar. When this prop is given as a function, it will be called with the rest of the props supplied to `Bar`.\\n-   `className` _string_ the class name that will be applied to the rendered path\\n-   `cornerRadius` _number, function or object_ the number of pixels of corner radius to apply when calculating a bar path. When this prop is given as a function, it will be called with the rest of the props supplied to `Bar`. When given as an object, this prop may include values for top, bottom, topLeft, topRight, bottomLeft and bottomRight, with more specific values overriding less specific values\\n-   `data` _array_ the entire dataset\\n-   `datum` _object_ the data point corresponding to this bar\\n-   `events` _object_ events to attach to the rendered element\\n-   `id` _string or number_ an id to apply to the rendered component\\n-   `index` _number_ the index of this bar within the dataset\\n-   `origin` _object_ the svg coordinates of the center point of a polar chart\\n-   `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n-   `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n-   `role` _string_ the aria role to assign to the element\\n-   `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n-   `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n-   `style` _object_ the styles to apply to the rendered element\\n-   `transform` _string_ a transform that will be supplied to elements this component renders\\n-   `width` _number_ the width of parent chart (used to calculate default bar width `style.width` is not supplied)\\n-   `x` _number_ the x coordinate of the top of the bar\\n-   `y0` _number_ the y coordinate of the baseline of the bar\\n-   `y` _number_ the y coordinate of the top of the bar\\n\\n### Box\\n\\n[VictoryLegend][] uses the `Box` component to draw a border around a legend area. `Box` renders a `<Rect/>` element. [View the source][border]\\n**Note** `Box` also exported as `Border`\\n\\n**Props**\\n\\n-   `active` _boolean_ a flag signifying whether the component is active\\n-   `className` _string_ the class name that will be applied to the rendered element\\n-   `events` _object_ events to attach to the rendered element\\n-   `height` _number_ the height of the `<rect/>` element\\n-   `id` _string or number_ an id to apply to the rendered component\\n-   `rectComponent` _element_ the rendered path element _default_ `<Rect/>`\\n-   `role` _string_ the aria role to assign to the element\\n-   `shapeRendering` _string_ the shape rendering attribute to apply to the rendered element\\n-   `style` _object_ the styles to apply to the rendered element\\n-   `transform` _string_ a transform that will be supplied to elements this component renders\\n-   `width` _number_ the width of the `<rect/>` element\\n-   `x` _number_ the x coordinate of the upper-left corner of the `<rect/>` element\\n-   `y` _number_ the y coordinate of the upper-left corner of the `<rect/>` element\\n\\n### Candle\\n\\n[VictoryCandlestick][] uses `Candle` to represent a single data point as a candle. `Candle` renders a group with `<Rect>` and `<Line>` elements. [View the source][candle]\\n\\n**Props**\\n\\n-   `active` _boolean_ a flag signifying whether the component is active\\n-   `candleRatio` _number_ a number between zero and one that will be used to calculate candle width when an explicit width is not given\\n-   `candleWidth` _number or function_ A prop defining the width of the candle. When this prop is given as a function, it will be called with the rest of the props supplied to `Candle`.\\n-   `className` _string_ the class name that will be applied to the rendered element\\n-   `close` _number_ the y coordinate of the closing value\\n-   `data` _array_ the entire dataset\\n-   `datum` _object_ the data point corresponding to this candle\\n-   `events` _object_ events to attach to the rendered element\\n-   `groupComponent` _element_ the element used to group rendered elements _default_ `<g/>`\\n-   `high` _number_ the y coordinate of the high value\\n-   `id` _string or number_ an id to apply to the rendered component\\n-   `index` _number_ the index of this candle within the dataset\\n-   `lineComponent` _element_ the rendered line element _default_ `<Line/>`\\n-   `low` _number_ the y coordinate of the low value\\n-   `open` _number_ the y coordinate of the opening value\\n-   `rectComponent` _element_ the rendered path element _default_ `<Rect/>`\\n-   `role` _string_ the aria role to assign to the element\\n-   `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n-   `shapeRendering` _string_ the shape rendering attribute to apply to the rendered elements\\n-   `style` _object_ the styles to apply to the rendered element\\n-   `transform` _string_ a transform that will be supplied to elements this component renders\\n-   `width` _number_ the width of parent chart (used to calculate default candle width `style.width` is not supplied)\\n-   `widthStrokeWidth` _number_ the stroke width of the candle wick. (style.strokeWidth will be used when this value is not given)\\n-   `x` _number_ the x coordinate of the candle\\n\\n### Curve\\n\\n[VictoryLine][] uses `Curve` to represent an entire dataset as a line or curve. `Curve` renders a `<Path>` element. [View the source][curve]\\n\\n**Props**\\n\\n-   `active` _boolean_ a flag signifying whether the component is active\\n-   `className` _string_ the class name that will be applied to the rendered element\\n-   `data` _array_ the entire dataset used to define the curve\\n-   `events` _object_ events to attach to the rendered element\\n-   `groupComponent` _element_ the element used to group rendered elements _default_ `<g/>`\\n-   `id` _string or number_ an id to apply to the rendered component\\n-   `interpolation` _string or function_ the interpolation to use when calculating a path\\n-   `origin` _object_ the svg coordinates of the center point of a polar chart\\n-   `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n-   `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n-   `role` _string_ the aria role to assign to the element\\n-   `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n-   `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n-   `style` _object_ the styles to apply to the rendered element\\n-   `transform` _string_ a transform that will be supplied to elements this component renders\\n\\n### ErrorBar\\n\\n[VictoryErrorBar][] uses `ErrorBar` to render x and y error bars. `ErrorBar` renders a group of `<Line>` elements. [View the source][errorbar]\\n\\n**Props**\\n\\n-   `active` _boolean_ a flag signifying whether the component is active\\n-   `borderWidth` _number_ the width of the cross-hairs on the end of each error bar _default: 10_\\n-   `className` _string_ the class name that will be applied to the rendered element\\n-   `data` _array_ the entire dataset\\n-   `datum` _object_ the data point corresponding to this error bar\\n-   `errorX` _number, array, or boolean_ errors in the x dimension.\\n-   `errorY` _number, array, or boolean_ errors in the y dimension.\\n-   `events` _object_ events to attach to the rendered element\\n-   `groupComponent` _element_ the element used to group rendered elements _default_ `<g/>`\\n-   `id` _string or number_ an id to apply to the rendered component\\n-   `index` _number_ the index of this error bar within the dataset\\n-   `lineComponent` _element_ the rendered line element _default_ `<Line/>`\\n-   `origin` _object_ the svg coordinates of the center point of a polar chart\\n-   `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n-   `role` _string_ the aria role to assign to the element\\n-   `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n-   `shapeRendering` _string_ the shape rendering attribute to apply to the rendered elements\\n-   `style` _object_ the styles to apply to the rendered element\\n-   `transform` _string_ a transform that will be supplied to elements this component renders\\n-   `x` _number_ the x coordinate of the center of the error bar\\n-   `y` _number_ the y coordinate of the center of the error bar\\n\\n### Flyout\\n\\n[VictoryTooltip][] uses `Flyout` to render a flyout style path around text. `Flyout` renders `<Path>` element. [View the source][flyout]\\n\\n**Props**\\n\\n-   `active` _boolean_ a flag signifying whether the component is active\\n-   `center` _object_ the center coordinates of the flyout\\n-   `className` _string_ the class name that will be applied to the rendered element\\n-   `cornerRadius` _number_ the corner radius of the flyout\\n-   `data` _array_ the entire dataset if applicable\\n-   `datum` _object_ the data point corresponding to this flyout if applicable\\n-   `dx` _number_ offset in the x dimension.\\n-   `dy` _number_ offset in the y dimension.\\n-   `events` _object_ events to attach to the rendered element\\n-   `height` _number_ the height of the flyout\\n-   `id` _string or number_ an id to apply to the rendered component\\n-   `index` _number_ the index of this flyout within the dataset\\n-   `orientation` _\\\"top\\\", \\\"bottom\\\", \\\"left\\\", \\\"right\\\"_\\n-   `origin` _object_ the svg coordinates of the center point of a polar chart\\n-   `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n-   `pointerLength` _number_ the length of the triangular pointer\\n-   `pointerWidth` _number_ the width of the base of the triangular pointer\\n-   `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n-   `role` _string_ the aria role to assign to the element\\n-   `shapeRendering` _string_ the shape rendering attribute to apply to the rendered elements\\n-   `style` _object_ the styles to apply to the rendered element\\n-   `transform` _string_ a transform that will be supplied to elements this component renders\\n-   `width` _number_ the width of the flyout\\n-   `x` _number_ the x coordinate of data point associated with this flyout\\n-   `y` _number_ the y coordinate of data point associated with this flyout\\n\\n### Point\\n\\n[VictoryScatter][] uses `Point` to render each point in a scatter plot. `Point` renders a `<Path>` element. [View the source][point]\\n\\n**Props**\\n\\n-   `active` _boolean_ a flag signifying whether the component is active\\n-   `className` _string_ the class name that will be applied to the rendered element\\n-   `data` _array_ the entire dataset\\n-   `datum` _object_ the data point corresponding to this point\\n-   `events` _object_ events to attach to the rendered element\\n-   `getPath` _function_ a function of `x`, `y`, and `size` that returns a path string. When this optional function is provided, it will be used to calculate a path, rather than one of the path functions corresponding to the `symbol`s supported by `Point`.\\n-   `id` _string or number_ an id to apply to the rendered component\\n-   `index` _number_ the index of this point within the dataset\\n-   `origin` _object_ the svg coordinates of the center point of a polar chart\\n-   `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n-   `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n-   `role` _string_ the aria role to assign to the element\\n-   `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n-   `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n-   `size` _number or function_ the size of the point. When this prop is given as a function, it will be called with the rest of the props supplied to `Point`.\\n-   `style` _object_ the styles to apply to the rendered element\\n-   `symbol` _\\\"circle\\\", \\\"diamond\\\", \\\"plus\\\", \\\"minus\\\", \\\"square\\\", \\\"star\\\", \\\"triangleDown\\\", \\\"triangleUp\\\"_ which symbol the point should render. This prop may also be given as a function that returns one of the above options. When this prop is given as a function, it will be called with the rest of the props supplied to `Point`.\\n-   `transform` _string_ a transform that will be supplied to elements this component renders\\n-   `x` _number_ the x coordinate of the center of the point\\n-   `y` _number_ the y coordinate of the center of the point\\n\\n### Slice\\n\\n[VictoryPie][] uses `Slice` to render each slice in a pie chart. `Slice` renders a `<Path>` element. [View the source][slice]\\n\\n**Props**\\n\\n-   `active` _boolean_ a flag signifying whether the component is active\\n-   `className` _string_ the class name that will be applied to the rendered element\\n-   `cornerRadius` _number or function_ the corner radius to apply to this slice. When this prop is given as a function it will be called with the rest of the props supplied to `Slice`.\\n-   `data` _array_ the entire dataset\\n-   `datum` _object_ the data point corresponding to this slice\\n-   `events` _object_ events to attach to the rendered element\\n-   `id` _string or number_ an id to apply to the rendered component\\n-   `index` _number_ the index of this slice within the dataset\\n-   `innerRadius` _number or function_ the inner radius of the slice. When this prop is given as a function it will be called with `datum` and `active`.\\n-   `padAngle` _number or function_ the angular padding to add to the slice. When this prop is given as a function it will be called with the rest of the props supplied to `Slice`.\\n-   `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n-   `pathFunction` _function_ a function that calculates the path of a given slice. When given, this prop will be called with the `slice` object\\n-   `radius` _number or function_ the outer radius of the slice. When this prop is given as a function it will be called with the rest of the props supplied to `Slice`.\\n-   `role` _string_ the aria role to assign to the element\\n-   `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n-   `slice` _object_ an object specifying the startAngle, endAngle, padAngle, and data of the slice\\n-   `sliceEndAngle` _number or function_ the end angle the slice. When this prop is given as a function it will be called with the rest of the props supplied to `Slice`.\\n-   `sliceStartAngle` _number or function_ the start angle the slice. When this prop is given as a function it will be called with the rest of the props supplied to `Slice`.\\n-   `style` _object_ the styles to apply to the rendered element\\n-   `transform` _string_ a transform that will be supplied to elements this component renders\\n\\n### Voronoi\\n\\n[VictoryVoronoi][] uses `Voronoi` to render voronoi polygons. `Voronoi` renders either a `<Path>` element corresponding to a voronoi polygon, or a `<Circle/>` clipped with a `<ClipPath>` defined by the path of the polygon. [View the source][voronoi]\\n\\n**Props**\\n\\n-   `active` _boolean_ a flag signifying whether the component is active\\n-   `circleComponent` _element_ the rendered circle element _default_ `<Circle/>`\\n-   `className` _string_ the class name that will be applied to the rendered element\\n-   `clipPathComponent` _element_ the rendered clipPath element _default_ `<ClipPath/>`\\n-   `data` _array_ the entire dataset\\n-   `datum` _object_ the data point corresponding to this voronoi polygon\\n-   `events` _object_ events to attach to the rendered element\\n-   `groupComponent` _element_ the rendered group element _default_ `<g/>`\\n-   `id` _string or number_ an id to apply to the rendered component\\n-   `index` _number_ the index of this voronoi polygon within the dataset\\n-   `origin` _object_ the svg coordinates of the center point of a polar chart\\n-   `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n-   `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n-   `polygon` _array_ an array of points defining the polygon\\n-   `role` _string_ the aria role to assign to the element\\n-   `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n-   `size` _number_ the maximum size of the voronoi polygon\\n-   `style` _object_ the styles to apply to the rendered element\\n-   `transform` _string_ a transform that will be supplied to elements this component renders.\\n-   `x` _number_ the x coordinate of the data point\\n-   `y` _number_ the y coordinate of the data point\\n\\n### Whisker\\n\\n[VictoryBoxPlot][] uses the `Whisker` component to draw whiskers for the minimum and maximum values in a box plot. `Whisker` renders a group of `<Line/>` elements. [View the source][whisker]\\n\\n**Props**\\n\\n-   `active` _boolean_ a flag signifying whether the component is active\\n-   `className` _string_ the class name that will be applied to the rendered element\\n-   `events` _object_ events to attach to the rendered element\\n-   `groupComponent` _element_ the rendered group element _default_ `<g/>`\\n-   `id` _string or number_ an id to apply to the rendered component\\n-   `lineComponent` _element_ the rendered line element _default_ `<Line/>`\\n-   `majorWhisker` _object_ an object with values `x1`, `x2`, `y1`, `y2` describing the major whisker line\\n-   `minorWhisker` _object_ an object with values `x1`, `x2`, `y1`, `y2` describing the minor whisker line\\n-   `role` _string_ the aria role to assign to the element\\n-   `shapeRendering` _string_ the shape rendering attribute to apply to the rendered element\\n-   `style` _object_ the styles to apply to the rendered element\\n-   `transform` _string_ a transform that will be supplied to elements this component renders.\\n\\n[victorycontainer]: /docs/victory-container\\n\\n[victoryclipcontainer]: /docs/victory-clip-container\\n\\n[victorylabel]: /docs/victory-label\\n\\n[react-native-svg]: https://github.com/react-native-community/react-native-svg\\n\\n[arc]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/arc.js\\n\\n[victorypolaraxis]: /docs/victory-polar-axis\\n\\n[area]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/area.js\\n\\n[victoryarea]: /docs/victory-area\\n\\n[background]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/background.js\\n\\n[bar]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/bar.js\\n\\n[border]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/border.js\\n\\n[victorybar]: /docs/victory-bar\\n\\n[candle]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/candle.js\\n\\n[victorycandlestick]: /docs/victory-candlestick\\n\\n[curve]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/curve.js\\n\\n[victoryline]: /docs/victory-line\\n\\n[errorbar]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/error-bar.js\\n\\n[victoryerrorbar]: /docs/victory-errorbar\\n\\n[flyout]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-tooltip/src/flyout.js\\n\\n[victorytooltip]: /docs/victory-tooltip\\n\\n[victoryaxis]: /docs/victory-axis\\n\\n[axis]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/axis.js\\n\\n[point]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/point.js\\n\\n[slice]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/slice.js\\n\\n[whisker]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/whisker.js\\n\\n[victorypie]: /docs/victory-pie\\n\\n[voronoi]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/voronoi.js\\n\\n[victoryvoronoi]: /docs/victory-voronoi\\n\\n[victoryscatter]: /docs/victory-scatter\\n\\n[victorylegend]: /docs/victory-legend\\n\\n[victoryboxplot]: /docs/victory-boxplot\\n\\n[victoryhistogram]: /docs/victory-histogram\\n\",\"content\":\"\\n# Victory Primitives\\n\\nVictory is built around a set of simple, stateless components. Along with [VictoryContainer][], [VictoryClipContainer][], and [VictoryLabel][], the following list represents every simple element a Victory component might render. These simple components are responsible for supplying props to primitive components. Victory maintains a small subset of primitive components with additional logic in place to prevent unnecessary rendering. Extracting every rendered element into its own component allows Victory to support both web and React Native applications with very little additional code, as only a few components need to be modified to render [react-native-svg][] elements rather than SVG elements. These primitives are also exposed for users to wrap, extend or reference when creating their own custom rendered components.\\n\\n## Primitive Components\\n\\nEach of these primitive components renders SVG elements. The following components are the only Victory components that render SVG elements with the exception of `VictoryContainer` and `VictoryPortal`. These elements are used by other simple components such as `Bar` and `Area`.\\n\\n### Circle\\n\\nUsed by `Background`, `VictoryClipContainer`, and `Voronoi`\\n\\n```jsx\\nconst Circle = props => <circle vectorEffect=\\\"non-scaling-stroke\\\" {...props} />;\\n```\\n\\n### ClipPath\\n\\nUsed by `VictoryClipContainer` and `Voronoi`\\n\\n```jsx\\nconst ClipPath = props => (\\n  <defs>\\n    <clipPath id={props.clipId}>{props.children}</clipPath>\\n  </defs>\\n);\\n```\\n\\n### Line\\n\\nUsed by `Axis`, `Candle`, and `ErrorBar`\\n\\n```jsx\\nconst Line = props => <line vectorEffect=\\\"non-scaling-stroke\\\" {...props} />;\\n```\\n\\n### Path\\n\\nUsed by `Arc`, `Area`, `Bar`, `Curve`, `Flyout`, `Point`, `Slice`, and `Voronoi`\\n\\n```jsx\\nconst Path = props => <path {...props} />;\\n```\\n\\n### Rect\\n\\nUsed by `VictoryClipPath`, `Background`, `Border`, and `Candle`\\n\\n```jsx\\nconst Rect = props => <rect vectorEffect=\\\"non-scaling-stroke\\\" {...props} />;\\n```\\n\\n### Text\\n\\nUsed by `VictoryLabel`\\n\\n```jsx\\nconst Text = props => {\\n  const { children, title, desc, ...rest } = props;\\n  return (\\n    <text {...rest}>\\n      {title && <title>{title}</title>}\\n      {desc && <desc>{desc}</desc>}\\n      {children}\\n    </text>\\n  );\\n};\\n```\\n\\n### TSpan\\n\\nUsed by `VictoryLabel`\\n\\n```jsx\\nconst TSpan = props => <tspan {...props} />;\\n```\\n\\n## Simple Components\\n\\n### Arc\\n\\n[VictoryPolarAxis][] uses the `Arc` primitive to draw circular axes and grid lines. `Arc` renders a `<Path>` element. [View the source][arc]\\n\\n**Props**\\n\\n- `active` _boolean_ a flag signifying whether the component is active\\n- `className` _string_ the class name that will be applied to the rendered path\\n- `closedPath` _boolean_ a flag signifying whether this arc is should render a closed path\\n- `cx` _number_ the x coordinate of the center of the arc path\\n- `cy` _number_ the y coordinate of the center of the arc path\\n- `datum` _any_ the data point or tick corresponding to this arc\\n- `endAngle` _number_ the end angle of the arc given in degrees\\n- `events` _object_ events to attach to the rendered element\\n- `groupComponent` _element_ the element used to group rendered elements _default_ `<g/>`\\n- `id` _string or number_ an id to apply to the rendered component\\n- `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n- `r` _number_ the radius of the arc\\n- `role` _string_ the aria role to assign to the element\\n- `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n- `startAngle` _number_ the start angle of the arc given in degrees\\n- `style` _object_ the styles to apply to the rendered element\\n- `transform` _string_ a transform that will be supplied to elements this component renders\\n\\n### Area\\n\\n[VictoryArea][] uses `Area` to represent an entire dataset. `Area` renders a `<Path/>` element, or a group of paths if the stroke of the area should be rendered in a different style from the filled section of the area. [View the source][area]\\n\\n**Props**\\n\\n- `active` _boolean_ a flag signifying whether the component is active\\n- `className` _string_ the class name that will be applied to the rendered path\\n- `data` _array_ the entire dataset used to define the area\\n- `events` _object_ events to attach to the rendered element\\n- `groupComponent` _element_ the element used to group rendered elements _default_ `<g/>`\\n- `id` _string or number_ an id to apply to the rendered component\\n- `interpolation` _string or function_ the interpolation to use when calculating a path\\n- `origin` _object_ the svg coordinates of the center point of a polar chart\\n- `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n- `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n- `role` _string_ the aria role to assign to the element\\n- `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n- `style` _object_ the styles to apply to the rendered element\\n- `transform` _string_ a transform that will be supplied to elements this component renders\\n\\n### LineSegment\\n\\nThe `LineSegment` component renders straight lines. This component is used to render grids, ticks, and axis lines in [VictoryAxis][]. [View the source][axis]\\n\\n**Props**\\n\\n- `active` _boolean_ a flag signifying whether the component is active\\n- `className` _string_ the class name that will be applied to the rendered element\\n- `data` _array_ the entire dataset\\n- `datum` _object_ the data point corresponding to this line\\n- `events` _object_ events to attach to the rendered element\\n- `id` _string or number_ an id to apply to the rendered component\\n- `index` _number_ the index of this line within the dataset\\n- `lineComponent` _element_ the rendered line element _default_ `<Line/>`\\n- `role` _string_ the aria role to assign to the element\\n- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered elements\\n- `style` _object_ the styles to apply to the rendered element\\n- `transform` _string_ a transform that will be supplied to elements this component renders\\n- `x1` _number_ the x coordinate of the beginning of the line\\n- `x2` _number_ the x coordinate of the end of the line\\n- `y1` _number_ the y coordinate of the beginning of the line\\n- `y2` _number_ the y coordinate of the end of the line\\n\\n### Background\\n\\nThe `Background` component is used to render an SVG background on VictoryChart. `Background` will render a `<Circle>` for charts with `polar={true}` and a `<Rect>` element for all other charts. [View the source][background]\\n\\n**Props**\\n\\n- `className` _string_ the class name that will be applied to the rendered path\\n- `circleComponent` _element_ the rendered circle element _default_ `<Circle/>`\\n- `events` _object_ events to attach to the rendered element\\n- `height` _number_ the height of the `<rect/>` element\\n- `id` _string or number_ an id to apply to the rendered component\\n- `origin` _object_ the svg coordinates of the center point of a polar chart\\n- `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n- `rectComponent` _element_ the rendered rect element _default_ `<Rect/>`\\n- `role` _string_ the aria role to assign to the element\\n- `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n- `style` _object_ the styles to apply to the rendered element\\n- `width` _number_ the width of the `<rect/>` element\\n- `x` _number_ the x coordinate of the upper-left corner of the background for non-polar charts and center of the background for polar charts\\n- `y` _number_ the y coordinate of the top of the background\\n\\n### Bar\\n\\n[VictoryBar][] uses `Bar` to represent a single data point as a bar extending horizontally or vertically from the independent axis. `Bar` renders a `<Path>` element. It is also used by [VictoryHistogram][] to represent \\\"bins\\\" of data. [View the source][bar]\\n\\n**Props**\\n\\n- `active` _boolean_ a flag signifying whether the component is active\\n- `alignment` \\\\*\\\"start\\\", \\\"middle\\\", or \\\"end\\\" specifies how a bar path should be aligned in relation to its data point\\n- `barRatio` _number_ a number between zero and one that will be used to calculate bar width when an explicit width is not given\\n- `barWidth` _number or function_ A prop defining the width of the bar. When this prop is given as a function, it will be called with the rest of the props supplied to `Bar`.\\n- `className` _string_ the class name that will be applied to the rendered path\\n- `cornerRadius` _number, function or object_ the number of pixels of corner radius to apply when calculating a bar path. When this prop is given as a function, it will be called with the rest of the props supplied to `Bar`. When given as an object, this prop may include values for top, bottom, topLeft, topRight, bottomLeft and bottomRight, with more specific values overriding less specific values\\n- `data` _array_ the entire dataset\\n- `datum` _object_ the data point corresponding to this bar\\n- `events` _object_ events to attach to the rendered element\\n- `id` _string or number_ an id to apply to the rendered component\\n- `index` _number_ the index of this bar within the dataset\\n- `origin` _object_ the svg coordinates of the center point of a polar chart\\n- `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n- `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n- `role` _string_ the aria role to assign to the element\\n- `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n- `style` _object_ the styles to apply to the rendered element\\n- `transform` _string_ a transform that will be supplied to elements this component renders\\n- `width` _number_ the width of parent chart (used to calculate default bar width `style.width` is not supplied)\\n- `x` _number_ the x coordinate of the top of the bar\\n- `y0` _number_ the y coordinate of the baseline of the bar\\n- `y` _number_ the y coordinate of the top of the bar\\n\\n### Box\\n\\n[VictoryLegend][] uses the `Box` component to draw a border around a legend area. `Box` renders a `<Rect/>` element. [View the source][border]\\n**Note** `Box` also exported as `Border`\\n\\n**Props**\\n\\n- `active` _boolean_ a flag signifying whether the component is active\\n- `className` _string_ the class name that will be applied to the rendered element\\n- `events` _object_ events to attach to the rendered element\\n- `height` _number_ the height of the `<rect/>` element\\n- `id` _string or number_ an id to apply to the rendered component\\n- `rectComponent` _element_ the rendered path element _default_ `<Rect/>`\\n- `role` _string_ the aria role to assign to the element\\n- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered element\\n- `style` _object_ the styles to apply to the rendered element\\n- `transform` _string_ a transform that will be supplied to elements this component renders\\n- `width` _number_ the width of the `<rect/>` element\\n- `x` _number_ the x coordinate of the upper-left corner of the `<rect/>` element\\n- `y` _number_ the y coordinate of the upper-left corner of the `<rect/>` element\\n\\n### Candle\\n\\n[VictoryCandlestick][] uses `Candle` to represent a single data point as a candle. `Candle` renders a group with `<Rect>` and `<Line>` elements. [View the source][candle]\\n\\n**Props**\\n\\n- `active` _boolean_ a flag signifying whether the component is active\\n- `candleRatio` _number_ a number between zero and one that will be used to calculate candle width when an explicit width is not given\\n- `candleWidth` _number or function_ A prop defining the width of the candle. When this prop is given as a function, it will be called with the rest of the props supplied to `Candle`.\\n- `className` _string_ the class name that will be applied to the rendered element\\n- `close` _number_ the y coordinate of the closing value\\n- `data` _array_ the entire dataset\\n- `datum` _object_ the data point corresponding to this candle\\n- `events` _object_ events to attach to the rendered element\\n- `groupComponent` _element_ the element used to group rendered elements _default_ `<g/>`\\n- `high` _number_ the y coordinate of the high value\\n- `id` _string or number_ an id to apply to the rendered component\\n- `index` _number_ the index of this candle within the dataset\\n- `lineComponent` _element_ the rendered line element _default_ `<Line/>`\\n- `low` _number_ the y coordinate of the low value\\n- `open` _number_ the y coordinate of the opening value\\n- `rectComponent` _element_ the rendered path element _default_ `<Rect/>`\\n- `role` _string_ the aria role to assign to the element\\n- `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered elements\\n- `style` _object_ the styles to apply to the rendered element\\n- `transform` _string_ a transform that will be supplied to elements this component renders\\n- `width` _number_ the width of parent chart (used to calculate default candle width `style.width` is not supplied)\\n- `widthStrokeWidth` _number_ the stroke width of the candle wick. (style.strokeWidth will be used when this value is not given)\\n- `x` _number_ the x coordinate of the candle\\n\\n### Curve\\n\\n[VictoryLine][] uses `Curve` to represent an entire dataset as a line or curve. `Curve` renders a `<Path>` element. [View the source][curve]\\n\\n**Props**\\n\\n- `active` _boolean_ a flag signifying whether the component is active\\n- `className` _string_ the class name that will be applied to the rendered element\\n- `data` _array_ the entire dataset used to define the curve\\n- `events` _object_ events to attach to the rendered element\\n- `groupComponent` _element_ the element used to group rendered elements _default_ `<g/>`\\n- `id` _string or number_ an id to apply to the rendered component\\n- `interpolation` _string or function_ the interpolation to use when calculating a path\\n- `origin` _object_ the svg coordinates of the center point of a polar chart\\n- `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n- `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n- `role` _string_ the aria role to assign to the element\\n- `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n- `style` _object_ the styles to apply to the rendered element\\n- `transform` _string_ a transform that will be supplied to elements this component renders\\n\\n### ErrorBar\\n\\n[VictoryErrorBar][] uses `ErrorBar` to render x and y error bars. `ErrorBar` renders a group of `<Line>` elements. [View the source][errorbar]\\n\\n**Props**\\n\\n- `active` _boolean_ a flag signifying whether the component is active\\n- `borderWidth` _number_ the width of the cross-hairs on the end of each error bar _default: 10_\\n- `className` _string_ the class name that will be applied to the rendered element\\n- `data` _array_ the entire dataset\\n- `datum` _object_ the data point corresponding to this error bar\\n- `errorX` _number, array, or boolean_ errors in the x dimension.\\n- `errorY` _number, array, or boolean_ errors in the y dimension.\\n- `events` _object_ events to attach to the rendered element\\n- `groupComponent` _element_ the element used to group rendered elements _default_ `<g/>`\\n- `id` _string or number_ an id to apply to the rendered component\\n- `index` _number_ the index of this error bar within the dataset\\n- `lineComponent` _element_ the rendered line element _default_ `<Line/>`\\n- `origin` _object_ the svg coordinates of the center point of a polar chart\\n- `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n- `role` _string_ the aria role to assign to the element\\n- `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered elements\\n- `style` _object_ the styles to apply to the rendered element\\n- `transform` _string_ a transform that will be supplied to elements this component renders\\n- `x` _number_ the x coordinate of the center of the error bar\\n- `y` _number_ the y coordinate of the center of the error bar\\n\\n### Flyout\\n\\n[VictoryTooltip][] uses `Flyout` to render a flyout style path around text. `Flyout` renders `<Path>` element. [View the source][flyout]\\n\\n**Props**\\n\\n- `active` _boolean_ a flag signifying whether the component is active\\n- `center` _object_ the center coordinates of the flyout\\n- `className` _string_ the class name that will be applied to the rendered element\\n- `cornerRadius` _number_ the corner radius of the flyout\\n- `data` _array_ the entire dataset if applicable\\n- `datum` _object_ the data point corresponding to this flyout if applicable\\n- `dx` _number_ offset in the x dimension.\\n- `dy` _number_ offset in the y dimension.\\n- `events` _object_ events to attach to the rendered element\\n- `height` _number_ the height of the flyout\\n- `id` _string or number_ an id to apply to the rendered component\\n- `index` _number_ the index of this flyout within the dataset\\n- `orientation` _\\\"top\\\", \\\"bottom\\\", \\\"left\\\", \\\"right\\\"_\\n- `origin` _object_ the svg coordinates of the center point of a polar chart\\n- `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n- `pointerLength` _number_ the length of the triangular pointer\\n- `pointerWidth` _number_ the width of the base of the triangular pointer\\n- `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n- `role` _string_ the aria role to assign to the element\\n- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered elements\\n- `style` _object_ the styles to apply to the rendered element\\n- `transform` _string_ a transform that will be supplied to elements this component renders\\n- `width` _number_ the width of the flyout\\n- `x` _number_ the x coordinate of data point associated with this flyout\\n- `y` _number_ the y coordinate of data point associated with this flyout\\n\\n### Point\\n\\n[VictoryScatter][] uses `Point` to render each point in a scatter plot. `Point` renders a `<Path>` element. [View the source][point]\\n\\n**Props**\\n\\n- `active` _boolean_ a flag signifying whether the component is active\\n- `className` _string_ the class name that will be applied to the rendered element\\n- `data` _array_ the entire dataset\\n- `datum` _object_ the data point corresponding to this point\\n- `events` _object_ events to attach to the rendered element\\n- `getPath` _function_ a function of `x`, `y`, and `size` that returns a path string. When this optional function is provided, it will be used to calculate a path, rather than one of the path functions corresponding to the `symbol`s supported by `Point`.\\n- `id` _string or number_ an id to apply to the rendered component\\n- `index` _number_ the index of this point within the dataset\\n- `origin` _object_ the svg coordinates of the center point of a polar chart\\n- `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n- `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n- `role` _string_ the aria role to assign to the element\\n- `scale` _object_ the x and y scale of the parent chart with `domain` and `range` applied\\n- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n- `size` _number or function_ the size of the point. When this prop is given as a function, it will be called with the rest of the props supplied to `Point`.\\n- `style` _object_ the styles to apply to the rendered element\\n- `symbol` _\\\"circle\\\", \\\"diamond\\\", \\\"plus\\\", \\\"minus\\\", \\\"square\\\", \\\"star\\\", \\\"triangleDown\\\", \\\"triangleUp\\\"_ which symbol the point should render. This prop may also be given as a function that returns one of the above options. When this prop is given as a function, it will be called with the rest of the props supplied to `Point`.\\n- `transform` _string_ a transform that will be supplied to elements this component renders\\n- `x` _number_ the x coordinate of the center of the point\\n- `y` _number_ the y coordinate of the center of the point\\n\\n### Slice\\n\\n[VictoryPie][] uses `Slice` to render each slice in a pie chart. `Slice` renders a `<Path>` element. [View the source][slice]\\n\\n**Props**\\n\\n- `active` _boolean_ a flag signifying whether the component is active\\n- `className` _string_ the class name that will be applied to the rendered element\\n- `cornerRadius` _number or function_ the corner radius to apply to this slice. When this prop is given as a function it will be called with the rest of the props supplied to `Slice`.\\n- `data` _array_ the entire dataset\\n- `datum` _object_ the data point corresponding to this slice\\n- `events` _object_ events to attach to the rendered element\\n- `id` _string or number_ an id to apply to the rendered component\\n- `index` _number_ the index of this slice within the dataset\\n- `innerRadius` _number or function_ the inner radius of the slice. When this prop is given as a function it will be called with `datum` and `active`.\\n- `padAngle` _number or function_ the angular padding to add to the slice. When this prop is given as a function it will be called with the rest of the props supplied to `Slice`.\\n- `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n- `pathFunction` _function_ a function that calculates the path of a given slice. When given, this prop will be called with the `slice` object\\n- `radius` _number or function_ the outer radius of the slice. When this prop is given as a function it will be called with the rest of the props supplied to `Slice`.\\n- `role` _string_ the aria role to assign to the element\\n- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n- `slice` _object_ an object specifying the startAngle, endAngle, padAngle, and data of the slice\\n- `sliceEndAngle` _number or function_ the end angle the slice. When this prop is given as a function it will be called with the rest of the props supplied to `Slice`.\\n- `sliceStartAngle` _number or function_ the start angle the slice. When this prop is given as a function it will be called with the rest of the props supplied to `Slice`.\\n- `style` _object_ the styles to apply to the rendered element\\n- `transform` _string_ a transform that will be supplied to elements this component renders\\n\\n### Voronoi\\n\\n[VictoryVoronoi][] uses `Voronoi` to render voronoi polygons. `Voronoi` renders either a `<Path>` element corresponding to a voronoi polygon, or a `<Circle/>` clipped with a `<ClipPath>` defined by the path of the polygon. [View the source][voronoi]\\n\\n**Props**\\n\\n- `active` _boolean_ a flag signifying whether the component is active\\n- `circleComponent` _element_ the rendered circle element _default_ `<Circle/>`\\n- `className` _string_ the class name that will be applied to the rendered element\\n- `clipPathComponent` _element_ the rendered clipPath element _default_ `<ClipPath/>`\\n- `data` _array_ the entire dataset\\n- `datum` _object_ the data point corresponding to this voronoi polygon\\n- `events` _object_ events to attach to the rendered element\\n- `groupComponent` _element_ the rendered group element _default_ `<g/>`\\n- `id` _string or number_ an id to apply to the rendered component\\n- `index` _number_ the index of this voronoi polygon within the dataset\\n- `origin` _object_ the svg coordinates of the center point of a polar chart\\n- `pathComponent` _element_ the rendered path element _default_ `<Path/>`\\n- `polar` _boolean_ a flag specifying whether the component is part of a polar chart\\n- `polygon` _array_ an array of points defining the polygon\\n- `role` _string_ the aria role to assign to the element\\n- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered path\\n- `size` _number_ the maximum size of the voronoi polygon\\n- `style` _object_ the styles to apply to the rendered element\\n- `transform` _string_ a transform that will be supplied to elements this component renders.\\n- `x` _number_ the x coordinate of the data point\\n- `y` _number_ the y coordinate of the data point\\n\\n### Whisker\\n\\n[VictoryBoxPlot][] uses the `Whisker` component to draw whiskers for the minimum and maximum values in a box plot. `Whisker` renders a group of `<Line/>` elements. [View the source][whisker]\\n\\n**Props**\\n\\n- `active` _boolean_ a flag signifying whether the component is active\\n- `className` _string_ the class name that will be applied to the rendered element\\n- `events` _object_ events to attach to the rendered element\\n- `groupComponent` _element_ the rendered group element _default_ `<g/>`\\n- `id` _string or number_ an id to apply to the rendered component\\n- `lineComponent` _element_ the rendered line element _default_ `<Line/>`\\n- `majorWhisker` _object_ an object with values `x1`, `x2`, `y1`, `y2` describing the major whisker line\\n- `minorWhisker` _object_ an object with values `x1`, `x2`, `y1`, `y2` describing the minor whisker line\\n- `role` _string_ the aria role to assign to the element\\n- `shapeRendering` _string_ the shape rendering attribute to apply to the rendered element\\n- `style` _object_ the styles to apply to the rendered element\\n- `transform` _string_ a transform that will be supplied to elements this component renders.\\n\\n[victorycontainer]: /docs/victory-container\\n[victoryclipcontainer]: /docs/victory-clip-container\\n[victorylabel]: /docs/victory-label\\n[react-native-svg]: https://github.com/react-native-community/react-native-svg\\n[arc]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/arc.js\\n[victorypolaraxis]: /docs/victory-polar-axis\\n[area]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/area.js\\n[victoryarea]: /docs/victory-area\\n[background]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/background.js\\n[bar]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/bar.js\\n[border]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/border.js\\n[victorybar]: /docs/victory-bar\\n[candle]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/candle.js\\n[victorycandlestick]: /docs/victory-candlestick\\n[curve]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/curve.js\\n[victoryline]: /docs/victory-line\\n[errorbar]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/error-bar.js\\n[victoryerrorbar]: /docs/victory-errorbar\\n[flyout]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-tooltip/src/flyout.js\\n[victorytooltip]: /docs/victory-tooltip\\n[victoryaxis]: /docs/victory-axis\\n[axis]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/axis.js\\n[point]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/point.js\\n[slice]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/slice.js\\n[whisker]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/whisker.js\\n[victorypie]: /docs/victory-pie\\n[voronoi]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-primitives/voronoi.js\\n[victoryvoronoi]: /docs/victory-voronoi\\n[victoryscatter]: /docs/victory-scatter\\n[victorylegend]: /docs/victory-legend\\n[victoryboxplot]: /docs/victory-boxplot\\n[victoryhistogram]: /docs/victory-histogram\\n\"},{\"data\":{\"id\":24,\"title\":\"VictorySharedEvents\",\"category\":\"more\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictorySharedEvents\",\"depth\":1,\"slug\":\"victory-shared-events\"},{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"}],\"slug\":\"victory-shared-events\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictorySharedEvents\",\"depth\":1,\"slug\":\"victory-shared-events\",\"category\":\"more\",\"children\":[{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"eventKey\",\"depth\":2,\"slug\":\"event-key\"},{\"type\":\"heading\",\"value\":\"externalEventMutations\",\"depth\":2,\"slug\":\"external-event-mutations\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 24\\ntitle: VictorySharedEvents\\ncategory: more\\ntype: docs\\nscope: null\\n---\\n\\n# VictorySharedEvents\\n\\nThe `VictorySharedEvents` wrapper coordinates events between its child components. Specify a set of events on the `VictorySharedEvents` wrapper to target children. [VictoryChart][], [VictoryGroup][], and [VictoryStack][] all use `VictorySharedEvents`, but it may also be used on its own.\\n\\n## children\\n\\n`type: array[element]`\\n\\n`VictorySharedEvents` renders an array of children with new `sharedEvents` props which define a set of events, and a shared state accessor.\\n\\n## events\\n\\n`type: array[object]`\\n\\nThe `events` prop takes an array of event objects. Event objects are composed of a `target`, an `eventKey`, a `childName` and `eventHandlers`. Targets may be any valid style namespace for a given component, so \\\"data\\\" and \\\"labels\\\" are valid targets for this components like `VictoryBar`. `eventKey` may be given as a single value, or as an array of values to specify individual targets. If `eventKey` is not specified, the given `eventHandlers` will be attached to all elements of the specified `target` type. The `childName` property may be given as a string or an array of strings to target multiple children. The `eventHandlers` object should be given as an object whose keys are standard event names (i.e. `onClick`) and whose values are event callbacks. The return value of an event handler is used to modify elements. The return value should be given as an object or an array of objects with optional `target`, `childName` and `eventKey` keys for specifying the element(s) to be modified, and a `mutation` key whose value is a function. The `target` and `eventKey` keys will default to those corresponding to the element the event handler was attached to. The `mutation` function will be called with the calculated props for each element that should be modified (i.e. a bar label), and the object returned from the mutation function will override the props of that element via object assignment.\\n\\n_examples:_\\n\\n```playground\\n<svg viewBox=\\\"0 0 450 350\\\">\\n  <VictorySharedEvents\\n    events={[{\\n      childName: [\\\"pie\\\", \\\"bar\\\"],\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onMouseOver: () => {\\n          return [{\\n            childName: [\\\"pie\\\", \\\"bar\\\"],\\n            mutation: (props) => {\\n              return {\\n                style: Object.assign({}, props.style, {fill: \\\"tomato\\\"})\\n              };\\n            }\\n          }];\\n        },\\n        onMouseOut: () => {\\n          return [{\\n            childName: [\\\"pie\\\", \\\"bar\\\"],\\n            mutation: () => {\\n              return null;\\n            }\\n          }];\\n        }\\n      }\\n    }]}\\n  >\\n    <g transform={\\\"translate(150, 50)\\\"}>\\n      <VictoryBar name=\\\"bar\\\"\\n        width={300}\\n        standalone={false}\\n        style={{\\n          data: { width: 20 },\\n          labels: {fontSize: 25}\\n        }}\\n        data={[\\n          {x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 4}\\n        ]}\\n        labels={[\\\"a\\\", \\\"b\\\", \\\"c\\\", \\\"d\\\"]}\\n        labelComponent={<VictoryLabel y={280}/>}\\n      />\\n    </g>\\n    <g transform={\\\"translate(0, -75)\\\"}>\\n      <VictoryPie name=\\\"pie\\\"\\n        width={250}\\n        standalone={false}\\n        style={{ labels: {fontSize: 25, padding: 10}}}\\n        data={[\\n          {x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 7}\\n        ]}\\n      />\\n    </g>\\n  </VictorySharedEvents>\\n</svg>\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\nThe `eventKey` prop is used to assign eventKeys to data. This prop operates identically to the `x` and `y` data accessor props. By default, the eventKey of each datum will be equal to its index in the data array. `eventKey` may also be defined directly on each data object.\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\nOccasionally is it necessary to trigger events in Victory's event system from some external element such as a button or a form field. Use the `externalEventMutation` prop to specify a set of mutations to apply to a given chart. The `externalEventMutations` should be given in the following form:\\n\\n```jsx\\nexternalEventMutations: PropTypes.arrayOf(\\n  PropTypes.shape({\\n    callback: PropTypes.function,\\n    childName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\\n    eventKey: PropTypes.oneOfType([\\n      PropTypes.array,\\n      CustomPropTypes.allOfType([\\n        CustomPropTypes.integer,\\n        CustomPropTypes.nonNegative\\n      ]),\\n      PropTypes.string\\n    ]),\\n    mutation: PropTypes.function,\\n    target: PropTypes.oneOfType([PropTypes.string, PropTypes.array])\\n  })\\n);\\n```\\n\\nThe `target`, `eventKey`, and `childName` (when applicable) must always be specified. The `mutation` function will be called with the current props of the element specified by the `target`, `eventKey` and `childName` provided. The mutation function should return a mutation object for that element. The `callback` prop should be used to clear the `externalEventMutations` prop once the mutation has been applied. Clearing `externalEventMutations` is crucial for charts that animate.\\n\\n```playground_norender\\nclass App extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      externalMutations: undefined\\n    };\\n  }\\n\\n  removeMutation() {\\n    this.setState({\\n      externalMutations: undefined\\n    });\\n  }\\n\\n  clearClicks() {\\n    this.setState({\\n      externalMutations: [\\n        {\\n          childName: [\\\"bar\\\", \\\"pie\\\"],\\n          target: [\\\"data\\\"],\\n          eventKey: \\\"all\\\",\\n          mutation: () => ({ style: undefined }),\\n          callback: this.removeMutation.bind(this)\\n        }\\n      ]\\n    });\\n  }\\n\\n  render() {\\n    const buttonStyle = {\\n      backgroundColor: \\\"black\\\",\\n      color: \\\"white\\\",\\n      padding: \\\"10px\\\",\\n      marginTop: \\\"10px\\\"\\n    };\\n    return (\\n      <div>\\n        <button\\n          onClick={this.clearClicks.bind(this)}\\n          style={buttonStyle}\\n        >\\n          Reset\\n        </button>\\n        <svg viewBox=\\\"0 0 450 350\\\">\\n          <VictorySharedEvents\\n            externalEventMutations={this.state.externalMutations}\\n            events={[{\\n              childName: [\\\"pie\\\", \\\"bar\\\"],\\n              target: \\\"data\\\",\\n              eventHandlers: {\\n                onClick: () => {\\n                  return [{\\n                    childName: [\\\"pie\\\", \\\"bar\\\"],\\n                    mutation: (props) => {\\n                      return {\\n                        style: Object.assign({}, props.style, {fill: \\\"tomato\\\"})\\n                      };\\n                    }\\n                  }];\\n                }\\n              }\\n            }]}\\n          >\\n            <g transform={\\\"translate(150, 50)\\\"}>\\n              <VictoryBar name=\\\"bar\\\"\\n                width={300}\\n                standalone={false}\\n                style={{\\n                  data: { width: 20 },\\n                  labels: {fontSize: 25}\\n                }}\\n                data={[\\n                  {x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 4}\\n                ]}\\n                labels={[\\\"a\\\", \\\"b\\\", \\\"c\\\", \\\"d\\\"]}\\n                labelComponent={<VictoryLabel y={290}/>}\\n              />\\n            </g>\\n            <g transform={\\\"translate(0, -75)\\\"}>\\n              <VictoryPie name=\\\"pie\\\"\\n                width={250}\\n                standalone={false}\\n                style={{ labels: {fontSize: 25, padding: 10}}}\\n                data={[\\n                  {x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 7}\\n                ]}\\n              />\\n            </g>\\n          </VictorySharedEvents>\\n        </svg>\\n      </div>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\n_Note_ External mutations are applied to the same state object that is used to control events in Victory, so depending on the order in which they are triggered, external event mutations may override mutations caused by internal Victory events or vice versa.\\n\\n[victorychart]: /docs/victory-chart\\n\\n[victorygroup]: /docs/victory-group\\n\\n[victorystack]: /docs/victory-stack\\n\",\"content\":\"\\n# VictorySharedEvents\\n\\nThe `VictorySharedEvents` wrapper coordinates events between its child components. Specify a set of events on the `VictorySharedEvents` wrapper to target children. [VictoryChart][], [VictoryGroup][], and [VictoryStack][] all use `VictorySharedEvents`, but it may also be used on its own.\\n\\n## children\\n\\n`type: array[element]`\\n\\n`VictorySharedEvents` renders an array of children with new `sharedEvents` props which define a set of events, and a shared state accessor.\\n\\n## events\\n\\n`type: array[object]`\\n\\nThe `events` prop takes an array of event objects. Event objects are composed of a `target`, an `eventKey`, a `childName` and `eventHandlers`. Targets may be any valid style namespace for a given component, so \\\"data\\\" and \\\"labels\\\" are valid targets for this components like `VictoryBar`. `eventKey` may be given as a single value, or as an array of values to specify individual targets. If `eventKey` is not specified, the given `eventHandlers` will be attached to all elements of the specified `target` type. The `childName` property may be given as a string or an array of strings to target multiple children. The `eventHandlers` object should be given as an object whose keys are standard event names (i.e. `onClick`) and whose values are event callbacks. The return value of an event handler is used to modify elements. The return value should be given as an object or an array of objects with optional `target`, `childName` and `eventKey` keys for specifying the element(s) to be modified, and a `mutation` key whose value is a function. The `target` and `eventKey` keys will default to those corresponding to the element the event handler was attached to. The `mutation` function will be called with the calculated props for each element that should be modified (i.e. a bar label), and the object returned from the mutation function will override the props of that element via object assignment.\\n\\n_examples:_\\n\\n```playground\\n<svg viewBox=\\\"0 0 450 350\\\">\\n  <VictorySharedEvents\\n    events={[{\\n      childName: [\\\"pie\\\", \\\"bar\\\"],\\n      target: \\\"data\\\",\\n      eventHandlers: {\\n        onMouseOver: () => {\\n          return [{\\n            childName: [\\\"pie\\\", \\\"bar\\\"],\\n            mutation: (props) => {\\n              return {\\n                style: Object.assign({}, props.style, {fill: \\\"tomato\\\"})\\n              };\\n            }\\n          }];\\n        },\\n        onMouseOut: () => {\\n          return [{\\n            childName: [\\\"pie\\\", \\\"bar\\\"],\\n            mutation: () => {\\n              return null;\\n            }\\n          }];\\n        }\\n      }\\n    }]}\\n  >\\n    <g transform={\\\"translate(150, 50)\\\"}>\\n      <VictoryBar name=\\\"bar\\\"\\n        width={300}\\n        standalone={false}\\n        style={{\\n          data: { width: 20 },\\n          labels: {fontSize: 25}\\n        }}\\n        data={[\\n          {x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 4}\\n        ]}\\n        labels={[\\\"a\\\", \\\"b\\\", \\\"c\\\", \\\"d\\\"]}\\n        labelComponent={<VictoryLabel y={280}/>}\\n      />\\n    </g>\\n    <g transform={\\\"translate(0, -75)\\\"}>\\n      <VictoryPie name=\\\"pie\\\"\\n        width={250}\\n        standalone={false}\\n        style={{ labels: {fontSize: 25, padding: 10}}}\\n        data={[\\n          {x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 7}\\n        ]}\\n      />\\n    </g>\\n  </VictorySharedEvents>\\n</svg>\\n```\\n\\n## eventKey\\n\\n`type: string || integer || array[string] || function`\\n\\nThe `eventKey` prop is used to assign eventKeys to data. This prop operates identically to the `x` and `y` data accessor props. By default, the eventKey of each datum will be equal to its index in the data array. `eventKey` may also be defined directly on each data object.\\n\\n## externalEventMutations\\n\\n`type: array[object]`\\n\\nOccasionally is it necessary to trigger events in Victory's event system from some external element such as a button or a form field. Use the `externalEventMutation` prop to specify a set of mutations to apply to a given chart. The `externalEventMutations` should be given in the following form:\\n\\n```jsx\\nexternalEventMutations: PropTypes.arrayOf(\\n  PropTypes.shape({\\n    callback: PropTypes.function,\\n    childName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),\\n    eventKey: PropTypes.oneOfType([\\n      PropTypes.array,\\n      CustomPropTypes.allOfType([\\n        CustomPropTypes.integer,\\n        CustomPropTypes.nonNegative\\n      ]),\\n      PropTypes.string\\n    ]),\\n    mutation: PropTypes.function,\\n    target: PropTypes.oneOfType([PropTypes.string, PropTypes.array])\\n  })\\n);\\n```\\n\\nThe `target`, `eventKey`, and `childName` (when applicable) must always be specified. The `mutation` function will be called with the current props of the element specified by the `target`, `eventKey` and `childName` provided. The mutation function should return a mutation object for that element. The `callback` prop should be used to clear the `externalEventMutations` prop once the mutation has been applied. Clearing `externalEventMutations` is crucial for charts that animate.\\n\\n```playground_norender\\nclass App extends React.Component {\\n  constructor() {\\n    super();\\n    this.state = {\\n      externalMutations: undefined\\n    };\\n  }\\n\\n  removeMutation() {\\n    this.setState({\\n      externalMutations: undefined\\n    });\\n  }\\n\\n  clearClicks() {\\n    this.setState({\\n      externalMutations: [\\n        {\\n          childName: [\\\"bar\\\", \\\"pie\\\"],\\n          target: [\\\"data\\\"],\\n          eventKey: \\\"all\\\",\\n          mutation: () => ({ style: undefined }),\\n          callback: this.removeMutation.bind(this)\\n        }\\n      ]\\n    });\\n  }\\n\\n  render() {\\n    const buttonStyle = {\\n      backgroundColor: \\\"black\\\",\\n      color: \\\"white\\\",\\n      padding: \\\"10px\\\",\\n      marginTop: \\\"10px\\\"\\n    };\\n    return (\\n      <div>\\n        <button\\n          onClick={this.clearClicks.bind(this)}\\n          style={buttonStyle}\\n        >\\n          Reset\\n        </button>\\n        <svg viewBox=\\\"0 0 450 350\\\">\\n          <VictorySharedEvents\\n            externalEventMutations={this.state.externalMutations}\\n            events={[{\\n              childName: [\\\"pie\\\", \\\"bar\\\"],\\n              target: \\\"data\\\",\\n              eventHandlers: {\\n                onClick: () => {\\n                  return [{\\n                    childName: [\\\"pie\\\", \\\"bar\\\"],\\n                    mutation: (props) => {\\n                      return {\\n                        style: Object.assign({}, props.style, {fill: \\\"tomato\\\"})\\n                      };\\n                    }\\n                  }];\\n                }\\n              }\\n            }]}\\n          >\\n            <g transform={\\\"translate(150, 50)\\\"}>\\n              <VictoryBar name=\\\"bar\\\"\\n                width={300}\\n                standalone={false}\\n                style={{\\n                  data: { width: 20 },\\n                  labels: {fontSize: 25}\\n                }}\\n                data={[\\n                  {x: \\\"a\\\", y: 2}, {x: \\\"b\\\", y: 3}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 4}\\n                ]}\\n                labels={[\\\"a\\\", \\\"b\\\", \\\"c\\\", \\\"d\\\"]}\\n                labelComponent={<VictoryLabel y={290}/>}\\n              />\\n            </g>\\n            <g transform={\\\"translate(0, -75)\\\"}>\\n              <VictoryPie name=\\\"pie\\\"\\n                width={250}\\n                standalone={false}\\n                style={{ labels: {fontSize: 25, padding: 10}}}\\n                data={[\\n                  {x: \\\"a\\\", y: 1}, {x: \\\"b\\\", y: 4}, {x: \\\"c\\\", y: 5}, {x: \\\"d\\\", y: 7}\\n                ]}\\n              />\\n            </g>\\n          </VictorySharedEvents>\\n        </svg>\\n      </div>\\n    )\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode)\\n```\\n\\n_Note_ External mutations are applied to the same state object that is used to control events in Victory, so depending on the order in which they are triggered, external event mutations may override mutations caused by internal Victory events or vice versa.\\n\\n[victorychart]: /docs/victory-chart\\n[victorygroup]: /docs/victory-group\\n[victorystack]: /docs/victory-stack\\n\"},{\"data\":{\"id\":26,\"title\":\"VictoryTheme\",\"category\":\"more\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryTheme\",\"depth\":1,\"slug\":\"victory-theme\"}],\"slug\":\"victory-theme\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryTheme\",\"depth\":1,\"slug\":\"victory-theme\",\"category\":\"more\"}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 26\\ntitle: VictoryTheme\\ncategory: more\\ntype: docs\\nscope: null\\n---\\n\\n# VictoryTheme\\n\\nImplement themes for your Victory charts. `VictoryTheme` allows you to create a consistent look across all of your chart elements, either by using one of the included themes or by creating your own. `VictoryTheme` and custom themes are supported by all Victory components. By default, Victory components use the [grayscale theme][].\\n\\n[Read more about themes here][].\\n\\nTo create your own theme, create an object with props and styles specified for any combination of the following namespaces:\\n\\n_Note:_ The `dependentAxis` and `independentAxis` will be merged with any props and styles supplied in the `axis` namespace.\\n\\n```js\\n{\\n  area: {...props},\\n  axis: {...props},\\n  dependentAxis: {...props},\\n  independentAxis: {...props},\\n  bar: {...props},\\n  candlestick: {...props},\\n  chart: {...props},\\n  errorbar: {...props},\\n  group: {...props},\\n  legend: {...props},\\n  line: {...props},\\n  pie: {...props},\\n  scatter: {...props},\\n  stack: {...props},\\n  tooltip: {...props},\\n  voronoi: {...props}\\n}\\n```\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n\\n[read more about themes here]: /guides/themes\\n\",\"content\":\"# VictoryTheme\\n\\nImplement themes for your Victory charts. `VictoryTheme` allows you to create a consistent look across all of your chart elements, either by using one of the included themes or by creating your own. `VictoryTheme` and custom themes are supported by all Victory components. By default, Victory components use the [grayscale theme][].\\n\\n[Read more about themes here][].\\n\\nTo create your own theme, create an object with props and styles specified for any combination of the following namespaces:\\n\\n*Note:* The `dependentAxis` and `independentAxis` will be merged with any props and styles supplied in the `axis` namespace.\\n\\n```js\\n{\\n  area: {...props},\\n  axis: {...props},\\n  dependentAxis: {...props},\\n  independentAxis: {...props},\\n  bar: {...props},\\n  candlestick: {...props},\\n  chart: {...props},\\n  errorbar: {...props},\\n  group: {...props},\\n  legend: {...props},\\n  line: {...props},\\n  pie: {...props},\\n  scatter: {...props},\\n  stack: {...props},\\n  tooltip: {...props},\\n  voronoi: {...props}\\n}\\n```\\n\\n[grayscale theme]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-theme/grayscale.js\\n[Read more about themes here]: /guides/themes\\n\"},{\"data\":{\"id\":27,\"title\":\"VictoryTooltip\",\"category\":\"more\",\"type\":\"docs\",\"scope\":[\"sampleData\"],\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryTooltip\",\"depth\":1,\"slug\":\"victory-tooltip\"},{\"type\":\"heading\",\"value\":\"active\",\"depth\":2,\"slug\":\"active\"},{\"type\":\"heading\",\"value\":\"activateData\",\"depth\":2,\"slug\":\"activate-data\"},{\"type\":\"heading\",\"value\":\"angle\",\"depth\":2,\"slug\":\"angle\"},{\"type\":\"heading\",\"value\":\"center\",\"depth\":2,\"slug\":\"center\"},{\"type\":\"heading\",\"value\":\"centerOffset\",\"depth\":2,\"slug\":\"center-offset\"},{\"type\":\"heading\",\"value\":\"constrainToVisibleArea\",\"depth\":2,\"slug\":\"constrain-to-visible-area\"},{\"type\":\"heading\",\"value\":\"cornerRadius\",\"depth\":2,\"slug\":\"corner-radius\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"datum\",\"depth\":2,\"slug\":\"datum\"},{\"type\":\"heading\",\"value\":\"dx\",\"depth\":2,\"slug\":\"dx\"},{\"type\":\"heading\",\"value\":\"dy\",\"depth\":2,\"slug\":\"dy\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"flyoutHeight\",\"depth\":2,\"slug\":\"flyout-height\"},{\"type\":\"heading\",\"value\":\"flyoutStyle\",\"depth\":2,\"slug\":\"flyout-style\"},{\"type\":\"heading\",\"value\":\"flyoutWidth\",\"depth\":2,\"slug\":\"flyout-width\"},{\"type\":\"heading\",\"value\":\"flyoutComponent\",\"depth\":2,\"slug\":\"flyout-component\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"index\",\"depth\":2,\"slug\":\"index\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"orientation\",\"depth\":2,\"slug\":\"orientation\"},{\"type\":\"heading\",\"value\":\"pointerLength\",\"depth\":2,\"slug\":\"pointer-length\"},{\"type\":\"heading\",\"value\":\"pointerOrientation\",\"depth\":2,\"slug\":\"pointer-orientation\"},{\"type\":\"heading\",\"value\":\"pointerWidth\",\"depth\":2,\"slug\":\"pointer-width\"},{\"type\":\"heading\",\"value\":\"renderInPortal\",\"depth\":2,\"slug\":\"render-in-portal\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"text\",\"depth\":2,\"slug\":\"text\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"}],\"slug\":\"victory-tooltip\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryTooltip\",\"depth\":1,\"slug\":\"victory-tooltip\",\"category\":\"more\",\"children\":[{\"type\":\"heading\",\"value\":\"active\",\"depth\":2,\"slug\":\"active\"},{\"type\":\"heading\",\"value\":\"activateData\",\"depth\":2,\"slug\":\"activate-data\"},{\"type\":\"heading\",\"value\":\"angle\",\"depth\":2,\"slug\":\"angle\"},{\"type\":\"heading\",\"value\":\"center\",\"depth\":2,\"slug\":\"center\"},{\"type\":\"heading\",\"value\":\"centerOffset\",\"depth\":2,\"slug\":\"center-offset\"},{\"type\":\"heading\",\"value\":\"constrainToVisibleArea\",\"depth\":2,\"slug\":\"constrain-to-visible-area\"},{\"type\":\"heading\",\"value\":\"cornerRadius\",\"depth\":2,\"slug\":\"corner-radius\"},{\"type\":\"heading\",\"value\":\"data\",\"depth\":2,\"slug\":\"data\"},{\"type\":\"heading\",\"value\":\"datum\",\"depth\":2,\"slug\":\"datum\"},{\"type\":\"heading\",\"value\":\"dx\",\"depth\":2,\"slug\":\"dx\"},{\"type\":\"heading\",\"value\":\"dy\",\"depth\":2,\"slug\":\"dy\"},{\"type\":\"heading\",\"value\":\"events\",\"depth\":2,\"slug\":\"events\"},{\"type\":\"heading\",\"value\":\"flyoutHeight\",\"depth\":2,\"slug\":\"flyout-height\"},{\"type\":\"heading\",\"value\":\"flyoutStyle\",\"depth\":2,\"slug\":\"flyout-style\"},{\"type\":\"heading\",\"value\":\"flyoutWidth\",\"depth\":2,\"slug\":\"flyout-width\"},{\"type\":\"heading\",\"value\":\"flyoutComponent\",\"depth\":2,\"slug\":\"flyout-component\"},{\"type\":\"heading\",\"value\":\"groupComponent\",\"depth\":2,\"slug\":\"group-component\"},{\"type\":\"heading\",\"value\":\"height\",\"depth\":2,\"slug\":\"height\"},{\"type\":\"heading\",\"value\":\"horizontal\",\"depth\":2,\"slug\":\"horizontal\"},{\"type\":\"heading\",\"value\":\"index\",\"depth\":2,\"slug\":\"index\"},{\"type\":\"heading\",\"value\":\"labelComponent\",\"depth\":2,\"slug\":\"label-component\"},{\"type\":\"heading\",\"value\":\"orientation\",\"depth\":2,\"slug\":\"orientation\"},{\"type\":\"heading\",\"value\":\"pointerLength\",\"depth\":2,\"slug\":\"pointer-length\"},{\"type\":\"heading\",\"value\":\"pointerOrientation\",\"depth\":2,\"slug\":\"pointer-orientation\"},{\"type\":\"heading\",\"value\":\"pointerWidth\",\"depth\":2,\"slug\":\"pointer-width\"},{\"type\":\"heading\",\"value\":\"renderInPortal\",\"depth\":2,\"slug\":\"render-in-portal\"},{\"type\":\"heading\",\"value\":\"style\",\"depth\":2,\"slug\":\"style\"},{\"type\":\"heading\",\"value\":\"text\",\"depth\":2,\"slug\":\"text\"},{\"type\":\"heading\",\"value\":\"width\",\"depth\":2,\"slug\":\"width\"},{\"type\":\"heading\",\"value\":\"x\",\"depth\":2,\"slug\":\"x\"},{\"type\":\"heading\",\"value\":\"y\",\"depth\":2,\"slug\":\"y\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 27\\ntitle: VictoryTooltip\\ncategory: more\\ntype: docs\\nscope:\\n  - sampleData\\n---\\n\\n# VictoryTooltip\\n\\n`VictoryTooltip` renders a tooltip component with a set of default events. When `VictoryTooltip` is used as a label component for any Victory component that renders data, it will attach events to rendered data components that will activate the tooltip when hovered. `VictoryTooltip` renders text as well as a configurable [Flyout][] container.\\n\\n## active\\n\\n`type: boolean`\\n\\nThe `active` prop specifies whether the tooltip component should be displayed.\\n\\n## activateData\\n\\n`type: boolean`\\n\\nWhen true, tooltip events will set the `active` prop on both data and label elements.\\n\\n_default:_ `activateData={false}`\\n\\n## angle\\n\\n`type: number`\\n\\nThe `angle` prop specifies the angle to rotate the tooltip around its origin point.\\n\\n## center\\n\\n`type: { x: number, y: number }`\\n\\nThe `center` prop determines the position of the center of the tooltip flyout. This prop should be given as an object that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for positioning the flyout of a tooltip _independent from_ the pointer. When `VictoryTooltip` is used with `VictoryVoronoiContainer`, the `center` prop is what enables the `mouseFollowTooltips` option. When this prop is set, non-zero `pointerLength` values will no longer be respected.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={() => \\\"HELLO\\\"}\\n  labelComponent={\\n    <VictoryTooltip\\n      center={{ x: 225, y: 30 }}\\n      pointerOrientation=\\\"bottom\\\"\\n      flyoutWidth={150}\\n      flyoutHeight={50}\\n      pointerWidth={150}\\n      cornerRadius={0}\\n    />\\n  }\\n/>\\n```\\n\\n## centerOffset\\n\\n`type: { x: number || function, y: number || function }`\\n\\nThe `centerOffset` prop determines the position of the center of the tooltip flyout _in relation to_ the flyout pointer. This prop should be given as an object of x and y, where each is either a numeric offset value or a function that returns a numeric value. When this prop is set, non-zero `pointerLength` values will no longer be respected.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `x: ${datum.x}, y: ${datum.y}`}\\n  labelComponent={<VictoryTooltip dy={0} centerOffset={{ x: 25 }} />}\\n/>\\n```\\n\\n## constrainToVisibleArea\\n\\n`type: boolean`\\n\\nThe `constrainToVisibleArea` prop determines whether to coerce tooltips so that they fit within the visible area of the chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the center of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={() => \\\"These labels just go on, and on, and on...\\\"}\\n  labelComponent={<VictoryTooltip constrainToVisibleArea />}\\n/>\\n```\\n\\n## cornerRadius\\n\\n`type: number || function`\\n\\nThe `cornerRadius` prop determines corner radius of the flyout container. This prop may be given as a positive number or a function of datum.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n  labelComponent={<VictoryTooltip  cornerRadius={({ datum }) => datum.x * 2} />}\\n/>\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\nVictory components can pass a `data` prop to their label component. This can be useful in custom components that need to make use of the entire dataset.\\n\\n## datum\\n\\n`type: object`\\n\\nVictory components can pass a `datum` prop to their label component. This can\\nbe used to calculate functional styles, and determine text.\\n\\n## dx\\n\\n`type: number || function`\\n\\nThe `dx` prop defines a horizontal shift from the `x` coordinate.\\n\\n## dy\\n\\n`type: number || function`\\n\\nThe `dy` prop defines a vertical shift from the `y` coordinate.\\n\\n## events\\n\\n`type: object`\\n\\nThe `events` prop attaches arbitrary event handlers to the label component. This prop should be given as an object of event names and corresponding event handlers. When events are provided via Victory's event system, event handlers will be called with the event, the props of the component is attached to, and an eventKey.\\n\\n_examples:_ `events={{onClick: (evt) => alert(\\\"x: \\\" + evt.clientX)}}`\\n\\n## flyoutHeight\\n\\n`type: number || function`\\n\\nThe `flyoutHeight` prop defines the height of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, `flyoutHeight` will be determined based on an [approximate text size][] calculated from the `text` and `style` props provided to `VictoryTooltip`.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n  labelComponent={<VictoryTooltip  flyoutHeight={60} />}\\n/>\\n```\\n\\n## flyoutStyle\\n\\n`type: object`\\n\\nThe `style` prop applies SVG style properties to the rendered flyout container. These props will be passed to the `flyoutComponent`.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n  labelComponent={\\n    <VictoryTooltip\\n      flyoutStyle={{ stroke: \\\"tomato\\\", strokeWidth: 2 }}\\n    />\\n  }\\n/>\\n```\\n\\n## flyoutWidth\\n\\n`type: number || function`\\n\\nThe `flyoutWidth` prop defines the width of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, `flyoutWidth` will be determined based on an [approximate text size][] calculated from the `text` and `style` props provided to `VictoryTooltip`.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n  labelComponent={<VictoryTooltip  flyoutWidth={90} />}\\n/>\\n```\\n\\n## flyoutComponent\\n\\n`type: element`\\n\\nThe `flyoutComponent` prop takes a component instance which will be used to create the flyout path for each tooltip. The new element created from the passed `flyoutComponent` will be supplied with the following properties: x, y, dx, dy, index, datum, cornerRadius, pointerLength, pointerWidth, width, height, orientation, style, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `flyoutComponent` is omitted, a default [Flyout][] component will be created with props described above.\\n\\n_examples:_ `flyoutComponent={<Flyout x={50} y={50}/>}`, `flyoutComponent={<MyCustomFlyout/>}`\\n\\n_default:_ `<Flyout/>`\\n\\n## groupComponent\\n\\n`type: element`\\n\\nThe `groupComponent` prop takes a component instance which will be used to create group elements for use within container elements. This prop defaults to a `<g>` tag.\\n\\n_default:_ `groupComponent={<g/>}`\\n\\n## height\\n\\n`type: number`\\n\\nThis prop refers to the height of the `svg` that `VictoryLabel` is rendered within. **This prop is passed from parents of `VictoryLabel`, and should not be set manually. In versions before `^33.0.0` this prop referred to the height of the tooltip flyout. Please use `flyoutHeight` instead**\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe `horizontal` prop determines whether to plot the flyouts to the left / right of the (x, y) coordinate rather than top / bottom. This is useful when an orientation prop is not provided, and data will determine the default orientation. _i.e._ negative values result in a left orientation and positive values will result in a right orientation by default.\\n\\n## index\\n\\n`type: number || string`\\n\\nThe `index` prop represents the index of the datum in the data array.\\n\\n## labelComponent\\n\\n`type: element`\\n\\nThe `labelComponent` prop takes a component instance which will be used to render each tooltip label. The new element created from the passed `labelComponent` will be supplied with the following properties: x, y, index, datum, verticalAnchor, textAnchor, style, text, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above.\\n\\n_examples:_ `labelComponent={<VictoryLabel dy={20}/>}`, `labelComponent={<MyCustomLabel/>}`\\n\\n_default:_ `<VictoryLabel/>`\\n\\n## orientation\\n\\n`type: function || \\\"top\\\" || \\\"bottom\\\" || \\\"left\\\" || \\\"right\\\"`\\n\\nThe `orientation` prop determines which side of the (x, y) coordinate the tooltip should be rendered on. This prop can be given as \\\"top\\\", \\\"bottom\\\", \\\"left\\\", \\\"right\\\", or as a function of datum that returns one of these values. If this prop is not provided it will be determined from the sign of the `datum`, and the value of the `horizontal` prop.\\n\\n## pointerLength\\n\\n`type: number || function`\\n\\nThe `pointerLength` prop determines the length of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum. **Note: When `center`, `centerOffset` or `constrainToVisibleArea` props are used, non-zero `pointerLength` values are not guaranteed.**\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n  labelComponent={<VictoryTooltip  pointerLength={20} />}\\n/>\\n```\\n\\n## pointerOrientation\\n\\n`type: \\\"top\\\", \\\"bottom\\\", \\\"left\\\", \\\"right\\\" || function`\\n\\nThis prop determines which side of the tooltip flyout the pointer should originate on. When this prop is not set, it will be determined based on the overall `orientation` of the flyout in relation to its data point, and any `center` or `centerOffset` values.\\n\\n```playground\\n// Try changing `pointerOrientation` to \\\"bottom\\\"\\n<VictoryBar\\n  barWidth={20}\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n  labelComponent={\\n    <VictoryTooltip\\n      pointerOrientation=\\\"right\\\"\\n      dy={0}\\n      dx={-12}\\n      pointerWidth={25}\\n      flyoutHeight={25}\\n      flyoutWidth={25}\\n      cornerRadius={0}\\n      centerOffset={{ x: -50 }}\\n      />\\n  }\\n/>\\n```\\n\\n## pointerWidth\\n\\n`type: number || function`\\n\\nThe `pointerWidth` prop determines the width of the base of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n  labelComponent={<VictoryTooltip  pointerWidth={20} />}\\n/>\\n```\\n\\n## renderInPortal\\n\\n`type: boolean`\\n\\nWhen `renderInPortal` is true, rendered tooltips will be wrapped in [VictoryPortal][] and rendered within the [Portal][] element within [VictoryContainer][]. _Note:_ This prop should _not_ be set to true when using a custom container element.\\n\\n## style\\n\\n`type: object`\\n\\nThe `style` prop applies SVG style properties to the rendered `<text>` element.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n  labelComponent={\\n    <VictoryTooltip\\n      style={{ fill: \\\"tomato\\\" }}\\n    />\\n  }\\n/>\\n```\\n\\n## text\\n\\n`type: string || number || function || array[string || number]`\\n\\nThe `text` prop defines the text `VictoryTooltip` will render. The `text` prop may be given as a string, number, or function of `datum`. When [VictoryLabel][] is used as the `labelComponent`, strings may include newline characters, which VictoryLabel will split in to separate `<tspan/>` elements.\\n\\n## width\\n\\n`type: number`\\n\\nThis prop refers to the width of the `svg` that `VictoryLabel` is rendered within. **This prop is passed from parents of `VictoryLabel`, and should not be set manually. In versions before `^33.0.0` this prop referred to the width of the tooltip flyout. Please use `flyoutWidth` instead**\\n\\n## x\\n\\n`type: number`\\n\\nThe `x` prop defines the x coordinate to use as a basis for positioning the tooltip element.\\n\\n## y\\n\\n`type: number`\\n\\nThe `y` prop defines the y coordinate to use as a basis for positioning the tooltip element.\\n\\n[flyout]: /docs/victory-primitives#flyout\\n\\n[victorylabel]: /docs/victory-label\\n\\n[victoryportal]: /docs/victory-portal\\n\\n[victorycontainer]: /docs/victory-container\\n\\n[portal]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-portal/portal.js\\n\\n[approximate text size]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-util/textsize.js\\n\",\"content\":\"\\n# VictoryTooltip\\n\\n`VictoryTooltip` renders a tooltip component with a set of default events. When `VictoryTooltip` is used as a label component for any Victory component that renders data, it will attach events to rendered data components that will activate the tooltip when hovered. `VictoryTooltip` renders text as well as a configurable [Flyout][] container.\\n\\n## active\\n\\n`type: boolean`\\n\\nThe `active` prop specifies whether the tooltip component should be displayed.\\n\\n## activateData\\n\\n`type: boolean`\\n\\nWhen true, tooltip events will set the `active` prop on both data and label elements.\\n\\n_default:_ `activateData={false}`\\n\\n## angle\\n\\n`type: number`\\n\\nThe `angle` prop specifies the angle to rotate the tooltip around its origin point.\\n\\n## center\\n\\n`type: { x: number, y: number }`\\n\\nThe `center` prop determines the position of the center of the tooltip flyout. This prop should be given as an object that describes the desired x and y svg coordinates of the center of the tooltip. This prop is useful for positioning the flyout of a tooltip _independent from_ the pointer. When `VictoryTooltip` is used with `VictoryVoronoiContainer`, the `center` prop is what enables the `mouseFollowTooltips` option. When this prop is set, non-zero `pointerLength` values will no longer be respected.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={() => \\\"HELLO\\\"}\\n  labelComponent={\\n    <VictoryTooltip\\n      center={{ x: 225, y: 30 }}\\n      pointerOrientation=\\\"bottom\\\"\\n      flyoutWidth={150}\\n      flyoutHeight={50}\\n      pointerWidth={150}\\n      cornerRadius={0}\\n    />\\n  }\\n/>\\n```\\n\\n## centerOffset\\n\\n`type: { x: number || function, y: number || function }`\\n\\nThe `centerOffset` prop determines the position of the center of the tooltip flyout _in relation to_ the flyout pointer. This prop should be given as an object of x and y, where each is either a numeric offset value or a function that returns a numeric value. When this prop is set, non-zero `pointerLength` values will no longer be respected.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `x: ${datum.x}, y: ${datum.y}`}\\n  labelComponent={<VictoryTooltip dy={0} centerOffset={{ x: 25 }} />}\\n/>\\n```\\n\\n## constrainToVisibleArea\\n\\n`type: boolean`\\n\\nThe `constrainToVisibleArea` prop determines whether to coerce tooltips so that they fit within the visible area of the chart. When this prop is set to true, tooltip pointers will still point to the correct data point, but the center of the tooltip will be shifted to fit within the overall width and height of the svg Victory renders.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={() => \\\"These labels just go on, and on, and on...\\\"}\\n  labelComponent={<VictoryTooltip constrainToVisibleArea />}\\n/>\\n```\\n\\n## cornerRadius\\n\\n`type: number || function`\\n\\nThe `cornerRadius` prop determines corner radius of the flyout container. This prop may be given as a positive number or a function of datum.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n  labelComponent={<VictoryTooltip  cornerRadius={({ datum }) => datum.x * 2} />}\\n/>\\n```\\n\\n## data\\n\\n`type: array[object]`\\n\\nVictory components can pass a `data` prop to their label component. This can be useful in custom components that need to make use of the entire dataset.\\n\\n## datum\\n\\n`type: object`\\n\\nVictory components can pass a `datum` prop to their label component. This can\\nbe used to calculate functional styles, and determine text.\\n\\n## dx\\n\\n`type: number || function`\\n\\nThe `dx` prop defines a horizontal shift from the `x` coordinate.\\n\\n## dy\\n\\n`type: number || function`\\n\\nThe `dy` prop defines a vertical shift from the `y` coordinate.\\n\\n## events\\n\\n`type: object`\\n\\nThe `events` prop attaches arbitrary event handlers to the label component. This prop should be given as an object of event names and corresponding event handlers. When events are provided via Victory's event system, event handlers will be called with the event, the props of the component is attached to, and an eventKey.\\n\\n_examples:_ `events={{onClick: (evt) => alert(\\\"x: \\\" + evt.clientX)}}`\\n\\n## flyoutHeight\\n\\n`type: number || function`\\n\\nThe `flyoutHeight` prop defines the height of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, `flyoutHeight` will be determined based on an [approximate text size][] calculated from the `text` and `style` props provided to `VictoryTooltip`.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n  labelComponent={<VictoryTooltip  flyoutHeight={60} />}\\n/>\\n```\\n\\n## flyoutStyle\\n\\n`type: object`\\n\\nThe `style` prop applies SVG style properties to the rendered flyout container. These props will be passed to the `flyoutComponent`.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n  labelComponent={\\n    <VictoryTooltip\\n      flyoutStyle={{ stroke: \\\"tomato\\\", strokeWidth: 2 }}\\n    />\\n  }\\n/>\\n```\\n\\n## flyoutWidth\\n\\n`type: number || function`\\n\\nThe `flyoutWidth` prop defines the width of the tooltip flyout. This prop may be given as a positive number or a function of datum. If this prop is not set, `flyoutWidth` will be determined based on an [approximate text size][] calculated from the `text` and `style` props provided to `VictoryTooltip`.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n  labelComponent={<VictoryTooltip  flyoutWidth={90} />}\\n/>\\n```\\n\\n## flyoutComponent\\n\\n`type: element`\\n\\nThe `flyoutComponent` prop takes a component instance which will be used to create the flyout path for each tooltip. The new element created from the passed `flyoutComponent` will be supplied with the following properties: x, y, dx, dy, index, datum, cornerRadius, pointerLength, pointerWidth, width, height, orientation, style, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `flyoutComponent` is omitted, a default [Flyout][] component will be created with props described above.\\n\\n_examples:_ `flyoutComponent={<Flyout x={50} y={50}/>}`, `flyoutComponent={<MyCustomFlyout/>}`\\n\\n_default:_ `<Flyout/>`\\n\\n## groupComponent\\n\\n`type: element`\\n\\nThe `groupComponent` prop takes a component instance which will be used to create group elements for use within container elements. This prop defaults to a `<g>` tag.\\n\\n_default:_ `groupComponent={<g/>}`\\n\\n## height\\n\\n`type: number`\\n\\nThis prop refers to the height of the `svg` that `VictoryLabel` is rendered within. **This prop is passed from parents of `VictoryLabel`, and should not be set manually. In versions before `^33.0.0` this prop referred to the height of the tooltip flyout. Please use `flyoutHeight` instead**\\n\\n## horizontal\\n\\n`type: boolean`\\n\\nThe `horizontal` prop determines whether to plot the flyouts to the left / right of the (x, y) coordinate rather than top / bottom. This is useful when an orientation prop is not provided, and data will determine the default orientation. _i.e._ negative values result in a left orientation and positive values will result in a right orientation by default.\\n\\n## index\\n\\n`type: number || string`\\n\\nThe `index` prop represents the index of the datum in the data array.\\n\\n## labelComponent\\n\\n`type: element`\\n\\nThe `labelComponent` prop takes a component instance which will be used to render each tooltip label. The new element created from the passed `labelComponent` will be supplied with the following properties: x, y, index, datum, verticalAnchor, textAnchor, style, text, and events. Any of these props may be overridden by passing in props to the supplied component, or modified or ignored within the custom component itself. If `labelComponent` is omitted, a new [VictoryLabel][] will be created with the props described above.\\n\\n_examples:_ `labelComponent={<VictoryLabel dy={20}/>}`, `labelComponent={<MyCustomLabel/>}`\\n\\n_default:_ `<VictoryLabel/>`\\n\\n## orientation\\n\\n`type: function || \\\"top\\\" || \\\"bottom\\\" || \\\"left\\\" || \\\"right\\\"`\\n\\nThe `orientation` prop determines which side of the (x, y) coordinate the tooltip should be rendered on. This prop can be given as \\\"top\\\", \\\"bottom\\\", \\\"left\\\", \\\"right\\\", or as a function of datum that returns one of these values. If this prop is not provided it will be determined from the sign of the `datum`, and the value of the `horizontal` prop.\\n\\n## pointerLength\\n\\n`type: number || function`\\n\\nThe `pointerLength` prop determines the length of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum. **Note: When `center`, `centerOffset` or `constrainToVisibleArea` props are used, non-zero `pointerLength` values are not guaranteed.**\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n  labelComponent={<VictoryTooltip  pointerLength={20} />}\\n/>\\n```\\n\\n## pointerOrientation\\n\\n`type: \\\"top\\\", \\\"bottom\\\", \\\"left\\\", \\\"right\\\" || function`\\n\\nThis prop determines which side of the tooltip flyout the pointer should originate on. When this prop is not set, it will be determined based on the overall `orientation` of the flyout in relation to its data point, and any `center` or `centerOffset` values.\\n\\n```playground\\n// Try changing `pointerOrientation` to \\\"bottom\\\"\\n<VictoryBar\\n  barWidth={20}\\n  data={sampleData}\\n  labels={({ datum }) => datum.y}\\n  labelComponent={\\n    <VictoryTooltip\\n      pointerOrientation=\\\"right\\\"\\n      dy={0}\\n      dx={-12}\\n      pointerWidth={25}\\n      flyoutHeight={25}\\n      flyoutWidth={25}\\n      cornerRadius={0}\\n      centerOffset={{ x: -50 }}\\n      />\\n  }\\n/>\\n```\\n\\n## pointerWidth\\n\\n`type: number || function`\\n\\nThe `pointerWidth` prop determines the width of the base of the triangular pointer extending from the flyout. This prop may be given as a positive number or a function of datum.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n  labelComponent={<VictoryTooltip  pointerWidth={20} />}\\n/>\\n```\\n\\n## renderInPortal\\n\\n`type: boolean`\\n\\nWhen `renderInPortal` is true, rendered tooltips will be wrapped in [VictoryPortal][] and rendered within the [Portal][] element within [VictoryContainer][]. _Note:_ This prop should _not_ be set to true when using a custom container element.\\n\\n## style\\n\\n`type: object`\\n\\nThe `style` prop applies SVG style properties to the rendered `<text>` element.\\n\\n```playground\\n<VictoryBar\\n  data={sampleData}\\n  labels={({ datum }) => `y: ${datum.y}`}\\n  labelComponent={\\n    <VictoryTooltip\\n      style={{ fill: \\\"tomato\\\" }}\\n    />\\n  }\\n/>\\n```\\n\\n## text\\n\\n`type: string || number || function || array[string || number]`\\n\\nThe `text` prop defines the text `VictoryTooltip` will render. The `text` prop may be given as a string, number, or function of `datum`. When [VictoryLabel][] is used as the `labelComponent`, strings may include newline characters, which VictoryLabel will split in to separate `<tspan/>` elements.\\n\\n## width\\n\\n`type: number`\\n\\nThis prop refers to the width of the `svg` that `VictoryLabel` is rendered within. **This prop is passed from parents of `VictoryLabel`, and should not be set manually. In versions before `^33.0.0` this prop referred to the width of the tooltip flyout. Please use `flyoutWidth` instead**\\n\\n## x\\n\\n`type: number`\\n\\nThe `x` prop defines the x coordinate to use as a basis for positioning the tooltip element.\\n\\n## y\\n\\n`type: number`\\n\\nThe `y` prop defines the y coordinate to use as a basis for positioning the tooltip element.\\n\\n[flyout]: /docs/victory-primitives#flyout\\n[victorylabel]: /docs/victory-label\\n[victoryportal]: /docs/victory-portal\\n[victorycontainer]: /docs/victory-container\\n[portal]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-portal/portal.js\\n[approximate text size]: https://github.com/FormidableLabs/victory/blob/master/packages/victory-core/src/victory-util/textsize.js\\n\"},{\"data\":{\"id\":28,\"title\":\"VictoryTransition\",\"category\":\"more\",\"type\":\"docs\",\"scope\":null,\"subHeadings\":[{\"type\":\"heading\",\"value\":\"VictoryTransition\",\"depth\":1,\"slug\":\"victory-transition\"},{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"animationWhitelist\",\"depth\":2,\"slug\":\"animation-whitelist\"}],\"slug\":\"victory-transition\",\"sidebarTree\":[{\"type\":\"heading\",\"value\":\"VictoryTransition\",\"depth\":1,\"slug\":\"victory-transition\",\"category\":\"more\",\"children\":[{\"type\":\"heading\",\"value\":\"children\",\"depth\":2,\"slug\":\"children\"},{\"type\":\"heading\",\"value\":\"animate\",\"depth\":2,\"slug\":\"animate\"},{\"type\":\"heading\",\"value\":\"animationWhitelist\",\"depth\":2,\"slug\":\"animation-whitelist\"}]}]},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 28\\ntitle: VictoryTransition\\ncategory: more\\ntype: docs\\nscope: null\\n---\\n\\n# VictoryTransition\\n\\n`VictoryTransition` wraps a single child component in `VictoryAnimation`. In addition to animating the child component, it will also handle transitions for any entering and exiting nodes via the `onEnter` and `onExit` and `onLoad` transitions defined on its `animate` prop.\\n\\n## children\\n\\n`type: element`\\n\\n`VictoryTransition` adds transitions to a single child.\\n\\n## animate\\n\\n`type: object || boolean`\\n\\nThe `animate` prop specifies props for VictoryAnimation and VictoryTransition to use. The animate prop may be used to specify the duration, delay and easing of an animation as well as the behavior of `onEnter` and `onExit` and `onLoad` transitions. Each Victory component defines its own default transitions, but these may be modified, or overwritten with the `animate` prop.\\n\\n_examples:_ `animate={{duration: 2000, onLoad: {duration: 1000}, onEnter: {duration: 500, before: () => ({y: 0})}}}`\\n\\n## animationWhitelist\\n\\n`type: array[string]`\\n\\nThe `animationWhitelist` defines a list of props to animate on the child. This prop should be given as an array of strings.\\n\",\"content\":\"\\n# VictoryTransition\\n\\n`VictoryTransition` wraps a single child component in `VictoryAnimation`. In addition to animating the child component, it will also handle transitions for any entering and exiting nodes via the `onEnter` and `onExit` and `onLoad` transitions defined on its `animate` prop.\\n\\n## children\\n\\n`type: element`\\n\\n`VictoryTransition` adds transitions to a single child.\\n\\n## animate\\n\\n`type: object || boolean`\\n\\nThe `animate` prop specifies props for VictoryAnimation and VictoryTransition to use. The animate prop may be used to specify the duration, delay and easing of an animation as well as the behavior of `onEnter` and `onExit` and `onLoad` transitions. Each Victory component defines its own default transitions, but these may be modified, or overwritten with the `animate` prop.\\n\\n_examples:_ `animate={{duration: 2000, onLoad: {duration: 1000}, onEnter: {duration: 500, before: () => ({y: 0})}}}`\\n\\n## animationWhitelist\\n\\n`type: array[string]`\\n\\nThe `animationWhitelist` defines a list of props to animate on the child. This prop should be given as an array of strings.\\n\"}]},\"path\":\"guides/tooltips\",\"sharedData\":{},\"siteData\":{\"default\":{\"siteTitle\":\"Victory\",\"siteDescription\":\"Victory Documentation\",\"siteTitleAlt\":\"Victory.js React Charting Library\",\"siteLogo\":\"/logos/favicon.ico\",\"siteUrl\":\"https://formidable.com\",\"pathPrefix\":\"/open-source/victory\",\"googleAnalyticsID\":\"UA-43290258-1\",\"projectLinks\":[{\"label\":\"Support\",\"url\":\"https://spectrum.chat/victory\"},{\"label\":\"GitHub\",\"url\":\"https://github.com/FormidableLabs/victory\"}],\"copyright\":\"Copyright \u00A9 2020 Formidable\",\"themeColor\":\"#c62828\",\"backgroundColor\":\"#e0e0e0\"}}}");</script><script defer="" type="text/javascript" src="/open-source/victory/templates/vendors~Users/boygirl/formidable/victory-docs/src/pages/docs-template~Users/boygirl/formidable/victo~7ead4de9.b3fc58d6.js"></script><script defer="" type="text/javascript" src="/open-source/victory/templates/vendors~Users/boygirl/formidable/victory-docs/src/pages/docs-template~Users/boygirl/formidable/victo~ce453408.ffacf172.js"></script><script defer="" type="text/javascript" src="/open-source/victory/templates/vendors~Users/boygirl/formidable/victory-docs/src/pages/docs-template~Users/boygirl/formidable/victo~727b74ae.86d9b9c4.js"></script><script defer="" type="text/javascript" src="/open-source/victory/templates/vendors~Users/boygirl/formidable/victory-docs/src/pages/docs-template~Users/boygirl/formidable/victo~9b02791a.9be5130a.js"></script><script defer="" type="text/javascript" src="/open-source/victory/templates/Users/boygirl/formidable/victory-docs/src/pages/docs-template.e6e56864.js"></script><script defer="" type="text/javascript" src="/open-source/victory/templates/vendors~main.eb5ac263.js"></script><script defer="" type="text/javascript" src="/open-source/victory/main.5fa20c48.js"></script></body></html>