[SOLVED] Accessibility Patterns for Highcharts Maps

Accessibility Patterns for Highcharts Maps

I'm using NextJS, thus I'm using the Highcharts React. I need to make the Countries the same color but patterned.

My goal is to recreate this: World Map with regions painted in red and patterned

I was trying to replicate the code used within the Demos for the patter Pie Chart.

My code with attempted replication of Pie Chart patterns

import React, { FC } from 'react';

import Highcharts from 'highcharts';
import HighchartsMap from 'highcharts/modules/map';
import Patterns from 'highcharts/modules/pattern-fill';
import HighchartsReact from 'highcharts-react-official';

import mapDataWorld from './world-continents.geo.json';

// Load Highcharts Maps as a module
if (typeof Highcharts === 'object') {
    HighchartsMap(Highcharts);
    Patterns(Highcharts);
}

interface Props {
    data: Data[];
}

interface Data {
    Value: number;
    Type: string;
    Color: string;
}

const MapChart: FC<Props> = ({ data }) => {
    const patterns = [
        {
            pattern: {
                color: '#698F01',
                height: 5,
                path: 'M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5',
                patternTransform: 'scale(1.4 1.4)',
                width: 5,
            },
        },
        {
            pattern: {
                color: '#265FB5',
                height: 5,
                path: 'M 0 5 L 5 0 M -0.5 0.5 L 0.5 -0.5 M 4.5 5.5 L 5.5 4.5',
                patternTransform: 'scale(1.4 1.4)',
                width: 5,
            },
        },
        {
            pattern: {
                color: '#F4693E',
                height: 5,
                path: 'M 2 0 L 2 5 M 4 0 L 4 5',
                patternTransform: 'scale(1.4 1.4)',
                width: 5,
            },
        },
        {
            pattern: {
                color: '#222',
                height: 5,
                path: 'M 0 2 L 5 2 M 0 4 L 5 4',
                patternTransform: 'scale(1.4 1.4)',
                width: 5,
            },
        },
        {
            pattern: {
                color: '#4C0684',
                height: 5,
                path: 'M 0 1.5 L 2.5 1.5 L 2.5 0 M 2.5 5 L 2.5 3.5 L 5 3.5',
                patternTransform: 'scale(1.4 1.4)',
                width: 5,
            },
        },
    ];
    const chartData = data.map((item: any, index) => {
        return {
            value: item.Value,
            'hc-key': item.Type,
            color: patterns[index] ?? item.Color ?? 'transparent',
        };
    });

    console.log(chartData);
    const options = {
        chart: {
            map: mapDataWorld,
            height: '336px',
        },
        title: {
            text: '',
        },
        legend: {
            enabled: false,
        },
        credits: {
            enabled: false,
        },
        accessibility: {
            enabled: true,
        },
        series: [
            {
                data: chartData,
                mapData: mapDataWorld,
                joinBy: 'hc-key',
                dataLabels: {
                    enabled: false,
                },
                states: {
                    hover: {
                        borderColor: '#191919',
                        borderWidth: 1,
                    },
                },
            },
        ],
        tooltip: {
            enabled: false,
        },
    };

    return (
        <HighchartsReact
            highcharts={Highcharts}
            options={options}
            constructorType={'mapChart'}
        />
    );
};

export default MapChart;

this is the chartData that i generate

[
    {
        "value": 46.851518,
        "hc-key": "na",
        "color": {
            "pattern": {
                "color": "#698F01",
                "height": 5,
                "path": "M 0 0 L 5 5 M 4.5 -0.5 L 5.5 0.5 M -0.5 4.5 L 0.5 5.5",
                "patternTransform": "scale(1.4 1.4)",
                "width": 5
            }
        }
    },
    {
        "value": 40.324664,
        "hc-key": "eu",
        "color": {
            "pattern": {
                "color": "#265FB5",
                "height": 5,
                "path": "M 0 5 L 5 0 M -0.5 0.5 L 0.5 -0.5 M 4.5 5.5 L 5.5 4.5",
                "patternTransform": "scale(1.4 1.4)",
                "width": 5
            }
        }
    },
    {
        "value": 10.483749,
        "hc-key": "as",
        "color": {
            "pattern": {
                "color": "#F4693E",
                "height": 5,
                "path": "M 2 0 L 2 5 M 4 0 L 4 5",
                "patternTransform": "scale(1.4 1.4)",
                "width": 5
            }
        }
    },
    {
        "value": 1.276916,
        "hc-key": "oc",
        "color": {
            "pattern": {
                "color": "#222",
                "height": 5,
                "path": "M 0 2 L 5 2 M 0 4 L 5 4",
                "patternTransform": "scale(1.4 1.4)",
                "width": 5
            }
        }
    },
    {
        "value": 0.810823,
        "hc-key": "sa",
        "color": {
            "pattern": {
                "color": "#4C0684",
                "height": 5,
                "path": "M 0 1.5 L 2.5 1.5 L 2.5 0 M 2.5 5 L 2.5 3.5 L 5 3.5",
                "patternTransform": "scale(1.4 1.4)",
                "width": 5
            }
        }
    },
    {
        "value": 0.25233,
        "hc-key": "af",
        "color": "transparent"
    }
]

Result of my attempt

I've fiddled with sizing and best i can do is get barely visible dots

My Highcharts version: "highcharts": "^11.1.0", "highcharts-pattern-fill": "^3.0.3", "highcharts-react-official": "^3.2.0",

Solution