HatchFill By Font with Dark Glamour theme

HatchFill By Font

Select a theme:

                     <html>
<head>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.0.7/fontfaceobserver.js"></script>
  <script src="https://cdn.anychart.com/releases/v8/themes/dark_glamour.min.js"></script>
  <link href="https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type="text/css" rel="stylesheet">
  <link href="https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type="text/css" rel="stylesheet">
  <style type="text/css">

    html,
    body,
    #container {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
  
</style>
</head>
<body>
  
  <div id="container"></div>
  

  <script>

    // 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'); 
    // 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 chart theme
anychart.theme('darkGlamour');
        // 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;
        }
      });
    });
  
</script>
</body>
</html>

AnyChart is not just about creating Charts. AnyChart component is so flexible that it can be used for drawing pics that have nothing to do with calculations and statistics. Also you can improve and customize your AnyCharts by creating some new elements or changing the default settings of some elements and adding those to your charts.

This sample contains three column series that are filled in with different symbols of a custom font. As you can see from the sample code, we upload a custom font and then use it as a fill source. The same thing can be done with pictures. Special construction of our events makes those things possible and allows you to be as creative as you need.

There are tooltips enabled in the chart; when you hover a column, its tooltip pops up showing the information about the point.

Warning!

HatchFill By Font

HatchFill By Font