Labels margin on Bars


I’m trying to modify an old dashboard I created some time ago. I’d like to add a bar chart and also enable its dataZoom, but the label of the x-axis overlaps the dataZoom widget. How can I fix this problem?


Hi @Joseph , please use the bar chart’s grid settings to increase its bottom margin. Using code, it would be something like this: .set("grid", cf.Grid().bottom(50)) . Feel free to adjust the margins as you consider fine for your visualization.


Hi, guys I am in similar situation with my visualization. I’m trying to change the distance between the x-axis and the label. I used the grid feature but it only changes the space between the container and the visualization. I wonder If there is a way to only change the space/margin between the label and the axis?


Hi @frank, you are right, in many cases you need to tweak the distance between the label and the axis line. This is simple to accomplish, you only need to play with the labelGap property inside the axis definition. You can use this code: set.("xAxis", { "labelGap": 50 }). The labelGap property defines a margin between the axis line and label in pixels.