<!DOCTYPE html><html lang="en"><head><meta name="generator" content="React Static"/><title data-react-helmet="true">Victory |  Stacked Bars with Central Axis</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/gallery-item-template.287fb1ca.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="WdYRl eGyXoj ipGteU cQfeck dXouTZ eqPUGv WOpjk hzttor irvzTL WDyIt lTuPy fnrBau cRIOsJ dolsWa ckDzQE SGjya cnLZdZ iUbtmI cftQis hWjtUH cKIaJp bbzcNn hJWFJp habPzd 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-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 */
.WdYRl{position:relative;margin-left:2.8rem;margin-top:6.4rem;} @media only screen and (min-width:960px){.WdYRl{margin-left:calc(2.8rem + 0rem);}}
/* sc-component-id: sc-kkGfuU */
.eGyXoj{left:2.8rem;position:fixed;top:0;width:calc(100% - 2.8rem);z-index:4;} @media only screen and (min-width:960px){.eGyXoj{left:calc(2.8rem + 0rem);width:calc(100% - 2.8rem - 0rem);}}
/* 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 */
.iUbtmI{display:none;} @media only screen and (min-width:960px){.iUbtmI{display:none;}}
/* 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="iiZczE hswDRW" 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-TOsTZ */
.iiZczE .inner-ring,.iiZczE .outer-ring{-webkit-transition:0.3s;transition:0.3s;} .iiZczE:hover .inner-ring{opacity:0.3;} .iiZczE: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 WdYRl Page-content"><header class="sc-bdVaJa ipGteU sc-kkGfuU eGyXoj"><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 WDyIt" href="/open-source/victory/docs">Docs</a><a class="sc-gzVnrw lTuPy" 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 iUbtmI"><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-TOsTZ iiZczE"><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">No Results</p></nav></aside><article class="sc-jWBwVP lfIbPe"><div class="sc-brqgnP JONJM"><a href="/open-source/victory/gallery">Back to Gallery</a><h1>Stacked Bars with Central Axis</h1><div><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></div></article></main></div><script type="text/javascript">
    window.__routeInfo = JSON.parse("{\"template\":\"/Users/boygirl/formidable/victory-docs/src/pages/gallery-item-template\",\"sharedHashesByProp\":{},\"data\":{\"galleryItem\":{\"data\":{\"id\":11,\"title\":\"Stacked Bars with Central Axis\",\"subHeadings\":[],\"slug\":\"stacked-bars-with-central-axis\"},\"messages\":[],\"history\":[],\"cwd\":\"/Users/boygirl/formidable/victory-docs\",\"contents\":\"---\\nid: 11\\ntitle: Stacked Bars with Central Axis\\n---\\n\\n```playground_norender\\nconst dataA = [\\n  { x: \\\"Personal Drones\\\", y: 57 },\\n  { x: \\\"Smart Thermostat\\\", y: 40 },\\n  { x: \\\"Television\\\", y: 38 },\\n  { x: \\\"Smartwatch\\\", y: 37 },\\n  { x: \\\"Fitness Monitor\\\", y: 25 },\\n  { x: \\\"Tablet\\\", y: 19 },\\n  { x: \\\"Camera\\\", y: 15 },\\n  { x: \\\"Laptop\\\", y: 13 },\\n  { x: \\\"Phone\\\", y: 12 }\\n];\\n\\nconst dataB = dataA.map((point) => {\\n  const y = Math.round(point.y + 3 * (Math.random() - 0.5));\\n  return { ...point, y };\\n});\\n\\nconst width = 400;\\nconst height = 400;\\n\\nclass App extends React.Component {\\n\\n  render() {\\n    return (\\n      <VictoryChart horizontal\\n        height={height}\\n        width={width}\\n        padding={40}\\n      >\\n        <VictoryStack\\n          style={{ data: { width: 25 }, labels: { fontSize: 15 } }}\\n        >\\n          <VictoryBar\\n            style={{ data: { fill: \\\"tomato\\\" } }}\\n            data={dataA}\\n            y={(data) => (-Math.abs(data.y))}\\n            labels={({ datum }) => (`${Math.abs(datum.y)}%`)}\\n          />\\n          <VictoryBar\\n            style={{ data: { fill: \\\"orange\\\" } }}\\n            data={dataB}\\n            labels={({ datum }) => (`${Math.abs(datum.y)}%`)}\\n          />\\n        </VictoryStack>\\n\\n        <VictoryAxis\\n          style={{\\n            axis: { stroke: \\\"transparent\\\" },\\n            ticks: { stroke: \\\"transparent\\\" },\\n            tickLabels: { fontSize: 15, fill: \\\"black\\\" }\\n          }}\\n          /*\\n            Use a custom tickLabelComponent with\\n            an absolutely positioned x value to position\\n            your tick labels in the center of the chart. The correct\\n            y values are still provided by VictoryAxis for each tick\\n          */\\n          tickLabelComponent={\\n            <VictoryLabel\\n              x={width / 2}\\n              textAnchor=\\\"middle\\\"\\n            />\\n          }\\n          tickValues={dataA.map((point) => point.x).reverse()}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\",\"content\":\"\\n```playground_norender\\nconst dataA = [\\n  { x: \\\"Personal Drones\\\", y: 57 },\\n  { x: \\\"Smart Thermostat\\\", y: 40 },\\n  { x: \\\"Television\\\", y: 38 },\\n  { x: \\\"Smartwatch\\\", y: 37 },\\n  { x: \\\"Fitness Monitor\\\", y: 25 },\\n  { x: \\\"Tablet\\\", y: 19 },\\n  { x: \\\"Camera\\\", y: 15 },\\n  { x: \\\"Laptop\\\", y: 13 },\\n  { x: \\\"Phone\\\", y: 12 }\\n];\\n\\nconst dataB = dataA.map((point) => {\\n  const y = Math.round(point.y + 3 * (Math.random() - 0.5));\\n  return { ...point, y };\\n});\\n\\nconst width = 400;\\nconst height = 400;\\n\\nclass App extends React.Component {\\n\\n  render() {\\n    return (\\n      <VictoryChart horizontal\\n        height={height}\\n        width={width}\\n        padding={40}\\n      >\\n        <VictoryStack\\n          style={{ data: { width: 25 }, labels: { fontSize: 15 } }}\\n        >\\n          <VictoryBar\\n            style={{ data: { fill: \\\"tomato\\\" } }}\\n            data={dataA}\\n            y={(data) => (-Math.abs(data.y))}\\n            labels={({ datum }) => (`${Math.abs(datum.y)}%`)}\\n          />\\n          <VictoryBar\\n            style={{ data: { fill: \\\"orange\\\" } }}\\n            data={dataB}\\n            labels={({ datum }) => (`${Math.abs(datum.y)}%`)}\\n          />\\n        </VictoryStack>\\n\\n        <VictoryAxis\\n          style={{\\n            axis: { stroke: \\\"transparent\\\" },\\n            ticks: { stroke: \\\"transparent\\\" },\\n            tickLabels: { fontSize: 15, fill: \\\"black\\\" }\\n          }}\\n          /*\\n            Use a custom tickLabelComponent with\\n            an absolutely positioned x value to position\\n            your tick labels in the center of the chart. The correct\\n            y values are still provided by VictoryAxis for each tick\\n          */\\n          tickLabelComponent={\\n            <VictoryLabel\\n              x={width / 2}\\n              textAnchor=\\\"middle\\\"\\n            />\\n          }\\n          tickValues={dataA.map((point) => point.x).reverse()}\\n        />\\n      </VictoryChart>\\n    );\\n  }\\n}\\n\\nReactDOM.render(<App/>, mountNode);\\n```\\n\"}},\"path\":\"gallery/stacked-bars-with-central-axis\",\"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/gallery-item-template.287fb1ca.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>