StackedBar
Type A
Type B
Type C
0
50
100
150
200
250
'02
'03
'04
'05
'06
'07
'08
'09
'10
'11
20
40
44
23
21
50
30
90
55
72
35
24
20
50
36
40
65
62
40
45
55
40
27
43
31
56
75
55
60
54
</> Source
<!DOCTYPE html>
<html>
<head>
<title>StackedBar</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<script src="../common/testdata.js"></script>
<script>
var myBarChart;
function doOnLoad() {
myBarChart = new dhtmlXChart({
view:"stackedBar",
container:"chart1",
value:"#sales#",
label:"#sales#",
color: "#58dccd",
gradient:"falling",
width:60,
tooltip:{
template:"#sales#"
},
xAxis:{
template:"'#year#"
},
yAxis:{},
legend:{
values:[{text:"Type A",color:"#36abee"},{text:"Type B",color:"#a7ee70"},{text:"Type C",color:"#58dccd"}],
valign:"middle",
align:"right",
width:90,
layout:"y"
}
});
myBarChart.addSeries({
value:"#sales2#",
color:"#a7ee70",
label:"#sales2#",
tooltip:{
template:"#sales2#"
}
});
myBarChart.addSeries({
value:"#sales3#",
color:"#36abee",
label:"#sales3#",
tooltip:{
template:"#sales3#"
}
});
myBarChart.parse(multiple_dataset,"json");
}
</script>
</head>
<body onload="doOnLoad();">
<div id="chart1" style="width:700px;height:250px;border:1px solid #c0c0c0;"></div>
</body>
</html>
Documentation
Check documentation to learn how to use the components and easily implement them in your applications.