[Chartjs]-How to change default font family in react-chartjs-2

by

5👍

✅

so after seeing a post in github, this way worked:
first import defaults:

import { defaults } from 'react-chartjs-2';

and then somewhere set font like this:

defaults.font.family = 'font name...';

5👍

If you are using chart.js 3.x+, refer the following code in order to change the font of your ticks, tooltip and legend:

    // inside data.js(or your own data file)
 
    const options = {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: true,
          labels: {
            color: "rgb(255, 99, 132)",
            font: {
              family: "Montserrat" // Add your font here to change the font of your legend label
            }
          },
          tooltip: {
            bodyFont: {
              family: "Montserrat" // Add your font here to change the font of your tooltip body
            },
            titleFont: {
              family: "Montserrat" // Add your font here to change the font of your tooltip title
            }
          }
        }
      },
      tooltips: {
        backgroundColor: "#f5f5f5",
        titleFontColor: "#333",
        bodyFontColor: "#666",
        bodySpacing: 4,
        xPadding: 12,
        mode: "nearest",
        intersect: 0,
        position: "nearest"
      },
      scales: {
        yAxes: {
          barPercentage: 1.6,
          grid: {
            display: false,
            color: chartLineColor,
            zeroLineColor: "transparent"
          },
          ticks: {
            suggestedMin: 0,
            suggestedMax: 125000,
            padding: 2,
            backdropPadding: 2,
            backdropColor: "rgba(255,255,255,1)",
            color: chartLineColor,
            font: {
              family: "Montserrat", // Add your font here to change the font of your y axis
              size: 12
            },
            major: {
              enable: true
            }
          }
        },
        xAxes: {
          barPercentage: 1.6,
          grid: {
            display: false,
            zeroLineColor: "transparent"
          },
          ticks: {
            padding: 20,
            color: chartLineColor,
            font: {
              family: "Montserrat", // Add your font here to change the font of your x axis
              size: 12
            },
    
            major: {
              enable: false
            }
          }
        }
      }
    };

Inside your react component:

import {someData,options} from './data.js'
function SomeComponent{
   return(
       <>
        <Line data={someData} options={options} />
       </>
     )
}

Hope this was useful. For further reference, refer this article

1👍

Defaults are missing in react-chartjs-2 library v4, so it should be imported from chart.js directly:

import { defaults } from 'chart.js';

and then somewhere set font like this:

defaults.font.family = 'font name...';

Leave a comment