Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Changing Font Family #10

Closed
ashuyoi opened this issue May 26, 2021 · 1 comment
Closed

Changing Font Family #10

ashuyoi opened this issue May 26, 2021 · 1 comment
Labels
question Further information is requested

Comments

@ashuyoi
Copy link

ashuyoi commented May 26, 2021

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
Copy link
Owner

J-T-McC commented May 29, 2021

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

@J-T-McC J-T-McC closed this as completed May 29, 2021
@J-T-McC J-T-McC added the question Further information is requested label May 29, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants