DHTMLX Docs & Samples Explorer

Stacked Horizontal Bars

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>