Dhtmlx横向条形图左侧文本超出父容器问题求助

我用Dhtmlx创建横向条形图（xbar）时遇到了问题：左侧的alert_type文本超出了父div范围。尝试添加margin和padding完全没用，文本甚至溢出了容器边框。

代码示例 #

HTML #

<div id="shared-learning-chart"></div>

JS #

const sharedLearningBarChartConfig = {
    type: "xbar",
    css: "dhx_widget--bg_white dhx_widget--bordered shared-learning-chart",
    scales: {
        "bottom": {
            title: "",
        },
        "left": {
            text: "alert_type"
        }
    },
    series: [
        {
            id: "A",
            value: "record_count",
            fill: "#394E79",
            color: "none"
        }
    ],
    legend: {
        series: ["A"],
        form: "rect",
        valign: "top",
        halign: "right"
    }
};
const sharedLearningBarChart = new dhx.Chart("shared-learning-chart", sharedLearningBarChartConfig);
const sharedLearningBarChartData = [
    { alert_type: "Incident", "record_count": 25 },
    { alert_type: "Near Miss", "record_count": 6 },
    { alert_type: "High Risk Condition", "record_count": 5 },
    { alert_type: "Policy Procedure", "record_count": 1 },
];
sharedLearningBarChart.data.parse(sharedLearningBarChartData);

问题截图 #

解决方法 #

• 手动设置左侧刻度宽度
  在scales的left配置项中添加width属性，根据最长文本的长度设置合适数值：

"left": {
    text: "alert_type",
    width: 180 // 可根据实际文本调整
}

• 开启文本自动换行
  通过自定义CSS让文本自动换行，同时调整内边距预留空间：

.dhx_scale_text--left {
    white-space: normal;
    line-height: 1.2;
}

配合配置刻度的padding：

"left": {
    text: "alert_type",
    padding: { right: 10 }
}

• 确保容器宽度足够
  给图表容器设置最小宽度，避免容器本身过窄导致溢出：

#shared-learning-chart {
    min-width: 600px;
}

内容的提问来源于stack exchange，提问作者Aayush Dahal