How to change axis font in PrimeFaces and Chart.js

Question

I am using PrimeFaces 7, and I am trying to use barchart from Chart.js as follows:

Code:

<p:barChart  widgetVar="cfg" model="#{dashboardBean.barModel}" style="width:500px;height:348px;"/>

and I create my model as follows:

private void createBarModel(Map<String, Double> delegatesMap) {
    barModel = new BarChartModel();
    barModel.setExtender("skinBar");
    // ...
}

I am trying to change the axis font family using extender function as follows:

function skinBar() {
        var options = $.extend(true, {}, this.cfg.config);

    options = {
            scales: {
                yAxes: [{
                    ticks: {
                        fontFamily: 'Tahoma',
                        fontSize:40
                    }
                }],
                xAxes: [{
                    ticks: {
                        fontFamily: 'Tahoma',
                        fontSize:40
                    }
                }]
            }
        }

       
       $.extend(true, this.cfg.config, options);
    }

but it's not working. How can I fix it?

Answer 1

It worked by changing my extender function as follows.

Model:

barModel = new BarChartModel();
barModel.setExtender("skinBar");

Extender function:

function skinBar() {
    Chart.defaults.global.defaultFontFamily = 'Tahoma';
}

reference: https://www.chartjs.org/docs/latest/general/fonts.html

Answer 2

If you can't, or don't want to use an extender function, you can add this to the bottom of your template (before </body>):

<script>if(typeof Chart!=='undefined'){Chart.defaults.font.family='...'}</script>

It will apply if any charts are visible at the moment the page is rendered. So not perfect, and I suggest to use the extender instead when possible.