Changing Font Family

[ashuyoi]

Hi, I've been trying to change the font family for the labels and tooltips but it doesn't seem to be working.

Can you please help with the issue?

Here's the code for reference.

<template>
    <vue3-chart-js
    :type="chart.type"
    :data="chart.data"
    :options="chart.options"
    ></vue3-chart-js>
</template>

<script>
import Vue3ChartJs from '@j-t-mcc/vue3-chartjs';

export default {
    name: 'SalesChart',
    components: {
        Vue3ChartJs,
    },
    data() {
        return {
            chart: {
                type: 'bar',
                options: {
                    legend: {
                        display: false,
                    },
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true,
                                maxTicksLimit: 10,
                                max: this.max,
                                min: 0,
                                fontFamily: "'lgc-bold'",
                                callback: (label) => {
                                    let n = Math.floor(Math.log10(label));
                                    switch(n) {
                                        case 3: return label != 0 ? label/1000+'k' : 0;
                                        case 6: return label != 0 ? label/1000000+'m' : 0;
                                        default: return label;
                                    }
                                }
                            },
                            gridLines: {
                                display: true,
                                drawBorder: true,
                                drawOnChartArea: false
                            }
                        }],
                        xAxes: [{
                            ticks: {
                                fontFamily: "'lgc-bold'"
                            },
                            gridLines: {
                                display: true,
                                drawBorder: true,
                                drawOnChartArea: false
                            }
                        }]
                    },
                    tooltips: {
                        enabled: true,
                        displayColors: false,
                        backgroundColor: '#000000',
                        callbacks: {
                            label: (tooltipItem) => {
                                return 'AED ' + tooltipItem.yLabel*100;
                            }
                        },
                        titleFontFamily: "'lgc-bold'",
                        titleFontSize: 13,
                        bodyFontFamily: "'lgc-bold'",
                        bodyFontColor: '#63b879'
                    },
                },
                data: {
                    labels: ["VueJS", "EmberJS", "ReactJS", "AngularJS"],
                    datasets: [{
                        label: "My first datatest",
                        backgroundColor: ["#1abc9c", "#f1c40f", "#2980b9", "#34495e"],
                        data: [40003, 34444, 53330, 1022],
                    }]
                }
            }
        }
    }
}
</script>

[J-T-McC]

There are a few errors in your options. Tooltip options go under plugins and you have some property names wrong:

        options: {
          plugins: {
            tooltip: {
              enabled: true,
              displayColors: false,
              backgroundColor: '#000000',       
              titleFont: {
                family: "Verdana",
                size: 25,
              },
              bodyFont: {
                family: "Ebrima",
                size: 12,
              },
              bodyColor: '#63b879'
            },
          },
          //...
        }

You can view more ChartJS 3 config options for tooltips and other items here: https://www.chartjs.org/docs/latest/configuration/tooltip.html