cl-react-graph
Version:
React D3 Charts
30 lines • 67.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>Histogram Chart</h2><h3>Horizontal</h3><div class="TwoColumns-sc-1oyhsq-0 eopmYB"><div></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"> 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"> ELabelOrientation</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"> Histogram</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"> IGrid</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"> HistogramData</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"> SVGLineStyle</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"> HistogramData </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 punctuation" style="color:#b6ad9a">[</span><span class="token number" style="color:#063289">0</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token number" style="color:#063289">50</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 punctuation" style="color:#b6ad9a">[</span><span class="token number" style="color:#063289">50</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token number" style="color:#063289">150</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 punctuation" style="color:#b6ad9a">[</span><span class="token number" style="color:#063289">150</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token number" style="color:#063289">300</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 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">500</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token number" style="color:#063289">2000</span><span class="token punctuation" style="color:#b6ad9a">,</span><span class="token plain"> </span><span class="token number" style="color:#063289">1500</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 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">lineStyle</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> SVGLineStyle </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">fill</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'#000'</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">opacity</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">1</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">shapeRendering</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'auto'</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">stroke</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'#000'</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">strokeOpacity</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">1</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">strokeWidth</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">1</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">visible</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'true'</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 literal-property property" style="color:#b29762">grid</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> IGrid </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">x</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">height</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">1</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">style</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 operator" style="color:#063289">...</span><span class="token plain">lineStyle</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">fill</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'none'</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">stroke</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'#bbb'</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">strokeOpacity</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">0.7</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">strokeWidth</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">1</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 literal-property property" style="color:#b29762">ticks</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">5</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">visible</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token boolean" style="color:#728fcb">true</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 literal-property property" style="color:#b29762">y</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">style</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 operator" style="color:#063289">...</span><span class="token plain">lineStyle</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">fill</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'none'</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">stroke</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token string" style="color:#728fcb">'#bbb'</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">strokeOpacity</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">0.7</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">strokeWidth</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">5</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 literal-property property" style="color:#b29762">ticks</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token number" style="color:#063289">5</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">visible</span><span class="token operator" style="color:#063289">:</span><span class="token plain"> </span><span class="token boolean" style="color:#728fcb">true</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" 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">Histogram</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">animation</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"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript" style="color:#063289"> </span><span class="token tag script language-javascript literal-property property" style="color:#b29762">duration</span><span class="token tag script language-javascript operator" style="color:#063289">:</span><span class="token tag script language-javascript" style="color:#063289"> </span><span class="token tag script language-javascript number" style="color:#063289">300</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">,</span><span class="token tag script language-javascript" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript" style="color:#063289"> </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">showLabels</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 boolean" style="color:#728fcb">true</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">,</span><span class="token tag script language-javascript" style="color:#063289"> </span><span class="token tag script language-javascript boolean" style="color:#728fcb">true</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">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 punctuation" style="color:#b6ad9a">(</span><span class="token tag script language-javascript parameter punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript parameter" style="color:#063289"> item </span><span class="token tag script language-javascript parameter 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"> </span><span class="token tag script language-javascript operator" style="color:#063289">=></span><span class="token tag script language-javascript" style="color:#063289"> </span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript" style="color:#063289"> </span><span class="token tag script language-javascript keyword" style="color:#728fcb">return</span><span class="token tag script language-javascript" style="color:#063289"> </span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a"><</span><span class="token tag script language-javascript tag" style="color:#063289">g</span><span class="token tag script language-javascript tag" style="color:#063289"> </span><span class="token tag script language-javascript tag attr-name" style="color:#896724">transform</span><span class="token tag script language-javascript tag attr-value punctuation attr-equals" style="color:#b6ad9a">=</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag script language-javascript tag attr-value" style="color:#728fcb">translate(0, -10)</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a">></span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a"><</span><span class="token tag script language-javascript tag" style="color:#063289">g</span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a">></span><span class="token tag script language-javascript plain-text" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript plain-text" style="color:#063289"> </span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a"><</span><span class="token tag script language-javascript tag" style="color:#063289">circle</span><span class="token tag script language-javascript tag" style="color:#063289"> </span><span class="token tag script language-javascript tag attr-name" style="color:#896724">dy</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript tag script language-javascript number" style="color:#063289">10</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag script language-javascript tag" style="color:#063289"> </span><span class="token tag script language-javascript tag attr-name" style="color:#896724">r</span><span class="token tag script language-javascript tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">{</span><span class="token tag script language-javascript tag script language-javascript number" style="color:#063289">4</span><span class="token tag script language-javascript tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag script language-javascript tag" style="color:#063289"> </span><span class="token tag script language-javascript tag attr-name" style="color:#896724">fill</span><span class="token tag script language-javascript tag attr-value punctuation attr-equals" style="color:#b6ad9a">=</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag script language-javascript tag attr-value" style="color:#728fcb">red</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a">></span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a"></</span><span class="token tag script language-javascript tag" style="color:#063289">circle</span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a">></span><span class="token tag script language-javascript plain-text" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript plain-text" style="color:#063289"> </span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a"><</span><span class="token tag script language-javascript tag" style="color:#063289">text</span><span class="token tag script language-javascript tag" style="color:#063289"> </span><span class="token tag script language-javascript tag attr-name" style="color:#896724">dx</span><span class="token tag script language-javascript tag attr-value punctuation attr-equals" style="color:#b6ad9a">=</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag script language-javascript tag attr-value" style="color:#728fcb">10</span><span class="token tag script language-javascript tag attr-value punctuation" style="color:#b6ad9a">"</span><span class="token tag script language-javascript tag 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">item</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">.</span><span class="token tag script language-javascript" style="color:#063289">percentage</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">}</span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a"></</span><span class="token tag script language-javascript tag" style="color:#063289">text</span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a">></span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a"></</span><span class="token tag script language-javascript tag" style="color:#063289">g</span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a">></span><span class="token tag script language-javascript plain-text" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript plain-text" style="color:#063289"> </span><span class="token tag script language-javascript tag punctuation" style="color:#b6ad9a"></</span><span class="token tag script language-javascript tag" style="color:#063289">g</span><span class="token tag script language-javascript tag 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"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript" style="color:#063289"> </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">data</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" 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">400</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">grid</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">grid</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">xAxisLabelOrientation</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">ELabelOrientation</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">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><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">div</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 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></div><h3>Vertical</h3><div class="TwoColumns-sc-1oyhsq-0 eopmYB"><div></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 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">Histogram</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">animation</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"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript" style="color:#063289"> </span><span class="token tag script language-javascript literal-property property" style="color:#b29762">duration</span><span class="token tag script language-javascript operator" style="color:#063289">:</span><span class="token tag script language-javascript" style="color:#063289"> </span><span class="token tag script language-javascript number" style="color:#063289">300</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">,</span><span class="token tag script language-javascript" style="color:#063289"></span></div><div class="token-line" style="color:#728fcb"><span class="token tag script language-javascript" style="color:#063289"> </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">showLabels</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 boolean" style="color:#728fcb">true</span><span class="token tag script language-javascript punctuation" style="color:#b6ad9a">,</span><span class="token tag script language-javascript" style="color:#063289"> </span><span class="token tag script language-javascript boolean" style="color:#728fcb">true</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">LabelComponent</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#b6ad9a">=