X axis labels issue

Suite and Optimus Suite 5
#1

Dear all,

I am trying to create a bar chart using dhtmlX suite. Everything goes well except for x axis labels which appear above the axis instead of below (attached image).

The code I am using is

var barChart1 = new dhtmlXChart({
    							view: "bar",
   							container: document.getElementById(item), 
    							value: "#A_Score#",
    							label: "#A_Score#",
    							width: 10,
    							gradient: "rising",
    							radius: 0,
   								tooltip: {
        							template: "#A_Score#"
    							},
   								xAxis: {
        							template: "#Scale_Code#",
        							title: "Scale Code"
   								 },
    							yAxis: {
        							title: "A-Score"
    							},   								
    							origin: 0
		 				});
						barChart1.parse(data[item], "json");

Am I doing something wrong ? Could there be a conflict with bootstrap 3 css classes since I am using bootstrap for the web layout.

Regards,
SM

labels.png944×399 28.3 KB

#2

Ok solved … It seems that there was a conflict with bootstrap panel-body class attributes.

I added zero padding to my panel body and the labels were fixed.

S.

#3

Yes, it really can be a padding issue. The style for it is below:

.dhx_axis_item_x { padding-top: 2px; }