';import JqxChart from '../../../jqwidgets-react/react_jqxchart.

js'</span>;class
App extends React.Component {
render() {
let sampleData = [
{ Day: <span style=" clear: both; padding: 0px; margin: 0px; color:
#080;">'Monday'</span>, Running: 30, Swimming: 0, Cycling: 25 },
{ Day: <span style=" clear: both; padding: 0px; margin: 0px; color:
#080;">'Tuesday'</span>, Running: 25, Swimming: 25, Cycling: 0 },
{ Day: <span style=" clear: both; padding: 0px; margin: 0px; color:
#080;">'Wednesday'</span>, Running: 30, Swimming: 0, Cycling: 25 },
{ Day: <span style=" clear: both; padding: 0px; margin: 0px; color:
#080;">'Thursday'</span>, Running: 35, Swimming: 25, Cycling: 45 },
{ Day: <span style=" clear: both; padding: 0px; margin: 0px; color:
#080;">'Friday'</span>, Running: 0, Swimming: 20, Cycling: 25 },
{ Day: <span style=" clear: both; padding: 0px; margin: 0px; color:
#080;">'Saturday'</span>, Running: 30, Swimming: 0, Cycling: 30 },
{ Day: <span style=" clear: both; padding: 0px; margin: 0px; color:
#080;">'Sunday'</span>, Running: 60, Swimming: 45, Cycling: 0 }
];

let padding = { left: 5, top: 5, right: 5, bottom: 5 };

let titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };

let xAxis =
{
<span style="color: #666b74;">dataField:</span> <span style="
clear: both; padding: 0px; margin: 0px; color: #080;">'Day'</span>,
unitInterval: 1,
axisSize: <span style=" clear: both; padding: 0px; margin: 0px;
color: #080;">'auto'</span>,
tickMarks: {
visible: true,
interval: 1,
color: <span style=" clear: both; padding: 0px; margin: 0px;
color: #080;">'#BCBCBC'</span>
},
gridLines: {
visible: true,
interval: 1,
color: <span style=" clear: both; padding: 0px; margin: 0px;
color: #080;">'#BCBCBC'</span>
}
};

let valueAxis =
{
unitInterval: 10,
minValue: 0,
maxValue: 120,
title: { <span style="color: #666b74;">text:</span> <span style="
clear: both; padding: 0px; margin: 0px; color: #080;">'Time in minutes'</span> },
labels: { horizontalAlignment: <span style=" clear: both; padding:
0px; margin: 0px; color: #080;">'right'</span> },
tickMarks: { color: <span style=" clear: both; padding: 0px;
margin: 0px; color: #080;">'#BCBCBC'</span> }
};

let seriesGroups =
 [
{
type: <span style=" clear: both; padding: 0px; margin: 0px;
color: #080;">'stackedcolumn'</span>,
columnsGapPercent: 50,
seriesGapPercent: 0,
series: [
{ <span style="color: #666b74;">dataField:</span> <span
style=" clear: both; padding: 0px; margin: 0px; color: #080;">'Running',
displayText: 'Running'</span> },
{ <span style="color: #666b74;">dataField:</span> <span
style=" clear: both; padding: 0px; margin: 0px; color: #080;">'Swimming',
displayText: 'Swimming'</span> },
{ <span style="color: #666b74;">dataField:</span> <span
style=" clear: both; padding: 0px; margin: 0px; color: #080;">'Cycling',
displayText: 'Cycling'</span> }
]
}
];
<span style="color: #11a;">return </span>(
&lt;JqxChart style={{ <span style="color: #666b74;">width:</span> 850,
<span style="color: #666b74;">height:</span> 500 }}
title={<span style=" clear: both; padding: 0px; margin: 0px; color:
#080;">'Fitness &amp; exercise weekly scorecard'} description={'Time spent in
vigorous exercise by activity'</span>}
showLegend={true} enableAnimations={true} padding={padding}
titlePadding={titlePadding} source={sampleData} xAxis={xAxis}
valueAxis={valueAxis} colorScheme={<span style=" clear: both;
padding: 0px; margin: 0px; color: #080;">'scheme06'</span>}
seriesGroups={seriesGroups}
/&gt;
)
}
}

ReactDOM.render(<span style="clear: both; padding: 0px; margin: 0px; color:

#11a;">&lt;App /&gt;</span>, document.getElementById(<span style=" clear: both;
padding: 0px; margin: 0px; color: #080;">'app'</span>));

</code></pre>
</div>

</div>

<div id="introduction"></div></div></div></div>
<div id="pageBottom">
<!-- FOOTER START -->
<div class="footer" role="contentinfo">
<div class="wrap cf">
<a class="footer-logo" href="/">
<img src="../resources/design/i/logo-jqwidgets-white.svg" width="234"
height="48" alt="jQWidgets" />
</a>

<ul class="nav socials">

<li>
<a href="https://www.facebook.com/jQWidgets-282600545090250/"
target="_blank">
<span class="fb"></span>Facebook
 </a>
</li>
<li>
<a href="https://twitter.com/jqwidgets" target="_blank">
<span class="tw"></span>Youtube
</a>
</li>
<li>
<a href="https://plus.google.com/112258917836957242269"
target="_blank">
<span class="gp"></span>Google +
</a>
</li>
</ul>

<nav class="nav" role="navigation">

<ul>
<li>
<a href="http://www.jqwidgets.com/jquery-widgets-demo">Demo</a>
</li>
<li>
<a href="http://www.jqwidgets.com/download">Download</a>
</li>
<li>
<a href="http://www.jqwidgets.com/jquery-widgets-
documentation/">Documentation</a>
</li>
<li>
<a href="http://www.jqwidgets.com/license">License and
Pricing</a>
</li>
<li>
<a href="http://www.jqwidgets.com/services">Services</a>
</li>
</ul>
<ul>
<li>
<a href="http://www.jqwidgets.com/community">Forums</a>
</li>
<li>
<a href="http://www.jqwidgets.com/about">About</a>
</li>
<li>
<a href="http://www.jqwidgets.com/terms-of-us">Terms of Use</a>
</li>
<li>
<a href="http://www.jqwidgets.com/privacy">Privacy Policy</a>
</li>
<li>
<a href="http://www.jqwidgets.com/contact-us">Contact Us</a>
</li>
</ul>
</nav>
<p>jQWidgets &copy; 2011-2017. All Rights Reserved.</p>
</div>
</div>
<!-- FOOTER END -->
</div>
</body>
</html>############################################################################
###################################################################################
###################################################################################
###################################################################################
###################################################################################
##################################################################################s
eries.htm">100% Stacked Area Series</a>
</li>
<li>
<a href="react-chart-areasplineseries.htm">Area
Spline Series</a>
</li>
</ul>
</li>

<li class="sub_menu">
<a href='#Colum&BarSeries'><span>Column & Bar
Series</span></a>
<ul>
<l<!DOCTYPE html>
<html lang="en">
<head>
<title>
This is an example of React Chart Stacked Funnel series. The type of the
seriesGroups is stackedfunnel.
</title>
<meta name="description" content="This React Chart demo showcases how to
display Charts with Stacked Funel series'" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-
scale=1 minimum-scale=1" />

<!-- load custom fonts from google-->

<link href='http://fonts.googleapis.com/css?family=Ek+Mukta:300,400'
rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700'
rel='stylesheet' type='text/css' />

<!-- stylesheets -->

<link rel="stylesheet" href="../resources/design/css/main.css" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css"
media="screen" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.arctic.css"
media="screen" />
<link rel="stylesheet" href="../styles/site.css" media="screen" />

<!-- html5 support for old browsers -->

<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.js"></script>
<![endif]-->

<!-- fav_icons for different browsers -->

<link rel="apple-touch-icon-precomposed" sizes="57x57"
href="../resources/design/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
href="../resources/design/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
href="../resources/design/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144"
href="../resources/design/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60"
href="../resources/design/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120"
href="../resources/design/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76"
href="../resources/design/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152"
href="../resources/design/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="../resources/design/favicon-
196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="../resources/design/favicon-96x96.png"
sizes="96x96" />
<link rel="icon" type="image/png" href="../resources/design/favicon-32x32.png"
sizes="32x32" />
<link rel="icon" type="image/png" href="../resources/design/favicon-16x16.png"
sizes="16x16" />
<link rel="icon" type="image/png" href="../resources/design/favicon-128.png"
sizes="128x128" />
<meta name="application-name" content="&nbsp;" />
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />
<!-- background images stylesheets -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/img_ie.css" />
<![endif]-->
<!--[if gt IE 8]>
<link rel="stylesheet" href="css/img.css" />
<![endif]-->
<!--[if !IE]><!-->
<link rel="stylesheet" href="../resources/design/css/img.css" />
<!--<![endif]-->
<script type="text/javascript"
src="../../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../../scripts/format.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript"
src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript"
src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxtabs.js"></script>
<script type="text/javascript"
src="../../../scripts/demofunctions.js"></script>

<!-- swipe plugin for slider -->

<script src="../resources/design/js/vendor/swipe.js"></script>

<!-- svg to png for old browsers -->

<script src="../resources/design/js/vendor/svgeezy.min.js"></script>
<script type="text/javascript">svgeezy.init(false, 'png');</script>
 <!-- main functions -->
<script src="../resources/design/js/main.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript"
src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript"
src="../../../jqwidgets/jqxradiobutton.js"></script>
<script type="text/javascript"
src="../../../jqwidgets/jqxresponse.js"></script>
<script type="text/javascript"
src="../../../jqwidgets/jqxprogressbar.js"></script>
<script type="text/javascript">
$(document).ready(function () {

});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-25803467-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="pageTop">
<div role="banner" class="header">
<div class="wrap cf">
<a class="header-logo" href="/">
<img src="../resources/design/i/logo-jqwidgets.svg" width="273"
height="69" alt="jQWidgets" />
</a>

<a href="#" id="menu_link" class="menu_link">

<span class="t"></span>
<span class="m"></span>
<span class="b"></span>
</a>

<!-- MENU START -->

<div class="header-menu">
<nav>
<ul>
<li>
<a href="http://www.jqwidgets.com/jquery-widgets-
documentation">Documentation</a>
</li>
<li>
<a href="http://www.jqwidgets.com/license">License and
Pricing</a>
</li>
<li>
 <a href="http://www.jqwidgets.com/services">Services</a>
</li>
<li class="dropdown">
<a href="javascript:void(0);">Community</a>
<ul>
<li>
<a
href="http://www.jqwidgets.com/community">Forums</a>
</li>
<li>
<a href="http://www.jqwidgets.com/blog">Blogs</a>
</li>
<li>
<a href="http://www.jqwidgets.com/follow">Follow
Us</a>
</li>
<li>
<a href="https://www.jqwidgets.com/wp-
login.php">Client Login</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0);">About</a>
<ul>
<li>
<a href="http://www.jqwidgets.com/about">About
Us</a>
</li>
<li>
<a href="http://www.jqwidgets.com/contact-
us">Contact Us</a>
</li>
<li>
<a href="http://www.jqwidgets.com/faq">FAQ</a>
</li>
</ul>
</li>
<li>
<a class="demo" href="http://www.jqwidgets.com/jquery-
widgets-demo">Demo</a>
</li>
<li>
<a class="download" href="http://