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.
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.
Related
I'm the beginner of react-native.
I'm going to provide change global font size function in my app.
User could change the font size in setting page, them the whole app font size will be adjusted.
After doing some research, it seems can't do it. So my idea now is create multiple global style sheet and apply it base on the user setting saved in storage.
But I found that it seems not work, because after create global style sheet, it need to import at the beginning of the app page.
How can I apply change the app global style or font size in react-native?
You might want take a look at useContext hook, it will give you a good way to handle app global style, suck as light or dark theme, your case, font is also not a problem.
Another way is using react-redux, create a global state for your font, and all your component will listen to the font value stored in the store.
Let's keep it abstract. How I would do it: create and assign a theme for your app where you define classes with different font-sizes etc. Save the preferences as classes in the async storage. After loading the up retrieve saved preferences from async storage and set those to your components as classes. Job done.
I'm using customize-cra as suggested by antd documentation to be able to customize the theme and it works fine.
I can access less variables from antd theme by importing the index in my less files and it works fine.
I can use the old fashioned css modules to style my components by defining files with .module.css and it works fine.
However, I would like to import and use the antd theme less variables in my css modules and I can't figure out how to make it work. Does anybody know how it can be achieved?
I am able to use the variables if I import antd.less at the top of the whatevercomponent.less file:
#import 'antd/dist/antd.less';
I'm starting to learn vue but I can't figure out how to customize a Chart with vue chartkick. What I want to do is to pass default options to change the default style of the charts, let's say I want a different cutoutPercentage, with Charts.js we can set:
Chart.defaults.doughnut.cutoutPercentage = 10;
But this doesn't seem to work with chartkick, I created this Pen to play around but I cannot figured it out, any ideas?
chart kick allows you to pass the library options to the chart, using :library
<pie-chart :data="[['Blueberry', 44], ['Strawberry', 23]]" :donut="true" :library="{cutoutPercentage: 20}"></pie-chart>
https://codepen.io/BoyWithSilverWings/pen/YadXNO
I am trying to develop an application using vue.js2. I am getting some strange texts in source code. You can see those texts in below image.
Could anyone say why it is coming ?
You might be using scoped attribute on styles tag in your .vue files to scope your styling to the component only.
Any styles scoped to a component using the <styles scoped> ... </styles> , the styles will be applied only to the elements in that component only.
So vue-loader which parses the .vue files uses PostCSS behind the scenes to achieve this by add adding those weird and unique data attributes.
See Scoped CSS for more info
The default font is a bit large for my target application.
I saw that loadTheme could change the primary theme color, but is there a way to change the default font size across all components?
IFontStyles has a variety of sizes specified, so is there a way to set the font size for all the fabric react components to "small" (FontSizes.small)?
I have tried to set the css font-size to something smaller directly in the outer containers and inside the Fabric component, but the components still seem to render around 14px (ms-font-size-m) once rendering goes inside the Fabric component.
The theme code is fairly confusing to me but it looks like fabric-react uses a combination of fabric-core scss, fabric-react scss and glamor (runtime js->css) to generate stylesheets as needed and return the classnames to react code for className property. There does not appear to be use of inline styles.
loadTheme can override font-szie.