Highcharts Pattern Fill

by Rafael Trevisan

HTML

<script src="https://code.highcharts.com/js/highcharts.js"></script>
<div id="container" style="width: 350px; height: 450px"></div>

CSS

@import 'https://code.highcharts.com/css/highcharts.css';

    .highcharts-yaxis.highcharts-color-0 .highcharts-axis-line,
    .highcharts-yaxis.highcharts-color-0 .highcharts-tick {
      stroke-width: 1px;
    }

    .highcharts-xaxis .highcharts-axis-line,
    .highcharts-tick,
    .highcharts-axis.highcharts-color-0 .highcharts-axis-line,
    .highcharts-axis.highcharts-color-0 .highcharts-minor-tick {
      stroke: #231f20;
    }

    .highcharts-axis-labels.highcharts-yaxis-labels.highcharts-color-0 text,
    .highcharts-axis-labels.highcharts-xaxis-labels text {
      fill: #231f20;
    }

    .highcharts-color-0,
    .highcharts-color-1,
    .highcharts-color-2,
    .highcharts-color-3 {
      /*fill: #6bcff6; */
      fill: #57CBE9;
    }

    .highcharts-color-4 {
      fill: #9d070d;
    }
    /* Pattern presentational properties */


    #circle-1 rect,
    #circle-2a rect,
    #circle-2b rect {
      fill: #57CBE9;
    }

    .highcharts-series-1 .highcharts-point {
      fill: url(#circle-1);
    }
    .highcharts-series-2 .highcharts-point {
      fill: url(#circle-2a);
    }
    .highcharts-series-3 .highcharts-point {
      fill: url(#circle-2b);
    }
    .highcharts-data-label{
      color: white;
      font-size: 1em;
      font-weight: 100;
    }

JavaScript

Highcharts.setOptions({
      defs: {
        circle1: {
          tagName: 'pattern',
          id: 'circle-1',
          patternUnits: 'userSpaceOnUse',
          patternTransform: 'rotate(45)',
          width: 3,
          height: 3,
          children: [
            {
              tagName: 'rect',
              x: 0,
              y: 0,
              width: 3,
              height: 3
            },
            {
              tagName: 'circle',
              cx: '0.4',
              cy: '0.4',
              r: '0.4',
              fill: '#9d070d'
            }
          ]
        },
        circle2a: {
          tagName: 'pattern',
          id: 'circle-2a',
          patternUnits: 'userSpaceOnUse',
          patternTransform: 'rotate(45)',
          width: 3,
          height: 3,
          children: [
            {
              tagName: 'rect',
              x: 0,
              y: 0,
              width: 3,
              height: 3
            },
            {
              tagName: 'circle',
              cx: '0.725',
              cy: '0.725',
              r: '0.725',
              fill: '#9d070d'
            }
          ]
        },
        circle2b: {
          tagName: 'pattern',
          id: 'circle-2b',
          patternUnits: 'userSpaceOnUse',
          patternTransform: 'rotate(45)',
          width: 3,
          height: 3,
          children: [{
            tagName: 'rect',
            x: 0,
            y: 0,
            width: 3,
            height: 3
          }, {
            tagName: 'circle',
            cx: '1.15',
            cy: '1.15',
            r: '1.15',
            fill: '#9d070d'
          }]
        }
      }
    });

    Highcharts.chart('container', {
      "chart": {
        "type": "column"
      },
      "credits": {
        "enabled": false
      },
      "legend": {
        "enabled": false
      },
      "title": {
        "text": null
      },
      "plotOptions": {
        "series": {
          "pointPadding": 0,
     ...