Chartjs-PrimeFaces pie chart width always 100%

by

0👍

I think is to blame here. The style is rendered by the component, but it seems that chart.js changes it. You might want to wrap it in a container and and set with and height to the container. So:

<div style="width:200px;height:200px">
  <p:pieChart model="#{bean.pieModel}"/>
</div>

0👍

For the moment, this fix seems to work. We already had an Extender called customExtender set in Java and therefore a JavaScript function customExtender() in the XHTML file:

function customExtender() {
        // old stuff
        ...
        // 1. moved legend from Java to JavaScript, because position was wrong
        this.cfg.config.options = {
            plugins: {
                legend: {
                    display: true,
                    position: 'right'
                }
            },
            // 2. DON'T make the aspect ratio 1:1
            maintainAspectRatio: false
        }

        // 3. force canvas height and width
        let canvas= document.getElementsByTagName("canvas")[0];
        canvas.parentNode.style.height = '250px';
        canvas.parentNode.style.width = '615px';
    };

Set option maintainAspectRatio in the options to FALSE, see comment no. 2.
And force the canvas parent node to the desired style (width, height), see comment no. 3. I got the idea from here https://stackoverflow.com/a/68276144/1145727.

The legend moved somehow to the top, it looked like the Java part to create and add the legend doesn’t work anymore. So I moved it to JavaScript, see comment no. 1.

The legend have no wrap on to long legend texts. For me is was okay, only one of seven texts is slightly to long.

Leave a comment