Bar chart too short for the container

plotly.js
1

Hello there,

When creating a horizontal bar chart, the actual bar is not as wide as the containing element.
As you can see in the screenshot, the controls for plotly are actually going up to the right border of the surrounding box, but the actual bar isn’t. The margin on the left of the bar is correct. Can I fix this somehow?

image
image.png945×192 29.5 KB

For reference, this is my layout object:

layout: {
    showlegend: false,
    font: {
        family: "Nunito",
        size: 16
    },
    barmode: "stack",
    xaxis: {
        zeroline: false,
        showgrid: false,
        showticklabels: false
    },
    yaxis: {
        showticklabels: false
    },
    margin: {
        l: 0,
        r: 0,
        b: 0,
        t: 0
    },
    height: 80,
}

Thanks a lot in advance
Anabta

2

Could you also share your "data" array to help us debug?

I suspect the auto xaxis.range value might be too big.

3

Maybe try changing ‘min-width’ or ‘width’?

1 Like
4

I created a minimum working example to showcase the issue:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>

    <div id="chart"></div>

    <script>
		let layout = {
            showlegend: false,
            font: {
                family: "Nunito",
                size: 16
            },
            barmode: "stack",
            xaxis: {
                zeroline: false,
                showgrid: false,
                showticklabels: false,
                //range: [0,1294],
            },
            yaxis: {
                showticklabels: false
            },
            margin: {
                l: 0,
                r: 0,
                b: 0,
                t: 0
            },
            height: 80,
        };

		let data = [
		    getChartEntry(75, "beforeAll"),
            getChartEntry(125, "before"),
            getChartEntry(78, "exec"),
            getChartEntry(0, "after"),
            getChartEntry(16, "afterAll"),
            getChartEntry(0, "between"),
            getChartEntry(1000, "spring"),
        ];

        function getChartEntry(data, text) {
            return {
                x: [data],
                text: text + " (" + data + "ms)",
                textposition: "inside",
                hoverinfo: "none",
                type: "bar",
                orientation: "h"
            };
        }

        Plotly.newPlot("chart", data, layout);

        window.addEventListener("resize", handleResize);
        handleResize();

        function handleResize() {
            Plotly.Plots.resize("chart");
        }
	</script>
</body>

</html>

@caiyij I don’t think the width is the issue because the Plotly controls extend further to the right than the actual bar does, so the overall width seems to be correct.

@etienne Setting the xaxis.range property fixes my problem, but do I really have to set this value manually for all the different charts I am drawing? Is there another way to fix the auto value?