Unable to use custom imported font for legend and axis title (iOS)

[amankarora]

I have been trying to integrate my own custom font that is used throughout my app in the Highcharts but it does not recognise it. I have been unable to locate an example of where someone has used a custom font in their application without it being hosted externally. The .TTF file of the font is in my project folder and loaded asynchronously in my App.js. It would be much appreciated if someone could provide some guidance or if this feature could be added to the project.

[sebastianbochan]

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]
  }]
}

[amankarora]

Hi @sebastianbochan

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?

[sebastianbochan]

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)

[amankarora]

Thanks for that but I am using React Native and Expo for my project. Is there any other way you could suggest?

[sebastianbochan]

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).

[sebastianbochan]

@amankarora do you use EXPO CLI app or native React Native CLI?

[confusingbits]

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 :)

[sebastianbochan]

Hi @confusingbits,
Have you tried to to place the font in a proper directory (like in my comment above) ?

[sebastianbochan]

Closed due to inactivity.

[amirsabanovic]

@amankarora do you use EXPO CLI app or native React Native CLI?

Will this work in an Expo Managed Workflow (using expo-cli)?

[sebastianbochan]

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).

[amirsabanovic]

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.

[sebastianbochan]

I will try to debug it as soon as possible.