Creating a basic bar chart library using vanilla JS and jQuery is what I'm working on. The code below is functional:
var userData = {
'Black': 8,
'Latino': 6,
'Native': 4,
'Asian': 10,
'White': 12,
'Indian': 9,
'Other': 5
};
var addColumns = function(dataObject) {
var values = Object.values(dataObject);
var columnContainer = document.createElement("div");
$(columnContainer).css({
"display": "flex",
"flex-direction": "row",
"align-items": "flex-end",
"position": "relative",
"padding-top": "8px",
"margin-left": "50px",
"padding-bottom": "10px"
});
for (i = 0; i < values.length; i++) {
var column = document.createElement("div");
column.innerHTML = '<br>' + values[i];
$(column).css({
"margin-right": "30px",
"width": "90px",
"background-color": "#68b24a",
"text-align": "center",
"text-padding": "20px",
"height": values[i] * 20 + "px",
"z-index": "1"
});
$(mainContainer).append(columnContainer);
$(columnContainer).append(column);
}
However, when dealing with large numbers like 400, 450, 430, or 500, the columns become oversized and require scrolling. My mathematical skills are limited. Is there a way to adjust the column height based on a percentage? Or perhaps scale the values down proportionally to fit the container size?