PrimeFaces chart element cannot be made responsive

[SkylerMime]

In order for a Chart.js element to be responsive it must be the only child of a div element that is relatively positioned.

However, the PrimeFaces p:chart element renders without the style 'position: relative', and so it seems like it cannot be responsive.

Is there a solution to this problem?

[melloware]

so why not just do <p:chart style="position: relative; height:40vh; width:80vw" /> ???

[SkylerMime]

That was the first thing I tried, but unfortunately p:chart renders as two elements (a canvas inside a div), and the style attributes get passed to the canvas instead of to the div, where they need to be in order for the chart to be responsive.

Source:

<p:chart style="position: relative; height:40vh; width:80vw" />

Renders as:

<div id="j_idt5" class="ui-chart">
  <canvas id="j_idt5_canvas" role="img" style="position: relative; height: 114px; width: 430px; display: block; box-sizing: border-box; touch-action: auto; user-select: none;" width="430" height="114"></canvas>
</div>

But I would need it to render something like this (from the documentation):

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
  <canvas id="chart"></canvas>
</div>

[melloware]

yep can you open a ticket: https://github.com/primefaces/primefaces/issues I think that needs to be fixed to put the style on the DIV and add two new props for canvasStyle and canvasStyleClass

[SkylerMime]

Will do, thanks for taking a look!

[SkylerMime]

Issue up here: primefaces/primefaces#12572

[melloware]

Thanks will fix for 14.0.5