html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

// add the font link to the head of the document

var link = document.createElement('link');

link.href = 'https://cdn.anychart.com/fonts/interdex/interdex.css';

link.rel = 'stylesheet';

document.head.appendChild(link);

​

var fontLoad = new FontFaceObserver('Conv_interdex'); // eslint-disable-line no-undef

// create chart when font is loaded

// for this use https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.7/fontfaceobserver.js

fontLoad.load().then(function () {

  anychart.onDocumentReady(function () {

    // set stage

    var stage = anychart.graphics.create('container');

​

    // chart type

    var chart = anychart.column();

​

    // set title

    chart.title('HatchFill By Font');

​

    // set axes titles

    chart.xAxis().title('Manager');

    chart.yAxis().title('Sales');

​

    var data = anychart.data.set([

      ['John', 10000, 12000, 5000],

      ['Jake', 12000, 15000, 6000],

      ['Peter', 18000, 16000, 7000],

      ['James', 11000, 13000, 6000],

      ['Mary', 9000, 19000, 5000]

    ]);

​

    // map data for the each series

    var Sales2003 = data.mapAs({ x: 0, value: 1 });

    var Sales2004 = data.mapAs({ x: 0, value: 2 });

    var Sales2005 = data.mapAs({ x: 0, value: 3 });

​

    var series;

​

    // set series data

    series = chart.column(Sales2003);

    series.name('Sales 2003').fill(getPattern('B', 30)).stroke('#212121');

​

    series = chart.column(Sales2004);

    series.name('Sales 2004').fill(getPattern('Y', 30)).stroke('#212121');

​

    series = chart.column(Sales2005);

    series.name('Sales 2005').fill(getPattern('C', 30)).stroke('#212121');

​

    // set container and draw chart

    chart.container(stage);

    chart.draw();

​

    // helper function to get the pattern

    function getPattern(letter, size) {

      var text = anychart.graphics

        .text()

        .htmlText(

          '<span ' +

          'style=\'font-family:Conv_interdex;font-size:' +

          size +

          ';\'>' +

          letter +

          '</span>'

        );

      var pattern = stage.pattern(text.getBounds());

      pattern.addChild(text);

      return pattern;

    }

  });

});