Set canvas html element display: 'inline-block' instead of 'block'

[rogermedico]

Hello! I'm trying to change style applied to canvas html element. But I cannot make it, if someone knows how to set it i will appreciate his help.

I know that is something related to this

Chart.js/src/platform/platform.dom.js

Line 65 in b24cb2f

style.display = style.display || 'block';

.

/roger

[kokoc30]

Set an inline style before constructing the chart:

<canvas id="myChart" style="display: inline-block;"></canvas>

Or in JavaScript:

const canvas = document.getElementById('myChart');
canvas.style.display = 'inline-block';
const chart = new Chart(canvas, config);

The line you found is a fallback assignment:

style.display = style.display || 'block';

With an existing inline value, style.display is already 'inline-block', so Chart.js preserves it. A stylesheet rule alone can be overridden because canvas.style.display reads the element's inline style, not the computed value from stylesheets.

There is no need to edit Chart.js's source or use !important for this. The 4.4.7 DOM initialization code shows both the fallback and its reason: block display avoids the extra baseline space of inline elements during responsive resizing. If you intentionally keep inline-block, vertical-align: top can also be useful for avoiding that baseline gap.