score:0

Accepted answer

it's showing like this because canvas's aspect ratio is changing automatically with window size but you've set your div to a specific height of 100px. that's why canvas has placed outside of the div while window size is extending. just to get rid of that problem, set maintainaspectratio: false in your option in this way:

var barchartdata = {
    labels: [""],
    datasets: [{
        label: "1",
        backgroundcolor: "rgba(68,222,166,1)",
        barthickness: 50,
        data: [177]
    },
    {
        label: "2",
        barthickness: 50,
        backgroundcolor: "rgba(218, 65, 102, 1)",
        data: [170]
    }
    ]
};

var optionsbar = {
    maintainaspectratio: false,
    legend: false,
    title: {
        display: false
    },
    scales: {
        xaxes: [{
            stacked: true,
            display: false
        }],
        yaxes: [{
            stacked: true,
            display: false
        }]
    }
};


var ctx = document.getelementbyid("chart");
var mychart = new chart(ctx, {
    type: 'horizontalbar',
    data: barchartdata,
    options: optionsbar
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.9.4/chart.bundle.min.js"></script>

<body style="background-color: grey;">
    <div id="chartdiv" style="height: 100px; border: 1px solid red;"><canvas id="chart"></canvas></div>
</body>


Related Query

More Query from same tag