Comments (13)
You should add fonts in a proper way, which is described in our iOS wrapper docs.
https://github.com/highcharts/highcharts-ios (the custom font chapter)
from highcharts-react-native.
Hi @amankarora,
Have you tried to use font in chart's options def?
chartOptions = {
title: {
style: {
color: '#000',
fontFamily: 'Oswald, sans-serif' // you font name
}
},
series: [{
data: [71.5, 106.4, 129.2, 176.0, 135.6, 148.5, 216.4, 194.1, 54.4]
}]
}
from highcharts-react-native.
Thank you for the reply, yes I have however instead of becoming my font, it changes it to another style. Im not sure if that's because it is not being recognised by Highcharts correctly because the font works correctly throughout the rest of the app. Does Highcharts require the font to be in a particular format?
If you see the image below, I want the y axis font to be the same as the font of the numbers at the top. However it is changing to a completely different style.
Inside the chartOption
I am configuring the yAxis
and as you can see I am using my custom font in the style section but it not being recognised
crosshair: false,
opposite: false,
title: {
enabled: false
},
offset: -24,
showLastLabel: true,
showFirstLabel: true,
maxPadding: 0.02,
gridLineColor: "#3a3a3a",
lineColor: "#3a3a3a",
tickPixelInterval: 100,
labels: {
// formatter: function() {
// return props.yAxisValueFormat(this.value);
// },
align: "left",
y: -3,
x: 0,
style: {
fontSize: 12,
color: "rgba(255,255,255,0.8)",
userSelect: "none",
fontFamily: "Mark-Bold"
}
},
lineWidth: 0
},
Do I need to import it in a particular way?
from highcharts-react-native.
Thanks for that but I am using React Native and Expo for my project. Is there any other way you could suggest?
from highcharts-react-native.
Yes I aware of that, but react native also "translate your application" to native iOS. So you need to add the font to iOS application's system. Please try to add the font like in mentioned link (not using iOS wrapper).
from highcharts-react-native.
@amankarora do you use EXPO CLI app or native React Native CLI?
from highcharts-react-native.
I'm experiencing a similar issue on a project. This one is an ejected app with native code. We have imported a font, into the app and they work everywhere else but in high charts rn.
@sebastianbochan If possible, would you explain in more detail how to add fonts that will be visible to HCRN? Assuming only basic native knoweldge, like linking and hooking up native RN modules in AppDelegate/MainActivity? Thanks :)
from highcharts-react-native.
Hi @confusingbits,
Have you tried to to place the font in a proper directory (like in my comment above) ?
from highcharts-react-native.
Closed due to inactivity.
from highcharts-react-native.
@amankarora do you use EXPO CLI app or native React Native CLI?
Will this work in an Expo Managed Workflow (using expo-cli)?
from highcharts-react-native.
The issue was related to previous version of wrapper (<3.0). Please let me know if you have still a problem with it (in the newest release).
from highcharts-react-native.
The issue was related to previous version of wrapper (<3.0). Please let me know if you have still a problem with it (in the newest release).
I am on 3.1.2
, the issue persists.
from highcharts-react-native.
I will try to debug it as soon as possible.
from highcharts-react-native.
Related Issues (20)
- Chart is not rendering in Android with hermes enable in react native. HOT 1
- Unable to update series data. HOT 3
- HighChart- When I use useUTC: false then x axis data are not showing properly HOT 6
- onLoad callback function prop HOT 1
- Chart does not render on Samsung Galaxy S20 Ultimate LTE (Android 11)
- App is crashing when chart goes out of screen doing scroll. HOT 6
- ios - non-expo - Failed to fetch script or layout - hcsript count not be read HOT 7
- Boost Module Usage
- On IOS I can only render series with 110670 data points HOT 2
- How do I define custom gauges? HOT 4
- Customize chart loader HOT 3
- App is crashing when chart goes out of screen doing scroll in Android 10. HOT 5
- Library is being used and our app is live HOT 8
- Chart is not rendering after generating apk file and installed on mobile HOT 12
- Can it rotate 3d scatter chart? HOT 1
- Is there anyway to use this library in a project which is initialized by Expo & using Typescript template? HOT 6
- `plotOptions.series.point.events` (event) param doesn't work in production
- The styledMode tru gives only black and dark mode not working HOT 2
- Not able to access the variable inside the formatter
- no news on this package
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from highcharts-react-native.