Dhtmlx bar chart text going out of parent div

Question

Here is my code:

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);

Here the text on the left is going out of div. Tried adding margin and padding but with no success. With this it is moving even with the border.

Working Code Samples

Answer 1

Thank you for your report. We'll try to find a solution in the future updates. For now I can suggest you to rotate the scale text and change its padding,like: https://snippet.dhtmlx.com/nnymqyrs It may help to fit the titles.

Answer 2

There is a better solution. You can use the "size" property of the left scale to define the space reserved for the scale title. Like: https://snippet.dhtmlx.com/kvu3jrpp