Zingchart x-axis label item are not centrally aligned even after providing text-allign:center

Question

I'm Trying zingchart but items of x-axis is not centrally aligned even after providing it text-align:center

My aim is to make item label centrally align to the corresponding bar. It is working in jsfiddle but not in my page.

result is as follows:

my code for chart is as follows:

{
"graphset":[
    {
        "type":"bar",
        "plotarea":{
            "adjust-layout":true
        },
        "background-color":"#fff",
        "plot":{
            "alpha":0.9,
            "cursor":"pointer",
            "bar-width":"20px",
            "line-width":2,
            "bar-space":"50px",
            "background-fit":"x",
            "animation":{
                "effect":"ANIMATION_SLIDE_RIGHT"
            },
            "value-box":{
                "visible":true,
                "font-size":"10px"
            }
        },
        "scale-x":{
            "zooming":true,
            "label":{
                "text":"Designation",
                "font-color":"#000",
                "font-size":"16px",
                "text-align":"center",
                "background-color":"#fff",
                "width":"100%",
                "position":"absolute",
                "bottom":"0"
            },
            "values":[" ASSISTANT MANAGER"," MANAGEMENT TRAINEE/BUSINESS ANALYSIST"," MANAGER"],
            "line-color":"#CCC",
            "tick":{
                "line-color":"#a6a6a6",
                "line-width":1,
                "visible":0
            },
            "guide":{
                "line-color":"#666",
                "line-style":"solid"
            },
            "item":{
                "font-family":"arial",
                "font-color":"#000",
                "width":"100px",
                "text-align":"center",
                "background-color":"rgb(255,255,255)",
                "padding-top":"4px"
            }
        },
        "scale-y":{
            "zooming":true,
            "label":{
                "text":"Attrition Rate (%age)",
                "font-color":"#2B776C",
                "font-size":"16px"
            },
            "line-color":"#CCC",
            "tick":{
                "visible":false
            },
            "guide":{
                "line-style":"dashed",
                "line-color":"#ccc"
            },
            "item":{
                "font-family":"arial",
                "font-color":"#8B8B8B"
            },
            "zoom-to":[5,70]
        },
        "series":[
            {
                "values":[29.47,29.93,30.73],
                "background-color":"#ff3b3b",
                "tooltip":{
                    "background-color":"#ff3b3b",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 30 Days for designation %kl"
                }
            },
            {
                "values":[20.11,20.63,19],
                "background-color":"#ff9b67",
                "tooltip":{
                    "background-color":"#ff9b67",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 30 Days for designation %kl"
                }
            },
            {
                "values":[50.43,49.45,50.27],
                "background-color":"#6cebb3",
                "tooltip":{
                    "background-color":"#6cebb3",
                    "border-color":"#fff",
                    "border-width":1,
                    "border-radius":3,
                    "wrap-text":true,
                    "alpha":0.8,
                    "text":"%node-value % chances in 30 Days for designation %kl"
                }
            }
        ]
    }
]
}

Answer 1

The problem was that Zing-chart is inheriting transition property from parent css file

My previous css was

*{
 -webkit-transition: .25s ease-in-out;
 -moz-transition: .25s ease-in-out;
 -o-transition: .25s ease-in-out;
 transition: .25s ease-in-out;
} 

I changed it to following. It worked where myChart is "id" of my chart

*:not(#myChart *){
 -webkit-transition: .25s ease-in-out;
 -moz-transition: .25s ease-in-out;
 -o-transition: .25s ease-in-out;
 transition: .25s ease-in-out;
} 

I think somewhere in zingchart library it is ignoring delay of transition before creating chart image