Separate pie segments by patterns

If you would like your pie segments to have different patterns for accessibility purposes, this can be done in everviz using the pattern fill options. The chart below shows this concept:

To achieve this:

1. Open the custom code tab under the customize area

2. Copy in the following code:

var colors = ['red', 'lightblue', 'yellow', 'orange', 'pink', 'yellow', 'grey', 'lightblue', 'lightgreen', 'orange'];

var backgroundColors = ['', '', '', 'black'];

var patterns = (function () {
                var patterns = [];
            [
              'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
              'M 10 3 L 5 3 L 5 0 M 5 10 L 5 7 L 0 7',
              'M 3 3 L 8 3 L 8 8 L 3 8 Z',
              'M 0 0 L 5 10 L 10 0',
              'M 0 10 L 10 0 M -1 1 L 1 -1 M 9 11 L 11 9',
              'M 3 0 L 3 10 M 8 0 L 8 10',
              'M 0 3 L 10 3 M 0 8 L 10 8',
              'M 0 3 L 5 3 L 5 0 M 5 10 L 5 7 L 10 7',
              'M 10 3 L 5 3 L 5 0 M 5 10 L 5 7 L 0 7',
              'M 2 5 L 5 2 L 8 5 L 5 8 Z',
              'M 5 5 m -4 0 a 4 4 0 1 1 8 0 a 4 4 0 1 1 -8 0'
            ].forEach(function (pattern, i) {
                patterns.push({
            		backgroundColor: backgroundColors[i],
                    path: pattern,
                    color: colors[i],
                    width: 10,
                    height: 10
                });
            });
            return patterns;
})();

options.colors = [{
  pattern:patterns[0]
}, {
  pattern: patterns[1]
}, {
  pattern: patterns[2]
}, {
  pattern: patterns[3]
}]

3. Once published, you will need to add the highcharts library and the pattern-fill module into your website manually as this is not included by default with everviz. You can do this by copy/pasting the following script into your header:

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/pattern-fill.js"></script>