React-chartjs-2: Change default font family

[Farahzadi]

how to change default fontFamily

[miguelperes]

I think you have to import the defaults object:
import { defaults } from 'react-chartjs-2'

and then set the fontFamily attribute:
defaults.global.defaultFontFamily = 'Arial'

[tylersnyder]

Just to clarify, there was a typo @miguelperes's answer, which I believe should be:

defaults.global.defaultFontFamily = 'your-font-family'

[miguelperes]

Oh, you're right @tylersnyder! I'm going to edit that so no one gets confused!

[jerairrest]

Thanks guys, closing this issue.

[launchriot]

do you have to import and set defaults in every component you include the chart in, or can you do it globally?

[paulcredmond]

Where do you add defaults.global.defaultFontFamily?

I added at the top of the component but it's not working for me.

[mohsenmahoski]

its worked for me:

import React, { Component } from 'react';
import {Line} from 'react-chartjs-2';
import { defaults } from 'react-chartjs-2'
import 'chartjs-plugin-datalabels';


defaults.global.defaultColor = 'yourColor';
defaults.global.defaultFontColor = 'yourColor';
defaults.global.defaultFontFamily = 'yourFont';
....

export class LineChart extends Component {

  render() {
    console.log(defaults);
    const {datasets,height} = this.props;
    const data = {
      labels: ['label1', 'label2', 'label3', 'label4', 'label5', 
                 'label6','label7','label8','label9','label10','label11','label12'],
      datasets:datasets
    };
    const options = {
          plugins: {
            datalabels: {
                display: true,
                color: '#FFF',
                borderRadius:10,
                backgroundColor: function(context) {
                return context.dataset.backgroundColor;
                },
                align   : 'center',
                textAlign:'center',
                font: {
                   weight: 'bold'
                },
            }}
      }
     return (
          <Line options={options} data={data} height={height} />
     );
   }
 }

 export default LineChart;

and you can see all defaults properties in console by console.log(defaults); and change anything you want. ;))

[paulcredmond]

Thanks @mohsenmahoski we got it working.