Html 如何垂直放置条形图的条形图，使它们都位于容器底部？

我已经生成了一个动态生成的条形图。条形图的每个条形都有不同的高度。我想垂直对齐它们，使它们都位于容器div的底部

这是当前图表的外观；基线似乎是每个条的顶部，它向下生长。我认为它应该像一个标准的条形图一样向上生长

html:

---

那么，我如何垂直对齐所有条，使它们位于/开始于父div的底部呢？

我想您可以尝试以下方法

.chartWrapper {
    transform: rotate(180deg);
}

[更新]

你需要有一个酒吧包装每个酒吧。并将条形包装器设置为与主包装器具有相同的高度。然后，将其设置为具有相对定位

.barwrapper{
    height: 500px;
    float: left;
    width: 20px;
    position:relative;
    margin-left: 10px;
}

将钢筋设置为绝对位置，然后将其定位为始终位于钢筋包装的底部

.bar{
    width: 20px;
    position: absolute;
    bottom: 0;
    ...
}

下面是我为这个答案创建的一个快速演示

.barwrapper{
    height: 500px;
    float: left;
    width: 20px;
    position:relative;
    margin-left: 10px;
}

.bar{
    width: 20px;
    position: absolute;
    bottom: 0;
    ...
}