Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon Is it possible to add custom icons to axis labels in react-google-charts
    React Google Charts custom icons axis labels custom icon font chart customization React charting


Is it possible to add custom icons to axis labels in react-google-charts


Yes, it is possible to add custom icons to axis labels in React Google Charts. Here's an example of how you can do it:

1. Create a Custom Icon Font:
- Use a tool like IcoMoon to create a custom icon font with the icons you want to use.
- Make sure to name the icons with the same names as your axis labels.

2. Import the Custom Icon Font:
- Import the generated CSS file for the custom icon font into your React component.

3. Customize the Axis Labels:
- In the `options` object for your chart, use the `vAxis` and `hAxis` properties to customize the axis labels.
- Set the `titleTextStyle` property to use the custom icon font.

Here's an example code snippet:

```javascript
import React from 'react';
import { Chart } from 'react-google-charts';
import './custom-icons.css'; // Import the custom icon font CSS

const data = [
['Year', 'Temperature'],
[2019, 25],
[2020, 28],
[2021, 30],
[2022, 32],
];

const options = {
title: 'Highest Temperature in Last Five Years',
hAxis: {
title: 'Year',
titleTextStyle: {
fontName: 'custom-icons',
fontSize: 16,
},
},
vAxis: {
title: 'Temperature