jsreport forum

zoidbergRSA

Hello, I've been struggling with this issue for hours and I hope somebody is able help me, I am able to set a custom font 'Rubik' from an asset reference and the report text renders correctly with the font. However, try as I may I'm unable to get my chart.js charts to use the same font. this is my report template:

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <style>
        {#asset styles/styles.css @encoding=utf8}
        @font-face {
            font-family: 'Rubik';
            src: url({#asset /templates/shared/Rubik-VariableFont_wght.ttf @encoding=dataURI});
            format('truetype');
        }
        * {
            font-family: 'Rubik';
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/metro/4.1.5/css/metro.min.css">
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js'></script>
  </head>

and I set the Chart global default font here before drawing the chart:

<script>
        // [data definitions here]
        
        Chart.defaults.global.defaultFontFamily = "Rubik";

        const quarterChartCanvas = document.getElementById('quarterChart').getContext('2d');

        new Chart(quarterChartCanvas, {
            type: 'bar',
            data: {
                labels: weeksLabels,
                datasets: [{
                    data: weeksValues,
                    backgroundColor: 'rgba(0, 56, 101, 1)',
                    borderColor: 'rgba(0, 191, 111, 1)',
                    pointStyle: 'line',
                    label: weeksAvgLabel
                }]
            },
            options: {
                animation: false,
                annotation: {
                    annotations: [{
                        type: 'line',
                        mode: 'horizontal',
                        scaleID: 'y-axis-0',
                        value: weeksAvg,
                        borderColor: 'rgba(0, 191, 111, 1)',
                        borderDash: [10, 10],
                        borderWidth: 2
                    }],
                },
                scales: {
                    yAxes: [{
                        scaleLabel: 
                        {
                            display: true,
                            labelString: weeksUnit,
                            fontSize: 16
                        },
                        ticks: 
                        {
                            beginAtZero: true,
                        }
                    }],
                    xAxes: [{
                        scaleLabel: {
                            display: true,
                            labelString: JSON.parse(weeksAxisLabel),
                            fontSize: 16,
                        },
                        gridLines: {
                            offsetGridLines: false
                        }
                    }]
                }
            }
        });
</script>

Any help will be greatly appriciated!

zoidbergRSA

that did the trick indeed, thanks for the fix and the advice as well jan!

zoidbergRSA

Hello,

I am in the process of adding localizations in my template, so far i'm able to add the localized strings in the html template as follows:

<h1>{{$localizedResource.report.title}}</h1>

The code above works. However, in some cases I also need to set the values text from inside a script tag:

<p id="test">localize me</p>

<script>
  const title = {{$localizedResource.report.title}};

  document.getElementById('test').innerHTML = title;
</script>

I have tried several variations of the snippet above to try and access the localization values from inside a script tag without success. The specific case where I need to do this is when generating a chartjs object that needs localized labels for the axes.

Does anyone know how I can access the localization data from inside a script tag in the template?

Much appriciated!

zoidbergRSA

@zoidbergRSA

Posts made by zoidbergRSA