.no-js [data-zc-integration~=controls-region]{display:none}[data-zc-integration~=controls-wrap]{overflow-x:auto}[data-zc-integration~=controls-wrap]::-webkit-scrollbar{display:none}[data-zc-integration~=controls]{min-height:45px;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;flex-wrap:nowrap;white-space:nowrap}[data-zc-integration~=tab]{padding:0 .65625rem;height:45px;width:35px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;color:#fff;font-size:1.125rem;background:linear-gradient(#074361,#136893);border-radius:6px 0 0 6px;user-select:none;animation:FADE .7s forwards}.no-js [data-zc-integration~=tab]{margin:calc((3% + 2px) * -1) calc((3% + 2px) * -1) 0;padding-top:10px;padding-bottom:5px;width:initial;display:flex!important;align-items:center;justify-content:flex-start;opacity:1;color:#13668f;background:#e9f4f9!important;border-radius:6px 0 0 6px}[data-zc-integration~=tab][active]{cursor:default;background:linear-gradient(#0c90c9,#34c8fb)}[data-zc-integration~=tab]+[data-zc-integration~=tab]{margin-top:1px}[data-zc-integration~=tab] .long-title{font-size:17px;line-height:1}[data-zc-integration~=tab][data-type] svg{margin-right:0}[data-zc-integration~=tab][data-type=angularjs] svg{margin-right:5px;width:28px;height:24px}[data-zc-integration~=tab][data-type=javascript] svg{width:24px;height:23px}[data-zc-integration~=tab][data-type=jquery] svg{margin:0 5px 0 -4px;width:30px;height:30px}[data-zc-integration~=tab][data-type=webcomponent] svg{width:30px;height:30px}[data-zc-integration~=tab][data-type=react] svg{width:26px;height:22px}[data-zc-integration~=tab] picture{margin-right:10px;width:24px;height:24px;display:inline-flex}[data-zc-integration~=tab][data-type=backbone] picture{width:18.60674157303371px}[data-zc-integration~=tab] span{display:none}[data-zc-integration~=container]{display:flex}.no-js [data-zc-integration~=container]{display:initial}[data-zc-integration~=container] .zc-carousel-touch-inner{padding-bottom:0}[data-zc-integration~=panel]{flex-grow:1;position:relative;padding:3%;display:none;background:#fff;border-radius:0 6px 6px 6px;box-shadow:0 0 15px rgba(0,0,0,.1);overflow:hidden}.no-js [data-zc-integration~=panel]{display:flow-root;border:1px solid rgba(0,0,0,.1);border-radius:6px}[data-zc-integration~=panel][active]{display:block;display:flow-root}.no-js [data-zc-integration~=panel]+[data-zc-integration~=panel]{margin-top:50px}[data-zc-integration~=panel]>:last-child{margin-bottom:0!important}[data-zc-integration~=panel] [data-zc-integration~=tab]{display:none}.no-js [data-zc-integration~=panel] [data-zc-integration~=tab]{display:inline-flex}[data-zc-integration~=header]{margin-bottom:1rem}[data-zc-integration~=header] h3{margin-top:0;color:#0c90c9;font-weight:600;font-size:1.375rem;line-height:1.45}[data-zc-integration~=header] [data-zc-button]{padding-right:12px;padding-left:12px;background:#0c90c9}[data-zc-integration~=panel] [data-zc-list~=ordered]{margin-bottom:2.4rem}[data-zc-integration~=panel] li{margin:0;padding:0;list-style-position:inside;list-style-type:decimal!important;font-weight:500}[data-zc-integration~=panel] li:before{display:none}[data-zc-integration~=panel] li+li{margin-top:2rem}[data-zc-integration~=panel] pre+*{margin-top:20px}[data-zc-integration~=panel] p{margin-bottom:10px;font-weight:400}[data-zc-integration=panel-cta]{display:flex;justify-content:space-between}@media screen and (min-width:768px){[data-zc-integration~=header]{display:flex;align-items:flex-start}[data-zc-integration~=header] h3{margin:0;padding-right:25px;flex:1 0 auto}[data-zc-integration~=header] [data-zc-button]{transform:translateY(-4px)}}@media screen and (min-width:1024px){[data-zc-integration~=tab]{width:162px;justify-content:flex-start;transition:width .3s ease-out}[data-zc-integration~=tab]:hover{width:170px}[data-zc-integration~=tab][active]{width:170px!important}[data-zc-integration~=tab] span{display:inline-block;transform:translateY(2px)}[data-zc-integration~=tab][data-type] svg{margin-right:10px;max-width:25px;max-height:25px}}[data-zc-demo-lesson=container]{background:#fff;border:1px solid #e8e8e8;border-radius:6px;box-shadow:0 4px 15px rgba(0,0,0,.1);box-sizing:border-box;margin:45px auto 0;opacity:0;padding:2rem 1.5rem;max-width:1215px;min-height:450px;text-align:left;will-change:opacity}[data-zc-demo-lesson=header]{margin-bottom:20px;opacity:0;animation:FADE 1s forwards}[data-zc-demo-lesson=header] h3{min-height:35px;color:#13668f;font-weight:600;font-size:1.6875rem}[data-zc-demo-lesson=header] span{font-size:.875rem}[data-zc-demo-lesson=row]{margin-bottom:20px;grid-column-gap:0;grid-row-gap:0;overflow:hidden;border-radius:6px;border:1px solid #d9d9d9;box-shadow:0 4px 15px rgba(0,0,0,.1)}[data-zc-demo-lesson=col]{position:relative;height:450px}[data-zc-demo-lesson=editor]{height:100%;min-height:450px}[data-zc-demo-lesson=editor] pre{animation:FADE 1s forwards;background:0 0;border:none;box-sizing:border-box;height:100%;font-size:1rem;line-height:1.3;margin:0;opacity:0;padding:10px!important}[data-zc-demo-lesson=editor] pre code{color:#03a4d3;height:430px}[data-zc-demo-lesson=export]{background:#5d7d9a;cursor:pointer;font-size:.875rem;font-weight:500;padding:4px 10px;position:absolute;right:17px;top:16px}@keyframes PULSE{0%{background:#fff}50%{background:#eafaf6}100%{background:#fff}}.chart-editor{animation:PULSE 3s infinite;border-bottom:3px solid #4fe2c2;color:#1451c1;cursor:pointer;position:relative}.chart-editor:hover{animation:none;background:#d5f5ee;color:#2166e7}.chart-editor__content{display:inline;display:initial}.chart-editor__input{border:none;display:none;font-family:inherit;font-size:inherit;font-weight:inherit;max-height:21px;margin:0;padding:0}.chart-editor__input.short{padding:0 5px}.chart-editor__input:focus{border:none;box-shadow:none;outline:0}.chart-editor [type=color],.chart-editor [type=range]{background:0 0;height:13px}.chart-editor select{background:0 0;line-height:inherit;-webkit-appearance:menulist;-moz-appearance:menulist;-ms-appearance:menulist}.chart-editor.active .chart-editor__input{display:inline;display:initial}.chart-editor.active .chart-editor__tooltip{display:initial}.chart-editor.active .chart-editor__content{display:none}[data-zc-demo-lesson-chart]{border-left:1px solid #d9d9d9;height:100%;margin-left:-1px;position:relative;top:20px}[data-zc-demo-lesson-chart].no-shift{top:0}.no-js [data-zc-demo-lesson~=controls-region]{display:none}[data-zc-demo-lesson~=controls-wrap]{overflow-x:auto}[data-zc-demo-lesson~=controls-wrap]::-webkit-scrollbar{display:none}[data-zc-demo-lesson=controls]{min-height:105px}[data-zc-demo-lesson=controls] button{background:url(https://storage.googleapis.com/zingchart-com.appspot.com/bg-lesson-control.png);border:0;border-radius:4px;cursor:pointer;flex:1 0 auto;outline:0;overflow:hidden;position:relative;height:105px;width:250px}[data-zc-demo-lesson=controls] button:after{content:'';z-index:1;position:absolute;top:0;left:0;right:0;width:100%;height:100%;pointer-events:none;background:rgba(192,210,226,.7)}[data-zc-demo-lesson=controls] button:focus:after{background:rgba(192,210,226,.9)}[data-zc-demo-lesson=controls] button:hover:after,[data-zc-demo-lesson=controls] button[active]:after{background:rgba(27,74,117,.8)}[data-zc-demo-lesson=controls] button+button{margin-left:17px}[data-zc-demo-lesson=controls] button *{pointer-events:none}[data-zc-demo-lesson=controls] span{align-items:center;background:#5d7d9a;border:1px solid #fff;border-radius:4px;color:#fff;cursor:pointer;font-size:.875rem;font-weight:500;height:30px;line-height:1;padding:0 8px;position:relative;display:inline-flex;transition:all .2s;user-select:none;z-index:2}[data-zc-demo-lesson=controls] button[active] span{color:#5d7d9a;background:#fff}[data-zc-demo-lesson=controls] button:focus span,[data-zc-demo-lesson=controls] button:hover span{background:#4d6b86;color:#fff;transform:translate(-2px,-2px)}[data-zc-demo-lesson=controls] button[active]:focus span,[data-zc-demo-lesson=controls] button[active]:hover span{background:#fff;color:#5d7d9a}@media screen and (min-width:768px){[data-zc-demo-lesson=container]{padding-right:2rem;padding-left:2rem}}@media screen and (min-width:1024px){[data-zc-demo-lesson=editor]{border-right:1px solid #d9d9d9}[data-zc-demo-lesson=header]{min-height:35px;display:flex;align-items:baseline}[data-zc-demo-lesson=header] h3{margin:0}[data-zc-demo-lesson=header] span{margin-left:2rem;color:#5d7d9a;font-size:.875rem}}@media screen and (max-width:1023px){[data-zc-demo-lesson=header]{min-height:70px}[data-zc-demo-lesson=header] h3{margin:0 auto 7px}[data-zc-demo-lesson=col]:last-of-type{width:100%;overflow:hidden;border-radius:0 0 6px 6px}[data-zc-demo-lesson-chart]{margin:0;width:100%;height:450px;border:0}}@media screen and (max-width:767px){[data-zc-col]{width:initial}[data-zc-demo-lesson=col]:last-of-type{border-top:1px solid #d9d9d9}#code-output{font-size:16px!important}}@media (hover:none){[data-zc-demo-lesson=controls] button:hover:after{background:rgba(192,210,226,.7)}[data-zc-demo-lesson=controls] button[active]:hover:after{background:rgba(27,74,117,.8)}}[data-zc-chart-icon]{width:40px;height:40px;display:inline-block;background-repeat:no-repeat;animation:FADE .4s forwards;opacity:0}.webp [data-zc-chart-icon]{background-image:url(https://storage.googleapis.com/zingchart-com.appspot.com/zingchart-sprite.webp)}.no-webp [data-zc-chart-icon]{background-image:url(https://storage.googleapis.com/zingchart-com.appspot.com/zingchart-sprite.png)}[data-zc-chart-icon="100%-stacked"]{background-position:0 -1860px}[data-zc-chart-icon="3d-area"]{background-position:0 -2300px}[data-zc-chart-icon="3d-bar"]{background-position:0 -1980px}[data-zc-chart-icon="3d-cone"]{background-position:0 -2140px}[data-zc-chart-icon="3d-cylinder"]{background-position:0 -2060px}[data-zc-chart-icon="3d-line"]{background-position:0 -2180px}[data-zc-chart-icon="3d-pie"]{background-position:0 -2100px}[data-zc-chart-icon="3d-pyramid"]{background-position:0 -2260px}[data-zc-chart-icon="3d-ring"]{background-position:0 -2020px}[data-zc-chart-icon="3d-spline"]{background-position:0 -2220px}[data-zc-chart-icon=area]{background-position:0 -1180px}[data-zc-chart-icon=bar]{background-position:0 -420px}[data-zc-chart-icon=boxplot]{background-position:0 -1460px}[data-zc-chart-icon=bubble]{background-position:0 -1500px}[data-zc-chart-icon=bubble-pie]{background-position:0 -2340px}[data-zc-chart-icon=bullet]{background-position:0 -1020px}[data-zc-chart-icon=calendar]{background-position:0 -940px}[data-zc-chart-icon=chord]{background-position:0 -1380px}[data-zc-chart-icon=cone]{background-position:0 -1740px}[data-zc-chart-icon=funnel]{background-position:0 -1220px}[data-zc-chart-icon=gauge]{background-position:0 -1420px}[data-zc-chart-icon=grid]{background-position:0 -1300px}[data-zc-chart-icon=heat-map],[data-zc-chart-icon=heatmap]{background-position:0 -500px}[data-zc-chart-icon=histogram]{background-position:0 -1900px}[data-zc-chart-icon=horizontal]{background-position:0 -1820px}[data-zc-chart-icon=jumped]{background-position:0 -1780px}[data-zc-chart-icon=line]{background-position:0 -620px}[data-zc-chart-icon=interactive-maps],[data-zc-chart-icon=maps]{background-position:0 -900px}[data-zc-chart-icon=mixed]{background-position:0 -540px}[data-zc-chart-icon=nested-pie]{background-position:0 -980px}[data-zc-chart-icon=net-diagram]{background-position:0 -1100px}[data-zc-chart-icon=pareto]{background-position:0 -820px}[data-zc-chart-icon=population-pyramid]{background-position:0 -580px}[data-zc-chart-icon=pie]{background-position:0 -980px}[data-zc-chart-icon=radar]{background-position:0 -1340px}[data-zc-chart-icon=range]{background-position:0 -1180px}[data-zc-chart-icon=rankflow]{background-position:0 -1260px}[data-zc-chart-icon=ring]{background-position:0 -1140px}[data-zc-chart-icon=rose]{background-position:0 -1620px}[data-zc-chart-icon=scatter]{background-position:0 -460px}[data-zc-chart-icon=sparkline]{background-position:0 -860px}[data-zc-chart-icon=spline]{background-position:0 -780px}[data-zc-chart-icon=stacked]{background-position:0 -1660px}[data-zc-chart-icon=staggered]{background-position:0 -1700px}[data-zc-chart-icon=stepped]{background-position:0 -1580px}[data-zc-chart-icon=stock]{background-position:0 -660px}[data-zc-chart-icon=network-diagram],[data-zc-chart-icon=tree-module],[data-zc-chart-icon=treemap]{background-position:0 -740px}[data-zc-chart-icon=venn-diagram],[data-zc-chart-icon=venn]{background-position:0 -1060px}[data-zc-chart-icon=vertical]{background-position:0 -1940px}[data-zc-chart-icon=wordcloud]{background-position:0 -700px}[data-zc-chart-icon=waterfall]{background-position:0 -1540px}