1"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[4035],{1056:(e,a,t)=>{t.d(a,{R:()=>n,x:()=>l});var r=t(2155);const s={},o=r.createContext(s);function n(e){const a=r.useContext(o);return r.useMemo((function(){return"function"==typeof e?e(a):{...a,...e}}),[a,e])}function l(e){let a;return a=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:n(e.components),r.createElement(o.Provider,{value:a},e.children)}},6254:(e,a,t)=>{t.r(a),t.d(a,{assets:()=>c,contentTitle:()=>i,default:()=>h,frontMatter:()=>l,metadata:()=>r,toc:()=>p});const r=JSON.parse('{"id":"examples/stepped-area-chart","title":"Stepped Area Chart","description":"Example of stepped area chart in react-google-charts.","source":"@site/docs/examples/stepped-area-chart.mdx","sourceDirName":"examples","slug":"/examples/stepped-area-chart","permalink":"/examples/stepped-area-chart","draft":false,"unlisted":false,"editUrl":"https://github.com/RakanNimer/react-google-charts/edit/master/website/docs/examples/stepped-area-chart.mdx","tags":[{"inline":true,"label":"Stepped Area Chart","permalink":"/tags/stepped-area-chart"}],"version":"current","frontMatter":{"description":"Example of stepped area chart in react-google-charts.","tags":["Stepped Area Chart"]},"sidebar":"defaultSidebar","previous":{"title":"Scatter Chart","permalink":"/examples/scatter-chart"},"next":{"title":"Table","permalink":"/examples/table"}}');var s=t(5723),o=t(1056),n=t(7957);const l={description:"Example of stepped area chart in react-google-charts.",tags:["Stepped Area Chart"]},i="Stepped Area Chart",c={},p=[{value:"Simple Example",id:"simple-example",level:2},{value:"100 Percent Stacked Stepped Area",id:"100-percent-stacked-stepped-area",level:2},{value:"Read More",id:"read-more",level:2}];function d(e){const a={a:"a",h1:"h1",h2:"h2",header:"header",li:"li",ul:"ul",...(0,o.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(a.header,{children:(0,s.jsx)(a.h1,{id:"stepped-area-chart",children:"Stepped Area Chart"})}),"\n",(0,s.jsx)(a.h2,{id:"simple-example",children:"Simple Example"}),"\n",(0,s.jsx)(n.A,{children:({branch:e,theme:a})=>(0,s.jsx)("iframe",{src:`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${e}/sandboxes/stepped-area-chart/default?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${a}`,style:{width:"100%",height:"500px",border:0,borderRadius:"4px",overflow:"hidden"},title:"RakanNimer/react-google-charts: Stepped Area Chart Simple Example",allow:"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking",sandbox:"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts",loading:"lazy"})}),"\n",(0,s.jsx)(a.h2,{id:"100-percent-stacked-stepped-area",children:"100 Percent Stacked Stepped Area"}),"\n",(0,s.jsx)(n.A,{children:({branch:e,theme:a})=>(0,s.jsx)("iframe",{src:`https://codesandbox.io/embed/github/RakanNimer/react-google-charts/tree/${e}/sandboxes/stepped-area-chart/stacked?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${a}`,style:{width:"100%",height:"500px",border:0,borderRadius:"4px",overflow:"hidden"},title:"RakanNimer/react-google-charts: Stepped Area Chart 100 Percent Stacked Stepped Area",allow:"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking",sandbox:"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts",loading:"lazy"})}),"\n",(0,s.jsx)(a.h2,{id:"read-more",children:"Read More"}),"\n",(0,s.jsxs)(a.ul,{children:["\n",(0,s.jsx)(a.li,{children:(0,s.jsx)(a.a,{href:"https://developers.google.com/chart/interactive/docs/gallery/steppedareachart#data-format",children:"Data Format"})}),"\n",(0,s.jsx)(a.li,{children:(0,s.jsx)(a.a,{href:"https://developers.google.com/chart/interactive/docs/gallery/steppedareachart#configuration-options",children:"Configuration Options"})}),"\n",(0,s.jsx)(a.li,{children:(0,s.jsx)(a.a,{href:"https://developers.google.com/chart/interactive/docs/gallery/steppedareachart",children:"Reference"})}),"\n"]})]})}function h(e={}){const{wrapper:a}={...(0,o.R)(),...e.components};return a?(0,s.jsx)(a,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},7957:(e,a,t)=>{t.d(a,{A:()=>s});var r=t(2742);function s(e){let{children:a}=e;return a({branch:(0,r.A)().siteConfig.customFields.branch,theme:"light"})}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.