Unicode Special characters

[wkungu]

Expected behaviour

Actual behaviour

Reproduction steps

I have web app producing the expected behaviour on the currency symbols. However this doesn't seem to work on the export-server. I have installed the fonts on my server (Im using Open sans) which I thought would solve this issue. The font seems to apply on the labels so Im curious why it wont work on the currency symbols.

Here is what i'm using to get chart;

const symbol = '¥';

const options = {
    type: 'png',
    scale: 2,
    options: {
      chart: {
        type: 'column',
        options3d: {
          enabled: true,
          alpha: 10,
          beta: 25,
          depth: 70,
          viewDistance: 25,
          frame: {
            bottom: {
              size: 1,
              color: 'rgba(0,0,0,0.05)',
            },
          },
        },
        height: 350,
        style: {
          fontFamily: 'Open Sans',
        },
      },
      legend: {
        itemStyle: {
          fontSize: '9px',
        },
      },
      title: {
        text: 'COACHING ROI',
        style: {
          fontFamily: 'Open Sans',
          fontSize: '11px',
          fontWeight: 600,
          textTransform: 'uppercase',
        },
      },
      subtitle: {
        text: null,
      },
      xAxis: {
        categories: ['Current Profit', 'New 1-Year Profit', 'Cost of Coaching'],
        crosshair: true,
        labels: {
          skew3d: true,
          style: {
            fontSize: '13px',
            textOverflow: 'none',
          },
        },
        title: {
          text: null,
        },
      },
      yAxis: {
        min: 0,
        crosshair: true,
        labels: {
          overflow: 'justify',
        },
        title: {
          text: null,
        },
      },
      exporting: { enabled: false },
      tooltip: {
        formatter() {
          return `${this.x} is ${symbol}${this.y}`;
        },
      },
      plotOptions: {
        series: {
          pointWidth: 80,
        },
        column: {
          pointPadding: 0.2,
          borderWidth: 0,
          groupPadding: 0,
          shadow: true,
          depth: 25,
          dataLabels: {
            enabled: true,
            skew3d: true,
            crop: false,
            overflow: 'none',
            style: {
              fontFamily: 'Open Sans',
              fontSize: '10px',
              fontWeight: 'normal',
            },
            formatter() { return `${symbol}${this.y}`; },
          },
        },
      },
      credits: {
        enabled: false,
      },
      series: [{
        showInLegend: false,
        data: [
            { y: 200000, color: '#019247' },
            { y: 532500, color: '#019247' },
            { y: 36000, color: '#14143f' },
        ],
        dataLabels: {
          enabled: true,
          skew3d: true,
        },
      }],
    }, 
  };

[PaulDalek]

Hi @wkungu

Setting the dataLabel.formatter such a way won't work. Instead, you can either:

• change the format of data labels through the format property: format: symbol + '{y}'

• use the customCode argument to modify the chart options just before the chart creation:

  customCode: function (options) {
  const symbol = '¥';
  
  options.series[0].dataLabels.formatter = function() {
      return symbol + '' + this.y;
  }
  }

• use the callback along with the allowFileResources in the exportOptions.

  {
  ...
  allowFileResources: true,
  callback: '<path_to_callback>',
  ...
  }

[wkungu]

Thank you. Worked like a charm!