Search code examples
javascripthtmldhtmlx

Multiple charts (stacked bar and line), line is not centered

I have created a stacked bar + line chart. The problem is that my line-items are not centered on the stacked bar:

Is there a way to center this on the stacked bar?

This is my code:

<head>
    <script src="/LIB/JS/dhtmlxSuite/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
    <script src="/LIB/JS/dhtmlxSuite/dhtmlxChart/codebase/dhtmlxchart.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="/LIB/JS/dhtmlxSuite/dhtmlxChart/codebase/dhtmlxchart_debug.css">
</head>
<body>
    <script>
        var chart;
        window.onload = function() {
            chart = new dhtmlXChart({
                view:"stackedBar",
                container:"chart1",
                value:"#FTENat#",
                width:50,
                xAxis:{template:"01/0#Maand#/#Jaar#"},
                yAxis:{start:27000,step:500,end:37000},
                color:"#0070C0"
            });
            chart.addSeries({value:"#FTEInterNat#",color:"#00B0F0"});
            chart.addSeries({value:"#FTEDelta#",color:"#00B050"});
            chart.addSeries({value:"#INDMilVmg#",color:"#92D050"});
            chart.addSeries({value:"#INDMilAfw#",color:"#C3D69B"});     
            chart.addSeries({value:"#INDMilVOP#",color:"#D9D9D9"});
            chart.addSeries({value:"#INDMilOE#",color:"#BFBFBF"});
            chart.addSeries({value:"#INDMilOB#",color:"#7F7F7F"});
            chart.addSeries({view:"line",item:{radius:5,type:"square",color:"#000000"},line:{color:"#000000",width:2},value:"#PostenF1#"});
            chart.load("http://10.80.85.118/LRF/XMLWeb/ProcessDescriptor/descriptor/L1/HRB/HRB_Foto_Grafiek.xml",function(){},"xml");
        }
    </script>
    <div id="chart1" style="width:75%;height:75%;float:right;font-family:sans-serif;"></div>
</body>
Solution

  • Apparently the current version of dhtmlxchart has a bug which causes an output where the second chart isn't outlined properly. This should be fixed in the next update.