DHTMLX Docs & Samples Explorer

Stacked Horizontal Bars

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
<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
<script src="../common/testdata.js"></script>
 
<div id="chartDiv" style="width:500px;height:350px;border:1px solid #A4BED4;margin:20px"></div>
<script>
var barChart = new dhtmlXChart({
    view: "stackedBarH",
    container: "chartDiv",
    value: "#sales#",
    label: "#sales#",
    color: "#58dccd",
    barWidth: 60,
    alpha: 0.8,
    xAxis: {},
    yAxis: {
        lines: true,
        template: "'#year#";
    },
    legend: {
        values: [{
            text: "Type A",
            color: "#58dccd"
        }, {
            text: "Type B",
            color: "#a7ee70"
        }, {
            text: "Type C",
            color: "#36abee"
        }],
        valign: "top",
        align: "center",
        width: 90,
        layout: "x";
    }
});
barChart.addSeries({
    value: "#sales2#",
    color: "#a7ee70",
    label: "#sales2#";
});
barChart.addSeries({
    value: "#sales3#",
    color: "#36abee",
    label: "#sales3#";
});
barChart.parse(multiple_dataset, "json");
</script>