var myConfig = {
\t type: 'hbar',
\t plot: {
\t stacked: true,
animation: {
sequence: 3,
effect: 4,
method: 1,
speed: 500
}
\t },
\t legend: {
\t borderWidth: 0
\t },
plotarea: {
margin: 'dynamic'
},
\t scaleX: {
\t labels: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu']
\t },
\t scaleY: {
\t minValue: 0,
\t maxValue: 16,
\t step: 4.5,
\t decimals: 1
\t },
\t series: [
\t \t {
\t \t \t values: [5.0,3.0,5.5,2.0,2.5],
\t \t \t offsetValues: [1.0,3.0,0,2.0,2.5],
\t \t \t backgroundColor: '#FF6600',
\t \t \t valueBox: {
\t \t \t placement: 'bottom',
\t \t \t rules: [
\t \t \t {
\t \t \t rule: '%i == 2',
\t \t \t visible: false
\t \t \t }
\t \t \t ]
\t \t \t },
text: 'Jim'
\t \t },
\t \t {
\t \t \t values: [5.0,8.0,9.0,4.0,3.5],
\t \t \t offsetValues: [1.0,3.0,0,2.0,2.5],
\t \t \t backgroundColor: '#DC143C',
\t \t \t valueBox: {},
text: 'Joe'
\t \t }
\t ]
};
zingchart.render({
\t id: 'myChart',
\t data: myConfig,
\t height: '100%',
\t width: '100%'
});
html, body {
\t height:100%;
\t width:100%;
\t margin:0;
\t padding:0;
}
#myChart {
\t height:100%;
\t width:100%;
\t min-height:150px;
}
<!DOCTYPE html>
<html>
\t <head>
\t <!--Assets will be injected here on compile. Use the assets button above-->
\t \t <script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
\t \t <script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</script>
\t <!--Inject End-->
\t </head>
\t <body>
\t \t <div id="myChart"></div>
\t </body>
</html>