Sample chart using IBM Plex Sans

by Mike Zavarello

HTML

<!-- standard Highcharts scripts -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500;600&display=swap" rel="stylesheet"> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'column',
      style: {
        fontFamily: 'IBM Plex Sans'
      }
    },
    tooltip: {
      enabled: false
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          useHTML: true,
          style: {
            // fontFamily: 'Ranchers'
          },
          y: -1,
          formatter: function() {
            return this.y + '<sup style="color:red">A</sup>';
          }
        }
      }
    },
    title: { text: 'Here is a sample chart using the Google font IBM Plex Sans'},
    subtitle: { text: 'The font will not show in the exported versions as of August 2, 2021.'},
    series: [{
      data: [{
        y: 14.913
      }, {
        y: 8.281
      }, {
        y: 3.592
      }, {
        y: 3.017
      }],
      showInLegend: false,
    }],
    exporting: {
     	enabled: true,
      allowHTML: true
    }
  });
});