Search code examples
vue.jsvuetify.jsapexcharts

How to change font family of all ApexCharts in Vue.js project?

I am using vue-apexcharts in my vuejs project. I have around 15 pages where I am using charts and I want to change the font family everywhere. How to achieve this generically? Is there any general approach to change the fonts all together?

https://apexcharts.com/docs/options/chart/fontfamily/

This is the example where it's written how to change it in a specific way.

Solution

  • You can set global options just after you've imported and registered vue-apexcharts.

    import VueApexCharts from "vue-apexcharts";

Vue.use(VueApexCharts);
window.Apex.chart = { fontFamily: "MuseoModerno, Arial, sans-serif" };

    This will then be applied to all charts.

    Of course, remember that you'll also need to make sure that the font is globally available in your Vue project by for example importing it.