cl-react-graph
Version:
React D3 Charts
32 lines • 58.3 kB
HTML
<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><meta name="generator" content="Gatsby 4.25.7"/><style data-href="/cl-react-graph/styles.5647b5d282663a205155.css" data-identity="gatsby-global-css">@font-face{font-family:Circular;src:url(/cl-react-graph/static/CircularStd-Medium-9ffafeddf192e8c8a11189dcf85883c6.otf)}@font-face{font-family:ProximaNova;src:url("/cl-react-graph/static/Proxima Nova Light-a5d2f11491b95c96d67277c5958c0616.ttf")}body{font-family:ProximaNova}h1,h2{font-family:Circular}</style><style data-styled="" data-styled-version="5.3.3">.cqBkYw{color:#aaa;}/*!sc*/
data-styled.g1[id="Footer__StyledFooter-sc-1jzmar1-0"]{content:"cqBkYw,"}/*!sc*/
.cDWUKR{margin:0;font-size:1.3rem;font-weight:300;margin:0 1rem;}/*!sc*/
data-styled.g2[id="Navbar__H1-sc-1ys9ku-0"]{content:"cDWUKR,"}/*!sc*/
.kWLZbw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-text-decoration:none !important;text-decoration:none !important;}/*!sc*/
.kWLZbw h1{color:hsla(213,4%,54%,1);}/*!sc*/
data-styled.g3[id="Navbar__TitleLink-sc-1ys9ku-1"]{content:"kWLZbw,"}/*!sc*/
.giAkAV{margin-bottom:1rem;}/*!sc*/
.giAkAV ul{list-style:none;padding:0;}/*!sc*/
.giAkAV li{padding:0;margin:0;}/*!sc*/
.giAkAV h2{margin:0 1rem 0.75rem 1rem;font-size:1.1rem;}/*!sc*/
data-styled.g4[id="MenuItems__Section-sc-mxwozl-0"]{content:"giAkAV,"}/*!sc*/
.icyBlz{padding:0.5rem 2rem;-webkit-text-decoration:none;text-decoration:none;display:block;color:hsla(206,4%,36%,1);}/*!sc*/
data-styled.g5[id="MenuItems__MenuItem-sc-mxwozl-1"]{content:"icyBlz,"}/*!sc*/
.fKuPxd{background-color:#fff;border-right:1px solid hsla(210,31%,90%,1);padding:1.75rem 0;}/*!sc*/
@media (max-width:640px){.fKuPxd{display:none;}}/*!sc*/
data-styled.g6[id="SideMenu__Bg-sc-1v6nn7o-0"]{content:"fKuPxd,"}/*!sc*/
.fQgQNj{color:hsla(213,4%,54%,1);}/*!sc*/
data-styled.g7[id="Layout__Context-sc-1ulvp9i-0"]{content:"fQgQNj,"}/*!sc*/
.eopmYB{display:grid;grid-template-columns:1fr 1fr;}/*!sc*/
@media (max-width:640px){.eopmYB{grid-template-columns:1fr;}}/*!sc*/
data-styled.g8[id="TwoColumns-sc-1oyhsq-0"]{content:"eopmYB,"}/*!sc*/
</style></head><body><div id="___gatsby"><div style="outline:none" tabindex="-1" id="gatsby-focus-wrapper"><div class="Layout__Context-sc-1ulvp9i-0 fQgQNj"><div style="display:flex;align-items:center;width:100%;justify-content:space-between"><div style="width:35rem;display:flex;align-items:center"><a class="Navbar__TitleLink-sc-1ys9ku-1 kWLZbw" href="/cl-react-graph/"><svg role="img" height="35" width="35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35"><g><path fill="hsla(208, 69%, 66%, 1)" d="M28.48,10.92H24.09V6.79A6.6,6.6,0,0,0,17.51.21h0a6.6,6.6,0,0,0-6.57,6.58v4.13h4.42a8.76,8.76,0,0,1,8.76,8.76v4.4h4.36a6.6,6.6,0,0,0,6.57-6.58h0A6.6,6.6,0,0,0,28.48,10.92Z"></path><path fill="hsla(29, 92%, 57%, 1)" d="M19.7,24.08a8.76,8.76,0,0,1-8.76-8.76v-4.4H6.58A6.6,6.6,0,0,0,0,17.5H0a6.6,6.6,0,0,0,6.58,6.58H11v4.13a6.6,6.6,0,0,0,6.58,6.58h0a6.6,6.6,0,0,0,6.58-6.58V24.08H19.7Z"></path><path fill="hsla(216, 60%, 18%, 1)" d="M15.36,10.92H10.94v4.4a8.76,8.76,0,0,0,8.76,8.76h4.42v-4.4A8.76,8.76,0,0,0,15.36,10.92Z"></path></g></svg><h1 class="Navbar__H1-sc-1ys9ku-0 cDWUKR">Cl React Graphs</h1></a></div></div><div style="display:grid;grid-template-columns:20rem 1fr;grid-gap:1rem"><div class="SideMenu__Bg-sc-1v6nn7o-0 fKuPxd"><div class="MenuItems__Section-sc-mxwozl-0 giAkAV"><h2>Getting Started</h2><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/getting-started">Getting started</a></div><div class="MenuItems__Section-sc-mxwozl-0 giAkAV"><h2>Common Components</h2><ul><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/axis">Axis</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/area-fill">Area fill</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/bars">Bars</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/brush">Brush</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/grid">Grid</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/label">Label</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/line">Line</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/path">Path</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/point">Point</a></li></ul></div><div class="MenuItems__Section-sc-mxwozl-0 giAkAV"><h2>Charts</h2><ul><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/bar-chart">Bar chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/chord">Chord</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/histogram">Histogram</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/joyplot">Joyplot</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/line">Line chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/map">Map</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/pie">Pie chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/radar">Radar chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/scatter">Scatter chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/tornado">Tornado chart</a></li><li><a class="MenuItems__MenuItem-sc-mxwozl-1 icyBlz" href="/cl-react-graph/upset">Upset chart</a></li></ul></div></div><main><h2>Bars</h2><div class="TwoColumns-sc-1oyhsq-0 eopmYB"><div><h3>Using a custom label</h3><p>The label assigned after each bar can be customized with a new component. In the example below we increase its font size:</p><pre class="prism-code language-jsx" style="background-color:#faf8f5;color:#728fcb;padding:1rem;max-width:37rem"><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"> TLabelComponent</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> EChartDirection </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">from</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'cl-react-graph'</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">CustomLabel</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token function-variable function" style="color:#b29762">TLabelComponent</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token parameter punctuation" style="color:#b6ad9a">{</span><span class="token parameter"></span></div><div class="token-line" style="color:#728fcb"><span class="token parameter"> direction</span><span class="token parameter punctuation" style="color:#b6ad9a">,</span><span class="token parameter"></span></div><div class="token-line" style="color:#728fcb"><span class="token parameter"> inverse</span><span class="token parameter punctuation" style="color:#b6ad9a">,</span><span class="token parameter"></span></div><div class="token-line" style="color:#728fcb"><span class="token parameter"> fill</span><span class="token parameter punctuation" style="color:#b6ad9a">,</span><span class="token parameter"></span></div><div class="token-line" style="color:#728fcb"><span class="token parameter"> label</span><span class="token parameter punctuation" style="color:#b6ad9a">,</span><span class="token parameter"></span></div><div class="token-line" style="color:#728fcb"><span class="token parameter"> item</span><span class="token parameter punctuation" style="color:#b6ad9a">,</span><span class="token parameter"></span></div><div class="token-line" style="color:#728fcb"><span class="token parameter"></span><span class="token parameter punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> offset </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> direction </span><span class="token operator" style="color:#063289">===</span><span class="token plain"> EChartDirection</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token constant">VERTICAL</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token operator" style="color:#063289">?</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'0, -5'</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token operator" style="color:#063289">:</span><span class="token plain"> inverse </span><span class="token operator" style="color:#063289">?</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'-5, 0'</span><span class="token plain"> </span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'5, 0'</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> textAnchor </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> direction </span><span class="token operator" style="color:#063289">===</span><span class="token plain"> EChartDirection</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token constant">VERTICAL</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token operator" style="color:#063289">?</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'middle'</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token operator" style="color:#063289">:</span><span class="token plain"> inverse </span><span class="token operator" style="color:#063289">?</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'end'</span><span class="token plain"> </span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'left'</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token tag punctuation" style="color:#b6ad9a"><</span><span class="token tag" style="color:#063289">g</span><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">transform</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript template-string template-punctuation string" style="color:#728fcb">`</span><span class="token tag script language-javascript template-string string" style="color:#728fcb">translate(</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#b6ad9a">${</span><span class="token tag script language-javascript template-string interpolation" style="color:#063289">offset</span><span class="token tag script language-javascript template-string interpolation interpolation-punctuation punctuation" style="color:#b6ad9a">}</span><span class="token tag script language-javascript template-string string" style="color:#728fcb">)</span><span class="token tag script language-javascript template-string template-punctuation string" style="color:#728fcb">`</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">role</span><span class="token tag attr-value punctuation attr-equals" style="color:#b6ad9a">=</span><span class="token tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag attr-value" style="color:#728fcb">cell</span><span class="token tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag punctuation" style="color:#b6ad9a">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#b6ad9a"><</span><span class="token tag" style="color:#063289">text</span><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">textAnchor</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">textAnchor</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">fill</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">fill</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">fontSize</span><span class="token tag attr-value punctuation attr-equals" style="color:#b6ad9a">=</span><span class="token tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag attr-value" style="color:#728fcb">1rem</span><span class="token tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag punctuation" style="color:#b6ad9a">></span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> label </span><span class="token operator" style="color:#063289">??</span><span class="token plain"> </span><span class="token template-string template-punctuation string" style="color:#728fcb">`</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#b6ad9a">${</span><span class="token template-string interpolation">Math</span><span class="token template-string interpolation punctuation" style="color:#b6ad9a">.</span><span class="token template-string interpolation function" style="color:#b29762">round</span><span class="token template-string interpolation punctuation" style="color:#b6ad9a">(</span><span class="token template-string interpolation function" style="color:#b29762">Number</span><span class="token template-string interpolation punctuation" style="color:#b6ad9a">(</span><span class="token template-string interpolation">item</span><span class="token template-string interpolation punctuation" style="color:#b6ad9a">.</span><span class="token template-string interpolation">percentage</span><span class="token template-string interpolation punctuation" style="color:#b6ad9a">)</span><span class="token template-string interpolation punctuation" style="color:#b6ad9a">)</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#b6ad9a">}</span><span class="token template-string string" style="color:#728fcb">%</span><span class="token template-string template-punctuation string" style="color:#728fcb">`</span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token plain-text"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#b6ad9a"></</span><span class="token tag" style="color:#063289">text</span><span class="token tag punctuation" style="color:#b6ad9a">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#b6ad9a"></</span><span class="token tag" style="color:#063289">g</span><span class="token tag punctuation" style="color:#b6ad9a">></span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token tag punctuation" style="color:#b6ad9a"><</span><span class="token tag class-name" style="color:#063289">Bars</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">...</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">LabelComponent</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">CustomLabel</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag punctuation" style="color:#b6ad9a">/></span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div></pre><h3>Color Schemes</h3><p>The colorScheme prop is an array of items. Each bin item will be filled with the corresponding color scheme item</p><p>Each item can be a string representing a solid fill, or an object to specify a linear fill</p><pre class="prism-code language-jsx" style="background-color:#faf8f5;color:#728fcb;padding:1rem;max-width:37rem"><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> scheme </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">gradientTransform</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'rotate(90)'</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">stops</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">offset</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">"5%"</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">stopColor</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> theme</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token plain">green700 </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">offset</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">"95%"</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">stopColor</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> theme</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token plain">green500 </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">stops</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">offset</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">"5%"</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">stopColor</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> theme</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token plain">brightBlue700 </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">offset</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">"95%"</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">stopColor</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> theme</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token plain">brightBlue300 </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token tag punctuation" style="color:#b6ad9a"><</span><span class="token tag class-name" style="color:#063289">Bars</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">...</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">colorScheme</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">scheme</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag punctuation" style="color:#b6ad9a">/></span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div></pre><p></p></div><pre class="prism-code language-jsx" style="background-color:#faf8f5;color:#728fcb;padding:1rem;max-width:37rem"><div class="token-line" style="color:#728fcb"><span class="token keyword" style="color:#728fcb">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> Bars</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> Base</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> EChartDirection</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> EGroupedBarLayout</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> BarChartData</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> useHistogramDomain</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> useWidth</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">from</span><span class="token plain"> 'cl</span><span class="token operator" style="color:#063289">-</span><span class="token plain">react</span><span class="token operator" style="color:#063289">-</span><span class="token plain">graph</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">data</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> BarChartData </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">bins</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token string" style="color:#728fcb">'Female'</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'Male'</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'Other'</span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">counts</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">data</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token number" style="color:#063289">79200</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token number" style="color:#063289">52400</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token number" style="color:#063289">13300</span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">label</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'Baseline'</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">data</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token number" style="color:#063289">60000</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token number" style="color:#063289">34230</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token number" style="color:#063289">10000</span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">label</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'Filtered'</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"></span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:#b29762">MyComponent</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token plain">ref</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> width</span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token plain"> </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token function" style="color:#b29762">useWidth</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token string" style="color:#728fcb">'90%'</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> groupLayout </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> EGroupedBarLayout</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token constant">GROUPED</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">const</span><span class="token plain"> domain </span><span class="token operator" style="color:#063289">=</span><span class="token plain"> </span><span class="token function" style="color:#b29762">useHistogramDomain</span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token punctuation" style="color:#b6ad9a">{</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">groupLayout</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> groupLayout</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">bins</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> data</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token plain">bins</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">values</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> data</span><span class="token punctuation" style="color:#b6ad9a">.</span><span class="token plain">counts</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token literal-property property" style="color:#b29762">tickValues</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">[</span><span class="token punctuation" style="color:#b6ad9a">]</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">}</span><span class="token punctuation" style="color:#b6ad9a">)</span><span class="token punctuation" style="color:#b6ad9a">;</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain" style="display:inline-block">
</span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token keyword" style="color:#728fcb">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#b6ad9a">(</span><span class="token plain"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain"> </span><span class="token tag punctuation" style="color:#b6ad9a"><</span><span class="token tag" style="color:#063289">div</span><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">ref</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">ref</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag punctuation" style="color:#b6ad9a">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#b6ad9a"><</span><span class="token tag class-name" style="color:#063289">Base</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">width</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">width</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">height</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript number" style="color:#063289">220</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag punctuation" style="color:#b6ad9a">></span><span class="token plain-text"></span></div><div class="token-line" style="color:#728fcb"><span class="token plain-text"> </span><span class="token tag punctuation" style="color:#b6ad9a"><</span><span class="token tag class-name" style="color:#063289">BarsComponent</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">bins</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">data</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">.</span><span class="token tag script language-javascript" style="color:#063289">bins</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">colorScheme</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">[</span><span class="token tag script language-javascript" style="color:#063289">theme</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">.</span><span class="token tag script language-javascript" style="color:#063289">green900</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">,</span><span class="token tag script language-javascript" style="color:#063289"> theme</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">.</span><span class="token tag script language-javascript" style="color:#063289">brightBlue800</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">]</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">direction</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">EChartDirection</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">.</span><span class="token tag script language-javascript constant" style="color:#063289">HORIZONTAL</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span class="token tag attr-name" style="color:#896724">domain</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289">domain</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag" style="color:#063289"> </span><span