How to display big X axis labels in next line in Zingchart bar graph?

Question

I have following json for the bar graph attached below:

    {
"graphset":[
    {
        "type":"bar3d",
        "series":[
            {
                "values":[10323,2023,41346.8,29364.6],
                "tooltip":{
                    "text":"₹%v"
                }
            }
        ],
        "3d-aspect":{
            "true3d":0,
            "y-angle":10,
            "depth":30
        },
        "legend":{
            "visible":false
        },
        "scale-y":{
            "format":"₹%v",
            "bold":true,
            "label":{
                "text":"Amount",
                "font-size":"14px"
            }
        },
        "scale-x":{
            "values":["Vegetables & Fruits","Groceries","Dairy & Beverages","Meat"],
            "short":true,
            "auto-fit":true,
            "items-overlap":true,
            "bold":true,
            "label":{
                "text":"Category",
                "font-size":"14px"
            }
        },
        "plotarea":{
            "margin":"dynamic"
        },
        "gui":{
            "context-menu":{
                "empty":false
            }
        },
        "plot":{
            "background-color":"red",
            "border-color":"#BBBBBB",
            "bar-width":"30px",
            "bar-space":"20px"
        },
        "no-data":{
            "text":"No analytics data available",
            "bold":true,
            "font-size":18
        }
    }
]
}

And the screenshot of the bar graph is:

As seen in the image, the x-axis labels are overlapping each other. I want each label to be shown clearly and distinctly. If the name is big, can it be moved to next line? I have fixed space allotted so I cannot increase width between each bar, neither I want to use max-chars attribute since I want to show the full name. Also, I would not be able to use font-angle to set the names in another angle--I want them in this angle only.

Any help appreciated.

Answer 1

Appropriate approaches

1. The best approach would be abbreviations with max-chars or displaying truncated values then showing a tooltip on those labels displaying the whole value.
2. Using angled text would be highly reasonable as well.

Other solution

It will be best to apply rules and display every other scaleX.item at a different line height. You can do this with rules

"scale-x":{
  "labels":["Vegetables & Fruits","Groceries","Dairy & Beverages","Meat"],
  "items-overlap":true,
  "bold":true,
  "label":{
      "text":"Category",
      "font-size":"14px",
      offsetY: 5
  },
  item: {
    rules: [
      {
        rule: '%i%2 == 1',
        offsetY:13
      }  
    ]
  }
}

var myConfig = {
        "type":"bar3d",
        "series":[
            {
                "values":[10323,2023,41346.8,29364.6],
                "tooltip":{
                    "text":"₹%v"
                }
            }
        ],
        "3d-aspect":{
            "true3d":0,
            "y-angle":10,
            "depth":30
        },
        "legend":{
            "visible":false
        },
        "scale-y":{
            "format":"₹%v",
            "bold":true,
            "label":{
                "text":"Amount",
                "font-size":"14px"
            }
        },
"scale-x":{
      "labels":["Vegetables & Fruits","Groceries","Dairy & Beverages","Meat"],
      "items-overlap":true,
      "bold":true,
      "label":{
          "text":"Category",
          "font-size":"14px",
          offsetY: 5
      },
      item: {
        rules: [
          {
            rule: '%i%2 == 1',
            offsetY:13
          }  
        ]
      }
  },
        "plotarea":{
            "margin":"dynamic"
        },
        "gui":{
            "context-menu":{
                "empty":false
            }
        },
        "plot":{
            "background-color":"red",
            "border-color":"#BBBBBB",
            "bar-width":"30px",
            "bar-space":"20px"
        },
        "no-data":{
            "text":"No analytics data available",
            "bold":true,
            "font-size":18
        }
    }


zingchart.render({ 
	id: 'myChart', 
	data: myConfig, 
	height: 400, 
	width: 450 
});

html, body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
}
#myChart {
	height:100%;
	width:100%;
	min-height:150px;
}
.zc-ref {
	display:none;
}

<!DOCTYPE html>
<html>
	<head>
	<!--Assets will be injected here on compile. Use the assets button above-->
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
	</head>
	<body>
		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
	</body>
</html>